• トップ
  • 準備が肝心!伝わるホームページ設計術

準備が肝心!伝わるホームページ設計術

公開日:2025/09/03

福岡由佳

誰でも手軽にホームページを作れる時代になりました。テンプレートやノーコードツール(※1)を使えば、専門知識がなくても見た目のよいサイトを簡単に作ることができます。

しかし、とても便利な反面、「きれいに作ったのに、なぜか反応がない」と感じている方も多いのではないでしょうか。ホームページを作ったのに、お問い合わせが来ない、見てほしい人に届かない。そんな悩みを抱えている方は少なくありません。せっかく時間や費用をかけて作ったのに、期待した効果が出ないとがっかりしてしまいますよね。

実は、ホームページの出来を左右するのは“作り始める前の準備”です。この記事では、「伝わる」ホームページを作るために、どんなステップで設計を進めていけばよいかを順を追ってご紹介します。

※1 ノーコードツールとは、プログラミングの知識がなくても、パーツを組み合わせるようにしてWebサイトやアプリを作れるサービスのことです。たとえば「Studio」や「Wix」などがその一例です。

いきなりホームページを作らない

ホームページづくりは、よく「家づくり」に例えられます。家を建てるとき、いきなり壁や屋根を作り始める人はいません。まず必要なのは、どんな家を建てるかという「設計図」です。ホームページも同じで、構成がしっかりしていないと、使いにくく、誰にも届かないサイトになってしまいます。

「とりあえず作ってみる」よりも、「どんな人に、どんな目的で、どんな情報を伝えたいか」から考えることが大切です。

家づくりにおける設計図

設計①:顧客目線を持つ ― 見る人の「目的」を考える

ホームページを作るときに、まず意識したいのが「見る人=お客さまの目的」です。

たとえば、美容室のホームページを訪れる人が知りたいのは、「どんな雰囲気のお店?」「予約方法は?」「料金は?」「スタイリストさんの得意なことは?」といった具体的な情報です。しかし、店側が「創業の歴史」や「スタッフの受賞歴」ばかりを前面に出してしまうと、見る人の関心とのズレが生じてしまいます。

つまり、事業者側の「伝えたいこと」を優先しすぎると、訪問者にとっては今すぐ必要ではない情報ばかりが目立ってしまうのです。
もちろん、伝統や実績をアピールすることが悪いわけではありません。大切なのは、「見せる情報の優先順位」です。

ホームページの役割は、訪問者の行動(美容院で例えるなら「素敵な髪型にしてくれる美容室を探している」など)をサポートする「案内役」であり、最終的には「行動してもらう」ための仕組みです。そのためには、お客様の視点を軸に構成を組み立てることが重要なのです。

とはいえ、急にお客様目線で考えると言われても難しいかもしれません。そういう場合は、ずばり「お客様に聞く」というのも有効です。気の知れたお客様がいらっしゃるようでしたら、ぜひ一度お話を聞いてみてください。直接聞くのはちょっと・・・という方は、アンケートを取る、口コミを参考にしてみるのもよいかもしれません。

設計②:メニュー構成を考える ― 見せ方・配置に 優先順位をつけよう

見せる情報の優先順位を決めたら、次に、「それらの情報をどこに置くか」を考えていきます。まずは必要なページをリストアップしましょう。
具体的にはページリストを作成するとよいでしょう。メモ帳でも手書きでも構いません。必要なページを洗い出し、一覧にしておきます。

次に、必要なページをメニューとして整理していきます 。例えば、DIGIPORTのホームページを見ると、メインメニューの他に様々なサブメニューがあります。頻繁に見られないページを配置したもの、SNSだけを集めたものなど、メニューの優先度や種類でグループにしていることがわかります 。

訪問者が最初に見る部分にはメインメニューがシンプルに配置されています

DIGIPORTのトップページ 上部のメインメニューに囲い1、右隣の問い合わせボタンに囲い2

①メインメニュー
5~7個くらいまでが理想です。多ければよいというものではないので、よく見られているページを配置しましょう。なお、よく見られているページがわからない場合は、Googleアナリティクスなどのアクセス解析ツールで確認してみましょう。

②CTAボタン
CTAはコールトゥアクションの略で、サイト訪問者に取ってほしい行動を促すボタンのことを指します。目立つように配置することが多いです。

トップページ下方にはサブメニューがあります

DIGIPORTのトップページ SNSリンクボタンに囲い3、最下部のフッターに囲い4

③SNSメニュー
SNSへのリンク集のようなイメージです。どんな発信をしているかがわかるともっとよいと思います。

④フッターメニュー
DIGIPORTの場合は、頻繁には見られないページを一番下に小さめに配置しています。これはよくあるパターンです。

メニュー配置のコツとして、最も見てほしい情報(商品・サービス紹介や料金表、お問い合わせなど)は、メインメニューに配置します。採用情報やプライバシーポリシー、利用規約など、必要だけれど頻繁に見られないページやお客様と直接かかわりのないページは、サブメニューやフッターメニューなどに入れるのが一般的です。

また、ホームページのメニューは入れ子構造にできる場合がほとんどです。メニュー数が多くなるようでしたら、グループごとにまとめて整理してみましょう。

情報が整理されていることによって、お客様はストレスなく目的の情報にたどり着くことができます。しっかりと構成を考えておきましょう。

設計③:ページごとの設計図を作る(ワイヤーフレーム)

メニュー構成が決まったら、次は各ページの中身を考えていきましょう。この段階で活用したいのが「ワイヤーフレーム」です。

ワイヤーフレームとは、ページの構成をざっくりと図にしたもの。どこにタイトルを置くか、画像はどの位置か、文章の流れはどうするかなどを、視覚的に整理できます。
難しく考える必要はありません。紙に手書きでも十分です。ページを開いたとき、どの情報から見せていくかを考えながら作ることで、伝わりやすく、行動しやすいページになります。

以下を参考に作ってみましょう。

ページの移動も考慮して手書きで書いている図

追加したい要素を紙で作り、ブロックのように並べるのもよいですよ

何度でも納得がいくまで試行錯誤してみてください。

もしメニュー構成やページ構成に迷ったら、自分がよいと思う他者ホームページを参考にしてみるのもよいでしょう。かっこいい、キレイ、という基準ではなく、「このお店に行ってみたいな」というように、「興味をひかれたか」という基準で見るようにします。そして、よいなと思った部分をメモするなどしてストックしておきましょう。その際は「なぜよいと思ったのか?」を記しておくことが大切です。

設計④:原稿を作る ― 誰にでもわかりやすい言葉で書く

設計図ができたら、文章を作っていきます。ここで意識したいのが、「専門用語を使わず、やさしい言葉で書く」ことです。

たとえば、マーケティング用語を例にすると、「リスティング広告」や「UI/UX」などの言葉は業界では当たり前でも、初めてマーケティングに取り組む人にはなかなか伝わりません。普段意識せずに使っている言葉や、このくらいは誰でも知っているだろう、といった先入観を捨て、何も知らない人に伝えるつもりで書くことを意識してみてください。

難しい言葉を使うよりも、「どんなメリットがあるのか」「お客さまにとってどんな良いことがあるのか」を、具体的に、シンプルに伝えることが大切です。

設計⑤:素材を用意する ― 写真・イラスト・アイコンなど

ホームページには、文字だけでなく画像やイラストも欠かせません。これらの「素材」は、視覚的な印象を大きく左右します。

使う写真は、なるべく実際の雰囲気が伝わるものが理想です。スマートフォンで撮影したものでも、光や構図に気をつければ十分伝わる写真になります。

イラストやアイコンは、無料で使えるサイトも多くありますが、サービスの内容や雰囲気に合ったものを選ぶことが大切です。なお、商用利用可能な素材を選ぶようにしてください。

いよいよ、ホームページを作成!

ここまでの準備が整えば、いよいよホームページの作成に取りかかる段階です。

最初にお伝えしたように、最近は「ノーコードツール」と呼ばれる、専門知識がなくてもホームページを作れるサービスが増えています。たとえば「STUDIO」「Wix」「ペライチ」などがその例です。手軽に作成できますので、まずはチャレンジしてみるのもよいでしょう。

一方で、細かいカスタマイズや独自のデザインが必要な場合は、制作会社に依頼するのも選択肢です。

どちらにしても、事前の準備ができていれば、「何を載せるか」「どう見せるか」で迷うことはほとんどありません。

まとめ

ホームページは「作り始める前」が一番大事です。しっかりと設計し、伝える相手と目的を明確にすることで、見る人にとって使いやすく、伝わりやすいホームページが完成します。

慌てて作り始めず、まずは準備から始めてみましょう。それが、成果につながる第一歩です!

コラムニストプロフィール

ITコーディネータ

福岡 由佳(ふくおか・ゆか)

短大卒業後、都市銀行、商社系証券会社、投資顧問会社を経てリーマンショックを機にキャリアチェンジ。2013年にホームページ制作業として開業し、その後中小企業の戦略立案、マーケティング支援、営業支援へと領域を拡大。
バックオフィス業務に精通していることから、ITを活用した業務改善も支援。2025年に株式会社SHI-KOUを設立し、企業の成長を支える仕組みづくりを本格化。マーケティングと業務改善の両面から利益向上につながる支援を行っている。
中小企業の社長が安心してデジタル化を進められるよう、経営の伴走者として日々尽力しています。
https://shi-kou.works/