メインカラーはマスタード!なサイト。実例から考えるwebデザイン

そこに!!キユーピーマスタード

webデザインを考える。見た目だけじゃなくて、動きやUIなども含めて考えていきたい。今日は食品会社のマスタードの特設ページを見て考える。

そこに!!キユーピーマスタード!

そこに!!キユーピーマスタード!

そこに!!キユーピーマスタード!
※記事掲載時のデザインから変更されている場合があります。

キユーピーといえばマヨネーズが有名ですが、キユーピーマスタードの特設サイトです。

そんな説明がいらないくらいマスタードなサイト。黄色い背景に薄く敷かれたドットの色と大きさが、あらびきマスタード感を手がつけられないくらいまで高めています。 あらびきではないマスタードももちろんありますが、ドットがなかったらここまでマスタード感はでないと思います。全体の雰囲気ともマッチし、ドットを敷いたことで背景に動きを付けることが可能になり、サイト全体に動きが生まれています。

140219_dot

このドット背景やりよる。
この他にも、動きにこだわっている部分がいろいろあります。

トップページの料理達

マスタードを使った料理の丸い写真が、左から右に次々に流れてきます。マスタード背景の中を流れていくマスタードがよく合う料理達…深夜に見るとツラいかも…。
ただ流れているだけではなく、写真にカーソルを合わせると、その料理によく合うマスタードのリンクになっています。小さい写真だとわかりにくいけど、ニクい演出です。

ちなみに写真の動きにはjQueryのプラグイン「slider.js」が使われています。
slider.js

リンクの動きと音

特定のリンクは、マウスカーソルを乗せると要素がピョコンと飛び跳ねます。すべてのリンクはカーソルを乗せたときと押した時に音がします。細かい所ですが、積み重ねで完成度がグッと上がっています。

全体のテイスト

全体のテイストは「かわいい」や「ポップ」。ロゴやナビゲーションのアイコン、あと、さりげないけどフッターのミシン目の様な模様も効いている。見た目以外でも音や動きでかわいさやポップさが演出されていて、見る人を楽しくさせる仕掛けがいっぱいつまっています。グラフィックデザインにはない面白さ。

その他のメモ

  • トップページの導入アニメーションが、他ページから戻る時には流れない。URLに「#back」を追加して制御しているものと思われる。気配り上手
    back
  • テイスト:ポップ
  • 色:マスタード!
  • レイアウト:上部ナビゲーション・1カラム
  • スマホ対応:無し

細かい動きが積み重なってとても楽しいサイトになってる。頭の中に全体像を描けるようになりたい。マスタードっていろんな種類があるんだ。お腹が空いてきた。終わり。では、よいwebデザインライフを。

SNSシェア

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。