ホームページの作り方、7つの超重要ポイント!

ホームページの作り方、7つの超重要ポイント!

ホームページ作り方、7つの超重要ポイントを説明します。対象者は、ホームページ作成の初心者ですが、詳しい方でも参考になると思います。単なる作り方ではなく、見やすくわかりやすい作り方のコツを解説しているからです。

※これから説明する内容は、「HTML・WordPress」どちらでも対応できます。

ホームページの構成とは?

最初にホームページの構成を説明します。ホームページは複数のエリアに分かれています。したがって、そのエリアごとの役割に応じて、内容を作る必要があります。もちろん、いろいろなエリア分けのしかたがあるんですが、ここでは4エリア7か所に分けて説明します。

基本的なホームページの構成は、次の通りです。

ホームページの構成
ホームページサンプル ※図の番号はエリアの番号と一致しています。

  1. 共通ヘッダー・エリア(最上部)
  2. メイン・エリア(中央部)
    1. パンくずリスト(リンク)
    2. アイキャッチ画像(画像)
    3. 本文(文章)
    4. 関連ページの紹介(説明リンク)
  3. サイドカラム・エリア(中央部脇)
  4. 共通フッター・エリア(最下部)

このように、4エリア7か所に絞って説明します。

大事なポイントは、見やすくわかりやすい作り方ですので、その点を中心に説明しましょう。

ホームページの作り方、構成7つのポイント!

それでは、ホームページの作り方について構成を説明します。ポイントは7つありますので、しっかり目を通して頭に入れましょう。

作り方1.共通ヘッダー・エリア

共通ヘッダー・エリアとは、ホームページの最上部にある共通部分のことで、文字通り各ページに共通する情報を入れます。具体的には、左側に会社名(サイト名)とサイトの説明を入れ、右側には所在地や連絡先などを入れるのが一般的です。

特に重要なのは左側です。なぜなら、人間は必ず左上から物を見るという、ある種の習性があるからです。したがって共通ヘッダーの左側には、最も重要なサイト名と説明を入れて、どのようなサイトであるのかを素早く理解できるようにします。

グローバルメニューについても説明しておきましょう。グローバルメニューは、共通ヘッダーの上部や下部にある、サイト全体にアクセスできるリンクメニューです。このリンクは重要なカテゴリーやページで構成してください。なお、数が多いとわかりにくいので、5つ程度に収めましょう。

このように、共通ヘッダーは最初に目に触れることが多いですから、シンプルにしながらもしっかり情報が伝わるように作ることで、見やすくわかりやすいヘッダーになります。

作り方2.メイン・エリア

メイン・エリアは、細かくすると切りが無いですので、次の4つに絞って説明します。なお、この4つには共通する部分があって、必ず左側で文頭を揃えるという点です。ところで、このエリアは中核となる部分ですので、最も力を入れて作りましょう。

a.パンくずリスト

パンくずリストとは、現在表示しているページの上位ページへのリンクを並べたものです。役割としては、サイト内でページの位置関係やページ同士の関係性を示します。なぜパンくずリストが必要なのかというと、ユーザーフレンドリーのためと、検索エンジン対策です。

ユーザーが検索でサイトに到達した場合、トップページにたどり着くことはほとんどありません。したがって、アクセスしたページにパンくずリストがあることで、サイトのどこに到達したのか構造がつかみやすくなるのです。これがユーザーフレンドリーになる理由です。

また、検索エンジンの場合も、サイト構造を把握しようとリンクをたどります。やはり、パンくずリストがあることでサイト構造を把握しやすくなり、若干ですがSEO対策上も有利になるようです。こういった理由から、パンくずリストの作成は重要です。

パンくずリストは、童話『ヘンゼルとグレーテル』が由来です。物語中、主人公が森で迷子にならないよう、通り道にパンくずを置いていったエピソードに似ているところから、そう呼ばれるようになったそうです。

b.アイキャッチ画像

アイキャッチ画像とは、文章の前にあるやや大きめの画像のことです。役割としては、閲覧者の目をいったん画像に向けさせることで、直帰率を下げます。これはある種の心理作戦で、「画像の後に続く文章は読んでしまう」という心の動きを、うまく利用しているのです。

したがって、必須ではないものの文章を読ませるための推進力としては、ぜひ欲しい画像です。ちなみに画像サイズは、なるべく大きくしてください。サイズの比率については 16:9 が見やすいのではないでしょうか。ようするに、テレビ画面の比率ですね。

なお、画像の種類はどのようなものでも構いません。もちろん、商品紹介のページであれば、商品の写真を載せます。それ以外のページであればページ内容に合わせても良いし、商品が関係しないのであれば、内容と無関係な画像でも構いません。

このように、文章を読ませるための推進力として必要なのが、アイキャッチ画像です。

ブログで見かける文章の前の画像は、まさにアイキャッチ画像です。それだけ、文章を読ませるための推進力として効果的なんですね。

c.本文(☆超重要ポイント)

本文は、ホームページの中で最も重要な部分です。なぜなら、閲覧数や直帰率に最も影響を与えるからです。具体的な書き方ですが、最初に概要説明を行いましょう。場所は、アイキャッチ画像の真下あたりになると思いますが、 description に入力した内容と同一で構いません。

というのも、ほとんどの閲覧者は読むかどうかを、概要説明で決めるからです。その後は、実際の本文を書きます。基本的な文章構造は3部構成ぐらいにし、『導入部分・本文・まとめ』のような形にすればわかりやすいでしょう。記述するコツとしては、いかに読み手の疑問に答えるかです。

決して自分の主張を繰り広げるのではなく、閲覧者が何に疑問を持ち、どのような答えを望んでいるのかよく考えます。つまり本文は、閲覧者にとってのQ&Aのような内容にすれば、一番うまくまとまると思います。(もちろん見かけ上は、文章の形で構いませんよ。)

なお、行間や段落の間は「詰め過ぎず広げ過ぎず」文字サイズとの兼ね合いで、読みやすい間隔を心がけてください。このように本文は、最初に概要説明で読む価値を伝えた後、問題とその解決策を書いて閲覧者の期待に応えてください。

参考 本文の詳しい書き方については、以下のページを参考にしてください。

ホームページでアウトラインを記述する方法について説明します。読者対象は、ホームページでのアウトラインの記述方法を知りたい方です。単なる書き方ではなく、アウトラインを通じて読みやすい文章の書き方を説明しています。

d.関連ページの紹介

本文の後は、関連ページの紹介をしてください。なぜなら、本文を読み終わった後の離脱を、できるだけ防ぎたいからです。つまり、関連ページを紹介することによって、複数ページを読んでもらうようにし、閲覧者を長い時間サイトに滞在させようというわけです。

複数のページを読んでもらえれば、会社や商品の魅力が伝わりやすくなるので、購入や問い合わせを増やすことにつながります。したがって、関連ページ自体が存在しない場合はしょうがないですが、存在する場合はぜひ関連ページを紹介してください。

なお、関連ページの紹介は、本文の最終行からやや広めに間隔を取ります。なぜなら、本文と区別したいからですが、広すぎると目に留まらない可能性があるので注意してください。これで、離脱者を少しでも減らすことができるでしょう。

関連ページが無い場合は、お問い合わせページなどへ誘導するバナーやリンクを配置するのも、良い方法ですよ。

このように、メイン・エリアは4つの部分をうまく作ることで、見やすくわかりやすいものに仕上げることができます。

作り方3.サイドカラム・エリア

サイドカラムは、メイン・エリアの左または右、あるいは両脇にある縦長の部分です。このエリアは全ページに共通で表示されるので、バナー・リンク・告知・メニューなど様々なものを置きます。ポイントは3つほどありますので順を追って説明しましょう。

まず配置ですが、左・右・両方の3種類が考えられます。これらは目的に応じて使い分けます。具体的には、左はカタログ的なサイトで、右はブログ的なサイトです。なお、両方というのはおすすめしません。なぜなら、デザイン的にうるさくなるからです。

続いて内容の話です。基本的には、「重要度は低いものの無くしてしまうのはまずいなあ」というものを置いてください。なお、重要なバナーやリンクは、必ずサイドの最上部に置いてください。なぜなら、他の位置では埋もれてしまい、全くと言っていいほど目立たないからです。

もう一つお話ししておきます。サイドカラム・エリアは、無しというやり方もあります。一般的に多いのは、ランディングページです。これは、閲覧者が一切わき目を振ることなく内容に集中するよう仕向けるものです。簡単に言えば、1ページ勝負ということですね。

このようにサイドカラム・エリアは、サイトやページの特性と閲覧者の見方に合わせて、配置や使用の有無を決めるようにしましょう。これで、見やすくわかりやすいサイドカラムになるでしょう。

作り方4.共通フッター・エリア

共通フッター・エリアは、ホームページの最下部にある共通部分のことで、各ページに共通で表示する情報を入れます。ここには様々な情報を入れますが、エリアの下部にサイト名を入れるのは、ほぼすべてのサイトで共通です。つまり、ヘッダーとフッター両方に名前を入れるわけです。

それ以外の内容はサイトによって違いがあります。なぜなら、フッター・エリアだけは唯一何を発信するか決まりが無いからです。そのため、人によってはあまり力を入れない場合もあります。ところが、フッター・エリアは案外みられる部分なので、それではもったいないのです。

そこで積極的に活用してください。具体的には、自分が一番読んでほしいと思うものを発信するのです。自分が主張したいことや非常に重要な情報へのリンクなど、自由に発信してください。なお、縦に3分割すると、見やすくわかりやすい作り方ができると思います。

このように、共通フッター・エリアは自由にしてよい部分なので正解というのはありませんが、積極的に活用していただきたいと思います。ただし、自由と言ってもゴチャゴチャと詰め込まないように注意してください。大事なのは、見やすくわかりやすいフッターにすることですから。

まとめ:本文の充実を忘れないでください。

いかがでしたか?

ホームページの作り方、7つの超重要ポイントを説明しました。共通ヘッダー・エリア、メイン・エリア、パンくずリスト、アイキャッチ画像、本文、関連ページの紹介、サイドカラム・エリア、共通フッター・エリア、などの構成要素がありました。

基本的には、4エリア7か所という構成で作り込めば1ページが完成します。HTML で作るときは、テンプレートを作ってしまったほうが便利だと思います。また、WordPressを使っているときは、そのままで形ができているので、面倒なところは無いでしょう。

大事なことなので繰り返しますが、ホームページの作り方で最も重要なのは、メインエリアの本文です。なぜなら、近年のホームページは、閲覧者の問題を解決することが最大の任務だからです。構成だけをまねしても良いものにはなりませんので、本文をしっかり作り込みましょう。

メインの本文が、役に立つしっかりしたものであれば、閲覧者は見やすくわかりやすいホームページであると感じてくれます。売れる良いホームページを作るにあたって、このページを参考にしていただければ幸いです。

以上、「ホームページの作り方、7つの超重要ポイント!」と題して説明しました。