トップページの作り方2.手書きのレイアウトを作成

2.構成図を元に、手書きのレイアウトを紙に書く

まずは手書きで配置を考える

まずは手書きのトップページを作ります。トップページに何を入れなくてはいけないのか、
何を目立たせるのか、自分がエンドユーザになった場合を考えて、「わかりやすい」ホームページを意識してレイアウトを大まかに考えます。

トップページに必要な要素

ホームページのトップページに必要な要素は、ある程度決まっています。
下記に代表的なリストをあげますので、参考にしてみてください。

• ・ロゴ・サイト名
• ・各ページへのリンクボタン（ナビゲーションボタンと呼びます）
• ・メインイメージ画像
• ・主要コンテンツのアピール
• ・ニュース・トピックス
• ・キャンペーン・イベントバナー領域
• ・コピーライト表記

レイアウトの基本はナビゲーションで決まる

ホームページのレイアウトの基本となるのが、「どこにナビゲーションを配置するか」です。
基本的なナビゲーションボタンの配置は、ホームページの構成から決まってきます。
よくあるレイアウトのパターンと利用方法を下記に紹介します。

上部ナビゲーションのホームページレイアウト

最近のホームページの流行として、代表的な上部ナビゲーション。
ボタン領域が上部にまとまっているので、コンテンツ領域の幅を大きく取ることができる。
常に上部にボタンがあるので、各ページを移動しやすい。など、メリットは様々。

左側ナビゲーションのホームページレイアウト

一昔前は基本的に左側ナビゲーションが主流でした。特にページ数が次第に増えていくようなホームページには、ボタンを下に追加するだけでよいので左側ナビゲーションを考えます。

上部ナビゲーション＋サブナビゲーション

ページ数は多いが、上部ナビゲーションにまとめたい場合に、ページ内容に優劣をつけ、さっぱりと多段にわけて配置します。現在最も多いと思われるナビゲーション形式。
（但し、コーディングの難易度は高めになります）

右側のナビゲーションボタンの是非

検索エンジン対策には有効？

右側にナビゲーションをつけた方が検索エンジンにひっかかりやすい・・・などと聞いた事があると思います。確かに、一般的に利用されている「テーブルコーディング」では、有利となる場合があります。
検索エンジンのクローラーは、HTMLソースを上から下の方向に読み込み、ソース内のテキストなどの掲載位置によっても、キーワードの重要性をチェックします。
「テーブルコーディング」で左側ナビゲーションにする場合、コンテンツよりも先にナビゲーションが読み込まれるので、あまり検索エンジン対策にはプラスにはなりません。
「テーブルコーディング」で右側にナビゲーションを持っていくと、コンテンツを読み込んだ後にナビゲーションが読み込まれるため、実際は検索エンジン対策としては有効と考えられます。

ただし、右側ナビゲーションにもいくつかのデメリットがあります。

１．不慣れなエンドユーザーには向かない

一般的に上部か左側にナビゲーションを配置したホームページが多く、あまりインターネットに不慣れなエンドユーザーには右側にナビゲーションがあると嫌われる場合があります。

２．小さいモニターなどで、右側が押しにくくなる

ナビゲーションボタンはホームページにとっては非常に重要な意味を持っています。見せたいページを見てもらえるか、たどり着くか着かないか、いろんなページを見てくれるかといった、いわば運命を握っていると言っても過言ではないでしょう。

右側にナビゲーションがあると、場合によっては画面の右側にボタンがはみ出てしまって、押せなくなってしまう事もあります。
ページの幅が広い場合は、右側にはみ出ないように注意して設計しましょう。

３．SEO対策の効果がはっきりしない

テーブルでのコーディングを行ったとしても、もちろんSEO対策もできますし、上位表示を狙う事も可能です。ただし、検索エンジンに読み込ませる順番をテーブルコーディングであれこれ考えるのであれば、できればCSSコーディングにより、読み込ませる順番を考えたいところです。

実際は、テーブルコーディングの場合はどれくらい順位が左右するかは、はっきりしませんし、エンドユーザーの使い勝手を第一に考え、ホームページの内容が充実してきてからCSSコーディングによるSEO対策を考えたほうがはるかに有効だと考えます。