「よーし、俺様のサイトをオープンしちゃうぞ！」と作ってはみたものの、どこからみてもシロートまるだし。「あれ？こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。
デザインも内容もテクニックも、めざせバージョンアップ！ |
 |
 |
白熊 吾郎
GORO SHIROKUMA
Web
& 映像業界で生きる（モーション）グラフィックス屋。マスコミインハウスからフリーに。
|
|
|
|
|
|
|
|
| 前回064で解説した、サイトのイメージ（印象）として効果を与える要素のうち、今回は「レイアウト」「統一感」を取り上げます。前回の「色」と一緒に、イメージアップに役立ててください。 |
|
| 069.
レイアウトはブロック単位で！ |
ページデザインをあれこれスケッチするときには、必要なパーツをブロック単位にしてレイアウトすることを勧めます。
まずどのページでも共通の部分（ロゴやインターフェイスデザインなど）、コーナーごとに異なる部分（コーナーのタイトル名やコーナー内のインターフェイスデザインなど）、ページごとに異なる部分（コンテンツなど）を配置します。更新頻度が高いページは、書き変わる部分が分散しないように注意します。 |
|
|
| 070.
適度なスペースがレイアウトのツボだ！ |
大まかなブロックを配置したら、次は細かなレイアウトを組んでいくのですが、ここで大事なポイント。適度にスペース（間隔）を空けましょう。慣れないうちはぎゅうぎゅうに詰めてレイアウトしがちですが、適度にスペースを開けることによって、読みやすいページになります。
文字が多いページはとくに間隔を空ける必要があり、通常改行（タグで言えば<br>）だけでなく、適度に段落改行（タグで言えば<p>）をはさんで、目を休ませてあげます。
企業や情報系のサイトをよくみると、意外にもスペースがあることに気づくでしょう。これらは意識的に余白を設定しています。 |
|
段落改行がある（右）と読みやすくなる |
|
ページを見るときに、人は無意識のうちに面積や密度、色などからその量を推定します。量が多いと判断すれば読まないか斜め読み、あるいは時間のあるときに再読するなど、自分の事情と照らし合わせて判断しています。もし量が多いと判断されても、適度なスペースがあったり上手なレイアウトで長さを感じさせなければ、読んでもらえる可能性が増えます。
レイアウトを決めるときにブロック単位で考えるのも、同じ要素・機能の部品をまとめることで「使いやすそうだ」「触ってみようか」「詳しく見てみよう」といった印象の向上につながるからです。もしリンクのボタンがあちこちバラバラになっていたり、ページごとにボタンの位置が変わったりしていたら、とてもじゃないけれど読み進もう、とは思いませんよね？
いいデザインは大きくブロック単位で要素を分けることができ、内容把握や操作性の向上につなげているのです。
|
|
|
| 071.
入口は軽く、徐々に重たく！ |
Webサイトのデータは、電話回線や各種ケーブルで伝送されてくる以上、どうしても転送時間がかかります。昔に比べて速くなったとはいえ、まだまだパッと表示される環境は少数派。
そこでレイアウトでも一工夫。コーナーのトップページはなるべく軽くするのです。たとえば、たくさんの写真を見せたいときは、コーナーのトップページにはあまり写真を置かず、小さくしたサムネール（→012参照）で写真の縮小版を見せたり、思わせぶりなタイトルを付けた一覧にしたり、種類別で分類してリストにしたりします。このように「とっかかり」となるコーナートップページを軽くしておくことで、肝心の中身（大きなサイズの写真があるページ）へクリックしてもらうこと可能性が増えます。来訪者が自らの意志でクリックしたページの場合は、多少重くても待ってくれます（それだけ見たい、という気持ちの表れでもあります）。
おっと忘れてました。最初の入口・サイトのトップページも同じ理由で軽くしておいた方がいいですね。
|
|
|
| 072.
いつも統一感を確認せよ！ |
色でイメージを、レイアウトで読みやすさやとっかかりを作ったら、最後に必要なのが統一感です。
Webサイトはリンクをクリックするだけでどんどんジャンプでき、あっという間に他のサイトへ行って（行けて）しまいます。これは便利な反面、サイトというものの領域や空間という概念が希薄になってしまうというデメリットもあります。つまり来訪者に「今、○○のサイトにいるんだ」という意識が乏しいということです。せっかく興味深いコンテンツを作っても、サイトのアイデンティティーが植え付けづらいのです。まず器ありきの雑誌などの紙媒体とは決定的に異なる点です（どちらかといえば、テレビなどの電波媒体に近い希薄さです）。
そこで、デザイン面からアピールするために必要なのが統一感、というわけ。すべてのページでレイアウト、色づかい、ビジュアルが同じトーンで一貫していれば、来訪者の印象に「ああ、あのサイトね」と残るというもの。サイトがある程度できあがったら、一歩引いた目で見て「全体的にまとまっているか？」をチェックしましょう。 |
|
|
| [
NEXT→] |
