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

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

ホームページ制作【ホームページ1000】HOME > ホームページ制作をお考えのあなたへ > ホームページのデザインの基本とコツ

ホームページのデザインの基本とコツ

このコンテンツはホームページを作りたいと思っているけれど、ホームページのデザインというのはどのようなものかよくわからない人のためのものです。

<「デザイン」ということについて>

ホームページのデザインを検討していく前に「デザイン」ということについて少し考えてみたいと思います。

抽象的で小難しく、「ホームページのデザイン」からはかけ離れているように感じるかもしれませんが、大いに関係があるので最後までお付き合いください。

「デザイン」と言われると、恐らくほとんどの人が服や自動車・アクセサリーなどのいわゆるプロダクト(生産品)のデザインのことを思い浮かべるのではないかと思います。

ここで問題にしたいのは、そうしたプロダクトデザインのような狭い意味ではなく、「デザインとは一体何なのか」という根本的な意味です。

そういった根本的な意味でデザインということを考えていくと「人生設計」や「人間関係」といった形の無いものも、デザインとして考えることができます。

「人生をデザインする」「人間関係をデザインする」といった言い方もできるわけです。

つまり「目的を持って何かをする」ということは「全てがデザインである」と言えるということです。

ですから根本的な意味で考えていくと、デザインというのは

「その目的に沿って最適にしていくこと」

であると言えると思います。

「人生のデザイン」「人間関係のデザイン」というのは「人生を最適にしていく」「人間関係を最適にしていく」と言うことができるわけです。

またデザインを別の言い方をすると

「関係性の最適化」

という風にも言い換えられます。

デザインというのはデザイン単体ではなく、関係性の中に存在しています。

服のデザインだったら、「服」と「その服を着る人」の関係性
自動車のデザインだったら、「自動車」と「運転する人」の関係性
人間関係のデザインだったら「自分」と「対象の人間」との関係性
人生のデザインだったら「自分」と「自分の人生」との関係性

ということです。

関係性を無視してデザイン単体だけで存在することは考えにくいわけで、その関係性を最適にしていく過程がデザインである、ということです。

<ホームページのデザイン>

この前提を理解した上で「ホームページのデザイン」というものを考えてみましょう。

デザインを「その目的に沿って最適にしていくこと」というところから考えを進めていくと、ホームページに求める目的に最適化されているのが良いデザインということになります。

ホームページで人を集めたいのであればそれに適したデザインがあり、利益を上げたいのであればそれに適したデザインがある。

「関係性の最適化」から考えていくと、「ホームページ」と「ホームページを閲覧する人=訪問者」との関係性の最適化、ということになります。

当然「訪問者がどのような人か」を特定する必要がでてきます。

ですから、ホームページの目的・訪問者との関係性によってデザインは大きく変わってくる、ということです。

厳密に言えば

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

を無視したデザインは存在しない
、ということになります。

つまりこの2つが明確でない場合には、本来的にはデザインは決まらないということです。

ちょっと抽象的でわかりにくい話だったかったかもしれませんが本当に重要なことですので敢えてお話しました。

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

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

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


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

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

これは

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

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

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

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

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

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

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

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

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

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

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

これを明示するのが

1.ヘッダ・タイトル

の部分です。

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

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

2.本文(ボディ)

ですね。

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

3.リンク(メニュー)

を探します。

この

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


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

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

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

を入れます。

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

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


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

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

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

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

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

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


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

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

<2.ホームページのデザインのコツ>

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

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

という4つの要素を考えなくてはならない、というお話をしましたが、この4つの要素をどう配置(レイアウト)するかはある程度決まった「型」があります。

この「型」を知っているかどうかが、ホームページのデザインをする際のコツになります。

ホームページの型は大まかに3つに分類できます。

1. 1カラム型
2. 2カラム型
3. 3カラム型


ブログをやられている方は見たことがあるかもしれませんが、ブログのデザインを選ぶ時に「●カラム」という風に表記されていることがあります。

そのカラムです。

カラムとは元々「円柱」のことを表しています。
それが転じて「縦方向のまとまり」「縦の列」を表すようになりました。

ホームページは通常縦長になるので、柱に見立ててこのカラムという表現を使うようになったようです。

それぞれのホームページの型を画像で解説します。



「1カラム型」は現在最も主流のデザインだと思います。

左右にメニューは置かずに、ヘッダ・タイトルからフッターまで1本モノのデザインです。

なぜ現在主流になっているのかと言うと、スマホ・タブレットへの対応が容易だからです。



「2カラム型」はボディの左右とちらかにメニューを配置するタイプのデザインです。

現在でもまだまだ多く見られます。

また訪問者の利便性からヘッダ・タイトルの上下どちらかにメニュー(グローバルナビ)を配置しているページも多くあります。

メニューは左右どちらに配置しても構わないのですが、商用のホームページの場合、人間の視点の動きから考えるとメニューを右に配置するのはやめた方が良いです。



「3カラム型」はボディの左右両方にメニューを配置するタイプのデザインです。

ただ、メニューを両方に配置しなくてはならないのではなく、通常片方のエリアにはサブ情報を掲載します。

情報量が多くなるYahoo!などのポータルサイトなどで採用されています。

この「3カラム型」は、訪問者の視点の動きを考えた上での情報の配置が非常に難しくなります。

通常10ページ以内の商用のホームページでしたら全く必要ありません。

逆に小規模なホームページで3カラムを使用すると訪問者が混乱する恐れがあります。

<ホームページのデザインのコツまとめ:>

個人商店や小規模な企業の10ページ以内のホームページでしたら「1カラム」か「2カラムの左メニュー配置」が最も適しています。

つまりベースとなるホームページの型は2種類しかないということです。

これに画像を入れたり背景を装飾したりして全く別のページに見えている、ということです。

<3.ホームページのデザインテンプレート>

ある程度自分でホームページを作成できるようになってくると、「デザイン性」というところでどうしても行き詰ることがあります。

また、ゼロからホームページを作成しようとするとデザインの枠組みを作るだけで結構な労力が掛かります。

ネット上には親切な人がたくさんいて、そのような労力をショートカットしてくれる「デザインの入っているホームページのテンプレート(雛形)」を提供してくれているサイトがたくさんあります。

探せばデザイン性の高いホームページのテンプレートもたくさんありますので、これからHTML・CSSを学んで自分でホームページを作成しようとする人には非常に助けになります。

助けにはなるのですが、テンプレートを使用する際にいくつか注意点があるのでそれを解説します。

1.テンプレートは自分の好みで選ばないこと

はじめてホームページ作成の際は特にそうだと思いますが、テンプレートのデザインを自分の好みで選びがちです。

あくまでそのホームページを閲覧するのは訪問者です。

もちろん自分が作成するのですから自分の好みを入れて良いのですが、特に商用のホームページの場合には「どのような人に訪問して欲しいのか」という訪問者の視点を忘れずに選んで方が良いです。

2.スマホ・タブレット対応のものを選ぶこと

今やホームページへのアクセスはスマホ・タブレット経由が半分以上です。

スマホ・タブレットに対応していないホームページは大きな機会損失につながる可能性があります。

ですから必ずスマホ・タブレット対応のデザインを選ぶこと。

さらにPC版・スマホ版を別々に作成するタイプではなく、1つのページであらゆる端末に対応するデザイン(レスポンシブデザインと言います)にした方が良いです。

3.テンプレートをそのまま使用しないこと

「ホームページのデザインについて」の最初にホームページのデザインは

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

によって決まるということを解説しました。

つまり

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

というのは千差万別ですから、本来的には同じデザインのホームページはありえないということです。

テンプレートで作成するのは楽なのですが、

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

に合わせて、できるだけカスタマイズすることをお勧めします。

そうすればテンプレートを使用したとしても世界に2つとない個性的なホームページができあがります。

ユニークで個性的なホームページになれば集客や広告、宣伝といった「ホームページを作成する目的」により近づけるようになるでしょう。

<4.ホームページのデザインとコンテンツ>

最後に

・ホームページはデザインよりコンテンツ(内容)の方が遥かに重要である

ということを解説していきたいと思います。

情報を発信する側、すなわちホームページを作成する側を仮に「送り手」としましょう。

逆に情報を受け取る側、つまりホームページを閲覧する側(ビジネスの場合なら見込み客)を「受け手」としましょう。

ホームページを作成する側=「送り手」と
ホームページを閲覧する側=「受け手」には
意識に大きな隔たりがあります。


ビジネスのホームページの場合で考えてみましょう。

あなたがネットで何かを調べていて、たまたま興味のある広告を見かけたとします。

当然広告をクリックして広告先のホームページにアクセスしますよね。

その広告先のホームページにある商品なりサービスなりを
購入するかどうかを最終的に決断するのは何でしょうか?
「いやー、このホームページのデザインはセンスがいい。だから買おう!」とはならないはずです。

そうではなく

・自分の役に立つものなのか
・本当に自分に必要なものなのか
・価格に見合った価値のものであるのか

など、ホームページに掲載されている情報を慎重に検討するはずです。

掲載されている情報に不足があったり、疑問がある場合は問い合わせをすると思います。

その商品・サービスについての情報が明らかに不足していて説明不足の場合はどうでしょうか?

そのホームページのデザインが秀逸であってもまず購入はしないと思います。

つまり、前回の「ホームページのデザインのコツ」で見てきたように、訪問者にとって「使いやすいホームページ」であるならば、ビジネスの場合「受け手」はデザインではなく「ホームページの内容」によって購買を決定する、ということです。

「受け手」にとっては

コンテンツ >>> デザイン

ということです。

ところが「受け手」の立場の時には

コンテンツ >>> デザイン

で購買を決定するにも関わらず、立場が逆転してホームページを作成する「送り手」の立場になると

デザイン >>> コンテンツ

という意識になってしまって、どうした訳かコンテンツに重きを置かなくなってしまうのです。

あくまでホームページというのは「コンテンツありき」なのです。

コンテンツがあってはじめてデザインが決定します。

コンテンツは訪問者が何を求めているかで決まります。

「ホームページの目的」がはっきりしないと「訪問者が何を求めているか」を理解できません。

ということは「ホームページの目的」がはっきりしないと厳密にはホームページのデザインは決まらないということです。

やはり「ホームページのデザインは

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

によって決まる」
ということなのです。

とにかくホームページを作成する際に重要なことは

コンテンツ >>> デザイン

であるということです。

これは本当に重要です。

コンテンツを練りに練ってはじめて「そのコンテンツに適したデザインは何か」という段階に行けるのです。

「反応の取れるホームページ」を作成したいのでしたら何はなくともコンテンツの作成に注力することです。


お申し込みボタン

▲TOPへ