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」といった不明瞭なものではなく、詳細な人物像（ペルソナ）を定めることが大切です。
たとえば、以下の表の二人を見てみましょう。

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

ペルソナ設計とは？やり方やメリットともに気を付けたいポイントも紹介

本記事では、ペルソナ設計の目的やメリットをはじめ、手順やポイントなどの実施に必要な情報を紹介します。的確なペルソナ設計を行い有効的なWebマーケティングや商品開発を行いましょう。

4.調査・分析

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

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

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

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

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

サイト解析のやり方は？主な分析の手法やチェックすべきポイントについて解説

サイト解析の目的や、具体的な方法について解説します。 また、解析を行ううえで、優先的にチェックすべきポイントはどこなのかという点も併せて見ていきましょう。

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

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

コンセプトメイクとは？具体的なやり方や事例を解説

今回はコンセプトメイクについて、分類や目的、他社との差別化を図る方法を紹介します。コンセプトメイクを知り、実践すると自社のブランディングや社内の意思統合につながります。

STEP2：Webサイト設計

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

【Webサイト設計フロー】

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

1.UXデザイン

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

UXデザインとは？ UXデザイン定義と重要性を解説

本記事では、UXデザインの定義や目的、重要性について詳しく解説します。UXデザインの設計プロセスや基本原則などについても触れます。

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

カスタマージャーニーマップの設計方法は？コツや注意点も紹介

本記事では、自社のWebマーケティング施策をどのように行うべきか迷っている方に向けて、カスタマージャーニーマップがなぜ必要か、またどのように設計していくかを紹介するとともに、設計時のポイントや注意点なども紹介します。

ユーザーシナリオとは？作成手順の紹介とメリット

タッチポイントごとに、ユーザーがどのような感情を抱き、具体的な行動を起こしているかを可視化できれば、効果的なマーケティング施策の実行につなげていけます。

2.コンテンツ企画

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

SEO対策への配慮

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

3.サイト構造の設計

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

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

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

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

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

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

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

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

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

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

サイトマップとは？作り方や注意点を解説

今回は、「サイトマップとは」という概要やサイトマップの作り方、そして作成ツールを紹介します。 このコラムを読むとサイトマップの重要さや良質なサイトマップの基準が分かります。自社のサイトをより良いものにしたい場合はぜひご覧ください。

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

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

ワイヤーフレームとは？作成ツールや作成手順をプロのデザイナーが徹底解説！

今回の記事では、ワイヤーフレームを作る目的からメリット・デメリット、作成する際のポイントを紹介していきます。また、ワイヤーフレームを作る際のおすすめのツールやワイヤーフレームのテンプレートも公開いたしますので、制作の参考にしてください。

5.システムの設計

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

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

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

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

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

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

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

CMS導入時に考慮したい選定ポイント解説

どういったCMSやツール、サービスが良いのか？という視点で紐解きながらCMS選定を説明いたします。

STEP3：デザイン制作

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

【デザイン制作フロー】

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

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

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

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

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

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

• フォントのルール

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

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

• 共通するパーツルール

2.素材を準備する

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

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

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

デザイン制作時の注意

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

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

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

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

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

1.フロントエンド

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

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

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

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

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

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

サーバー設定とは？

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

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

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

• サーバー選定と契約

• OSのインストール

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

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

• セキュリティ設定

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

表示速度、更新性、セキュリティ ─ 要件に応じたWeb制作のインフラ構成とサーバー選定基準

本記事では、それぞれの特徴と活用シーンを制作現場の視点から整理し、要件に応じたインフラ設計の考え方をご紹介します。

ドメイン設定とは？

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

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

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

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

• ドメインの選定、契約

• サーバーの選定契約

• サーバー設定

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

3.テスト

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

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

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

STEP5：リリース

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

まとめ

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

【STEP】

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

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

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

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

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

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

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

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

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

【設計テンプレート】ヒアリングシート

制作会社から発注者に対する目線で作られていますが、制作会社への依頼内容を整理するのにも活用していただける、制作内容のヒアリングシートです。

【設計テンプレート】要件定義書

お客様への納品書類として使用することも目的としていますが、設計や仕様を把握するための入り口的な情報集約にもなります。