トップページの作り方3.手書きのレイアウトから、各領域のサイズを決める

3.手書きのレイアウトから、各領域のサイズを決める

ページの幅・各領域の幅を決める

まずは全体のページ幅を決定します。ページの幅が決まり、各領域を四角で区切って大体の領域分けを行います。デザインは無視して「各領域の幅」と「各領域の隙間」を正確に決定します。

ページのサイズ・幅について

ページの幅に関しては、時代とともにパソコンのモニターサイズや解像度が大きくなる傾向もあり、 その時代に応じたページ幅を設定する事が必要になります。

2008年程度までは一般的なホームページで760pxというサイズが推奨されていました。
しかし、時代の変化とともに、最適なページ幅は変化していきます。
そこで、基準にしたいのは、大手サイトのページ幅です。
この原稿の執筆時では、検索エンジンYahoo!のページ幅は、950pxに設定されています。
これは、画像解像度1024×768(XGA)のモニターで、画面がはみ出ないで表示できる大きさです。

推奨するページ幅（2011年更新）

950px,960px

2011年～では最適なページ幅といえます。
ただし、内容の乏しい6～10ページ程度のサイトでは、ページ内に空白ができやすく、工夫が必要になります。

840px～900px

一般的な企業や美容室などのホームページでは、一回り小さくしてもよいです。
ただし、ホームページを作った後、ページ幅を変更する事はとても大変なので、時代とともにモニター（画像解像度）は大きくなると予測できるので、大きく作っておくのが理想。

100%（リキッドデザイン）

ページ幅の最低サイズ、最大サイズを決めて、ある程度の範囲で幅が可変する作り方があります。
これをリキッドデザインと呼び、WikiPediaのサイトなどが代表的な例です。また、ニュース系サイトやネットショップなどに多くみられます。

～760px

1世代前の最適ページ幅でしたが、大きな解像度のモニターによってはこじんまりとしてしまい、古めかしさを感じます。

当サイトのページ幅

805px。このサイズも1世代前の設定（今後リニューアルを予定）

980px以上

1024pxの画像解像度の利用者がいる間はこれ以上のサイズでは画面がはみ出てしまう可能性があるため、あまり推奨されません。ただし、少数派(10～20%のユーザー)よりも、1280px以上の大きな解像度のパソコンユーザー層に向けて、迫力のあるサイトを演出したいという目的があれば、1024pxのページ幅などを設定する場合もあります。

ページの高さについて

ページの高さは、ページの掲載内容によってさまざまになるので、固定値は指定しないのが一般的です。
ただし、最も重要な内容、すぐに押させるべきボタン（キャンペーンバナーや検索サイトの場合の検索ボタン）は、高さ540pxまでに収めるのが王道です。これはファーストビューと言って、ページが表示された際にスクロールなしで表示される領域で、現在利用されているさまざまなモニターの実質最低ラインをとったものです。トップページのレイアウト時にファーストビューを頭に入れておきましょう。