ページの構成パターンとその作り方：CPIで人気サイトを作ろう！

ページの構成パターンとその作り方

文：ぱーらー

ウェブサイトには、Yahoo! Japanのようなポータルサイトから個人の趣味サイトまで、さまざまなものがあります。それぞれに適したレイアウトパターンがありますが、このページをご覧になっている方は、ポータルサイトの設計者ではなく、比較的小規模なウェブの構築を検討されているのではないかと思います。ここでは、小、中規模の法人サイトに多く見られる、会社や店舗の案内、取り扱い商品の紹介やショッピングサイトなどに適したテクニックを紹介します。
ウェブサイトをデザインするとき、ナビゲーションを上と左のどちらにすればいいのか、適切なロゴの位置はどのあたりなのか、コンテンツメニューの場所はどこに置いてどのくらいの大きさにすればいいのかなど、レイアウトについて悩む方も多いのではないかと思います。ウェブには目的や用途別に、ある程度標準的なレイアウトパターンや、レイアウトする際に守るべきルールが存在します。このようないくつかのポイントを覚えると、ワンランク上の美しく、見やすくて使いやすいウェブサイトをデザインできます。

イメージを重視する場合はメインビジュアルを活かす

商品や会社のイメージを重視する場合は、クオリティの高い写真を使用するのが効果的です。写真は文字に比べて圧倒的な情報量と表現力を持ちます。目を引く美しい写真を活かしたレイアウトが作れれば、エンドユーザの感性に訴える事も不可能ではないでしょう。このような写真を中心にしたタイプのレイアウトとしては、下記のように横幅一杯に広がり、一画面の30%～40%をも占めるような横長の写真を使うパターンがあります。

メインビジュアルを活かしたレイアウトを用いたサイトの例

このようなレイアウトを組む場合には、一番見せたい写真に注意を集めて、より美しく見せるためにその他の情報量を減らす事が重要です。ボタンやアイコン、飾り文字や新商品案内などの付加的な要素は極力抑え、色数もサイトの基調とする数色にすることが重要です。（上記の例では、トヨタ自動車では赤と灰色、六本木ヒルズでは灰色と水色、カレッタ汐留では赤が基調となっています。）写真とその他部分のメリハリをつけて、基調とする色を中心にバランスよく配色することで、簡単に美しいサイトを作ることができます。また、写真の配色の選択次第で、元気の良さから信頼性まで様々な表情を演出することができる標準的なレイアウトなので、汎用的に扱うことができ、便利です。

秩序だった雰囲気にしたい場合は「グリッド・システム」を意識する

「グリッド・システム」とは、1950年代にスイスのグラフィック・デザイナー、ヨゼフ・ミューラー＝ブロックマンによって提唱されたレイアウトの手法です。レイアウトを行う際に、構成要素をもっとも効果的に見せる事のできるグリッド（縦横線・マス目）をガイドラインとして引き、マス目ごとにコンテンツなどの構成要素を配置することで、短時間で秩序と統一感のあるレイアウトを作成することができます。この手法は書籍等の出版物やポスターでよく使われており、デザインの基本といえます。

　
グリッド・システムを用いたサイト例

この他にも、現在のウェブサイトはほとんどがグリッド・システムで構成されています。グリッド・システムを意識して構成要素を配置し、そこからグリッドを一部崩したり変形させたりすることで、基本を崩さずに美しくレイアウトできます。実際には、ホームページ作成ソフトの「テーブル」機能などを利用し、表のような枠の中に画像や文字を揃えて配置することで、グリッドが作成されます。

ブラウザの表示範囲を考慮する

ウェブデザインでは紙媒体のようにサイズが指定されていないため、原則的にはどのようなサイズのサイトでも作ることができます。しかし、画面のサイズは、お客様が使用しているモニタ等の環境に大きく依存するため、サイトのサイズは最も小さい画面サイズに合わせるのが一般的です。

1024x768ピクセルの画面サイズで見た場合には綺麗なサイトでも、800x600ピクセルの画面サイズでは必要な情報が見えなかったり、ナビゲーションに気づかない、ということは避けなくてはなりません。現在利用されているモニタの画面サイズは、800x600ピクセル、もしくは1024x768ピクセルが主流です。実際にはブラウザのメニューバーや、OSのタスクバーなどがあるため、サイトの表示に用いられる画面の領域はそのぶんだけ狭くなります。

このため、現在のサイトの横幅は600～700ピクセル、縦幅は600ピクセルの環境と768ピクセルの環境のどちらでも使いやすく、混乱しないようなサイズにする必要があります。ですから、お客様に最も注目してもらいたい要素は、「700x500ピクセル」の中に収めるのが賢明といえます。ホームページ作成ソフトでは、テーブルのサイズを「700x500ピクセル」に設定し、その中にコンテンツを配置すれば見やすいページが作成できます。使いやすく美しいサイトとそうでないサイトでは、会社に対する印象、信頼性、ブランドイメージ、果ては商品の購買意欲にまで大きく影響が現れるものです。

Webサイトのレイアウトは簡単なようで奥が深いものですが、上記のようないくつかの重要なポイントを意識して制作するだけで、デザインのクオリティが大きく向上しますので、是非お試しください。