UI / UX テクノロジー

素晴らしいwebデザイン3選の共通点を考察

参考になるサイトはこの3つです。これらが参考になると判断した理由はSANKOU!というwebデザインギャラリーのトップに掲載されていたからです。

共通点を4つ発見したので簡単にまとめてみる

  • MOM FoR STAR ← シングルマザーが未経験からweb業界で活躍するまでの就業支援サイト
  • FRITZ HANSEN TOKYO ← 北欧デンマーク家具ブランド
  • snaq.me ← webデザイン会社

1. グローバルナビゲーションは固定

グローバルナビゲーションは固定で、スクロールすると付いてくるタイプでした。メニューが常に付いてくるので、下にスクロールしても上に戻らずにメニューボタンを押せます。メニューボタンが画面を占領するという問題がありますが、背景の色を薄くすれば、そのデメリットを最小限に抑えることができます。

2. グルーピングがわかりやすい

内容のグルーピングがはっきりとしています。特にMOM FoR STARでは、トップページを「タイトル、概要、やること、やりかた、発起人、問い合わせ」の 6つのグループに分けています。このページでは、タイトルから始まり、スクロールすることで自然と次のグループに移ることができます。こうしたグルーピングのわかりやすさが、ユーザの思考を整理させ、サイト情報の理解を助けています。

3. 画面をフル活用している

サイトに飛んだ瞬間、美しい背景や映像がフルスクリーンで表示されます。これによって、ユーザの視覚を刺激するトップページに仕上がっています。人は第一印象が大事と言われますが、webサイトにも同じことが言えるのかもしれません。

4. トップページは約5スクロール分の長さ

各サイトでヘッダーからフッターに到達するまでに、どのくらいスクロールするかを調べました。ここでのスクロールとはMacのタッチパッドで2本指を使いフリックする行為を指します。全サイトで4から6くらいが、飽きずにサイト全体を見れる長さだと考えられます。

まとめ

良いwebサイトと言われるものは、それぞれが個性を出しているため、共通点はないと考えていました。しかし、こうして調べてみると共通点があり、それぞれがユーザ視点で考えられたデザインになっています。webデザイナーにとっては常識なのかもしれませんが、私やwebデザイン初心者にとって、デザインに型があるのは驚きです。これらをフレームワークの一部として、webデザインを考えてみてはいかがでしょうか。

-UI / UX, テクノロジー

Copyright© SugLog , 2021 All Rights Reserved Powered by AFFINGER5.