---

ニジボックスの案件事例をご紹介！

---

「Webサイトを制作したいけど、どんな流れで進めれば良いのか分からない」
そんな方に向けての入門編として、何を・どんな順でやるのかを分かりやすく解説します。

サイトマップやワイヤーフレームなどサイト制作に関わる用語や、スケジュール・制作期間、予算など気になる情報も一緒にまとめました。

Web業界で働くことを目指している方はもちろん、Webサイト制作を依頼する立場の方にも役立つ内容になっています。

Webサイト制作の大まかな流れ

Webサイト制作は、小規模なものでも3か月程度の期間がかかります。
大規模なサイトになれば、1年ほどかかるプロジェクトになることも少なくありません。

長い期間かかるWebサイト制作を俯瞰的に捉えるために、まずはその大まかな流れを把握し、どんなことをどんな順番で進めるのか、下図を見ながら確認してみましょう。

詳しくは後述にて説明しますが、ここでは、Webサイト制作は各STEPが進むにつれ、抽象的な概念から具体的な制作物になると理解しておきましょう。
いきなり「どんなデザインのサイトにしよう」という話から始めてしまうと、各人の好みでしか判断ができません。

Webサイト制作ではじめにやることは、Webサイトを作る目的とゴールを明確することです。
その上で、下記のような流れで進めることで、目的に合ったWebサイトを作ることができます。

1. ゴールを達成するには誰に、どんな価値を伝えるか
2. そのために必要な要素は何か
3. 要素をどのように伝えると効果的か
4. 具体的にデザインをどうするか

Webサイト制作を開始する前に決めておくこと

それでは、ここからは制作開始前に決めておくことを詳しく見ていきましょう。

1. Webサイトの目的、ゴール

Webサイトは、作ること自体が目的ではなく、「売上を増やす」「問い合せを増やす」など何かしらの課題を解決するための手段です。
「自社のホームページを作りたいから、作る」ではなく、「ホームページを作ることで売上につなげるために、作る」といった目的を明確にしなければなりません。

そこで最初に決めるべきは、以下の2つです。

• どんな課題を解決するためにサイトを作るのか？という目的
• どのようになれば課題が解決されたといえるのか？というゴール

これらを決めるために、必要に応じてリサーチや分析を実施することもあります。
例えば顧客へのヒアリングや競合調査、ユーザーニーズを知るためのインタビュー・アンケートなどです。

それぞれ下記の記事で詳しく解説しているので、ぜひ併せてご覧ください。

目的とゴールが決まったら、それを明文化したプロジェクト憲章を作成します。
進行中も常に作成したプロジェクト憲章を確認しながら、プロジェクトが本来の目的から外れていないかをモニタリングしていきます。

また、ゴールに到達するために、何を・いつまでに・どのように進めるのかも整理してプロジェクト憲章に明記し、進行の指針とします。

2. 予算、スケジュール

次にやるべきことは、以下の2つです。

• Webサイトを制作するために必要な予算の確保
• サイトの公開日から逆算したスケジュールの設定

予算

予算に関しては、理想はゴールを達成するために必要な金額を確保することですが、現実的には既に上限が決まっているケースも多いです。

その場合は、何をやるかの優先順位を考え、限られた予算の中で最大限ゴールに近づける方法を探ることとなります。

スケジュール

スケジュールも十分に確保できないケースは多いですが、あまり制作期間が短いと仕様検討が十分にできなかったり、テスト期間も十分に確保できなかったりして、バグを見落としてしまうトラブルが発生するリスクが高くなります。

予算と同じようにスケジュールに関しても、限られた期間で何をやるかの優先順位付けが必要です。

次章で紹介する「Webサイト制作の流れ」に、各工程に必要な目安の期間（※）も記載するので、そちらを参照しながらスケジュールを考えてみてください。
（※）一般的なコーポレートサイト制作を想定した目安の期間です

「QCD」の視点

予算とスケジュールを決める際は、生産活動に重要な3つの要素と言われる「QCD」の視点で検討しましょう。

QCDとは、「Quality（品質）、Cost（コスト）、Delivery（納期）」の頭文字を優先度の高い順に並べたものです。

Webサイトに限らず、品質が担保されていないとプロダクトのゴールを達成することができません。
最も優先すべきは品質とした上で、コストと納期のバランスを調整することが重要です。

Webサイト制作の流れ8STEP

ここからは、Webサイト制作の流れを8STEPに分けて解説します。
※各工程の期間は、一般的なコーポレートサイト制作を想定した目安の期間です

【STEP1】ターゲット・コンセプトの決定：2週間～

まず最初のステップでは、制作開始前に決めたWebサイトの目的とゴールに基づいて、「どんな人に（＝ターゲット）」「どんな価値を（＝コンセプト）」届けるのかを決定します。

ターゲット像はペルソナを作っておくとより明確になります。
また、関係者間で共通認識を持つためにも便利です。

ペルソナとは、ターゲットとなるユーザーを具体的にイメージできるレベルまで深掘りしたものです。
年齢や居住地、職業に加え、趣味や価値観、ライフスタイルといった心理的・行動的特徴も明らかにし、リアルな人物像を作り上げていきます。

そしてコンセプトは、ペルソナにとって魅力的な価値を一言で表したものです。
「一人暮らしの高齢者でも簡単にフードデリバリーできるサイト」や「赤ちゃんがいるお母さんが今すぐに利用可能な託児所を確保できるサイト」のように、誰が見ても分かりやすい形で表現しましょう。

ペルソナに関しては下記の記事で詳しく解説しているので、ぜひ併せてご覧ください。

【STEP2】要件定義：2週間～

STEP1でWebサイトの大まかな方向性が決まったら、次のステップではWebサイト制作にあたっての要件を定義し、ドキュメントとしてまとめます。

先述したプロジェクトマネジメント計画書でまとめたスコープ（プロジェクトが対象とする範囲）やスケジュール、進行方針を受けて、要件を具体化していきましょう。

何を定義するかはプロジェクトによっても異なりますが、一般的には以下の項目をまとめていきます。

• システム要件：サイトに持たせる機能
• 技術要件：サーバーなどのインフラ、開発言語とソフトウェア
• 品質要件：作ったサイトの検証範囲と、クリアすべき品質規定
• 運用・保守要件：Webサイト公開後のメンテナンスや更新について
• セキュリティ要件：不正アクセスを防ぐための対策

【STEP3】Webサイト全体の構成作成：1週間～

3つ目のステップでは、Webサイト内に「どんなコンテンツを」「どんな優先順位で」掲載し、また「各コンテンツがどのような関係を持つのか」を決定します。

具体的なアウトプットはサイトマップで、以下の手順でまとめます。

1. サイトに必要なページを洗い出す
2. 1で洗い出したページをグループ化する
3. トップページを頂点として、ツリー状に整理する

それぞれ、サイトの目的やターゲットに合わせて設計することが重要です。

サイトマップについては下記の記事で詳しく解説しているので、ぜひ併せてご覧ください。

【STEP4】Webページの情報設計：1週間～

4つ目のステップは、Webサイトに掲載する各ページで「どの情報を / どこに / どのように」配置するかを設計することです。

ここでもサイトの目的やターゲットを踏まえて、以下の手順でワイヤーフレーム（Webページの設計図）として形にしていきます。

1. どんな情報をどんな優先順位で掲載するかを整理
2. どの情報をどこに配置するか決める
3. ツールで清書する

ワイヤーフレームについては下記の記事で詳しく解説しているので、ぜひ併せてご覧ください。

【STEP5】デザイン作成：2週間～

次のステップでは、ページの設計図であるワイヤーフレームをもとに、実際にユーザーが目にするページと同様の、ビジュアル化したデザインを作成します。

ここで重要なことは、Webサイトのコンセプトに沿って「デザインの方向性」を言語化した上で作成することです。
デザインが専門領域でない人にも、デザインの設計意図が伝わるように分かりやすく言語化することを心がけると良いでしょう。

例えば「にぎやかかつ親しみの持てる印象にするために、メインカラーはオレンジとする」といったように決めることで、全体を通して一貫したデザインを心がけましょう。

デザインの方向性に関しては、以下のデザインガイドラインの記事もぜひご覧ください。

デザインはユーザーに対して「サイトのメッセージをどのように伝えるか」の手法です。
方向性がぶれてしまうと伝わりにくいサイトになってしまうため、一貫性が重要です。

【STEP6】コーディング・システム開発：2週間～

次のステップは、実際にWebサイトの形に仕上げる開発工程です。

HTMLやCSSといったプログラミング言語を使って、STEP5で作成したデザイン通りになるよう作成します。
併せて、データベースのシステム構築などバックエンドの開発も行います。

【STEP7】テスト：1週間～

次のステップでは、テスト環境のサーバーにアップし、問題なく表示されるかテストを実施します。

色やフォントがデザイン通りに正しく表示されるか、スクロールなどが正しく動作するか、ページ間が正しくリンクされているかなどを確認していきましょう。

【STEP8】リリース：1日～

STEP7のテストで最終チェックが終わったら、最後のステップは、いよいよ本番環境のサーバーにアップしてサイトリリースです。

リリース後は、すぐに表示や動作の確認をして万が一不備があれば修正対応します。
また、Google Analyticsなどの解析サイトを設定している場合は、データ取得されているかも確認します。

重要なWebサイトリリース後の運用

Webサイトは作ったら終わりではありません。
以下のような、Webサイトの改善やメンテナンスといった運用を、リリース後にどのように進めるかについても、制作開始前に考えておくと良いでしょう。

下記の記事ではサイトのリニューアルについて解説しているので、ぜひ併せてご覧ください。

Webサイトの改善

Webサイトをリリースした後は、Webサイトのゴールが達成されているかをモニタリングし、制作後の適切な運用によって改善することが重要になります。

Webサイトを公開すれば、サイトにアクセスしたユーザーの数や行動をデータとして取得することが可能です。
そのデータから、「想定よりサイトへのアクセスが増えない」、「アクセス後のコンバージョンにつながっていない」といった課題を発見し、解決策を考え、実施していきましょう。

また、課題発見やその解決策を考えるために、Webサイトの定性情報のリサーチをすることも有効です。
例えばサイトのユーザビリティ上の課題を発見するためにヒューリスティック分析を行う、解決策を設計するためにABテストを実施するなどです。

ヒューリスティック分析やABテストについては下記の記事で解説しているので、ぜひ併せてご覧ください。

状況に応じて適切なリサーチ手法を用いて改善につなげることで、Webサイトを「育てる」意識を持つようにしましょう。

Webサイトのメンテナンス

Webサイトの「メンテナンス」も運用の役割のひとつです。

情報更新やサーバーの更新など、Webサイトの安定的な発信をサポートする対応も重要なことであることを理解しておきましょう。

Web制作会社に依頼する際の3つのポイントと2つの注意点

この記事を読んでいる方の中には、制作会社に依頼する側の立場の方もいらっしゃると思います。
最後に、依頼時のポイントをまとめたので参考にしてください。

制作会社選定の3つのポイント

まずは、依頼する制作会社を選定する際に基準とするポイントを3つ紹介します。
候補となる会社のHP情報を見たり、直接問い合わせたりして確認してみましょう。

1. 実績

Web制作会社も、会社によってさまざまな実績があります。

実績の数だけでなく、自身の会社と同業種・業界の実績や、制作を依頼したいサイトと同じような要件の実績が、候補となるWeb制作会社にあるか、見てみるとよいでしょう。

2. 得意分野

Web制作会社と一口に言っても、その得意分野はさまざまです。
例えばデザインに強い会社、企画力に定評のある会社、システムに通じた人材が多い会社などです。

制作を依頼したいサイトの目的に応じて、Web制作会社の得意分野を確認して、プロジェクトに合う会社を選びましょう。

3. 担当者

Webサイト制作を統括するプロジェクトマネージャーや、制作現場での窓口となるディレクターによって、プロジェクトの成功は大きく左右されます。

コミュニケーションに問題はないか、丁寧に分かりやすい説明をしてくれるか、熱意を持って取り組んでくれるかなど、担当者をしっかり見た上で判断するのもポイントです。

依頼する際の2つの注意点

発注する制作会社が決まり、実際に依頼する際は以下の点に注意しておきましょう。

1. 事前にサイト制作の目的・納期・予算を明確にしておく

Webサイト制作の依頼をする上で、発注する側が明確にしておくべきことは「なぜサイトを作るのか」「いつまでに作りたいのか」「いくらの予算をかけられるのか」の3点です。

サイト制作の目的が曖昧だと、そもそもどんな人にどんなことを伝えるサイトにするのか、Webサイト制作の最初のSTEPに進むことができません。

納期や予算が曖昧だと、依頼側と制作側で認識の齟齬が生まれ、トラブルの元となります。
希望を制作会社に明確に伝え、適切な提案を受けるようにしましょう。

また、目的・納期・予算を明確にした上で、先述したQCDの優先度も合わせて検討しておくと良いでしょう。

「コストと納期はある程度余裕を持たせていいので、品質を最優先してほしい」と「とにかく急いでいるから、まずはコストをかけて早く完成させ、その後徐々に改善すれば良い」ではプロジェクトの進め方も変わってくるからです。

2. 納期や料金の相場を把握しておく

納期や料金はある程度の相場を知っておくと、制作会社から言われるがままにスケジュールと見積を決められてしまうことを避けられますし、逆に無理な要件で制作会社に断られるリスクも減ります。

納期は本記事の「Webサイト制作の流れ8STEP」を目安に、料金は複数の会社から相見積もりを取って比較すると、ある程度の相場が見えてくるでしょう。

最後に

Webサイト制作は、依頼する側と制作する側が同じ方向を見て、密にコミュニケーションを取りながら進めることで、より成功に近づけることが可能です。
そのためにも、制作側だけではなく、依頼側もサイト制作の流れを押さえておく必要があります。

双方が「一緒に作っていく」意識を持って臨むと、良いサイトができるはずです。

ぜひこの記事を参考にして、ゴールを達成するためのWebサイト制作に取り組んでください。

ニジボックスではサイト制作や開発における、情報設計やビジュアル設計といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も行っております。
サイト制作やリニューアルをお考えの方は、ぜひお気軽にご相談ください！

下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！

また、ニジボックスが注力している改善プロセスの効率化「Growth Development」や、モダンフロントエンド開発の事例やプロセスを紹介した資料もございますので、こちらもぜひご覧ください。
ニジボックスの開発実績・サービスの紹介資料