1.レイアウトと整列
WEBサイトを作るときにまず大切なのは、『レイアウト』だと思います。
サイトはヘッダーやフッター、タイトル、メニュー、色々なコンテンツなので作られていて、それがどこにレイアウトされるのかでかなり印象が変わってきます。
ほとんどのサイトは、最初にヘッダーがあり、メニューがあって複数のコンテンツ、フッターの順番にレイアウトされています。これが、まったく違う並び方だったりすると、初めて訪れた人は、どこになにがあるのかわからなくなり、戸惑ってしまいます。
レイアウトがおかしいければ見づらいと感じ、すぐに他のサイトへと移ってしまう可能性があるので、レイアウトをしっかり考えることが重要だと思っています。
また、同時に考えることが『整列』です。
WEBの仕事をしていると、『グリッドレイアウト』という言葉をよく耳にします。これは、方眼紙の上に写真を並べようとするとき、方眼紙に書かれた線にきっちりとあわせて写真を並べていくようなイメージです。もちろん、写真だけでなく写真を説明する文字に関しても、きっちりと線に並べて書いていくということです。
写真や文字をただキレイに並べるだけでなく、写真と写真のスペース、写真と文字のスペース、文字間や行間もバラバラにするのではなく、整列させながら並べるとすごく見易いレイアウトになります。
2.似たもの同士のグループ化
これは、関連する内容のものは近くに置いて、関連しないものは遠ざけることで、要素のグループを認識しやすくすることです。
例えば毎日写真を撮影していて、その写真を整理するときに、撮影した月毎に近づければ「月別」のグループ、その月別のグループを年毎に近づければ「年別」と認識がしやすくなると思います。WEBサイトでもこうやって関連する写真や文字などの要素を近づけてレイアウトをし、関連しないものはスペースを空けてレイアウトをすれば、サイトを見ている人に情報が伝わりやすくなると思います。
関連する写真と文字で一つのグループができ、それが複数集まればページができ、ページが複数集まればサイトになるといった感覚で構成しています。
3.コントラスト
コントラストとは、色の濃淡や線の太さ、フォントの大きさ、余白の大きさなどいろいろあります。
1.や2.でも書いていますが余白が大きければ、他との差がついてグループ化ができ、見易くなります。この記事でも見出しを装飾して、フォントの大きさを変えることで、要素が変わってることがわかっていただけると思います。
長文が書かれたページをスクロールしていく中で、いきなり濃い色が見えたり、フォントが変われば段落が変わったように見えます。同じ流れが続いている所に、ちょっと色を変えたりするだけで目が留まり、そこを見てみようって気持ちになるかもしれません。
最後に
WEBデザインは本当に奥が深くて、これだけじゃ全然足りないくらいです。WEBの仕事を始めたのが9年程前で、そのころからいっぱい新しいものができています。常に新しい技術やデザインを追いかけて仕事をしていますが、根本的な誰にでも使いやすいデザインっていうのは変わらないんじゃないかと思っています。