分析見出し

Webサイト分析まとめ

ameko

少し前の話になってしまうが、デザインの勉強の一環として、Webサイトのトップページを毎日1サイト分析し、それを簡単にまとめてTwitterでつぶやくという習慣を約一か月ほど続けていました。

分析したサイトは全部で17サイト。その17サイトを分析する中で気が付いたことをメモしてあったので、自分用の備忘録として改めてまとめ直してみました。

こんな感じで１枚の画像にまとめて呟いていました。

ヘッダー

ヘッダー

縦幅は60px〜160px、大体100前後の幅が多い
縦幅のルールなどがあるのかなと思っていたのだが、ロゴのサイズや、コンテンツ量にとってサイトごとにそれぞれと調度良い幅を選んでいるという印象。

ただし180px以上はほとんど見なかったので、その理由としては、180px以上縦幅を取ってしまうと、ファーストビューで見える範囲が狭くなってしまいユーザーの離脱に繋がりやすいからだと考えられる。

Gナビのフォントサイズ

Gナビ

Gナビのフォントサイズは、大体、14pxもしくは13px。大きくても16px以下と、ほとんどのサイトが14px・13pxという結果だった。

13pxは小さすぎる印象だったので意外な結果となった。ただ、小さいサイズの場合はアイコン等と合わせている場合が多く、文字だけの場合は16pxぐらいのサイトが多いので、この基準は自分で作成する場合にも参考にしたい。

写真と文字の配置

写真と文字

写真の上に白タイル（もしくはメインカラー）を置くデザインのサイトが多い。最近のデザインのトレンド？？？

この構成の利点としては、下の写真に関係なく文字の可読性も保てて、見出しとしても目に入りやすいということだと思う。特にメインビジュアルで使われていることが多かった。

また、見出しとして使われているフォントは、特殊なフォントが多いからか、デバイスフォントではなく書き出した画像テキストを配置しているサイトが多かった。

フォントの種類

フォントの種類

フォントの種類は基本的に1種類でまとめているサイトがほとんど、多くても3種類：英語フォント・日本語フォント・見出し用フォントの内訳となっており、ルールがしっかり定められているサイトが多かった。

まとめ

フォントやヘッダーの幅なんて、普段は何となくでスルーしてしまっているので、それを細かく分析していくと多くのことに気づけてなかなか楽しかったです。また、参考になる部分もあれば、なぜこんなデザインになっている？？と疑問に思うデザインもあって、良い例でも、悪い例でもデザインのストックがたまるのでとても参考になりました。

ただこの17回すべてトップページのみを集めていたのですが、毎度似たような箇所を見てしまっており、少し分析の方法を変えた方が良いなと感じたので、現在は一旦やめてしまっています。

今後は、やり方を少し変えて、業務の中で参考にしたWebサイトを、TOPページだけではなく下層ページも含めて毎週１ページ程度、模写と分析をの両方を行うという形で、続けていきたいと考えています。

とりあえず、新しく始める前に以前の分をまとめておこうと思って書いた記事でした。これからの勉強も定期的にtwitterに投稿し、またストックがたまったら、まとめをnoteに投稿したいなと考えています。

ここまで読んでいただき、ありがとうございました。

いいなと思ったら応援しよう！