Webデザインレイアウトの基本

閲覧者にとって使いやすいサイトとは

情報を探しやすくすることが重要

Webサイトにとって最も重要なのはコンテンツであり、伝えたい人に的確に情報を伝えるために存在すべきだと考えています。必ずしもWebデザインに凝る必要はありません。

ただ、みなさんが共通して無意識に「ここをクリックしたらコンテンツのトップに戻れるのではないか」とか、「ここをクリックしたらトップページに戻れるかも？」といった予測がつきやすいサイト作りに心がければいいのです。

Webサイトの閲覧者は、決してそのWebデザインを見るためではなく、コンテンツ（情報）を探しに訪れているのです。

たとえサイトのデザインがどんなに優れていたとしても、自分の求める情報をなかなか見つけられないようでは結局「使えないサイト」になってしまいます。

Webサイト閲覧者が探している情報にすぐにアクセスできるように工夫し、また、今どのページを見ているのかのナビゲーションをしっかりしておけば、そのサイトを見ている人は快適にコンテンツを利用することができます。

特に、シンプルなつくりのWebサイトの方が、さまざまなブラウザやシーンにも対応しやすくなります。

使いやすいWebサイトにするためのポイント

使いやすいWebサイトにするポイントとして、以下が挙げられます。

• シンプルで、インターネット上でよく見かけるWebサイトレイアウト
• 迷子にならない、しっかりとしたナビゲーション
• どのページからでもすぐに元のページに戻れるようにする
• 探したい情報を見つけるまでのクリックの回数を減らせるように工夫する
• ページ表示までの時間が短い

迷子にならないナビゲーションに配慮する

サイト閲覧者がはじめてあなたのWebサイトを訪れたとき、トップページに戻るリンクがなかったり、今どのページを見ているのかわからなくなったりすると困ってしまいます。サブページには、必ずトップページに戻るリンクを設置しましょう。

また、今、どのページを見ているのかひと目でわかるようにしておくと、とても使いやすいサイトになります。そのためには、ナビゲーションバー内の現在のコンテンツ見出しを強調表示したり、パンくずリスト（Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの）を各ページの同じ場所に設置したりするのがよいとされています。

パンくずリストは通常、> で階層構造をあらわします。ちなみに、このページのパンくずリストは以下のように設置されています。

xweb.wanichan.net > Introduction　ホームページ作成の基本

パンくずリストを設置することによって、閲覧者にとって現在位置を直感的に理解する手助けになります。

一般的なニュースサイトは、左上にサイトロゴまたは社名（コーポレイトロゴ）、上部にナビゲーションバーやリンクバー、中央左側にメインコンテンツが配置されています。また、右側のサイドバーには広告や新着記事、アクセスランキングなどが、一番下には企業情報やお問い合わせ方法などが並んでいます。

通常、人間は「モノ」を見る場合、左上から右下に視線を移動するので、最初に目に留まるのは左上になります。左上に会社などのロゴがあれば、現在どのWebサイトにアクセスしているのかがすぐにわかり、主体となるニュースコンテンツを左側に配置することによって、それらが自然に注目されるようにしているのです。

ダイナミックWebテンプレートを利用したデザインやレイアウトの統一

トップページからサブページに移動した場合に、配色や背景色が変わっていたり、レイアウトやデザインがまったく異なっていると、閲覧者に違和感を与えるだけでなく、目的のコンテンツにたどりつかない場合があります。

Webデザインレイアウトを簡単に手早く統一するには、Expression Webの「ダイナミックWebテンプレート」を利用します。ダイナミックWebテンプレートには、設定や書式のほかに、テキスト、画像、ページレイアウト、スタイル、Webページの変更可能な領域などのページ要素を含めることができます。

まず、基本となるレイアウトを決定し、Webページごとに変更したい場所（メインコンテンツエリアなど）に編集可能な領域を設定します。続いて、このダイナミックWebテンプレートからWebページを作成し、編集可能な領域をそれぞれ編集して仕上げていきます。後からダイナミックWebテンプレートを編集して更新すると、既にそのテンプレートが適用されているWebページにもその変更内容が反映されます。

Expression Webでは、既存のWebページに後からダイナミックWebテンプレートを適用することもできます。特に、Webサイトのデザインを全体的に一新したい場合など、ダイナミックWebテンプレートを活用することによって効率的に作業が行えます。

最後に、シーン別に基本的なWebデザインレイアウトをExpression Webに用意されているCSSレイアウトテンプレートを基に使用例を挙げます。必ずしもこれが正解とは限りませんが、目安として参考にしてください。

Webサイトのコンテンツが5種類程度の場合、ナビゲーションを上部に設置	Webサイトのコンテンツが多数ある場合、左側にメニューを設置	コンテンツが充実してきたら、 メニューをネスト（入れ子）する
「会社概要」「ニュースリリース」「業務紹介」「実績紹介」「お問い合わせ」など	サイドメニューでは、横書きのリンクに対してスペースの関係から下方向にコンテンツカテゴリを増やすことが可能	上部のナビゲーションにはメインメニュー、サイドメニューにはそれぞれのサブメニューとしてリストする。

前のページ 次のページ