ホームページ構成のコツは2つ！オリジナル要素付加のポイントも解説

ホームページの構成は、ユーザーに情報を伝えやすくするために必須の要素です。

自分が発信したい情報も、ホームページの構成を間違えると、ユーザーがたどり着けない可能性があります。

結果的に、ユーザーに対して情報が伝わらないこともあるでしょう。

今回は、ホームページ構成のコツを解説します。

ホームページ構成の5ステップも、あわせて参考になさってください。

ホームページ構成前にチェック！2つの事前準備とは？

ホームページ構成前にすべき、以下2つの事前準備について解説します。

• ホームページを構成する目的を決める
• ホームページ構成前にリサーチを行う

いずれも、ホームページを運営するうえで大切な内容です。

ホームページの構成を考える前に、必ず準備しておきましょう。

事前準備1.ホームページを構成する目的を決める

ホームページと言っても、様々な種類があります。

おもな例としては、以下の4つです。

• 商品販売（EC）サイト：商品をインターネット上で販売する
• コーポレートサイト：企業の紹介を行う
• 人材採用サイト：自社スタッフの募集を行う
• サービス紹介サイト：自社サービスを紹介し、利用につなげる

「ホームページとは？基礎や種類の違いを初心者にわかりやすく解説」にも掲載している通り、ホームページの目的がはっきりしなければ、発進する情報の統一性が失われてしまいます。

その結果、ユーザーの混乱を招き、ホームページ作成による効果を発揮できないことも。

ホームページによる情報発信によって「ユーザーにどんな行動をしてもらいたいのか」という点を、決めておく必要があります。

事前準備2.ホームページ構成前にリサーチを行う

ホームページによる集客・販売・人材採用を、よりスムーズに行うために、ユーザーが何を求めているかをリサーチします。

よく使われるのは「3C分析」です。

分析が済んだところで、さらに深掘りしましょう。

深掘りに必要なポイントは以下の4つです。

1. ユーザーの悩み・不安の解決策とは？
2. ユーザーが求める商品・サービス像とは？
3. ユーザーが求める商品・サービスは実現できるのか？
4. ライバルよりも高い価値を提供できるのか？

分析した内容をもとに、さらに深掘りすると、ホームページでどんな情報を発信するのかが明確化されます。

すると、ホームページの内容を洗い出しにつながり、より見やすい構成作りが可能です。

ホームページは2階層にとどめるのが構成のコツ！

ホームページの階層は、複雑化してはいけません。

なぜなら、ホームページ階層の複雑化は、求める情報を引き出すのに時間がかかってしまうため。

理想は、トップページから目的のページまで、3クリック以内と言われています。

それ以上かかった場合、ユーザー離脱の原因になりかねませんので注意しましょう。

ホームページ1階層は「トップページ」向けに構成

トップページは「ユーザーの悩みを解決できるのは、この製品・サービスです」と、アピールする階層にしましょう。

製品・サービスが、ユーザーの悩みを解決できる理由とともに掲載すると、より効果的です。

ここで注意すべきなのが、内容を充実させすぎること。

トップページの内容が濃すぎると、商品・サービスの申し込み前に、ユーザーが疲れてしまいます。

ユーザーに伝えるべき内容が多い場合、掲載する情報の洗い出しを再度行い、整理してみるのがおすすめです。

ホームページ2階層は「その他情報」向けに構成

トップページに掲載しきれなかった情報は、2階層に掲載しましょう。

具体的には、お店のプロフィール・情報の裏付けなどです。

たとえば、オーガニック商品を販売する場合。

トップページには、オーガニック認証を受けていることを掲載します。

しかし中には「オーガニック認証ができる機関は信用できるの？」と感じるユーザーがいるかもしれません。

そこで2階層では、オーガニック認証機関OCCについて解説しましょう。

ユーザーが、オーガニック認証機関が公的であるとわかれば、商品に対する信頼度が上昇します。

結果、ユーザーの購買意欲アップにつながります。

このように、トップページの内容を補い、商品・サービスの購買意欲を高めるのが2階層の役割です。

ホームページ構成図に活用可能、5つのステップとは？

ホームページのトップページは、商品・サービスを紹介する最も大切なポイントです。

ホームページ構成図を作成する際にも活用できる、5つのステップを解説します。

ステップ1.「悩みを解決可能」と伝えるホームページ構成要素を追加

ユーザーが最初に知りたい情報は「自分の悩みや不安を解消できるか」です。

そのため、悩みを解決できる、という内容の構成要素は最初に追加しましょう。

たとえば、ダイエッター向けのパンを販売したときの例文です。

• カロリーを気にせずパンを楽しめる
• 当社のパンは5個で通常のパン1個ぶんのカロリー

上記のような内容を追加すると、トップページを見たユーザーは「もっと内容を見てみたい」と思うのではないでしょうか。

最初に追加する構成要素は、ホームページを訪れたユーザーの、読み進めたいという気持ちを与える役割を果たします・

ステップ2.「悩みに共感」できるホームページ構成要素を追加

次に、悩みの理解者が製品・サービスを提供していることを伝えましょう。

「私も昔は〇〇で悩んでいました」といった、ストーリー仕立ての文言を目にした経験のある方も多いと思います。

ここで追加する構成要素は、ユーザーと同じ悩みを経験し、だからこそ悩みを解決できるとアピールする場です。

ユーザーに共感すると、製品・サービスに対する信頼度がアップします。

ユーザーが「自分の悩みに寄り添ってくれる製品・サービス」と感じれば、きっと解決方法を知りたくなります。

ステップ3.「悩みの解決方法」を示すホームページ構成要素を追加

次は、具体的な悩みの解決方法を示します。

事例を紹介しつつ、ビフォーアフターの写真を一緒に掲載すると、より効果的です。

ただし、事例の紹介しすぎには気を付けてください。

商品・サービスの魅力を紹介したい気持ちはわかりますが、ここでは代表的な事例を2つ程度紹介するのがポイント。

ユーザーニーズを、さらに深掘りした事例については、2階層で紹介しましょう。

トップページがすっきりとして、ユーザーのページ離れを予防できます。

ステップ4.「悩み解決後の未来」を見せるホームページ構成要素を追加

悩みを解決した後、自分の未来がどう変わるのかについて掲載しましょう。

たとえば、シャーペンを買い替えたいユーザーの場合です。

このユーザーは、きっとシャーペンを使っている自分を想像しているはず。

使いやすいシャーペンは、文字をきれいに書きやすいかもしれませんし、疲れにくいかもしれません。

そういった、具体的な将来像を掲載してください。

商品・サービスを使っている自分を、想像するのは楽しいものです。

ただし、ここでも深追いに要注意。

詳細な未来像の例は、2階層で紹介しましょう。

ステップ5.「申し込みボタン」をホームページ構成要素に追加

申し込みボタンの設置位置は、トップページの最下部だけではありません。

紹介する商品・サービスにもよりますが、構成要素ごとに設置する場合もあります。

競合相手を参考にしながら、適切な位置に申し込みボタンを設置しましょう。

同時に、申し込みボタンから進んだ先にもひと工夫しておくのがポイントです。

郵便番号からの住所自動検索や、クリックですぐに電話をかけられるようにする機能を追加。

出来る限りユーザーの手間をはぶいて、購入しやすい環境にしましょう。

会社案内やプライバシーポリシーなど、安心感を与えるページを準備すると、より効果的です。

ホームページ構成にオリジナル要素が欲しい！3つの方法を解説

商品・サービスの販売には、たいていの場合、競合相手の存在がつきまといます。

そこで「ホームページにオリジナリティを持たせたい」と感じる方も多いのではないでしょうか。

ホームページに、オリジナリティ要素を加える3つの方法を紹介します。

方法1.テンプレートをもとにオリジナル要素を構成

近年では、ホームページのテンプレートサービスが増えています。

テンプレートサービスの詳細については「ホームページテンプレート12選！商用無料やWordPress用も」で紹介した通りです。

ホームページ初心者でも、簡単にオリジナリティ要素を加えられます。

方法2.CMSホームページ作成でオリジナル構成

CMSとは、専門知識が不要で、簡単にホームページを作成できる仕組みです。

中でも「WorPress」は使いやすく、広く親しまれているツール。

詳しくは「WordPressでホームページができる？無料で作る方法を解説」で解説しています。

方法3.HTMLホームページで完全オリジナル構成作成

HTMLとは、ホームページを構成するためのプログラミング言語の1つです。

完全オリジナルのホームページを作成できますが、ある程度の専門知識が必要です。

本格的に学びたい場合は「Webデザインスクールはどうやって選べばいい？｜受講内容やおすすめのスクールも紹介」を参考にしてみてください。

ホームページの構成作成・デザインを学ぶには

今回は、以下3つのポイントをお伝えしました。

• ホームページ構成前に、準備は万端にしておくべき
• ホームページは2階層で構成すべき
• ホームページのトップページは5つの構成要素で作成できる

しかし、オリジナリティ要素を加えるとなると、初心者には難しいでしょう。

人材育成スクール「Chapter Two」では、Webデザインを中心とした講座を準備しております。

気になる方は、お問い合わせから、無料説明会へとお申込みください。