ホームページが
できるまでの流れ。

目的と、訪問者に期待するアクションを決める

問い合わせを増やしたい、予約の手間を減らしたい、採用につなげたい、信頼を伝えたい。目的によって、必要なページも機能も変わります。あわせて、サイトを訪れた人に最後に起こしてほしいアクション（問い合わせ、予約、電話など）を、一つ決めておきます。このアクションへ誘うボタンや案内を、CTA（Call To Action：行動を促す呼びかけ）と呼びます。CTA が決まると、どのページから、どの順番で案内するかが決まります。

強みと、これからかなえたいことを書き出す

お客様に選ばれている理由、ほかと違うところ、これから力を入れたいこと。うまく言葉にならなくても、お客様からよく言われることや、仕事で大切にしていることを書き出すだけで、サイトで伝えることの芯が見えてきます。

届けたい相手（ペルソナ）を、具体的な一人で考える

誰が、どんな状況で、何を知りたくてサイトに来るのか。その代表となる一人の人物像を、ペルソナと呼びます。年齢や職業を細かく決めるより、「こういう困りごとを持った、あのお客様」と具体的な一人を思い浮かべるほうが、伝える順番や言葉を決めやすくなります。

今あるものとの役割を分ける

SNS、ポータルサイト、予約サービス、今のホームページ。すでに使っているものがあれば、ホームページに何を任せ、何をほかに任せるかを分けます。SNSで足りる場合や、既存のサービスで十分な場合もあります。

ドメイン：事業の住所を決める

ドメインは、サイトのアドレスとメールアドレスに使う、事業の住所です。名刺や印刷物にも載るため、後から変えると手間がかかります。短く、覚えやすく、事業名とつながるものを選びます。

• .jp：日本に住所がある個人・団体が登録できる。日本の事業だと伝わりやすい
• .co.jp：日本の法人だけが、1社に1つ登録できる。信頼の目印になる
• .com など：誰でも登録でき、選べる名前が多い
• 毎年の更新があり、忘れるとサイトもメールも止まる。誰の名義で、誰が期限を見守るかを決めておく

サーバー：サイトを置く場所を決める

サーバーは、サイトのファイルやデータを置き、見に来た人に届ける場所です。何を使ってサイトを作るかとの相性で選びます。

• レンタルサーバー：もっとも手軽で、一般的な選択肢。WordPress など、PHP で動くサイトの多くはレンタルサーバーで運用されている。管理の画面や自動のバックアップがそろい、始めやすい
• クラウド（AWS など）：より専門的な知識が要るが、構成を自由に決められ、柔軟性に富む。WordPress をクラウドで動かすことも、大きな仕組みを組むこともできる。その分、設計と運用を担える人が必要
• 静的サイトの配信サービス（Cloudflare Pages など）：あらかじめ作ったページを、世界中の拠点から速く配る。静的サイトと相性がよい

作り方：動的サイトと静的サイトの違いを知る

サイトの作り方は、大きく動的サイトと静的サイトに分けられます。どちらが優れているかではなく、それぞれの特徴を知り、「誰が、何を、どのくらい更新するか」で使い分けます。この違いをきちんと説明でき、サイトに合わせて使い分けられる制作会社を選ぶと、作った後に困りません。

• 動的サイト：見に来るたびに、サーバーがデータベースから内容を取り出してページを組み立てる（WordPress など）。管理画面から誰でも更新しやすく、会員や予約など、人によって表示を変える仕組みも作りやすい。その代わり、本体・プラグイン・PHP の更新と保守が欠かせない
• 静的サイト：あらかじめ全ページの HTML を作っておき、そのまま配る（Astro などで生成する）。表示が速く、攻撃される入口が少なく、保守も軽い。更新のたびにページを作り直すため、多くの人が日々更新する使い方には工夫が要る
• 使い分けの目安：お知らせや実績を自分たちで日々更新するなら動的サイト。更新が少なく、速さと安全を優先するなら静的サイト。静的サイトに更新用の管理画面（ヘッドレスCMS）を組み合わせる方法もある
• ホームページ作成サービスやネットショップのサービスを使う方法もある。早く始められる代わりに、仕様や料金はサービス側に合わせる

持ち方：名義と管理を決める

ドメイン、サーバー、管理画面、アクセス解析のアカウントを、誰の名義で持ち、誰が管理するか。契約が終わるときに何を受け取れるか。作る前に決めておくと、担当者が代わっても困りません。

サイトマップ：必要なページと、階層・導線を決める

必要なページを書き出し、階層と導線を決めます。情報があちこちに散らばらず、訪問者が迷子にならないように設計します。最初からすべてをそろえる必要はありません。公開の時に必要なページと、後から増やせるページを分けると、早く公開して、使いながら育てられます。

ページごとの役割と原稿を決める

各ページで、誰に、何を伝え、どのアクション（CTA）へつなげるか。役割が決まると、必要な原稿と写真が見えてきます。原稿は、事業のことをいちばん知っている事業者が素材を出し、制作者が読みやすく整える、という分け方がうまくいきます。

ワイヤーフレーム：配置の設計図を作る

色や飾りを付ける前に、情報の順番と配置、ボタンの位置を線と箱だけで描きます。Figma などのツールを使うと、関係者で見ながら直せます。ここで導線を固めておくと、デザインの段階で迷いません。

デザイン：ブランドと読みやすさを形にする

ロゴ、色、書体で、事業らしさを表します。今はスマートフォンで見る人が多いため、小さな画面での読みやすさ、押しやすさを先に考えます。文字と背景の色の差や、画像の代わりの文章など、誰にとっても使いやすいこと（アクセシビリティ）も、デザインの一部です。

写真と素材を用意する

いちばん伝わるのは、実際の仕事場、人、商品の写真です。フリー素材やAIで作った画像は手軽ですが、使える範囲（ライセンス）を確かめ、ほかのサイトと同じ印象にならないよう、使う場所を選びます。

ステージング：本番の前に、確かめる場所を用意する

公開中のサイト（本番）を直接さわらず、本番とほぼ同じ環境を別に用意して、作ったものや変更をそこで確かめてから公開します。この確認用の環境をステージングと呼びます。作り直しや機能の追加のときも、訪れた人に作業途中の画面を見せずに済み、問題があれば本番に出す前に直せます。

機能を作る：既存のものを使うか、個別に作るか

フォーム、予約、会員、検索などの機能は、既存のプラグインやサービスで足りるかを先に確かめます。業務に合わない部分だけを個別に作ると、費用と保守の負担を抑えられます。

公開する前に確かめる

公開してから気づくと、信頼に関わることがあります。次のような点を、一通り確かめます。

• スマートフォンとパソコンでの表示、主なブラウザでの動き
• 問い合わせフォームから、通知のメールが届くか
• 表示の速さ（画像の大きさ、読み込むファイル）
• ページごとの題名と説明文（検索結果に表示される）
• SNSで共有されたときの見え方（OGP）。リンクを貼ったときのカードに、ページごとの題名・説明・画像が正しく出るか
• 存在しないページを開いたときの表示、アクセス解析の設定

公開する（デプロイ）

ファイルをサーバーに置く方法には、FTP などで手作業でアップロードする方法と、変更を記録すると自動で組み立てて公開する仕組み（GitHub Actions など）を使う方法があります。自動にしておくと、手作業のミスが減り、いつ何を変えたかも残ります。今のサイトから移す場合は、古いページのURLから新しいURLへの転送（301）を設定し、検索からの訪問を引き継ぎます。

計測する：GA4 と Search Console

Googleアナリティクス（GA4）では、どこから来た人が、どのページを見て、問い合わせまで進んだかを見ます。Google Search Console では、どんな言葉で検索に表示され、クリックされたかを見ます。どちらも公開の時に設定し、最初の数字を残しておきます。

見つけてもらう：検索、地域、SNS

検索から来てもらうには、お客様の悩みに答えるページを増やします。地域のお客様には、Googleビジネスプロフィールが入口になります。SNSは、日々の様子や新しい情報を届け、ホームページは詳しい情報と問い合わせの受け皿にする、と役割を分けます。

更新と保守を続ける

お知らせや実績を更新し、情報を新しく保ちます。WordPress などの動的なサイトでは、本体、プラグイン、テーマ、PHP の更新と、定期的なバックアップが欠かせません。少なくとも月に一度は、更新されているかを確かめます。

数字と声から、直すところを決める

見られているのに問い合わせにつながらないページ、検索に出ているのにクリックされないページ。数字と、お客様から実際に聞かれたことを合わせて、次に直すページを一つずつ決めます。