PROCESS — ホームページ制作の流れ
ホームページ制作の流れ、69の工程をすべて見せます。
ホームページ制作は、どんな流れで進むのですか？
私たちの場合、ヒアリングから公開後の運用まで、12の段階に69の工程があります。そのうちAIが主に担うものが34、人とAIで進めるものが20、人が担うものが15です。AIで速くなった部分は多くありますが、何を目指すか・誰に届けるか・公開してよいかは、人が決めています。
- 12の段階・69の工程を、担当（AI／AI×人／人）で色分けしています
- 各工程の名前を押すと、その段階の詳しい解説に移ります
- 例は架空の味噌蔵の予約サイト。業種が変われば工程も変わります
ホームページは、目に見える画面の裏側で、たくさんの工程を通ってできあがります。このページでは、私たちが実際に通している工程を、ひとつも省かずに並べました。物語で流れをつかみたい方は「ホームページの裏側」から、急ぎで全体を知りたい方はこのページからご覧ください。
12の段階
ヒアリングから公開後の運用まで、ホームページ制作は次の12の段階で進みます。
- 01
ヒアリング
事業の内容や載せたい情報に加えて、「ホームページで本当は何を変えたいのか」をうかがいます。依頼の言葉と本当の願いは、たいてい少しずれています…
AI 1AI×人 1人 35工程 - 02
調査
お客様になりそうな人が実際に検索している言葉を調べます。競合サイト3社の作り、地域や季節の動き、いまのサイトのアクセス解析の実データもあわせ…
AI 4AI×人 1人 16工程 - 03
設計
どのページをつくり、どの順番で見せ、訪れた人をどこへ案内するかを決めます。作るのは、ページの一覧とつながりを表すサイトマップです。ページごと…
AI 1AI×人 2人 25工程 - 04
取材・撮影
AIや手元の資料だけでは、どの店にも当てはまる文章しか作れないからです。私たちはお店に伺い、お店の方がふと口にした言葉を集めます。その場の空…
人 22工程 - 05
文章
下書きはAIに任せても構いませんが、私たちはそのまま載せません。AIの下書きを、取材した人が「その店にしか書けない一行」に書き直します。翻訳…
AI 1AI×人 3人 15工程 - 06
デザイン
見た目の好みより先に、そのページで誰に何をしてほしいかを基準にします。私たちはAIに配色などの候補を出してもらいます。そこから、取材で知った…
人 11工程 - 07
コーディング
デザインの完成図を、ブラウザが読めるHTMLとCSSに書き起こし、実際に動くページにしています。コードの下書きはAIが速く書きます。ただ、予…
AI 2AI×人 13工程 - 08
表示速度・端末対応
ページが開く前に戻るボタンを押されると、文章も写真も読まれないまま終わってしまうからです。私たちは、画面幅ごとの崩れの洗い出しと画像の圧縮を…
AI 33工程 - 09
検索対策の設定
ページの裏側に、検索エンジン・SNS・AIが読むための説明書きを入れます。どこで見られても、正しく伝わるように整えます。私たちが公開前に仕込…
AI 5AI×人 27工程 - 10
計測・フォーム
訪れた人の動きを記録するアクセス解析のタグを入れます。問い合わせや予約が完了した回数も、1件ずつ正しく数えられるようにします。あわせて、入力…
AI 5AI×人 16工程 - 11
公開前チェックと公開
いま動いているサイトを丸ごと保存し、別の場所にテスト用のページをつくります。そこで、中身を9つの区分で点検します。公開の直前には、事故を防ぐ…
AI 6AI×人 3人 211工程 - 12
公開後の運用
アクセスの数字を前年の同じ月と比べて読み、順位が落ちたページやタイトルを直します。広告・Googleマップ・口コミ・SNSを整え、サーバーの…
AI 6AI×人 6人 315工程
69の工程と、それぞれの担当
色は、その工程を主に誰が担うかを表します。青がAI、紫がAIと人、橙が人です。
01ヒアリング
ヒアリングを詳しく →- 01
初回のヒアリング 人
事業の内容と、いまのホームページで困っていることを、目の前で直接うかがいます。本当はどうなりたいかも、あわせてお聞きします。依頼の言葉の奥にある願いを探すのが、最初の打ち合わせの役目です。
- 02
録音の文字起こし AI
打ち合わせの録音をAIが文字に起こします。話の要点とまだ聞けていない点を整理し、聞き漏らしを防ぎます。次の打ち合わせで何を確かめるかも、これではっきりします。
- 03
事業の整理（ブリーフ） AI×人
事業の内容、来てほしいお客様、地域、ゴールを1つの文書にまとめます。下書きはAI、仕上げは人が担います。以後の作業のたびに、この文書を読み返します。
- 04
本当の課題を言葉にする 人
「新しくしたい」という依頼の奥にある本当の課題を、一文の言葉にします。味噌蔵の例では「蔵を見てもらう機会が少ないこと」が本当の課題でした。
- 05
ゴールを決めて合意する 人
何をもって成功とするかを決め、お客様と合意してブリーフに書き残します。この合意が、調査で何を調べ、設計で何を手前に置くかの基準になります。
02調査
調査を詳しく →- 06
検索される言葉の調査 AI
お客様になりそうな人が実際に打ち込んでいる言葉を、AIが集めて比べます。店側が検索されたい言葉とのずれを見つけ、ページで何を前に出すかの材料にします。
- 07
競合サイト3社の比較 AI
同じ地域や業種の競合サイトを3社選びます。構成・強み・問い合わせまでの道のりを比べます。まねるためではなく、まだ誰も言っていないことを探すための比較です。
- 08
地域・季節の動きの調査 AI
連休や行事、季節によって検索される言葉がどう動くかを調べます。味噌蔵の例では、「蔵見学 予約」の検索が冬に伸びていました。それが、見せ方を決める手がかりになりました。
- 09
アクセス解析の実データ確認 AI
いまのサイトのどのページが、どんな言葉で見られているかを実データで確かめます。あわせて計測の漏れや二重カウントがないか、測り方そのものも点検します。
- 10
対抗仮説を3つ立てる AI×人
もっともらしい説明で決めつけないよう、別の説明を当てます。方向は、自分たちの側・世の中の側・測り方の3つです。候補出しはAI、どれが残るかの判断は人が担います。
- 11
狙う人を決める 人
調査結果とヒアリングで聞いた本音を照らし合わせ、誰に向けたホームページにするかを決めます。データだけでは決めきれません。そのため、現場を知る人がお客様と一緒に判断します。
03設計
設計を詳しく →- 12
サイトマップ AI×人
ホームページにどんなページがあり、どうつながるかを1枚の地図に描きます。叩き台はAIと作ります。どのページを手前に置くかは、ヒアリングで聞いた本音をもとに人が決めます。
- 13
URLの設計 AI
ページごとの住所であるURLを、中身が分かる短い言葉で決めます。抜けや重複の確認はAIが受け持ちます。リニューアルでは、古いURLからの転送先もここで整理します。
- 14
予約までの導線 人
訪れた人を予約や問い合わせへ案内する道筋を決めます。ボタンの位置やリンクの順番、フォームの項目まで含めて考えます。迷わずゴールに着ける順番を、人が組み立てます。
- 15
ワイヤーフレーム（骨組み） AI×人
1ページごとに、見出し・写真・説明文・ボタンをどの順番で置くかを線と箱で描きます。AIが下書きし、人がスマホで迷わない順番に組み替えます。そのうえで、お客様と確認します。
- 16
ゴールまでのクリック数を数える 人
トップから予約や問い合わせまで、実際に何回クリックが必要かを数えます。味噌蔵の例では、5回かかっていた道のりを2回まで縮めました。
04取材・撮影
取材・撮影を詳しく →05文章
文章を詳しく →- 19
原稿の下書き AI
取材の議事録やブリーフをもとに、AIが原稿の下書きを作ります。速く整った文章ができます。ただし、そのまま載せず、書き直しのための材料として使います。
- 20
AIっぽさを消す書き直し 人
「伝統」「厳選素材」のような、どの店でも言える言葉を消し、取材で知った事実に置き換えます。その店にしか書けない一行にするのは、取材した人の仕事です。
- 21
翻訳調の言い回しを直す AI×人
翻訳記事のように聞こえる箇所を、AIと人で見つけて直します。主語を立てて言い切る文の連続や、否定形での説明などです。話し言葉に近い、自然な日本語にします。
- 22
誇大表現のチェック AI×人
「日本一」「必ず売れる」のような裏付けのない表現を、AIが拾い出します。人が根拠を確かめ、直すか外すかを決めます。言い過ぎは法律の面でもお店を危うくします。
- 23
見出しとキャッチコピー AI×人
店主が取材で口にした言葉を芯に、見出しとキャッチコピーを作ります。AIが候補を出し、そのお店らしく嘘のない言葉を人が選びます。
06デザイン
デザインを詳しく →- 24
デザイン 人
ページの目的に合わせて、色・写真・文字の大きさ・ボタンの位置を決めます。配色などの候補はAIが出します。お店らしさと来てほしいお客様に合うものを、人が選びます。
07コーディング
コーディングを詳しく →- 25
コーディング AI×人
デザインの完成図を、ブラウザが読めるHTMLとCSSに書き起こす作業です。AIが下書きを書きます。人はスマホで触りながら、迷わない順番や止まったときの備えを直します。
- 26
読み上げソフトへの対応 AI
写真の説明文、見出しの順番、ボタンやリンクの名前を整えます。画面を見ずに音声で聞く方にも、内容が伝わるようにします。抜けの洗い出しはAIが行います。
- 27
ブラウザごとの表示確認 AI
ブラウザや画面の幅を変えて同じページを開き、崩れやリンク切れがないかを点検します。いまのサイトには触れません。テスト用のページで確かめてから本番へ移します。
08表示速度・端末対応
表示速度・端末対応を詳しく →- 28
スマホ・タブレット対応 AI
画面の幅に合わせて、文字の大きさや要素の並びを組み替えます。指で押しやすく、横にはみ出さない表示にします。崩れの洗い出しはAIが行い、押しやすさは人が端末で確かめます。
- 29
画像の軽量化 AI
写真を表示する枠の大きさに縮め、WebPなど軽い形式に変えます。見た目を保ったまま、ファイルを小さくします。木目や色つやが残っているかは、人が見比べて判断します。
- 30
表示速度の調整 AI
画像に加えて、読み込む順番や使っていない部品の読み込みを見直します。そうして、ページが開くまでの待ち時間を短くします。公開前に測り直し、重ければ止めて直します。
09検索対策の設定
検索対策の設定を詳しく →- 31
ページタイトル AI×人
検索結果でいちばん大きく表示される一行です。来てほしいお客様が実際に使う検索語をもとに、AIが候補を出します。店の事実に合う言い回しを、人が選んで決めます。
- 32
検索結果の説明文 AI×人
検索結果でタイトルの下に並ぶ紹介文です。ページを開くと何が分かるのかを、具体的に書きます。言い過ぎや誇大な言い回しが混ざっていないかは、人が読んで確かめます。
- 33
SNSで共有されたときの見え方 AI
LINEやFacebookでページが送られたときに出る画像とタイトル（OGP）を設定します。意図しない画像が切り取られて表示されないよう、専用の画像を指定しておきます。
- 34
検索エンジン向けの店舗情報 AI
店名・住所・電話番号・営業時間などを、検索エンジンが読み取りやすい書式でページに埋め込みます。表記はサイト内やGoogleマップの情報とそろえます。
- 35
AI向けのサイト紹介文 AI
AIにたずねられたときに事業を取り違えられないよう、サイト内の説明を一貫させる作業です。AI専用のファイルを置けば順位が上がる、という考え方はとっていません。
- 36
検索エンジン向けのページ一覧 AI
サイトにあるページを一覧にして、検索エンジンに知らせる案内板です。サイトマップと呼ばれます。見覚えのないページが紛れ込んでいないかの点検にも役立ちます。
- 37
「本物のページ」の指定 AI
どれが正式なページかを、検索エンジンに伝える設定（canonical）です。同じ内容のページが、複数のアドレスで開けるときに使います。公開時に本番のアドレスを指しているかを確かめます。
10計測・フォーム
計測・フォームを詳しく →- 38
アクセス解析のタグ AI
訪れた人の数や見たページ、どこから来たかを記録する短いプログラムです。サイトの全ページに埋め込みます。入れ忘れたページがないかもAIが点検します。
- 39
問い合わせ完了の計測 AI×人
成果を1件として記録する設定です。予約ボタンが押されたときや、フォームの送信が終わったときに記録します。二重に数えていないかを、実際に送って確かめます。
- 40
予約フォーム AI
予約に本当に必要な項目だけを、スマホでも片手で入力しやすい順番に並べます。確認画面で止まらず、1回の送信で届く作りにします。
- 41
自動返信メール AI
フォームを送った人に「受け付けました」と知らせるメールです。連絡先やこのあとの流れを載せ、送った人が不安にならないようにします。
- 42
送信完了ページ AI
送信後に表示するページで、送った人への案内と、成果を数える目印を兼ねます。検索結果に出す必要がないため、検索エンジンに載せない設定にします。
- 43
迷惑メール対策 AI
機械による大量の送信を、フォームの入口で防ぎます。お店から送る自動返信が相手の迷惑メールフォルダに入らないよう、送信元の設定も整えます。
11公開前チェックと公開
公開前チェックと公開を詳しく →- 44
本番サイトのバックアップ AI
作業を始める前に、いま公開しているサイトのファイルを丸ごと保存します。途中で何かが壊れても、すぐに元の状態へ戻せるようにするためです。
- 45
影響範囲の調査 AI
変更しようとしている部分が、ほかのどのページに影響するかを先に洗い出します。共通のヘッダーや装飾の設定を変えると、思わぬページまで変わることがあるためです。
- 46
テスト環境での確認 AI×人
本番とは別の場所にテスト用のページをつくり、そこで作業と確認を進めます。テスト用ページには、検索結果に載せないための札を掛けておきます。
- 47
前からある機能が壊れていないか AI
以前から動いていた仕組みが、新しいページのせいで止まっていないかを確かめます。お問い合わせフォームや予約、買い物かごなどを、実際に動かしてみます。
- 48
公開前チェック（9区分＋8項目） AI×人
公開前に、中身を9つの区分で点検し、公開直前に事故を防ぐ8項目を確かめます。AIが全ページを自動で点検し、人が結果を見直します。
- 49
お客様の確認と修正 人
テスト用ページを実際に見ていただき、お店の方にしか分からない誤りを教えていただきます。営業時間や価格などです。直したら、もう一度確認していただきます。
- 50
公開を決める 人
テストとお客様の確認を終えたうえで、公開してよいかを人が判断します。AIの点検で問題が見つからなくても、それだけで公開に進むことはありません。
- 51
公開設定と転送の確認 AI
本番に切り替えた直後に、公開のための設定を確かめます。検索に載せない札が外れているか、SSL（鍵マーク）が有効かを見ます。古いアドレスから新しいアドレスへ転送されるかも確認します。
- 52
フォームの実送信テスト AI×人
本番のフォームから実際に送信し、お店への通知と、送った人への自動返信メールの両方が届くかを確かめます。テストで届いても、本番で届かないことがあるためです。
- 53
計測が動いているかの確認 AI
公開したページで、アクセス解析が記録を始めているかを確かめます。問い合わせの完了が1件ずつ数えられているかも見ます。ここがずれると、公開後の改善が的外れになります。
- 54
本番ページの取り直し確認 AI
「公開しました」とお伝えする前に、本番のページをもう一度読み込みます。変更が本当に反映されているかを目で確かめます。私たちが決まりにしている手順です。
12公開後の運用
公開後の運用を詳しく →- 55
月次レポート AI
訪れた人の数や問い合わせの数、検索で表示された回数などを毎月まとめます。AIが数字を集めて形にし、これまでの施策と並べて見られるようにします。
- 56
前年同月との比較 AI
毎月の数字を前年の同じ月と比べ、季節の波を差し引いて読みます。アクセスが前年より落ちたサイトは、夜のうちにAIが検知して知らせます。
- 57
順位が落ちたページの書き直し AI×人
検索順位が下がったページを見つけ、書き直します。探しに来た人の疑問に、答えきれているかを見直すのです。候補はAIが挙げ、何を書き足すかは人が決めます。
- 58
タイトル改善と90日後の効果判定 AI×人
検索結果に出るページのタイトルや説明文を見直します。改善してから90日後に、効果を判定します。短い期間で良し悪しを決めて元に戻すことはしません。
- 59
広告の運用 AI×人
広告の成果を、直近2週の実績で判定します。月に一度は、無駄にお金を使っている検索語を洗い出します。入札の候補はAIが計算し、予算と配信する曜日は人が決めます。
- 60
広告文・バナーの制作 AI×人
広告の見出しや説明文、バナーの案をAIが複数つくります。お店らしさがあるか、誇大な表現がないかを人が見て選びます。成果を見ながら差し替えも行います。
- 61
Googleマップの情報整備 AI×人
Googleマップに出る営業時間・定休日・写真などが、実際と食い違っていないかを確かめます。変更があれば更新します。地図アプリから見つけてくれる人の入口です。
- 62
口コミ返信の下書き AI
Googleマップなどに書かれた口コミを読み、内容に合わせた返信の下書きをAIがつくります。お礼やお詫びの言い回しを、人が選べる形でそろえます。
- 63
返信を送るかの判断 人
AIの下書きを、そのまま送ることはしません。書かれた内容とお店の事情を踏まえて、送るか、直すか、送らないかを人が決めます。お客様と相談して決めることもあります。
- 64
SNSの投稿 AI×人
季節の話題や新しいお知らせを、SNS向けの文面と写真に整えて投稿します。文面づくりはAIが手伝い、出してよい内容かどうかは人が確かめます。
- 65
メルマガ配信前のチェック AI
メールマガジンを配信する前に、テストで送ったメールを機械で点検します。誤字や日付と曜日の食い違い、リンクの開き先などを見て、配信後の訂正を防ぎます。
- 66
改ざん・弱点の監視 AI
月に一度、外から見えるセキュリティの弱点を点検します。見覚えのないページや改ざんの兆候がないかも見張ります。見つけたときは証拠を残して取り除きます。
- 67
AIに引用されているかの測定 AI
AIにお店のことを聞いたとき、正しい情報で紹介されるかを確かめます。あわせて、AIがサイトのどのページを読みに来ているかを夜のうちに集計します。
- 68
サーバー・ドメインの更新 人
サーバーやドメインの契約更新を人が管理します。期限を切らすと、サイトもメールも止まってしまいます。そのため機械任せにせず、期日を確かめます。
- 69
定例ミーティング 人
お客様にしか答えられないことを、聞きに行く場です。数字のご報告に加えて、繁忙期や新しい商品などをうかがいます。そこで得た話が、次に打つ手の材料になります。
この進め方が向いていない方
人が聞いて、人が決める工程を省かないぶん、急ぎの案件や「お任せ」には向きません。
AIが作ったページを、そのまま公開したい方
私たちはAIの下書きを、人が読んで直してから公開します。下書きが数分でできても、その先の確認には日数をいただきます。
確認を省いて、その日のうちに差し替えたい方
いま動いているサイトを、いきなり書き換えることはしません。まず丸ごと保存し、テスト用のページで確かめてから公開します。
打ち合わせの時間を取らずに、お任せで作ってほしい方
ホームページの中身は、お客様しか知らない言葉から始まります。ヒアリングや取材に、少しだけお時間をください。
ホームページ制作の流れについてよくある質問
ホームページ制作には、どのくらいの期間がかかりますか？
ページ数と、取材や写真・原稿など素材の準備状況で大きく変わります。そのため期間は、最初のヒアリングのあとにお伝えしています。
69の工程は、どのホームページでも全部必要ですか？
このページの69工程は、味噌蔵の予約サイトを例にしたものです。業種や目的によって、増える工程も省ける工程もあります。たとえば予約を受けないサイトなら予約フォームは要りませんし、多言語のサイトなら翻訳の工程が加わります。
AIを使えば、ホームページは早く安く作れるのではないですか？
下書きや調査、チェック作業はAIでかなり速くなりました。ただ、AIはお店の人の深い気持ちや、本当のお客様がどんな人なのかまでは汲み取れません。そこを人が埋めないと、見た目は整っていても誰にも響かないページになります。私たちは速くなった分の時間を、人にしかできない工程に回しています。
公開したあとは、何をしてもらえますか？
バックアップ、セキュリティの点検、アクセスの変化の検知などはAIの仕組みが毎日・毎月動いています。夜のうちに上がってきたことを朝に人が読み、順位が落ちたページの書き直しや、タイトル改善の効果判定などにつなげています。詳しくは「公開後の運用」のページをご覧ください。