デザインガイドライン【レイアウト】

デザイン4大原則

関係性の近い各情報の距離を近づけて配置する。ユーザーに情報のグループ化を認識させる。

情報を闇雲に配置するのではなく、情報を意識的に揃えて配置する。

繰り返しによるデザインで一貫性・統一性を持たせてサイト内の統一を図る。

情報ごとにメリハリをつけて違いをハッキリさせる。

グリット状に並べられた模様の余白部分にいくつか交差点がある。
交差点以外に目を向けると影が見える仕組みになっているため、なんとなく見ているだけでも影が目に入り、気が散る。

以下の対応でこの錯視を軽減する。

三角形を四角形の中央に配置すると、数値的には正しくても、三角形の底辺側に少し寄っているように知覚される。

Webサイトは「Read」されずに「Scan」される

「スキャン」という言葉が用いられる際、それは「ざっと読む」ことを意味する。

ユーザビリティ研究の第一人者であるヤコブ・ニールセンは、
「人びとはWebページをどのように読むのか」という問いに対し、

「人びとはそもそも、ほとんどの場合Webページをきちんと読んでいません。その代わりにページをスキャンし、個々の単語や文章を選んで読んでいます」と答えた。

つまり、Webサイトのデザインにおいて重要なのは、
コンテンツの中身もさることながら、まずは「デザインにおけるスキャナビリティ」と言える。

「均等に配置された情報を見る時、視線は左上から右下に流れていく」というパターン。
グーテンベルク・ダイヤグラムは印刷物に当てはまるパターンのため、Webデザインでは主に『Zの法則』と『Fの法則』を用いることが多い。

まずはざっとページの全体を見るため、このような目線になること多い。
初見ユーザーによく見られる行動で、トップページなどはこの『Zの法則』を用いたレイアウトが多い。

上から順にじっくりと上部を閲覧してから、下部に移動することが多い。
リピーターによく見られる行動で、商品ページや記事ページに『Fの法則』を用いたレイアウトが多い。

ヤコブ・ニールセンによる実際のWebサイトでの調査によって明らかになったパターンのため、Webサイトの取り込みへの信頼が高い。

黄金比 1:1.618	多くの比率の中で古くから安定して美しいとされる比率。身近な例だと、ピラミッド、ミロのヴィーナス、モナ・リザ、名刺のサイズ、クレジットカードのサイズ、タバコの箱、Appleのロゴ、Googleのロゴ、Twitterのロゴなどに使用されている。
白銀比 1:1.414	別名大和比とも呼ばれ、古くから日本の建築や芸術などで用いられてきたため、日本人にとっては黄金比よりも馴染みやすい。法隆寺、見返り美人図、風呂敷、A版・B版の用紙サイズ、スカイツリーなどに使用されている。
青銅比 1:3.303	上記の2つに比べてマイナーだが、WebサイトではGINZA SIXなどメインビジュアルの縦横比に利用される例がある
白金比 1:1.732	実例不明。一応。

Webサイトの余白やブロックサイズ、サイトの横幅は、8の倍数ですべて定義することができる。

また、黄金比（1：1.618）も8の倍数ですべて定義することができる。

余白やブロックサイズは8の倍数で設計
8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなる。
PCサイトの横幅は960px。
多くのデバイスの解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすい。
960pxを最大値とした8の倍数の近似値によるフィボナッチ数列（960 592 368 224 136 80 … ）を用意。
隣り合う数字が黄金比なので、バナーなどのサイズに使用。
フォントサイズやlineheight（行送り）の値も極力8か4の倍数で設定
スマホサイズの場合は8の倍数で設計すると大きすぎることもあるので、その場合は適度に4の倍数も取り入れてる。