コラム
COLUMN
2025.04.23
この記事では、ホームページ制作の流れを知りたいという方に向けて、制作フローを企画・設計・デザイン・実装の4段階に分けて解説します。
以下に当てはまる方のために、参考になる情報をまとめています。
これらを含むホームページの制作に取り掛かる方は、ぜひご覧ください。
ホームページ制作には、集客や売上アップなどの目的があります。一方で制作を依頼する側は、目的が明確にできていない場合があるでしょう。制作の目的を制作者と依頼者との間で確認し、「どのようなホームページを作るのか」を決めるのが企画段階の作業です。
まず、ホームページを制作する目的を決めます。たとえば「会社やサービスの認知度を上げる」「売上を伸ばす」などがあるでしょう。
次に、ホームページ制作後の目的達成を評価する数値（ゴール）を決めます。たとえば1年間の問い合わせ件数や成約数などです。
そのうえで、詳細なターゲット像（ペルソナ）を設定し、接触媒体や閲覧場面を具体的に想定することでホームページ制作の具体的な目標が明確になります。
設定したペルソナに効率よくリーチし結果として目的を達成するために、どのような施策・コンテンツが有効かをリサーチします。
リサーチ対象の例として、以下が挙げられます。
調査・分析により、以下の点を明確にします。
この部分をおろそかにすると、強みがハッキリとしないホームページになってしまいます。
ホームページ制作の目的やターゲット、調査分析の結果をもとにして、コンセプトを決定します。コンセプトとは基本方針を分かりやすく言語化、ビジュアル化したものです。
制作の各段階で参照し、判断や評価を行う際の指針になります。
制作プロセスを通じてコンセプトが変わることなく、またコンセプトからかけ離れた判断・評価が行われないように管理する必要があるでしょう。揺るぎないコンセプトを作るためには、着手時点での制作者と依頼者との合意形成が欠かせません。
要件定義書とは、ソフトウェア開発の初期段階で作成される計画書のことですが、ホームページ制作では制作の目的やコンセプトを明記したうえで、システムの要件やスケジュールを作成します。
要件定義書は依頼者の要望を制作者が理解するための文書で、制作側で作成して依頼者が確認・同意することが必要です。制作側と依頼者の両方で、共通認識を持つための拠り所になります。
企画段階で全体計画を策定したあとは、ホームページの構成を決める設計段階です。構成やコンテンツ、操作性、システム構成などを決定します。ここでは、それぞれの設計業務の概要を解説します。
ユーザーインターフェース（UI）とはホームページの操作性を決める要素で、UX（ユーザーエクスペリエンス）は訪問したユーザーがホームページから得られる体験です。
ユーザーがスムーズに操作し、目的の情報や欲しいものが素早く得られるように、ページ内の構成やサイトの構造を決めることがUI設計の目的です。また、商品・サービスの選びやすさや、問い合わせや決済のスムーズさなどの体験を良くし、ホームページの印象や評価を高めることがUX設計の目的になります。
ホームページに載せるコンテンツに、コンセプトに沿った企画を反映させます。
ターゲットユーザーが求める情報やユーザーに気づきを与える情報を適切に配置して、コンテンツの充実を図ります。ユーザーが求める情報を、効率よく手に入れられるような導線確保が重要です。
また、GoogleやYahoo!、Bingなどのインターネット検索を利用するユーザーが、ホームページを見つけて訪問しやすくするために必要なSEO施策を取り入れましょう。
要件定義を満足しつつ、コンテンツの内容やサイト構造に適したシステムを選定します。
例として、以下のようなCMSの選定例があります。
用途に合わせてCMSを選び、カスタマイズの必要性・範囲などを検討します。いずれの場合も、セキュリティやメンテナンス性、拡張性の考慮が必要です。
ホームページ制作では「どんなデザインにするか」という点が注目されやすく、なかでもビジュアルについては期待される多くの方が期待します。一方で「Webデザイン」という用語は企画・設計を含めた広義のデザインを指すことも多く、ビジュアルはただの見た目ではなく機能を持っている点に留意しましょう。
見た目だけではなく、企画・設計の意図を反映したビジュアルデザインを制作します。
デザインコンセプトとは、ホームページ全体のデザインの方向性です。
使用する色やフォント、素材のイメージを決めてデザインに一貫性を持たせるためには、一定の約束事を決めてそれに従った作成が必要です。
ワイヤーフレームとは、Webページに表示するコンテンツのレイアウトを決めるための構成図です。モノトーンの枠線を使用して各コンテンツのエリアと配置を決めます。画像やボタンの位置、コンテンツのボリューム感が確認できるとともに、CTA（案内先へのリンク）を適切に配置することでコンバージョンにつながる導線の設計が可能です。
デザインコンセプトやワイヤーフレームにしたがって、配置する画像や写真などの素材の準備を行います。その後、各ページのデザインを進めてホームページの完成見本（デザインカンプ）を作成・確認の後、ホームページに表示されるイメージをデザインツール上で作り上げます。
各ページのデザインカンプを見比べながら、ページ間のつながりやコンセプトとの整合性を確認することが重要です。相互に違和感のないよう調整するなど、この段階でデザインの品質を高める作業を行います。
ホームページ制作での実装とは、インターネット上で機能する形にすることです。通常はデザインが先行しますが、デザインに無関係に開発・構築ができる部分に早く着手する場合があるでしょう。
ここでは、実装する内容ごとに概要を解説します。
フロントエンド開発とは、ユーザーの目に触れる部分を開発することを指し、デザインカンプの通りにビジュアルが再現されるようにソースコードを作成します。
ソースコードの言語はHTMLやCSS、JavaScriptなどで構成され、これらのコードを作成してサーバーにアップロードすることでホームページが見られる状態になります。ユーザーがブラウザにURLを打ち込んだり検索エンジンでそのホームページを開いたりすることで、ホームページが表示される仕組みです。
バックエンド構築（開発）とは、直接ユーザーの目に触れないサーバー上の構成を作ることです。一般的には、サーバー上にWordPressなどのCMS（コンテンツ管理システム）をセットアップしたりPHPによるプログラム開発などをすることを指す用語です。
ホームページ制作の流れの最後は、リリースです。
リリースの前には、構成したホームページの動作テストを実施します。各種のブラウザで設計通りのデザインが見られること、仕様通りにシステムが動作することなどをチェックする工程です。
テストで問題がなければリリースを行います。もし公開したサイトに問題が見つかれば、早期の対応が必要です。
完成したホームページはGoogle検索エンジンに報告し、クローラーの巡回を促します。また、SNSやプレスリリースなどを使用してユーザーへの告知を行います。
ホームページ制作の流れとして、以下の4つの段階があります。
企画・設計段階での十分な検討がホームページの成果を左右しますので、完成させるホームページのイメージを明確にして共有する作業を怠らないようにしましょう。
CONTACT
新規のホームページ制作から、
ご質問・ちょっと話を聞きたいなどお気軽にご相談ください。
