ウェブデザインについて書いてみます。
Why, How, What
Wishbone。こちらは動きがあるのでぜひ実際にアクセスしてみて頂きたいです。
トップ。やっぱり点線でナビゲートしてくれます。
何が問題であるかを解説(Why)。これスクロールすると人のアイコンの色が変わります。
問題解決のために何ができるか(How)。
これまでに何を成し遂げてきたか(What)。
最後は寄付ページに導線。
寄付ページはこんな感じ。マウスを当てると子どもたちが笑顔になります。
Wishboneのサイトは、なぜやるのか(Why)、何ができるのか(How)、何をしてきたか(What)、という順番でストーリーを語る、お手本のようなデザインだと思います。点線を用いた視覚導線、動きのある視覚効果も素晴らしいです。
点線・シンプル・アクション・動き
マーケティング支援ツールのyamanaのサイトもデザイン的に面白いです。
ファーストビューはこんな感じ。点線を辿るようにスクロールすると、
説明が始まります。
最終的に「Get Started」ボタンへ誘導。並んでいる人の画像が良いですね。
「何が課題なのか(Why)」を飛ばしていきなり「私たちの強み」に飛んでいるので、少し伝える力が弱いのがもったいないです。
また、Wishboneは文字を読まないでもなんとなく言いたいことが分かるのに対して、Yamanaはパッと見ても何のサービスか分からない点にも注意したいです。Yamanaの場合は、もう少し視覚的に課題や解決策を説明できるかもしれません。
WishboneとYamanaに学べるのは
・Why, How, Whatの順で伝える
・線(点線)を用いたナビゲーション
・迷わせない、シンプルなデザイン(クリック個所が最低限)
・一つのアクションへ誘導
・うるさくない範囲で「動き」を見せる
といった点だと思います。これらの要素は今後のウェブデザインの地味なトレンドになっていくのではないでしょうか。
関連本。デザイン関係ではこの2冊が名著です。