メインカラーはマスタード!なサイト。できることからコツコツとwebサイト作りやデザインのテクニッキを紹介したり、人生をエンジョイしたりするヤツ。メインカラーはマスタード!なサイト。ポップwebデザインを考える。見た目だけじゃなくて、動きやUIなども含めて考えていきたい。今日は食品会社のマスタードの特設ページを見て考える。そこに!!キユーピーマスタード!そこに!!キユーピーマスタード!※記事掲載時のデザインから変更されている場合があります。キユーピーといえばマヨネーズが有名ですが、キユーピーマスタードの特設サイトです。そんな説明がいらないくらいマスタードなサイト。黄色い背景に薄く敷かれたドットの色と大きさが、あらびきマスタード感を手がつけられないくらいまで高めています。あらびきではないマスタードももちろんありますが、ドットがなかったらここまでマスタード感はでないと思います。全体の雰囲気ともマッチし、ドットを敷いたことで背景に動きを付けることが可能になり、サイト全体に動きが生まれています。このドット背景やりよる。この他にも、動きにこだわっている部分がいろいろあります。トップページの料理達マスタードを使った料理の丸い写真が、左から右に次々に流れてきます。マスタード背景の中を流れていくマスタードがよく合う料理達...深夜に見るとツラいかも...。流れているだけではなく、写真にカーソルを合わせると、その料理によく合うマスタードのリンクになっています。小さい写真だとわかりにくいけど、ニクい演出です。ちなみに写真の動きにはjQueryのプラグイン「slider.js」が使われています。特定のリンクは、マウスカーソルを乗せると要素がピョコンと飛び跳ねます。すべてのリンクはカーソルを乗せたときと押した時に音がします。細かい所ですが、積み重ねで完成度がグッと上がっています。全体のテイスト全体のテイストは「かわいい」や「ポップ」。ロゴやナビゲーションのアイコン、あと、さりげないけどフッターのミシン目の様な模様も効いている。見た目以外でも音や動きでかわいさやポップさが演出されていて、見る人を楽しくさせる仕掛けがいっぱいつまっています。グラフィックデザインにはない面白さ。その他のメモトップページの導入アニメーションが、他ページから戻る時には流れない。URLに「#back」を追加して制御しているものと思われる。気配り上手テイスト:ポップ色:マスタード!レイアウト:上部ナビゲーション・1カラムスマホ対応:無し余談ですが、キユーピーのサイトを見てみたら、商品ごとの特設サイトの多さにビビりました。キユーピー人形がキテる。ページ細かい動きが積み重なってとても楽しいサイトになってる。頭の中に全体像を描けるようになりたい。マスタードっていろんな種類があるんだ。