ページレイアウトの作成方法 - サイトの安心感はページレイアウトによる比重がとても大きいように思います。

ページレイアウトの作成方法

見栄えの良いページレイアウト

ホームページをいろいろ見ていると、初心者まる出しのページがあります。
それはそれで味があるのですが、ごく一部の限られた人を対象とせず、不特定多数の訪問者に来てもらいたいと思うのであれば、多少なりとも「見てもらいやすい」ページを作成してほしいものです。

では、どこが違うかと言えば「見た目の安心感」が違うのです。
安心感と一言に言っても様々ですが、レイアウトによる比重がとても大きいように思います。

レイアウトの作成

文章に合わせてレイアウトを作成するということではありません。
安定的に見れるページは決まってレイアウトがしっかりしています。
逆に不安定なページにはレイアウトが顧慮されて無さそうなものが多いように思います。
安定的に見れないページは、不信感や悲壮感に繋がりますので注意しましょう。

そこで、ページを作成する際に、まずページのレイアウトを作成します。

1.「外枠」を作成

本で言えば、A4サイズの雑誌にするのかB4サイズの雑誌にするのか、それとも単行本サイズにするのかと言った根本的な取り決めです。
スタイルシート(CSS)がいいのですが、苦手な人はテーブルでもかまいません。
とにかく無限に広がるブラウザのキャンバスに、自分で決めたサイズの「外枠」を作成します。

(文章量などにより縦の長さはページ毎に異なるかもしれませんが)少なくとも、ここで決めたサイズ(横幅)はサイト内で統一するように揃えましょう。

その際に枠線を表示させたり、バックグランドの色を変更して作業をおこないます。
バックグランドの色の場合は、本来そのページに設定したいバックグランドの色ではなく、むしろこのページでは使わないというような色にします。

これは、次に説明する「内枠」でも同じです。

2.「内枠」を作成

外枠の中に更にいくつかの枠を作成してゆきます。

また実際には、文章量によって枠の大きさも変わってきますが、その場合枠の縦で調整するようにし、横並びの枠をきっちりしたものにしましょう。

3.さらに「内枠」を作成

内枠の中に更にいくつかの枠を作成してゆきます。
ここでも注意したいのが、今書きたいと思っている内容に合わせて枠を作成してはいけません。
しかし、「ここにバナー(ヘッダー)」「ここにメニュー」などある程度決めながら枠を埋め込んでゆけば、イメージが明確になります。

これも同じように、横並びの枠をきっちりしたものにしましょう。

4.本来の背景色などに戻す

レイアウトが決定した後は、枠線を非表示にしたり、バックグランドの色を本来の色に変更します。

5.テンプレートを作成する

作成したファイルをテンプレートとして使用すれば効率が良いのですが、テンプレートとして使用する前に、作成したファイルが自分の納得するものであるのか充分考えてください。

ここで手を抜いて、満足しないテンプレートを使用して、いくつもファイルを作成してからでは、修正作業がとても大変になってしまいます。

6.テンプレートを使用してファイルを作成

作成したテンプレートをコピーし記事を書き込めば、毎回レイアウトを作成しなくてもよくなりますので、作業効率がはかどります。
そして何より、「テンプレート」を使用することにより、サイトの統一感が出てきます。

きっと今までと見違えるほど統一感のとれた良いページが出来ることでしょう。
あとはセンスです。

ページのトップへ


ホームページデザイン
inserted by FC2 system