Les Chanterelle

線が動いて流れが感じられるWebデザイン。トップページは全てフランス語なので、初めはアレ？と思いましたが、.jpを信じてメニューをクリックしたらちゃんと日本のフランス料理店。おしゃれです。

Webデザイン３つの良いとこ : 3 Good Point!

1. 線で流れをつける
2. メニューの魅せ方
3. jQueryで動かす！面白い！

私はWebデザインのココを見た！

• Tweet
• 

jQueryで沢山動きます。トップページではfadeInやanimateで左上から右下への流れをつけることで、目の遷移を促しています。流れをつけることで目も飽きないし、しっかりとした意識のある流れなので、こだわりを感じました。

「線の動き」それがこのWebデザインの大きな特徴のひとつですね。

ちなみに使用しているjQueryプラグインは、「Spritely」。要素を簡単に横に流れるようにanimateさせます。

文字が右に、そして右下へと濃くなっていく

この、トップ文字を上塗りする演出は綺麗ですし、自然と下へ描写されていくので、下がどうなっているのか訪問者に気にならせる効果を持っていると思うので良いなぁと感じました。

そして、下にある山並みを表現した「線」は常に動きます。２つの線を重ね、別方向へ動かすことで「単調すぎ」を回避しています。試しに要素を検証して、一つの線を消してみたらちょっと単調なものになってしまいました。また、要素を検証すると、家が描写されているオブジェクトには「hills」、その上に重なっているのは「clouds」とidが付与されていました。なるほど、山並みを雲とともに表現することで面白みを足しているのですねー。ふむふむ。

メニューも線で、何を見てるかはっきりと

こちらも線を用いて目の導線を確保。そして余った線でナイフやフォークを描写しているのも面白い。

乗り物が動く！jQuery「Spritely」の本髄。

個人的に気に入ったのが、アクセスマップ内の乗り物の描写です。こういう小さなところにWebデザイナーの遊び心があると、ちょっとニヤっとしちゃいます。いいですよね！

アクセスマップの電車を選択すと・・・走ってる！

タクシーを選択すると・・・走ってる！

線で流れをつけるWebデザイン。そんなフランス料理店のWebデザインでした。

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•