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

目的が達成できるWebサイトを構築するには正しい流れで行うことが重要です。 Web制作会社に依頼する際も工程と内容を理解していれば、効率よくプロジェクトが進めることができるでしょう。 今回はWebサイト制作に必要な5つの工程をご紹介します。

Webサイト制作の流れ

Web制作は大まかに分けて５つのステップを経て完成し、リリース（公開）されます。
そのステップをひとつずつ紹介します。

【Web制作 5ステップ】

STEP1：プロジェクト企画
STEP2：Webサイト設計
STEP3：デザイン制作
STEP4：実装-システム開発、コーディング
STEP5：リリース

STEP1：プロジェクト企画

「作りたい」という理由だけで、企業がWebサイトを制作することはありません。目的をもって制作を決定しているはずです。しかし、目的が多岐にわたっていたり、関係する部署や担当者が多く複雑だったりすることにより目的が不明瞭になりがちです。
関係部署へのヒアリングや調整により目的の明確化から始めましょう。

【プロジェクト企画フロー】

1.Web制作をする目的を決める
2.ゴールを決める
3.ターゲットを決める
4.調査・分析
5.Webサイトのコンセプト決定

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

何のためにWebサイトを制作するのか「目的」を明確にしましょう。
例えば、サービス・商品サイトなら「売り上げを伸ばす」「サービスの認知度を上げる」などが目的になります。

2.ゴールを決める

Webサイトを作った後のことも、考えておくことが重要です。
目的が達成度合いを評価するための指標を決めましょう。
どの数値を獲得できれば達成なのか具体的な基準があれば、改善施策を検討しやすくなります。

3.ターゲットを決める

Webサイト利用が想定されるメインのターゲットユーザーを決めましょう。
ターゲットユーザーの決定は調査・分析と並行して進める必要があります。
ターゲットユーザーについては「20代のOL」といった不明瞭なものではなく、詳細な人物像（ペルソナ）を定めることが大切です。
たとえば、以下の表の二人を見てみましょう。

同じ年齢・性別ではくくりきれない、生活サイクルや趣味があることが分かると思います。
どんなユーザーをターゲットにするかによって、どのような生活の場面で、どのような媒体で接触するかの想定が異なります。それによってどのようなサイトを構築するかが変わってくるのです。
また、ペルソナ設定により、関係者の認識をすり合わせることができ、進行がしやすくなる効果があります。

4.調査・分析

目的・ゴールを達成するには、ターゲットユーザーをイメージしながら、どのようなコミュニケーションを行うべきか調査・分析が必要です。
たとえば以下のような情報を収集し調査する必要があります。
可能な限りさまざまな情報を集めてみましょう。

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

• 店頭POPや雑誌、新聞、業界紙などのオフライン施策

• 業界業種の動向やトレンド、ベンチマークとしている競合の施策

集めた情報を分析することで、最適なコミュニケーション方法を決定しましょう。

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

目的・目標、ターゲット、調査情報をもとに、Webサイトがどのような役割をもつのか、企画とサイトのコンセプトを決めます。
このコンセプトはプロジェクトの基本方針となり、以降の設計やコンテンツの開発、デザインのすべてにおいての指針となります。
後のステップに進んでからコンセプトが変わると、後戻りができなくなり、制作のやり直しにもなりかねません。そのため関係各所の認識のすり合わせと同意形成が必要です。

STEP2：Webサイト設計

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

【Webサイト設計フロー】

1.UXデザイン
2.コンテンツ企画
3.サイト構造の設計
4.ページ構造の設計-ワイヤーフレームの制作
5.システムの設計

1.UXデザイン

UXとはUser Experienceの略で商品やサービスに触れてもらう中でターゲットに対してどのような体験をしてもらうのか設計する工程となります。

どのようなタイミングで、どのようなコンテンツを、どのように魅せていくのか。どのように感じてもらうのか？といった体験をデザインしていきます。
「カスタマージャーニーマップ」や「ユーザーシナリオ」といったフレームワークを用いて、判断する根拠を作り進行していきましょう。

2.コンテンツ企画

UXデザイン設計に基づいて、どのようなコンテンツを提供すべきなのかを考えます。サイト運営者の「伝えたい」と、ユーザーの「欲しい」が合致するよう、目線を合わせ、心地よい体験を提供することを主眼に企画を行いましょう。
関係者への掲載したいコンテンツのヒアリングはもちろん、同業他社などのWebサイトも参考にして決めていきましょう。

SEO対策への配慮

コンテンツ企画はSEO（検索エンジン最適化）への配慮も重要となります。どのようなキーワードを検索しているユーザーが存在し、その検索意図にどのようなコンテンツが重要かという視点でコンテンツを考えることも重要です。

3.サイト構造の設計

サイト構造の設計とは、コンテンツをユーザーの閲覧にあわせ、どのような優先順位で掲載するのかを決定することを言います。
例えるとすると、スーパーを開店するにあたり、どの入り口からお客さんが入店し、最初にどの棚を見てもらい、進んでいくのかを決定するのに似ているかもしれません。
しかし、違いとして以下のような項目があるため注意が必要です。

• Webは入り口が無数にあり、入店時の動機が多岐にわたる点。

• Webサイトはリンクをすることにより直接コンテンツに移動できる点。

• Webサイトの土地の広さなどの制約がないため、拡大、縮小が起こる点

サイト構造の設計は以下の作業工程で行います。

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

2. コンテンツごとの関連性を明確化

3. ターゲットユーザーが快適に遷移できるナビゲーション設計

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

同じカテゴリのコンテンツが散らばって配置されていると、見ているユーザーは大変です。再度アクセスしてくれないかもしれません。
使いやすいWebサイトにすることで、ユーザーをひきつけることもつながります。サイトが複数にまたがる場合などは、どのようなドメインにするも構造に合わせて検討しましょう。
アウトプットとしてはサイトストラクチャ、サイトマップなどが作成されます。

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

サイトマップをもとに、ワイヤーフレームと呼ばれる画面設計図作ります。
ページごとに「どのような情報」を掲載するのか構成要素を定義する工程です。情報の重要度に応じて、情報の流れやレイアウトなどの定義する場合もあります。ワイヤーフレームは関係するメンバーがどのようなページを制作するのか共有・理解するための重要なドキュメントとなります。ワイヤーフレームには「一番重要な内容なので目立つように！」など、指定や意図を添えて、参画するメンバーが同じ理解を持てるようにしましょう。

5.システムの設計

与件やサイト構造をもとに、どのようなシステムを導入するかの設計を行います。
更新が多い箇所にはCMSを導入するのか？その場合、どのようなCMSが最適なのか？Wordpressが良いのか？他のCMSも検討すべきか？一から開発するのか？といった様々な条件を考慮して検討が必要です。

システム設計で考慮するポイント

• 必要要件を十分に満たすことができるか

• 構築予算内で実装可能か？

• 必要なセキュリティを担保しているか？

• メンテナンス性を考慮できているか？

• 拡張性を考慮できているか？

STEP3：デザイン制作

Webサイトの設計が完了したらデザイン制作に入りましょう。ここで注意してほしいのが、デザインは感覚やセンスだけで作るものではないということです。
Webサイトの目的からデザインコンセプトを決め、情報設計に対して適切なビジュアルに落とし込むことがデザインの工程なのです。

【デザイン制作フロー】

1.デザインコンセプトの設計
2.素材を準備する
3.デザインカンプの制作 

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

プロジェクト内での共通の認識を持たせ、主観的な意見に左右されず、一貫したビジュアルデザイン作成ができるようにデザイン上のコンセプトを設定します。商品・サービスのコンセプトやコミュニケーション設計をベースとして、ユーザーに適切なデザインはどのようなものであるかを言語化していきます。
また、イメージボードといったイメージを共有するためにビジュアライズした制作物などを作成したりしながら、より高い精度での共通イメージを持つことが、メンバー間での「良いデザイン」を共有し、スムーズな進行を実現します。

デザインコンセプト設計で確定するものは以下のようなものがあります。

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

• メインとなる色のルール

• フォントのルール

• 画像素材などの方向性のルール

• レイアウトの大まかなルール

• 共通するパーツルール

2.素材を準備する

デザインコンセプトにそって、Webサイトで使用する画像やテキストやイラストなどを準備します。
営業資料や社内資料、写真といった素材の準備。また、すでにある素材でまかなえない場合は撮影などを行い素材の用意を行うこともあります。Web制作会社でストックフォトなど画像素材の購入やリースサイトより素材を手配することも可能です。何を誰が準備するのかを明確にしておきましょう。
※素材の著作権を確認することを忘れずに注意してください。（コピペや無断転載は厳禁です。）

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

素材の準備ができたら、各ページのデザインを進めます。できあがったものはデザインカンプと呼ばれます。
デザインコンセプトにそって制作されますが、ビジュアル化した際に印象のずれ、違和感がないかをチェックしながら進めましょう。これによりクオリティの高いデザインが実現できます。

デザイン制作時の注意

よくあるトラブルが、実現不可能な機能がデザインに表現されていることです。
見た目は確認はだけでなく、システムが動作した際にデザインとして問題がないかも合わせて確認するようにしましょう。

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

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

デザインカンプができたら、Webサイトとして機能するようにシステムの実装とWebブラウザで表示できるように構築します。この作業を「システム開発」「コーディング」「マークアップ」などと呼んでいます。
システム開発には、HTMLやJavaScriptを使用する「フロントエンド」と、PHPなどサーバー言語を使用する「バックエンド」に分かれています。それぞれできることが違うので、実装前に必要な実装領域と各分担を明確にしておきましょう。

 【実装-システム開発・コーディングフロー】

1.フロントエンド
2.バックエンド構築（サーバーサイド構築）
3.テスト

1.フロントエンド

デザインカンプと同じものがインターネット上でも見られようにする、主にビジュアル面を調整する工程です。ソースコードと呼ばれる言語で記述する作業です。
Webページに表示されるテキストはもちろん、装飾なども実装していきます。主にHTML、CSS、JavaScriptといった言語で構築されます。

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

サーバーで動くプログラムを開発する工程です。目に見えない部分の作業なので、あまりピンと来ないかもしれません。
たとえば、レストランの予約サービスでお店の予約をしたとします。その場合、お店への連携や予約受付メールなど、さまざまな処理を行われます。そういったユーザーに見えない裏側の部分がバックエンドの出番です。

よくあるシステムとしてはWordPressなどのCMS（コンテンツ管理システム）やオンラインショップ構築でつかわれるEC-CUBEなどパッケージシステムがあります。
これらのシステムインストールや設定のカスタマイズなども担当します。もちろん、独自システムを構築する場合もバックエンドエンジニアの担当となります。

そして、バックエンドの領域では、プログラミングのほかにもWebサイトの公開するためにサーバー設計やドメイン設定などインフラの準備も行います。

続いて、サーバー設定とドメイン設定についてご紹介します。

サーバー設定とは？

一般的にはサーバーといってもイメージがわかないかもしれませんが、簡単に説明するとユーザーに要求された情報を格納しているデータの格納庫と考えてください。しかし、格納しているだけで情報を提供することができません。

そこで、情報を提供するにはサーバーで情報を配信するためのプログラムが動くようにしなければなりません。そのためのパソコンで言うところのOS（オペレーティングシステム Windowsなど）や、その他に必要なソフトウェアのインストールや設定が必要となります。
これらの作業を一般的にサーバー設定と言います。

主な作業としては以下になります。

• サーバー選定と契約

• OSのインストール

• ミドルウェアのインストール

• ロードバランサーなどの設定

• セキュリティ設定

※具体的な作業内容は契約するサーバーによって異なります、契約内容をエンジニアと確認しながら進行しましょう。

ドメイン設定とは？

ドメインとは皆さんがサイト閲覧する際に入力するURLの○○○○○.comや○○○○○.co.jpのことを言います。

情報はサーバーに格納されると説明しましたが、その情報がどこにあるのかがわからなければ、ユーザーはたどり着くことができません。そこでサーバーはIPアドレスという151.101.1.195というような数字が郵便番号のように割り当てられます。しかし、この数字だけではどのような情報なのかわかりませんし、ユーザーに覚えてもらえません。

この問題を解決するためgoodproductionsjp.comというような文字列と紐づけることにより、ユーザーにたどり着きやすくするのがドメインの役割といえます。そして、この設定作業をドメイン設定といいます。

主な作業としては以下になります。

• ドメインの選定、契約

• サーバーの選定契約

• サーバー設定

• サーバーとドメインの紐づけ

3.テスト

フロントエンドやバックエンドのエンジニアの作業が完了したら、テストを行います。この工程は、「動作検証」「デバッグ」などと呼ばれています。

ユーザーがWebサイトを見る環境は様々。どのユーザーにもデザイン通りの表示を見えているか、仕様通りシステムが動作しているかチェックを行います。問題点があれば修正が必要です。修正点が一つもなくリリースができることは非常にまれなので、テストと修正期間のスケジュールを確保しておきましょう。

また、テストでのトラブルを避けるため、実装前にどのような環境での動作を担保するかを決定しておくことが重要です。そして、どのような機能をどのような環境で動作のチェックを行うかといった「テスト設計」もあわせて行っておきましょう。

STEP5：リリース

テストで動作に問題点がなければ完成ですので、リリース作業を行います。
リリース当日は、デザイナー・エンジニアのどちらも稼働できるように手配をしておくとベストです。
万全を期してからリリース作業を行うはずですが、予想外の要因でエラーが発生することもあります。
必ずリリース直後に公開されたサイトでテストを行い、問題があれば即座に調整できる体制を整えておきましょう。

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

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

A. ターゲットを「20代女性」のように幅広く設定してしまうと、ライフスタイルや趣味嗜好がバラバラになり、デザインやコンテンツの方向性が定まらなくなるからです。詳細なペルソナ（氏名や職業、休日の過ごし方まで設定した人物像）を定めることで、関係者全員が「この人のために作る」という共通認識を持てるようになり、判断に迷いがなくなります。

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

A. ワイヤーフレームは「Webページの設計図」であり、色や装飾を省いて「どこに・何を・どの優先順位で配置するか」を定義したものです。いきなりデザイン（清書）に入ると、後から「この情報が足りない」「配置を変えたい」といった大きな手戻りが発生しやすくなります。設計図の段階で情報構成を固めることが、効率的な制作には不可欠です。

Q. 「フロントエンド」と「バックエンド」の作業内容の違いを教えてください。

A. 簡単に言うと、ユーザーの目に触れる「表側」を作るのがフロントエンド、裏側の「仕組み」を作るのがバックエンドです。

• フロントエンド: HTMLやCSSを使い、デザインをブラウザで見られる形に再現し、動き（アニメーション等）をつけます。

• バックエンド: サーバー上で動くプログラムを開発します。予約システムの処理やCMS（更新システム）の構築、データベースの連携などを担当します。

Q. サイトを公開する前に「テスト（動作検証）」はどれくらい重要ですか？

A. 非常に重要です。ユーザーが使うデバイス（iPhoneやAndroid、PC等）やブラウザ（ChromeやSafari等）によって、表示や動きが異なる場合があるためです。問題がゼロの状態で実装が完了することは稀であるため、あらかじめスケジュールに「修正期間」を含めておくことが、スムーズなリリース（公開）の鍵となります。

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

A. はい、多くの場合は「バックエンド」の工程で制作会社がサポートや代行を行います。ただし、サーバーの種類によって速度やセキュリティ強度が異なるため、サイトの目的に合わせてエンジニアと相談しながら選定することが大切です。また、ドメイン（URL）の所有権など、契約主体を誰にするかも事前に確認しておきましょう。

まとめ

以上、5つのステップをご紹介しました。いかがでしたでしょうか？

【STEP】

●STEP1. プロジェクト企画
　目的やターゲットを明確にし、市場調査や分析を行い、Webサイトの企画を固めます。 

●STEP2. Webサイト設計
　ユーザー体験を設計し、どのようなコミュニケーションを行うか、その際にどのような媒体でコンテンツを提供するかなど検討します。

●STEP3. デザイン制作
　コンセプトやルールを決めて、より最適なデザインを作りましょう。

●STEP4. 実装-システム開発、コーディング
　設計やデザインをWebサイトに反映してきましょう。テストもしっかりと！

●STEP5. リリース
　最後まで気を抜かず。みんなでリリースを迎えましょう。

様々なステップを飛ばしてできたWebサイトと、1からしっかりと作り上げたWebサイトではクオリティがまったく異なります。ぜひ、実践してみてくださいね。

株式会社デパートでは、さまざまな業種業界・サービス開発におけるWeb制作の事例がございます。実績はこちらからご確認ください。

見積もり項目や内容など、Web制作でお困りの際は、お気軽にご相談ください。要件定義や概算お見積りの作成などから対応させていただきます。

サイト制作で使える！ヒアリング・要件定義資料テンプレート