デザイン」カテゴリーアーカイブ

ワイヤーフレーム模写の100本ノック!

おもしろそうだったのでノってみることに。

■伸び盛りのWebディレクターに勧めたい「ワイヤーフレーム模写」
http://irritantis.info/2012/04/wireframe_training/

バぁーっとワイヤーフレームを書きながら、
「ほぅほぅ」とうなずいたり、
「へぇー」と感心したことを書き込む感じです。

トップページ + キーページのワイヤーを書くのは
慣れないと時間かかりますね。
目指せ100本です。

Corona

Corona2

 

今日はコロナです。

一瞬、本物か?と思うくらい商品の説明がないです。
文章1枚で終了。コロナなんて知ってるだろ?というある意味エゴです。
NYのタイムズスクエアに広告あるのをテレビでみたのに。

代わりにNaverまとめにリンクしたり、
音楽を再生してムード作りに一役買ってみたり。
ちょっと想定外すぎです。いいんでしょうか?

海外系ビールシリーズもこれにて終了。

GUINNESS

Guinness

前回のバドワイザーに引き続き、
今日はギネスです。

ギネスさんはFlashでしたー。
が、スマホ対策というかFlashなしでも全然動きます。

そして、ギネスは飲食店内でもそうですが、
本当に見せ方が上手ですね。
その片鱗がAdsGalleryとしてみれます。

少し気になったのはメニューの数について。
いくつあるのかわからないというのが、
こういったサイトについては沢山あるという意味でいいんでしょうが、
一般的なサイトについてはマイナスに転じやすいですね。

また、h2レベルの見出しとパンくずがセンター寄せになっているのも独特ですね。
ロゴとナビとコンテンツのバランスを見てこうしたんでしょうが、なかなかできないですね。
慣れないものを見せて納得させられることもすごいです!

Budweiser

Budweiser Budweiser2

ビールのサイトらしく最初に年齢を聞かれます。
が、成人サイトとかを見ても生年月日の入力を強いられたのは初めてでした。
大体、18才以上ですか?「Yes」or「No」ですよね?・・・ねっ?

さて、サイトはというと
Flashかな?と思うほど綺麗な画像で作り込んでいます。

コンテンツがしっかり絞ってあるため、
左メニューと下部メニューの割付がすごく良く出来ています。
たくさんあると下部がサイトマップになってしまいます。

また、下層コンテンツの1つ1つがしっかりコンセプトに沿ってデザインされており、
歴史らしく、ギャラリーらしくなってます。

よく考えれば、1つの商品のサイトなのでコンテンツ量がそこまで多くないのかも。
でも普通もっといっぱい入れたがって飽和状態になりそうだと思うので、
次回はギネスビール、コロナとビールシリーズで調べてみます。

株式会社LIXIL

株式会社LIXIL

 

CMでよくみるリクシル。
商品ラインアップのボタンが背景が街並みになっていてかわいい。
けど、入れ替えがあったときにすごく大変そう。

トップのボタンも商品と背景がきれいで押したくなりますが、
住まいの商品選びもロゴがかわいくていい感じ。
場所ごとに色が変わっており、グルーピングしてある。
その色使いはバナーの中も統一されており、
どんなシーンで使うものかを想起させる仕掛けを作り出している。

どのページも写真がすごくいいので、
サイトがパンフレットの役割をきちんとできている。

KONAMI

KONAMI

 

商品も多く、ゲームソフトによって色もさまざまなため、
サイト自体の色を抑え、うまく吸収している。

左メニューもスマートフォンサイトと似せたものを採用し、
両方での使用感をあわせることで様々な人の様々なシーンでの利用を想定している。

また、現在地表示と検索メニューの色を大きく差を出すことで、
サイト内での迷いを最小限に抑え、離脱率を減らす工夫がなされている。
フッターにあるサイトマップも同様に。

ゲームソフトと同比率のバナーを採用しているので、
更新コストも抑えられるのでは?

MUJI meets IDEE

MUJI meets IDEE

MUJI meets IDEE 暮らしのかたち

無印良品のコラボ企画。
雑誌のようにサイトをみせているのか雑誌からWebにしているのか。
見出しが付箋になっていたり、触ると紙だと思わせる演出がちらほら。
1つ1つの写真がとても良いので、商品がすごく欲しくなります。

また、caseで見せている雑誌風のフェードする秒数が絶妙です。