Webサイトにベストなページレイアウトとは - 新米web担のためのホームページの作り方 | 第12回

ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。先回は、HTMLとCSSの記入上のルールについてご説明しました。今回はホームページのレイアウトについて考えましょう。

 

 

ホームーページは多くの場合、ただ文字が羅列しているだけでなく、役割を持ったそれぞれの部分に分かれています。そしてそれは以下の3つに分けられます。

1.ヘッダー

2.メインコンテンツ

3.フッター

もちろん、このような構成にあえてしないデザインも可能です。どのような構成にするか、すべては作成する側の自由なのです!!

しかしながら、ホームページとはそもそも作成者の好みで作成するものではなく、あくまで他のユーザーに見てもらうために作成するものです。必ずしもデザインのよいものが、そのページの目的に合致するとは限りません。ここが悩ましいところなのです。

 

 

レイアウトを考える

レイアウトはそのページの目的によって異なる

どのようなデザインにするか、レイアウトにするかは、そのページを何のために作成するかによって変わってきます。

何かの商品を買ってもらうための宣伝でしょうか、それとも企業イメージを高めるためることでしょうか、あるいはユーザーに必要な情報を素早く提供することでしょうか。

大きく分けると、これらは情報を提供するためのページと、イメージを売り込むためのページに分けられます。

もちろん多くのページはこの2つの目的を同時に兼ね備えていますが、どちらにどれほどのウェイトを置くかによってページのレイアウトは変わってきます。

例えば、Yahooのサイトなどは、デザイン性は必ずしも優れているわけではないと思いますが、これを使い慣れたユーザーにとってはこれが見やく使いやすいということになるのかもしれません。そもそもYahooはブランドイメージを高めることよりも、多くの情報を1ページの中で提供することに重きを置いているのでしょう。

一方、商品やサービスを前面に押し出し、イメージを売りこむためのデザインなどもあります。以下のページなどはその典型でしょう。

例)古宇利島

 

それで、レイアウトを考える際には、そのページの目的を考慮しましょう。

 

 

ページの目的を考えるべき理由

これがなぜ重要かというと、一度に多くの情報を提供することが目的なのであれば、一般的にYahoo楽天などのように、いわば「ごちゃっとした」デザインが効果的であるといわれているからです。

多くのユーザーは意識しているかしていないかに関わりなく、スクロールすることを嫌います。これは特定のページをユーザーがどこまで「見てくれるか」を解析することによりわかるのですが、一般的にユーザーは、最初にブラウザに表示される部分を重要視します。そして、スクロールしなければ見えないページの下のほうは基本見ないのです。

統計的には「スクロース数に比例して、閲覧数が減少する」と言われています。

もちろん、楽天のようなページが良いかどうかついては賛否両論あるようなのですが、いずれにしても、「ユーザーはページを上から見る」ということを忘れないようにしましょう。ブラウザでスクロールせずに最初に表示される部分に、あなたのもっとも伝えたいメッセージが表示されるべきです。

 

 

レイアウトはそのページの対象(ユーザー)によって異なる

一般的に、古典的な日本のページは表示部分にできるだけ多くの情報を詰め込む傾向にあるといわれています。

一方、欧米のページはデザイン性を重視し、トップページではあまり多くの情報を載せずにシンプルなサイトが多くみられます。

以下の日本のサイトとアメリカのサイトを比較するとわかりやすいかもしれません。

 

日本のユーザーにとってみると、アメリカのホワイトハウスのページはシンプルでカッコいいが、欲しい情報がすぐに手に入らないように感じ「めんどくさい」と感じるかもしれません。

一方でアメリカのユーザーが日本の政府官邸のページを見ると、「なんてかっこ悪いデザインなんだ」と感じるかもしれません。

ここで重要なのは、どちらがより優れているかということではなく、同じページを見ても、見るユーザーによって印象は異なるということです。

もしあなたが、おしゃれな雑貨店を経営していて、そのページを作ろうとされているのであれば、上の画像にある政府官邸のような、いわば「お役所のようなページ」は避けたほうがいいでしょう。 むしろ、お店のイメージを売り込めるようなデザイン性の高いページがよいでしょう。

一方で、製造業などの中小企業のページを作成しようと思う時は、デザイン性を重視するよりも、ユーザーにとって情報をすぐに入手できるようなレイアウトがよいでしょう。

なぜこのような違いが生じるかというと、当然、雑貨店のページと製造業の中小企業のページでは、その対象とするユーザーが異なるからです。

それで、ページのレイアウトデザインを考える際には、「このページは誰を対象にしているのか」ということを検討しましょう。

 

 

まとめ

ページのレイアウトデザインを考える際には、

1.そのページの目的

2.そのページの対象

を考えて決めましょう。そしてそれにマッチしたレイアウトを選択できれば、ページを閲覧するユーザーにとって見やすく、かつあなたの目標とするページを作成できるでしょう。

では次回は、使用されることの多い「3カラム」レイアウトを作成してみましょう。