Why, How, Whatで伝える、ストーリーテリング型のウェブデザイン

2012/06/15
Share


ウェブデザインについて書いてみます。


Why, How, What

Wishbone。こちらは動きがあるのでぜひ実際にアクセスしてみて頂きたいです。

トップ。やっぱり点線でナビゲートしてくれます。

Ihayatoblog 2012 06 15 9 35 16

何が問題であるかを解説(Why)。これスクロールすると人のアイコンの色が変わります。

Ihayatoblog 2012 06 15 9 35 23

問題解決のために何ができるか(How)。

Ihayatoblog 2012 06 15 9 35 30

これまでに何を成し遂げてきたか(What)。

Ihayatoblog 2012 06 15 9 35 36

最後は寄付ページに導線。

Ihayatoblog 2012 06 15 9 35 45

寄付ページはこんな感じ。マウスを当てると子どもたちが笑顔になります。

Ihayatoblog 2012 06 15 9 39 40

Wishboneのサイトは、なぜやるのか(Why)、何ができるのか(How)、何をしてきたか(What)、という順番でストーリーを語る、お手本のようなデザインだと思います。点線を用いた視覚導線、動きのある視覚効果も素晴らしいです。


点線・シンプル・アクション・動き

マーケティング支援ツールのyamanaのサイトもデザイン的に面白いです。

ファーストビューはこんな感じ。点線を辿るようにスクロールすると、

Ihayatoblog 2012 06 15 9 28 36

説明が始まります。

Ihayatoblog 2012 06 15 9 28 43

Ihayatoblog 2012 06 15 9 28 50

最終的に「Get Started」ボタンへ誘導。並んでいる人の画像が良いですね。

Ihayatoblog 2012 06 15 9 29 52

「何が課題なのか(Why)」を飛ばしていきなり「私たちの強み」に飛んでいるので、少し伝える力が弱いのがもったいないです。

また、Wishboneは文字を読まないでもなんとなく言いたいことが分かるのに対して、Yamanaはパッと見ても何のサービスか分からない点にも注意したいです。Yamanaの場合は、もう少し視覚的に課題や解決策を説明できるかもしれません。


WishboneとYamanaに学べるのは

・Why, How, Whatの順で伝える
・線(点線)を用いたナビゲーション
・迷わせない、シンプルなデザイン(クリック個所が最低限)
・一つのアクションへ誘導
・うるさくない範囲で「動き」を見せる

といった点だと思います。これらの要素は今後のウェブデザインの地味なトレンドになっていくのではないでしょうか。


関連本。デザイン関係ではこの2冊が名著です。