デザイン

これから「キャンプ入門サイト」という架空のサイト作成を例にホームページの作り方を順番に説明していきます。記述しているhtmlやCSSをコピーすると実際に1つのホームページが完成します。

まずはデザインです。ホームページを作る時は誰でもデザインを考えると思います。本ページではデザインを考える上での基本的な考え方について説明しています。

バナーサイズと訪れた人の事を考えて設計する

 ホームページを作成する時は自由に設計すればいいと思いますが、最低限2点は考慮した方がいいと思います。

 1点目は訪れた人がどこをクリックすると目的のページに行けるか分かり易いようにする事です。

 余程情報があるとかでない限り、初めて訪れた人はさっと見て情報がないと判断するとすぐに帰ってしまいます。このため、ぱっと見てどこをクリックすると自分の知りたい情報が見れるか分かるようにする事が大切です。

 2点目はアフィリエイトまで考えた場合ですが、バナーサイズを考慮してデザインを考える事です。

 バナーサイズを考慮せずに作ると後々広告を入れようとしても、サイズが大きすぎてはみ出したり、小さすぎてバランスが悪くなったりします。

 どのようなサイズのバナーがあるかは「バナーサイズ比較」をご参照下さい。

よくあるデザイン

 よくあるデザインとしてはサイトタイトルの下に本文、左右にサイドバーがあるタイプです。

デザイン1

 又、サイドバーが左右どちらかだけのタイプもよく見かけると思います。

デザイン2

 これらのデザインのいい所は、訪れた人が慣れているためどこに何があるかの判断がし易いという点です。このため、このデザインを基本にすると1点目の考慮点はクリアし易くなります。

トップページのデザイン例

 よくあるデザインを基に2点目の考慮点であるバナーサイズを考慮して検討します。例えば左右サイドバー、本文下に広告を載せる場合、よく右サイドバーの上には四角い広告が出ていると思います。又、本文下には横に細長い広告、左サイドバーには縦に細長い広告が出ている事が多いと思います。

 右サイドバーの上に正方形(250px×250px)、本文下にフルバナー(468px×60px)、左サイドバーの下にワイドスカイクレイバー(160px×600px)を配置する場合、横のpxだけ足し算すると250px+468px+160px=878pxになり、両サイドバーと本文の間に10pxの余白を設けた場合、898pxになります。

 つまりページの幅はバナーサイズを決めると898pxになります。

 又、趣味のホームページなのでヘッダーの部分に大きな画像を置いてインパクトのあるものにしたいとします。高さ240pxあるとかなりの画像を入れる事が出来ます。

 これらを基にデザインすると以下のようになります。

デザイン3

 上記は実際のサイズを縦横半分にしたものですが、このように2つの留意点とサイトで主眼とする点を考慮するとある程度、デザインは決まってきます。

本文ページのデザイン例

 トップページからリンクされる本文ページで、よくあるデザインで左サイドバーだけあるパターンを利用したとします。その場合、以下のようになります。

デザイン4

 ヘッダーや左サイドバーはトップページと同じです。本文の下にリーダーボードサイズ(728px×90px)の広告を配置しています。

 この横のサイズ728pxは実はトップページの右サイドバーの幅250px、余白10px、真ん中の幅468pxを足した数字になります。

 このようにバナーサイズを考慮して検討すると統一感のあるホームページが作成出来、広告も違和感が少なくなります。

 本サイトでもこのトップページと本文ページのデザインを基にホームページの作成を説明していきます。

ページ間のリンクの検討

 1点目の考慮点で挙げたように、訪れた人がどこをクリックすると目的のページに行けるか分かり易いためにはページ間のリンクの検討も必要です。

 例えばトップページから本文ページに直接行ける場合、以下のようなリンクになると思います。

デザイン5

 この際、本文ページからトップページに戻れるようにリンクしておく必要があります。又、サイドバーに他の内容ページをリンクして移動し易いようにしてもいいと思います。

 内容をカテゴリ分けする場合は以下のようなリンクになると思います。

デザイン6

 この場合はカテゴリトップからトップページ、本文ページからカテゴリトップ、トップページに戻れるようにリンクしておく必要があります。又、各カテゴリ内ではサイドバー等で内容ページ間をリンクして移動し易いようにしてもいいと思います。

  • このエントリーをはてなブックマークに追加