Webサイト制作の流れと進め方～企画立案から公開までの5ステップ

Webサイト制作では、デザインや実装だけでなく、目的の整理、情報設計、UX、アクセシビリティ、公開後の運用までを一貫して考えることが大切です。見た目を整えるだけでなく、ユーザーが必要な情報にたどり着き、次の行動へ進みやすい状態を設計することが、Webサイト制作の重要な役割です。

この記事は、UXデザインの設計力と、ブランド構築支援の表現力の高さを強みにするWeb制作会社株式会社デパートがまとめました。企画立案から公開までの5つのステップをもとに、各工程で決めること、確認すべきこと、制作を進めるうえで注意したいポイントを解説します。

Webサイト制作の流れ

Webサイト制作は、大きく分けて5つのステップで進みます。

この5ステップは、単に順番に作業を進めるための工程ではありません。前の工程で決めた内容が、次の工程の判断基準になります。

たとえば、プロジェクト企画で目的やターゲットが曖昧なままだと、サイト設計やデザイン制作の段階で判断がぶれやすくなります。反対に、最初の段階で目的、ゴール、ターゲット、コンセプトを整理できていれば、各工程で迷ったときの判断軸になります。

また、Webサイトは公開することだけが目的ではありません。問い合わせ、資料請求、採用応募、認知拡大、情報発信など、目的に応じた成果につなげるには、制作フローに沿って進めながら、SEO、LLMO、アクセシビリティ、公開後の運用もあわせて考えることが大切です。

まずは、Webサイト制作の5つのステップを順番に見ていきましょう。

STEP1：プロジェクト企画

「Webサイトを作りたい」という理由だけで、企業がWebサイト制作を進めることはほとんどありません。新しいサービスを伝えたい、問い合わせを増やしたい、採用応募を増やしたい、ブランドの見せ方を整えたいなど、背景には何らかの目的があります。

ただし、関係する部署や担当者が多い場合、目的が複数に分かれたり、優先順位が曖昧になったりすることがあります。プロジェクト企画では、まず関係者へのヒアリングや調整を行い、Webサイト制作の目的を明確にします。

1. Web制作をする目的を決める

最初に、何のためにWebサイトを制作するのかを明確にします。

たとえば、サービスサイトであれば「問い合わせを増やす」「サービスの認知度を高める」「導入検討時に必要な情報を整理する」といった目的が考えられます。採用サイトであれば「応募数を増やす」「ミスマッチを減らす」「会社の雰囲気や働き方を伝える」などが目的になります。

• 目的が曖昧なままだと、ページ構成やデザイン、コンテンツの判断基準も曖昧になります。*まずは、今回のWebサイト制作で最も重視する目的を整理しましょう。

複数の目的がある場合は、優先順位を決めることも大切です。

• 問い合わせを増やしたい

• 採用応募を増やしたい

• サービス内容をわかりやすく伝えたい

• 会社やブランドの印象を整えたい

• 更新しやすいサイトにしたい

• 検索エンジンや生成AIにも伝わりやすい情報構造にしたい

すべてを同じ優先度で扱うと、制作範囲が広がりすぎます。目的ごとに優先順位を決めることで、必要なページや機能を整理しやすくなります。

2. ゴールを決める

Webサイトを作った後のことも、企画段階で考えておく必要があります。

目的が達成できているかを判断するためには、ゴールや評価指標を決めておきましょう。たとえば、問い合わせ獲得が目的であれば、問い合わせ数、フォーム到達数、資料ダウンロード数などが指標になります。採用目的であれば、応募数だけでなく、募集要項ページの閲覧数や応募フォームへの遷移数も確認できます。

ゴールを決めるときは、抽象的な表現で終わらせないことが大切です。

悪い例：

• もっと見られるサイトにしたい

• 問い合わせを増やしたい

• 採用に強いサイトにしたい

良い例：

• サービスページから問い合わせフォームへの遷移を増やす

• 指名検索以外の検索流入を増やす

• 採用ページから応募フォームへの遷移を増やす

• 実績ページを営業資料として活用できる状態にする

どの数値や状態を見れば達成度を評価できるのかが決まっていると、公開後の改善施策も検討しやすくなります。

3. ターゲットを決める

次に、Webサイトを利用するメインのターゲットユーザーを決めます。

ターゲットは「20代女性」「中小企業の担当者」のように大まかに設定するだけでは不十分な場合があります。同じ年齢や職種でも、抱えている課題、情報収集の方法、意思決定に関わる範囲は異なるためです。

ターゲットを整理するときは、次のような項目を確認します。

• どのような立場の人が見るのか

• 何を知りたくてサイトに訪れるのか

• どの段階で比較検討しているのか

• どのような情報があれば次の行動に進みやすいのか

• 社内で誰に共有する可能性があるのか

ペルソナを設定する場合も、細かく作ること自体が目的ではありません。関係者が同じユーザー像を共有し、コンテンツやデザインの判断をしやすくするために活用します。

ターゲットが決まると、必要な情報の優先順位も変わります。初めてサービスを知るユーザー向けであれば、基本的な説明や導入メリットが必要です。すでに比較検討しているユーザー向けであれば、実績、費用感、進め方、よくある質問などが重要になります。

4. 調査・分析を行う

目的・ゴール・ターゲットを整理したら、調査・分析を行います。

調査では、ターゲットユーザーに対してどのようなコミュニケーションを行うべきかを考えます。既存サイトがある場合は、アクセス解析や問い合わせ状況、検索キーワード、よく見られているページなども確認します。

たとえば、次のような情報を集めると、企画の精度を高めやすくなります。

• 既存サイトのアクセス状況

• 問い合わせにつながっているページ

• 離脱が多いページ

• 検索流入があるキーワード

• 競合サイトのコンテンツや導線

• 業界や市場の動向

• 広告、SNS、検索エンジンなどのオンライン施策

• 店頭、営業資料、展示会、業界紙などのオフライン施策

調査で大切なのは、情報を集めるだけで終わらせないことです。集めた情報をもとに、どのページを強化するのか、どの導線を見直すのか、どのコンテンツが不足しているのかを整理します。

たとえば、アクセスはあるのに問い合わせにつながっていないページがある場合、本文の内容だけでなく、CTAの位置、関連ページへのリンク、フォームまでの導線も確認する必要があります。

5. Webサイトのコンセプトを決定する

目的、ゴール、ターゲット、調査結果をもとに、Webサイトがどのような役割を持つのかを整理し、コンセプトを決定します。

ここでいうコンセプトは、見た目の方向性だけではありません。誰に対して、どのような価値を伝え、どのような行動につなげるのかをまとめた、プロジェクト全体の基本方針です。

コンセプトは、以降のサイト設計、コンテンツ企画、デザイン、実装の判断軸になります。

たとえば、同じコーポレートサイトでも、次のように方向性が変わります。

• 採用を強化するために、働く人や文化を伝えるサイト

• 営業活動を支援するために、サービスと実績を整理するサイト

• ブランド刷新に合わせて、企業の姿勢や価値観を伝えるサイト

• 情報発信を強化するために、ナレッジ記事や事例を活用するサイト

後の工程に進んでからコンセプトが変わると、サイト構造やデザインの見直しが必要になり、大きな手戻りにつながります。企画段階で関係者の認識をすり合わせ、合意形成しておくことが重要です。

STEP2：Webサイト設計

企画の内容が決まったら、Webサイトの設計を行います。

Webサイト設計では、ユーザーがどのような順番で情報を理解し、どのように目的の行動へ進むのかを整理します。ここでの設計が曖昧だと、デザインや実装が整っていても、ユーザーにとって使いにくいサイトになることがあります。

1. UXデザイン

UXとは、User Experienceの略で、ユーザーが商品やサービス、Webサイトに触れる中で得る体験を指します。

Webサイト制作におけるUXデザインでは、ターゲットユーザーがどのような状況でサイトを訪れ、どの情報を見て、どのように理解し、次の行動へ進むのかを設計します。

たとえば、問い合わせを目的としたサービスサイトであれば、ユーザーは次のような流れで情報を確認することが多くなります。

• 自社の課題に合うサービスか知りたい

• 具体的に何を支援してくれるのか知りたい

• 実績や事例を確認したい

• 費用や進め方のイメージを知りたい

• 相談前に何を準備すればよいか知りたい

このような検討の流れを踏まえて、どのタイミングで、どのコンテンツを、どの順番で見せるのかを考えます。

カスタマージャーニーマップやユーザーシナリオなどのフレームワークを使うと、ユーザーの行動や感情を整理しやすくなります。ただし、フレームワークを作ること自体が目的にならないように注意が必要です。最終的には、ページ構成や導線に反映できる判断材料にすることが大切です。

2. コンテンツ企画

UXデザインの方針をもとに、どのようなコンテンツを提供すべきかを考えます。

コンテンツ企画では、サイト運営者が伝えたいことと、ユーザーが知りたいことをすり合わせる必要があります。企業側が伝えたい情報だけを並べると、ユーザーが比較検討に必要な情報へたどり着きにくくなることがあります。

たとえば、サービスページでは次のような情報が必要になることがあります。

• サービスの概要

• 対応できる課題

• 支援内容

• 進め方

• 実績・事例

• 費用や期間の考え方

• よくある質問

• 問い合わせ前に整理しておきたいこと

関係者へのヒアリングや既存資料の確認も重要です。営業資料、会社案内、提案資料、採用資料などに分散している情報を整理し、Webサイト上でどのように見せるかを検討します。

また、コンテンツ企画では、ユーザーにとって必要な情報を整理するだけでなく、検索エンジンや生成AIにも内容が伝わりやすい構成にしておくことが大切です。詳しくは「Webサイト制作の効果を高めるために意識したいこと」で解説します。

3. サイト構造の設計

サイト構造の設計とは、コンテンツをどのように分類し、どのページからどのページへ移動できるようにするかを決める工程です。

Webサイトは、トップページだけが入口ではありません。検索エンジン、SNS、広告、外部リンクなど、さまざまな経路から個別ページに流入します。そのため、どのページから入っても必要な情報へ移動できる構造が必要です。

サイト構造の設計では、次のような作業を行います。

1. コンテンツのまとまりを体系化する

2. コンテンツごとの関連性を明確にする

3. ターゲットユーザーが移動しやすいナビゲーションを設計する

4. コンテンツを正しく整理するラベリングを行う

5. 必要に応じて内部リンクや関連コンテンツの導線を設計する

同じカテゴリのコンテンツが別々の場所に散らばっていると、ユーザーは必要な情報を見つけにくくなります。また、ページ同士の関係が整理されていないと、検索エンジンや生成AIにもサイト全体の構造が伝わりにくくなります。

アウトプットとしては、サイトストラクチャ、サイトマップ、ナビゲーション設計などを作成します。サイトが複数にまたがる場合は、ドメインやサブディレクトリ、サービスサイトとの関係も含めて検討します。

4. ページ構造の設計・ワイヤーフレームの制作

サイトマップをもとに、各ページの構造を設計します。この工程で作成する画面設計図が、ワイヤーフレームです。

ワイヤーフレームでは、ページごとに次のような内容を定義します。

• どの情報を掲載するか

• どの順番で見せるか

• どの要素を強調するか

• どこにCTAを配置するか

• 関連ページへどのように誘導するか

• フォームやボタンなどの機能要素をどう配置するか

ワイヤーフレームは、デザイン前に情報構成を確認するための重要な資料です。色や装飾の完成度よりも、情報の優先順位や導線が目的に合っているかを確認します。

ワイヤーフレームには、配置の意図も添えておくと関係者の認識を合わせやすくなります。たとえば、「ここではサービスの特徴より先に課題を提示する」「このCTAは資料請求ではなく相談導線を優先する」といった意図があると、デザイン制作や原稿確認も進めやすくなります。

5. システムの設計

サイト構造やページ構成が見えてきたら、どのようなシステムを導入するかを検討します。

更新が多い箇所にはCMSを導入するのか、問い合わせフォームはどのように管理するのか、検索や絞り込み機能が必要なのか、外部サービスと連携するのかなど、サイトの目的や運用体制に合わせて判断します。

システム設計で確認したいポイントは次の通りです。

• 必要な要件を満たせるか

• 構築予算内で実装できるか

• セキュリティ要件を満たせるか

• 更新担当者が運用しやすいか

• 将来的な拡張に対応しやすいか

• 保守やメンテナンスの体制を組めるか

• 外部サービスとの連携が必要か

たとえば、WordPressなどのCMSを使う場合でも、どのページを管理画面から更新できるようにするのか、入力項目をどこまで分けるのかによって、公開後の運用しやすさが変わります。

システムは導入すること自体が目的ではありません。誰が、どの頻度で、どの情報を更新するのかを踏まえて設計することが重要です。

STEP3：デザイン制作

Webサイトの設計が完了したら、デザイン制作に入ります。

ここで注意したいのは、デザインは感覚やセンスだけで作るものではないということです。Webサイトの目的、ターゲット、コンテンツ、導線を踏まえたうえで、情報設計に適したビジュアルへ落とし込むことがデザイン制作の役割です。

1. デザインコンセプトの設計

デザインコンセプトは、プロジェクト内で共通認識を持ち、主観的な好みだけに左右されずにデザインを判断するための基準です。

商品やサービスのコンセプト、ターゲット、コミュニケーション設計をもとに、ユーザーにどのような印象を持ってもらうべきかを言語化します。

デザインコンセプト設計で整理するものには、次のような項目があります。

• デザインの方向性をまとめたテキスト

• メインカラーやサブカラーのルール

• フォントのルール

• 写真やイラストなど素材の方向性

• レイアウトの基本ルール

• ボタンや見出しなど共通パーツのルール

• 余白やトーンの考え方

デザインの良し悪しを判断するときに、単に「好き」「好みではない」で判断すると、関係者の意見が分かれやすくなります。目的やターゲットに対して適切かどうかを確認できるように、コンセプトを共有しておくことが大切です。

必要に応じて、イメージボードや参考サイトを使いながら、目指す方向性を視覚的に共有します。言葉だけでは伝わりにくい印象も、具体的なビジュアルを使うことで認識を合わせやすくなります。

2. 素材を準備する

デザインコンセプトに沿って、Webサイトで使用する画像、テキスト、イラスト、動画、図版などの素材を準備します。

既存の営業資料、社内資料、会社案内、写真などを活用できる場合もありますが、そのままWebサイトに使えるとは限りません。掲載目的やページ構成に合わせて、文章の調整、画像の選定、図版の作成が必要になることがあります。

素材準備では、次の点を確認しておきましょう。

• 既存素材を使用するのか、新しく撮影・制作するのか

• 原稿は自社で作成するのか、制作会社が支援するのか

• 写真やイラストの権利関係に問題がないか

• ロゴやブランドガイドラインがあるか

• 実績や事例として掲載できる情報があるか

• 社内確認が必要な素材はどれか

素材の準備が遅れると、デザイン制作や実装にも影響します。特に写真撮影やインタビュー、実績掲載の許諾などは時間がかかることがあるため、早めに準備を進めることが大切です。

また、素材の著作権や利用範囲の確認も忘れないようにしましょう。無断転載や権利関係が不明な素材の使用は避ける必要があります。

3. デザインカンプの制作

素材の準備ができたら、各ページのデザインを進めます。できあがった画面デザインは、一般的にデザインカンプと呼ばれます。

デザインカンプでは、ワイヤーフレームで整理した情報構造をもとに、色、文字、写真、余白、パーツ、導線などを具体的なビジュアルに落とし込みます。

確認時には、見た目の印象だけでなく、次の点も確認しましょう。

• 目的やターゲットに合っているか

• 重要な情報が目立つ位置にあるか

• CTAがわかりやすいか

• スマートフォン表示でも読みやすいか

• 文字サイズやコントラストに問題がないか

• 更新時にデザインが崩れにくいか

• 実装可能な表現になっているか

デザイン制作時の注意

デザイン制作で起こりやすいトラブルのひとつが、実現が難しい機能や運用しにくい表現がデザインに含まれていることです。

たとえば、見た目としては魅力的でも、CMSで更新しにくいレイアウトや、スマートフォンで操作しにくいUIになっている場合があります。また、アニメーションやインタラクションが多すぎると、表示速度やアクセシビリティに影響することもあります。

デザインを確認するときは、ビジュアルの完成度だけでなく、実装したときに問題がないか、公開後に更新しやすいかも合わせて確認しましょう。

Webサイト制作・リニューアルをご検討の方は株式会社デパートまで、お気軽にお問い合わせください。

STEP4：実装・システム開発、コーディング

デザインカンプができたら、Webサイトとして機能するように、システムの実装とブラウザで表示するための構築を行います。

この作業は、システム開発、コーディング、マークアップなどと呼ばれます。実装には、ユーザーの目に見える部分を構築するフロントエンドと、サーバー側で動く仕組みを構築するバックエンドがあります。

それぞれの担当領域を理解しておくと、どの機能を誰が確認するのか、どの段階で仕様を固めるべきかがわかりやすくなります。

1. フロントエンド

フロントエンドは、デザインカンプをもとに、Webブラウザ上で見られるページとして構築する工程です。

主にHTML、CSS、JavaScriptなどを使い、テキスト、画像、装飾、レイアウト、動きなどを実装します。ユーザーが直接見る部分や操作する部分に関わるため、見た目の再現性だけでなく、使いやすさや表示速度も重要です。

フロントエンド実装で確認したいポイントは次の通りです。

• デザイン通りに表示されているか

• スマートフォンやタブレットで崩れていないか

• ボタンやリンクが操作しやすいか

• フォーム入力がしやすいか

• 画像や動画が適切に表示されているか

• 表示速度に大きな問題がないか

• アクセシビリティ上の大きな問題がないか

特にスマートフォンでの閲覧が多いサイトでは、PCデザインだけでなく、スマートフォンでの読みやすさや操作性を重視する必要があります。

2. バックエンド構築（サーバーサイド構築）

バックエンドは、サーバー側で動くプログラムや仕組みを構築する工程です。

ユーザーからは見えにくい部分ですが、CMS、問い合わせフォーム、予約システム、会員機能、検索機能、データベース連携など、Webサイトの機能面を支える重要な領域です。

よく使われる仕組みとしては、WordPressなどのCMSや、ECサイト構築で使われるパッケージシステムがあります。独自の機能が必要な場合は、要件に合わせてシステムを開発することもあります。

バックエンド構築では、次の点を確認します。

• 必要な機能が仕様通りに動くか

• 管理画面が更新しやすいか

• フォーム送信や通知が正しく動くか

• セキュリティ上の問題がないか

• データの保存・管理方法に問題がないか

• 将来的な拡張や保守に対応できるか

また、バックエンド領域では、Webサイトを公開するためのサーバー設計やドメイン設定など、インフラの準備も関係します。

サーバー設定とは？

サーバーとは、Webサイトのデータを保管し、ユーザーからのアクセスに応じて情報を配信するための環境です。

サーバーを利用するには、OSやミドルウェアの設定、セキュリティ設定、必要なソフトウェアの準備などを行います。利用するサーバーやクラウドサービスによって、設定内容や管理範囲は変わります。

主な作業としては、次のようなものがあります。

• サーバーの選定と契約

• OSやミドルウェアの設定

• SSL設定

• セキュリティ設定

• バックアップ設定

• 必要に応じたロードバランサーやCDNの設定

• 監視やログ管理の設定

具体的な作業内容は契約するサーバーやクラウド環境によって異なります。制作会社やエンジニアと確認しながら、サイトの規模や運用方針に合った構成を検討しましょう。

ドメイン設定とは？

ドメインとは、WebサイトにアクセスするためのURLに使われる文字列です。たとえば、企業サイトで使われる「example.co.jp」や「example.com」のようなものがドメインです。

Webサイトのデータはサーバー上にありますが、ユーザーがわかりやすいURLでアクセスできるようにするためには、ドメインとサーバーを紐づける必要があります。この設定がドメイン設定です。

主な作業としては、次のようなものがあります。

• ドメインの選定・契約

• DNS設定

• サーバーとの紐づけ

• SSL証明書の設定

• メール利用がある場合の関連設定

ドメインは企業の資産でもあるため、契約主体や管理権限を事前に確認しておくことが大切です。制作会社に管理を依頼する場合でも、自社で所有状況を把握できるようにしておくと安心です。

3. テスト

フロントエンドやバックエンドの実装が完了したら、テストを行います。この工程は、動作検証やデバッグとも呼ばれます。

ユーザーがWebサイトを見る環境はさまざまです。PC、スマートフォン、タブレット、Chrome、Safari、Edgeなど、利用環境によって表示や動作が異なる場合があります。そのため、公開前に複数の環境で確認することが重要です。

テストでは、次のような項目を確認します。

• ページが正しく表示されるか

• レイアウトが崩れていないか

• リンク切れがないか

• フォームが正しく送信されるか

• 自動返信メールや通知メールが届くか

• CMSで更新できるか

• 検索や絞り込みなどの機能が動くか

• 主要ブラウザで表示に問題がないか

• スマートフォンで操作しやすいか

• titleやdescriptionが設定されているか

• 計測タグが正しく入っているか

• アクセシビリティ上の大きな問題がないか

修正点が一つもなくリリースできることは多くありません。あらかじめテストと修正の期間をスケジュールに含めておくことが、スムーズな公開につながります。

また、実装前に対応ブラウザや対象デバイスを決めておくことも大切です。どの環境で動作を担保するのかが曖昧だと、公開前の確認範囲が広がりすぎることがあります。

STEP5：リリース

テストで問題がなければ、リリース作業を行います。

リリースは、完成したWebサイトを実際にユーザーが閲覧できる状態にする工程です。ドメインやサーバーの切り替え、公開設定、リダイレクト、SSL、計測タグなど、確認すべき作業が複数あります。

リリース当日は、ディレクター、デザイナー、エンジニアなど、関係者が対応できる体制を整えておくと安心です。万全に準備していても、公開後に予想外の表示崩れや設定ミスが見つかることがあります。

リリース時の確認項目

リリース時には、次の点を確認しましょう。

• 公開URLで正しく表示されるか

• 旧URLからのリダイレクトが設定されているか

• フォーム送信ができるか

• SSL設定に問題がないか

• 主要ページにアクセスできるか

• 計測タグが動作しているか

• robots.txtやnoindex設定に問題がないか

• サイトマップが用意されているか

• 管理画面にログインできるか

• 公開後に緊急対応できる体制があるか

公開直後には、実際の公開環境で再度テストを行い、問題があればすぐに調整できるようにします。

Webサイトは公開して終わりではありません。公開後にアクセス状況、問い合わせ状況、検索流入、ユーザー導線を確認しながら改善を続けることで、より目的に合ったサイトに育てていくことができます。

Webサイト制作を成功させるポイント

ここまで紹介した5ステップを進めるうえで、特に意識したいポイントを整理します。

目的と判断基準を最初にそろえる

Webサイト制作では、関係者が増えるほど意見も増えます。デザイン、文章、機能、写真など、確認する項目が多いため、目的や判断基準が曖昧だと意思決定に時間がかかります。

最初に「何を達成するためのWebサイトなのか」「何を優先するのか」を整理しておくと、制作途中で迷ったときに判断しやすくなります。

社内確認の体制を決めておく

制作会社に依頼する場合でも、社内側の確認や素材準備は必要です。

誰が最終承認するのか、どの部署がどこまで確認するのか、原稿や写真は誰が用意するのかを決めておくと、制作進行がスムーズになります。

確認者が多い場合は、意見を集める担当者と最終判断者を分けておくことも有効です。

素材と原稿の準備を早めに進める

Webサイト制作では、素材や原稿の準備が遅れることで全体スケジュールに影響することがあります。

特に、実績掲載、社員インタビュー、写真撮影、サービス説明、導入事例などは、社内外の確認が必要になる場合があります。制作開始前から、使える資料や必要な素材を整理しておきましょう。

公開後の運用を前提に設計する

CMSを導入しても、誰が更新するのか、どの情報を更新するのかが決まっていなければ、公開後に活用されにくくなります。

お知らせ、ブログ、実績、採用情報、サービス情報など、更新が必要な箇所を整理し、担当者や更新頻度を決めておくことが大切です。

運用しやすいサイトにするには、管理画面の設計や入力ルールも重要です。更新担当者が迷わず入力できる状態にしておくことで、公開後の情報発信を続けやすくなります。

Webサイト制作の効果を高めるために意識したいこと

Webサイト制作は、5つのステップに沿って進めることで、目的や要件を整理しながら形にしていきます。

一方で、公開後に成果を高めるためには、制作の流れとは別に、SEO、LLMO、アクセシビリティなどの観点も早い段階から考えておくことが大切です。これらは公開直前に追加するものではなく、企画、設計、デザイン、実装の各工程に関わる要素です。

SEOを意識したページ設計

SEOを意識する場合は、ユーザーがどのようなキーワードで検索し、どのような情報を求めているのかを確認します。

そのうえで、必要なページ、見出し、本文、内部リンク、title、descriptionなどを整理します。検索されやすいサイトにするには、キーワードを入れるだけでなく、ユーザーが知りたい情報に迷わずたどり着ける構成にすることが重要です。

LLMOを意識した情報構造

LLMOを意識する場合は、生成AIにも内容が理解されやすいように、情報の関係性を整理します。

見出しで内容を明確に分ける、用語の定義を入れる、具体例を示す、FAQを用意する、関連情報へのリンクを設けるなど、ページの内容が人にもAIにも伝わりやすい構造にすることが大切です。

ただし、AIに向けた情報整理だけを優先すると、読者にとって読みづらいページになることがあります。基本は、ユーザーが判断しやすい情報を整理することです。

アクセシビリティを意識したUI・コンテンツ設計

アクセシビリティは、できるだけ多くの人がWebサイトを利用しやすくするための考え方です。

文字サイズ、色のコントラスト、キーボード操作、画像の代替テキスト、フォームのラベル、ボタンのわかりやすさなどは、デザインや実装の初期段階から確認しておくと、公開前の手戻りを減らしやすくなります。

アクセシビリティに配慮した構造は、ユーザーにとって使いやすいだけでなく、検索エンジンや生成AIにもページの内容が伝わりやすくなることにつながります。

公開後の継続的な改善

Webサイトは、公開後に状況を見ながら改善していくことで成果につながりやすくなります。

アクセス状況、検索流入、問い合わせ数、フォーム到達数、ユーザー導線などを確認し、必要に応じてページ内容や導線を見直します。制作段階から運用や改善を見据えておくことで、公開後も育てやすいWebサイトになります。

依頼前に整理しておきたいこと

制作会社に相談する前に、すべての仕様を決めておく必要はありません。ただし、目的や課題、希望する機能などを大まかに整理しておくと、見積もりや提案の精度が上がります。

制作の目的

まず、Webサイト制作で何を実現したいのかを整理します。

たとえば、問い合わせを増やしたい、採用応募を増やしたい、サービス内容をわかりやすく伝えたい、会社の印象を刷新したい、更新しやすいサイトにしたいなど、目的によって必要なページや機能は変わります。

複数の目的がある場合は、優先順位も決めておきましょう。すべてを同じ優先度で進めようとすると、制作範囲が広がりすぎることがあります。

現在の課題

既存サイトがある場合は、現在困っていることを整理します。

情報が古い、問い合わせが少ない、更新しにくい、スマートフォンで見づらい、表示が遅い、サービス内容が伝わりにくいなど、感じている課題を書き出しておくと相談しやすくなります。

可能であれば、「問い合わせが少ない」だけでなく、「サービスページは見られているが、フォームへの遷移が少ない」のように、具体的な状況まで整理できると改善の方向性が見えやすくなります。

必要なページと機能

制作したいページや機能を、大まかに整理しておきます。

ページであれば、トップページ、会社情報、サービスページ、実績・事例、お知らせ、ブログ、採用情報、よくある質問、お問い合わせなどが考えられます。

機能であれば、CMS、お問い合わせフォーム、資料ダウンロード、検索機能、絞り込み機能、多言語対応、外部サービス連携などがあります。

必要なものをすべて決めきる必要はありませんが、必須のものと、将来的に追加したいものを分けておくと、予算やスケジュールを調整しやすくなります。

予算とスケジュール

予算とスケジュールは、早い段階で共有することが大切です。

予算が明確に決まっていない場合でも、上限や想定範囲を共有することで、現実的な提案を受けやすくなります。スケジュールについても、公開希望日だけでなく、社内確認や素材準備に必要な期間も考慮しましょう。

短納期の場合は、ページ数や機能を絞る、段階的に公開する、既存素材を活用するなどの判断が必要になることがあります。

公開後の運用体制

公開後に誰が更新するのか、どのコンテンツを更新するのかも整理しておきます。

お知らせ、実績記事、ブログ、採用情報、問い合わせ対応、アクセス解析など、運用が必要な項目と担当者を決めておくと、公開後もサイトを活用しやすくなります。

運用体制が決まっていない場合は、CMSを導入しても更新が止まってしまうことがあります。制作段階から運用ルールまで考えておくことで、公開後の改善につなげやすくなります。

Webサイト制作の流れに関するよくある質問（Q&A）

Q. Webサイト制作は、どの工程から始めるべきですか？

A. 最初に行うべきなのは、目的とゴールの整理です。デザインや機能から考え始めると、判断基準が曖昧になりやすくなります。問い合わせを増やしたいのか、採用応募を増やしたいのか、ブランドの印象を整えたいのかによって、必要なページや導線が変わります。

Q. 「プロジェクト企画」の段階で、なぜペルソナが必要なのですか？

A. ターゲットを広く設定しすぎると、コンテンツやデザインの方向性が定まりにくくなるためです。ペルソナを設定する目的は、細かい人物像を作ることではなく、関係者が「誰に向けたサイトなのか」を共有し、制作中の判断をしやすくすることにあります。

Q. ワイヤーフレームとは何ですか？デザイン案とは違うのでしょうか？

A. ワイヤーフレームは、Webページの設計図です。色や装飾を作り込む前に、どこに、何を、どの優先順位で配置するかを整理します。デザイン案は見た目を含めた完成イメージに近いものですが、ワイヤーフレームは情報構成や導線を確認するための資料です。

Q. フロントエンドとバックエンドの違いは何ですか？

A. フロントエンドは、ユーザーが見る画面や操作する部分を構築する領域です。HTML、CSS、JavaScriptなどを使って、デザインをブラウザで表示できる形にします。バックエンドは、サーバー側で動く仕組みを構築する領域で、CMS、フォーム、データベース連携などを担当します。

Q. サイト公開前のテストはどれくらい重要ですか？

A. 公開前のテストは非常に重要です。PC、スマートフォン、ブラウザの違いによって表示や動作が変わることがあります。また、フォーム送信、リンク、CMS更新、計測タグなど、公開後の運用に関わる項目も確認する必要があります。あらかじめテストと修正の期間を確保しておくことが大切です。

Q. サーバーやドメインの契約・設定も制作会社に任せられますか？

A. 多くの場合、制作会社に相談できます。ただし、ドメインは企業の資産でもあるため、契約主体や管理権限を誰が持つのかは事前に確認しておきましょう。サーバーについても、サイトの規模、表示速度、セキュリティ、保守体制に合わせて選定することが大切です。

Q. SEOやLLMOはWebサイト制作時に対応できますか？

A. 対応できます。むしろ、制作段階からページ構造、見出し、本文、内部リンク、FAQ、構造化データなどを整理しておく方が進めやすくなります。公開後に追加で対応するより、設計段階から検索エンジンやAIに伝わりやすい構造を考えておくことが重要です。

Webサイト制作の成果は、5つの工程を正しく進めることで変わる

Webサイト制作は、デザインや実装だけで完結するものではありません。目的を整理し、ターゲットを決め、サイト構造やコンテンツを設計し、デザインと実装に落とし込み、公開後の運用につなげていくプロジェクトです。

今回紹介した5つのステップは、次の通りです。

• STEP1：プロジェクト企画
  目的やターゲットを明確にし、調査・分析を行い、Webサイトの企画とコンセプトを固めます。

• STEP2：Webサイト設計
  ユーザー体験、コンテンツ、サイト構造、ページ構成、システム要件を整理します。

• STEP3：デザイン制作
  コンセプトやルールをもとに、目的やターゲットに合ったビジュアルへ落とし込みます。

• STEP4：実装・システム開発、コーディング
  設計とデザインをWebサイトとして表示・操作できる形にし、必要な機能を構築します。

• STEP5：リリース
  公開前後の確認を行い、問題があればすぐに調整できる体制を整えたうえで公開します。

各ステップを飛ばして進めると、後の工程で手戻りが発生しやすくなります。反対に、企画からリリースまでの流れを理解し、段階ごとに必要な判断を行うことで、目的に合ったWebサイトを制作しやすくなります。

Webサイト制作で何から整理すべきか迷う場合は、まず目的、ゴール、ターゲット、現在の課題を確認することから始めましょう。そのうえで、必要なページや機能、予算、スケジュール、公開後の運用体制を整理すると、制作会社への相談や見積もり依頼も進めやすくなります。

株式会社デパートのWebサイト制作サービスをご紹介