ホームページ制作 初期費用¥0 月々1000円であなたのお店もホームページが持てる 小さなお店・事業のためのホームページ制作

ホームページ制作 ホームページ1000 ロゴ

ホームページ制作【ホームページ1000】HOME > ホームページ1000 公式メールマガジン バックナンバー > 013

<< 前へ   次へ >>
バックナンバー 一覧へ戻る

バックナンバー Vol.013:
ホームページのデザインについて:<1.ホームページのデザインの基本>

こんにちは。

「ホームページ1000」の代表・デザイナー・Web集客コンサルタントの大竹です。

前回は「デザインとは何か」という多少抽象的な話をしました。

今回は前回の話を前提として、具体的に「ホームページのデザインの基本」の解説をします。

=================

今回のテーマは前回から引き続きホームページを作りたいと思っているけれど、ホームページのデザインというのはどのようなものかよくわからない人のためのものです。

今回は<1.ホームページのデザインの基本>について検討してみます。

=================

<1.ホームページのデザインの基本>

デザインというのはあくまで

・ホームページの目的
・訪問者との関係性

ですからこの2つの要素を踏まえれば、ホームページをどうデザインするかはまったく持って自由です。

自由ですが、インターネットが生まれてから現在までの歴史の中で様々なデザインのホームページが制作されてきて、その中で「ホームページとして」最適なデザイン・レイアウトというものが決まってきました。

これは

・ホームページの目的
・訪問者との関係性

というものを当然含んだ上で、そのベースとして「ホームページとして最適なデザイン・レイアウト」ということです。

「ホームページとして土台となるデザイン・レイアウトがある」ということを意味しています。

HTMLのところで説明したように、ホームページは「リンクできる」という点に最大の特徴があります。

ですから何より「ホームページ内の他のページとの関係性、つながりがわかりやすい」必要があります。

「リンク(メニュー)ボタンがわかりやすく配置されていなければならない」ということです。

訪問者の視点で考えれば「知りたい情報がすぐに見つけられるデザイン・レイアウト」でなからばならない、ということです。

大前提として訪問者は「何らかの情報を得るために」ホームページに訪れます。

それは街で見かけたお店の営業時間かもしれないし、取り揃えている商品のラインナップかもしれない。

それが何かに関わらず、とにかく「何らかの情報を求めて」ホームページに訪れるのです。

ですからまず、訪問者がはじめて訪れたホームページが何のページかがはっきりとわからないといけません。

これを明示するのが

1.ヘッダ・タイトル

の部分です。

屋号やホームページの特徴を簡潔に説明する部分です。

何のホームページが訪問者が理解して次に目にするのは

2.本文(ボディ)

ですね。

さらにホームページ内で次に知りたい情報を探すために

3.リンク(メニュー)

を探します。

この

1.ヘッダ・タイトル
2.本文(ボディ)
3.リンク(メニュー)

が通常のホームページで絶対必要な要素です。
(いわゆる「セールスレター型」のような例外もありますが)

あと無くても訪問者には問題ありませんが通常は著作権情報などの

4.補足情報(通常はフッタ)

を入れます。

ホームページのデザイン・レイアウトを考える際にはまず、

1.ヘッダ・タイトル
2.本文(ボディ)
3.リンク(メニュー)
4.フッタ(補足情報など)

という4つの要素を考えなくてななりません。

この4つの中でそれぞれのページで内容が変わるものは 2.本文(ボディ)だけです。

1.ヘッダ・タイトル
3.リンク(メニュー)
4.フッタ(補足情報など)

はどのページも共通の要素です。

これがホームページのデザイン・レイアウトを考える場合の基本中の基本になります。

最近ではあまり見かけなくなりましたが、いかにも「ホームページビルダーで頑張って作りました!」的なホームページは、この4つの要素を混同して配置しているのです。
次に知りたい情報がどこにあるかわからない。問い合わせしたくても問い合わせのフォームどころか電話番号もどこにあるのかわからない。


しかも各ページでレイアウトが変わるので、共通要素がわからない。

この4つの要素をごちゃごちゃに配置しているので非常にわかり難く素人臭く見えてしまうホームページになってしまっているのです。

それでは今回はこの辺で。


また次回お会いしましょう。

最後までお読み頂きありがとうございました!


大竹


<< 前へ   次へ >>
バックナンバー 一覧へ戻る

▲TOPへ