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

2024.1.10 更新　/　2021.4.15 公開

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

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

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

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

2.ゴールを決める

Webサイトを作った後のことも、考えておくことが重要です。
目的が達成度合いを評価するための指標を決めましょう。

どの数値を獲得できれば達成なのか基準があれば、改善施策を検討しやすくなります。

3.ターゲットを決める

Webサイト利用が想定されるメインのターゲットユーザーを決めましょう。
ターゲットユーザーの決定は調査・分析と並行して進める必要があります。

ターゲットユーザーについては「20代のOL」といった不明瞭なものではなく、詳細な人物像（ペルソナ）を定めることが大切です。
たとえば、以下の表の二人を見てみましょう。

同じ年齢・性別ではくくりきれない、生活サイクルや趣味があることが分かると思います。

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

4.調査・分析

目的・ゴールを達成するには、ターゲットユーザーをイメージしながら、どのようなコミュニケーションを行うべきか調査・分析が必要です。

たとえば以下のような情報を収集し調査する必要があります。
可能な限りさまざまな情報を集めてみましょう。

• 広告、SNS、検索エンジンなどのオンラインで可能な施策
• 店頭POPや雑誌、新聞、業界紙などのオフライン施策
• 業界業種の動向やトレンド、ベンチマークとしている競合の施策

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

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

目的・目標、ターゲット、調査情報をもとに、Webサイトがどのような役割をもつのか、企画とサイトのコンセプトを決めます。

このコンセプトはプロジェクトの基本方針となり、以降の設計やコンテンツの開発、デザインのすべてにおいての指針となります。
後のステップに進んでからコンセプトが変わると、後戻りができなくなり、制作のやり直しにもなりかねません。そのため関係各所の認識のすり合わせと同意形成が必要です。

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

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も検討すべきか？一から開発するのか？といった様々な条件を考慮して検討が必要です。

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

• 必要要件を十分に満たすことができるか
• 構築予算内で実装可能か？
• 必要なセキュリティを担保しているか？
• メンテナンス性を考慮できているか？
• 拡張性を考慮できているか？

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

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

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

• デザインコンセプト設計で確定するものは以下のようなものがあります。
• デザインの方向性をまとめたテキスト
• メインとなる色のルール
• フォントのルール
• 画像素材などの方向性のルール
• レイアウトの大まかなルール
• 共通するパーツルール

2.素材を準備する

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

※素材の著作権を確認することを忘れずに注意してください。（コピペや無断転載は厳禁です。）

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

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

デザイン制作時の注意

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

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

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サイトを見る環境は様々。どのユーザーにもデザイン通りの表示を見えているか、仕様通りシステムが動作しているかチェックを行います。
問題点があれば修正が必要です。

修正点が一つもなくリリースができることは非常にまれなので、テストと修正期間のスケジュールを確保しておきましょう。

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

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

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

【STEP】

●STEP1. プロジェクト企画
　目的やターゲットを明確にし、市場調査や分析を行い、Webサイトの企画を固めます。  
●STEP2. Webサイト設計
　ユーザー体験を設計し、どのようなコミュニケーションを行うか、その際にどのような媒体でコンテンツを提供するかなど検討します。
●STEP3. デザイン制作
　コンセプトやルールを決めて、より最適なデザインを作りましょう。
●STEP4. 実装-システム開発、コーディング
　設計やデザインをWebサイトに反映してきましょう。テストもしっかりと！
●STEP5. リリース
　最後まで気を抜かず。みんなでリリースを迎えましょう。

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

株式会社デパートでは、さまざまな業種業界・サービス開発におけるWeb制作の事例がございます。

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

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています