全国47都道府県ご依頼可能!
まずは無料相談・お見積もり

初心者必見!
Webサイト制作の
正しい流れとは?

Webサイト制作には適切な流れ(制作フロー)があります。
正しい流れでWebサイトを制作しなければ、時間も手間もコストも余計にかかり、クオリティも低くなってしまいます。

本記事では、そんなことにならないように、守るべきWebサイト制作の正しい流れを解説します。

    コラムの目次

  1. 1. Webサイトを正しい流れで制作しないとどうなる?
  2. 1-1. 完成に時間がかかる
  3. 1-2. クオリティに問題が発生する
  4. 1-3. 制作の引継ぎに手間がかかる
  5. 2. Webサイト制作の流れ① 企画フェーズ
  6. 2-1. Webサイトの目的とゴールを決める
  7. 2-2. Webサイトのターゲットを決める
  8. 2-3. Webサイトのコンセプトを決める
  9. 3. Webサイト制作の流れ② 設計フェーズ
  10. 3-1. UXデザインを決める
  11. 3-2. コンテンツを企画する
  12. 3-3. サイトの構造を決め、ワイヤーフレームを作成する
  13. 3-4. システムを設計する
  14. 4. Webサイト制作の流れ③ デザイン制作フェーズ
  15. 4-1. デザインコンセプトを決める
  16. 4-2. 使用する素材を準備する
  17. 4-3. 各ページのデザインを制作する
  18. 5. Webサイト制作の流れ④ コーディングフェーズ
  19. 5-1. フロントエンド作業を行う
  20. 5-2. バックエンド作業を行う
  21. 5-3. テストを行い、Webサイトを公開する
  22. 6. 【まとめ】流れに沿ったWebサイト制作ができない場合は業者発注も検討しましょう

Webサイトを正しい流れで
制作しないとどうなる?

駄目

初めてWebサイトを立ち上げるときには、「何から始めればいいのか?」と考えてしまうことと思います。

Webサイト制作には適切な流れというものがあり、これを踏まえて制作しないと、次のような失敗に陥ってしまいます。

完成に時間がかかる

時間がかかる

Webサイトを正しい流れで制作しないと、完成するまでにより長い時間が必要になります。

Webサイトの適切な制作の流れは、効率をちゃんと考えた上で決まっています。

適切な流れでWebサイトを制作することが、最も効率よくWebサイトを完成させる方法なのです。

流れのことを考慮せずにWebサイトを作ろうとすると、どこかで必ずほころびが生じてしまうはずです。

作業の手戻りが発生することになり、Webサイトが完成するまでに余計な時間をかかってしまうのです。

多少時間がかかってもいいと思う人もいるかもしれませんが、時間がかかるということは、完成までにかかる人件費がかさんでしまうことにもつながります。

無駄な人件費をかけず、効率的にWebサイトを完成させるためには、適切な流れに則って制作を進めるのが一番です。

クオリティに問題が発生する

Webサイトを正しい流れで制作しないとクオリティにも問題が発生します。

適切な流れで制作しないと、どうしても手順にほころびが生じ、手戻りが発生し、上記したように余計な時間がかかりますが、それだけでなく、Webサイトのクオリティにも悪影響を及ぼしてしまうのです。

Webサイトを立ち上げる理由は会社によってさまざまだと思いますが、せっかくWebサイトを立ち上げても、クオリティが低いものだと、期待したような効果を得ることは難しいでしょう。

Webサイトのクオリティを高め、期待する目的を達成できるWebサイトにしたいのなら、適切な流れで制作に取り組みましょう。

関連記事

Webサイトの目的」については、次の記事を参考にしてください。

■ 企業Webサイトの目的を果たすための方法

制作の引継ぎに手間がかかる

Webサイトを正しい流れで制作しないと、制作を途中で別の担当者に引き継ぐ際に手間がかかってしまいます。

Webサイトの制作は1日や2日でできるものでなく、それなりの期間がかかりますし、たった一人で制作できるものでもありません。Webサイト制作はひとつのプロジェクトであり、複数のメンバーで取り組む必要があるのです。

しかし、社内でプロジェクトを立ち上げるとなると、通常業務との兼業になるでしょう。本業が忙しくなってしまうと、別の担当者に引き継いで作業を続けることになるはずです。

その際、前任者が適切な制作の流れを守らずに手順がめちゃくちゃだと、新担当者に一から説明しなければならなくなります。

そうした時間や手間はまったく無駄なものですし、伝達に抜け落ちがあるとWebサイトのクオリティが低くなったり、機能面で問題が発生したりすることになります。

無駄なく引継ぎを行うためにも、正しい流れでWebサイトを制作し、引継ぎを行う場合はその流れに則ってください。

ディプシーからのアドバイス

クオリティの高いWebサイトを効率よく完成させるには、一貫して正しい流れでWebサイトを制作し、完成へと導くことが重要です。

Webサイト制作の流れ ①
企画フェーズ

企画フェーズ

Webサイト制作の流れは、まず「企画」を行うところからスタートします。

Webサイトの目的とゴールを決める

ゴールを決める

Webサイト制作で最初に決めるべきことは「Webサイトの目的およびゴール」です。

Webサイトをなぜ作るのか、その目的は企業によってさまざまでしょう。

たとえば目的が「売上を増やす」ということだとしたら、それを達成するためには、商品を販売するWebサイトを立ち上げたり、商品の魅力を伝え、認知度を上げるWebサイトを作ったりすることになるでしょう。

そのように、具体的な到達目標(ゴール)を設定すれば、どの程度のクオリティや機能が搭載されたWebサイトを制作するべきなのかということもおおまかにイメージできるはずです。

ゴールは、目的における具体的な数値目標(たとえば「売上を増やす」ことが目的なら、販売サイトでいくらの売上を達成したいかということ)から設定します。

これらが曖昧だと、搭載すべき機能やクオリティを備えたWebサイトを完成させることは難しくなります。

しっかりと「目的」および「ゴール」を決めて、Webサイト制作をスタートさせてください。

Webサイトのターゲットを決める

ターゲット

次にすべきなのは、「Webサイトのターゲット決め」です。

前項で「目的」を明確にしましたが、その目的はどんな層に対するものでしょうか。

たとえば「若い女性向けの化粧品の売上を上げる」ということが目的なら、メインターゲットは当然のことながら「若い女性」でしょう。

そしてWebサイトのクオリティを高めるためには、ターゲットをより深堀りして設定すること、いわゆる「ペルソナ」の設定が欠かせません。

単にざっくりと「若い女性」という設定にとどめず、その具体的な年齢や趣味嗜好、生活スタイルなども設定するのがペルソナ設定です。なぜなら、そういったことが異なれば、同じ若い女性でも、購買に関するニーズが大きく異なるからです。

どんなペルソナを設定したかによって、最適なWebサイトの形や内容はまったく違ったものになります。

ターゲットを間違えると、前項の目的・ゴールと同じように、Webサイトの最適な方向性が大きくブレてしまい、目的を果たすことができないWebサイトになってしまいます。

そんな事態に陥らないように、適切なターゲット設定を行い、今後のWebサイト制作の流れにスムーズに乗りましょう。

関連記事

ターゲットの決め方については、以下の記事を参考にしてください。

■ 企業Webサイトの成否を決める「ターゲット」の決め方

Webサイトのコンセプトを決める

次は「Webサイトのコンセプト」を決めます。

目的・ゴール、ターゲット・ペルソナをもとに、そのWebサイトがどんな役割を担当することになるのか。

それがWebサイトのコンセプトです。

このコンセプトは、Webサイト制作というプロジェクトの基本方針となります。

つまり、次項で述べる設計やコンテンツ準備、デザインなど、すべてにおいて立ち返るべき指針です。

次の流れに移ったときに、このコンセプトを変更することいなると、また一から流れをやり直さなければならなくなります。

そんなことにならないように、Web制作に関わる関係各所の認識をすり合わせて共有することが重要です。

ディプシーからのアドバイス

この企画フェーズで決めたことは、Webサイトが完成するまで一貫させる必要があります。
適当な企画内容で次に進むと、後になって何かとブレてしまい、Webサイト制作の流れを滞らせてしまいます。
綿密に企画して完成まで一貫した方針で進めましょう。

Webサイト制作の流れ ②
設計フェーズ

設計フェーズ

Webサイト制作の企画フェーズが完了したら、次の流れは「設計」のフェーズです。

UXデザインを決める

まず「UXデザイン」を決めましょう。

「UX」とは「User Experience」の略で、商品・サービスに触れてもらう中でターゲットにどのような体験をしてもらうのかということです。

わかりやすく言うと、Webサイトがどのようなタイミングで・どのようなコンテンツを・どのようにユーザーに見せていくか・どんな風にユーザーに感じてもらうか、といったことをデザインすることになります。

この説明だけでは何をすればいいのかわかりにくいかもしれません。

「カスタマージャーニーマップ」「ユーザーシナリオ」というフレームワークをもとに考えていくとわかりやすいでしょう。

カスタマージャーニーマップとは?

「カスタマージャーニーマップ」とは、顧客が商品・サービスを購入したり契約したりするまでのプロセスを、顧客の行動パターンとしての思考と感情を分析するフレームワークです。

カスタマージャーニーマップを活用すれば、顧客の体験を向上させ、商品・サービスのアプローチを最適化できます。

ユーザーシナリオとは?

「ユーザーシナリオ」とは、ユーザーと商品・サービスをめぐる「理想的な台本」のようなものです。

ユーザーが商品・サービスと接するとき、どんなことを感じて、どんな行動をとってほしいのか、ということをわかりやすく整理します。それにより、商品・サービスを利用するユーザーの一連の流れを可視化できます。

優れたUXデザインを設計するためには、ユーザーシナリオから考えてみましょう。

コンテンツを企画する

次は「コンテンツを企画する」段階です。

前項で設計したUXデザインに基づき、どんなコンテンツをユーザーに提供するかということをユーザー目線で考えます。

Webサイトを作る側には「伝えたいこと」があります。

一方、そのWebサイトを訪れたユーザーの側にも「知りたいこと・欲しいこと(もの)」があります。

この両者が合致するように、ユーザー目線を考慮しつつ、ユーザーにどんな体験をいてもらうかということを考えます。

関係者にヒアリングしたり、場合によっては同業他社のWebサイトも参考にしたりしながら、必要なコンテンツを決めていきましょう。

コンテンツ企画の段階でも、「SEO」に配慮することが求められます。どのようなキーワードを検索しているユーザーがどのくらいのボリュームで存在しているか、その検索意図にはどのようなコンテンツが適しているか、ということからWebサイトに掲載するコンテンツを考えることも重要です。

関連記事

Webサイトのコンテンツについては、以下の記事も参考にしてください。

■ 顧客を増やし集客に成功するためのWebサイトコンテンツの条件

サイトの構造を決め、ワイヤーフレームを作成する

ワイヤーフレーム

次は「サイトの構造を決め、ワイヤーフレームを作成する」段階です。

このステップでは、サイト内のコンテンツをどのような優先順位で掲載するかを決定します。

サイトの構造設計は、以下の手順で行います。

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

2. コンテンツごとの関連性を明確にする

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

4. コンテンツを正しく整理するためにラベリングを行う

この設計にしたがって「サイトマップ」を作成し、それをもとにして「ワイヤーフレーム」という画面設計図を作成してください。

ワイヤーフレームは、Webサイト制作に関係するメンバーが認識を共有するためにも必要です。

システムを設計する

次は「システム設計」の段階です。

前項で作成したサイト構造をもとに、どのようなシステムをWebサイトに導入するかを決定します。

たとえば、更新頻度が多い箇所に「CMS」を導入したり、最適なCMSを選択したりします。さまざまな条件を考慮してシステムを設計しましょう。

システム設計は、以下のポイントも考慮する必要があります。

・必要な要件を満たしているか?

・予算内で必要なシステムを実装できるか?

・必要なセキュリティを確保できるか?

・メンテナンス性の良さが考慮されているか?

・拡張性を十分に考慮できているか?

システム設計は、ユーザビリティはもちろん、運営側の利便性にも大きく影響します。綿密に設計し、後悔する選択をしないようにすることが重要です。

ディプシーからのアドバイス

Webサイトは、公開後の運営フェーズも重要なポイントです。
そのため、システム要件について更新しやすさなどを考慮しておくと、Webサイトの運営コストを抑えることにつながります。

Webサイト制作の流れ ③
デザイン制作フェーズ

デザイン制作フェーズ

Webサイト制作の次なる流れは「デザインの制作フェーズ」です。

Webサイトのデザインはとても重要です。

デザインコンセプトを決める

このフェーズで最初にやるべきことは「デザインコンセプトの決定」です。

Webサイト制作のプロジェクトメンバーが認識を共有しながらビジュアルデザインを統一していくためには、デザインコンセプトを設定しなければなりません。

商品・サービスのコンセプトから、ターゲットに最適なデザインはどのようなものであるかを言語化・可視化していきます。

イメージをビジュアライズして共有する「イメージボード」などを活用して、Webサイトのデザインを共有することが、Webサイト制作のスムーズな流れです。

使用する素材を準備する

次に「使用する素材の準備」の段階です。

決定したデザインコンセプトに従って、Webサイトで使用する画像やイラストなどの素材を準備しましょう。

社内にある素材だけでは足りないという場合には、新たに撮影などを行う必要もあるかもしれません。

インターネット上にはさまざまな写真素材、イラスト素材などを提供しているサイトもありますので、それを活用するのもおすすめですが、「著作権」には注意してください。

商用利用可能か、利用条件は何かということがそれぞれのサイトに明記してあるはずですから、それを遵守し、後でトラブルが発生することのないようにしてください。

各ページのデザインを制作する

次はいよいよ「各ページのデザインを制作する」段階です。

デザインコンセプトに基づいてビジュアル化した際に、印象のずれや見た目の違和感がないかをメンバー相互でチェックしながら、デザイン制作を進めてください。

「ちょっとした違和感」を感じたりすることがないか、もしあればしっかりとそれを解消してデザイン制作を進めることによって、よりデザインクオリティの高いWebサイトが完成します。

ディプシーからのアドバイス

デザイン制作でよくあるトラブルに「実現不可能な機能がデザインに表現されている」というものがあります。
デザインは見た目を確認するだけでなく、動作した際にデザイン上に問題が生じないかということも合わせてチェックしておきましょう。

Webサイト制作の流れ ④
コーディングフェーズ

コーディングフェーズ

ここまで来ると、Webサイト制作の流れもいよいよ大詰めです。

最後のステップは「コーディング」です。

フロントエンド作業を行う

コーディングは、大きく「フロントエンド」「バックエンド」の2作業があります。

フロントエンド領域は、主に「ユーザーが直接触れる部分」です。

Webサイトに表示されるテキストだけでなく、装飾などもこの工程で実装することになるのです。

フロントエンド作業では、主に「HTML」「CSS」「JavaScript」といったプログラム言語を駆使する必要があります

バックエンド作業を行う

次に「バックエンド作業」です。

バックエンド作業の領域は、主に「ユーザーが直接触れない部分」です。サーバーで動くプログラムの開発などもバックエンド作業に含まれます。

バックエンド領域では、プログラミングだけでなくWebサイトを公開するための「サーバー設計」や「ドメイン設定」などのインフラ整備も含まれます。

テストを行い、Webサイトを公開する

ここまで完了したら、公開する前に「テスト」を行いましょう。

いわゆる「動作検証」や「デバッグ」と呼ばれる作業です。

ユーザーが実際にWebサイトを見る状況はさまざまな条件が考えられます。どんなユーザーが見ても想定した通りのデザイン表示がされていること、システムが動作していることが必要です。

問題が起こった場合は修正します。修正することが一つもない、ということは通常はありません。テストおよび修正期間には十分なスケジュールを確保してください。

ディプシーからのアドバイス

コーディングには「エンジニア」の力が必要です。
社内にエンジニア人材がいない場合には、Webサイト制作会社に外注することを検討しましょう。

【まとめ】
流れに沿ったWebサイト制作ができない場合は業者発注も検討しましょう

株式会社ディプシー

Webサイトを完成させるまでの流れにほころびがあると、そのWebサイトのどこかに不具合が発生します。すぐに修正しなければなりませんが、内容によっては大きく手戻りして、そのステップからの作業がやり直しになってしまうことも考えられます。

そのようなことに陥らないように、最適な流れを意識してWebサイトを制作してください。

関連記事

もし、Webサイトを公開した後で、目的が達成できていないことに悩んでしまう場合は、以下の記事を参考にして改善を行ってください。

■ 「Webサイトで集客できない」そんな悩みを解決するには?

本記事で解説したWebサイト制作の流れを、社内の人員だけでは実施できないような場合には、Webサイト制作会社に相談してプロの力を借りることをおすすめします。

集客できる優れたWebサイト制作を外注したい方は、ぜひ私たちディプシーまでご相談くださいませ!

Webサイトことなら株式会社ディプシーへ
無料相談・お見積もりはこちらから

関連記事

ディプシーのWebサイトは全てコミコミで安心

お問い合わせ

Webサイト制作に関するお問い合わせ、お見積り、
ご質問、ご相談、どんなことでも構いません。
まずは、お気軽にお問い合わせください。

Tel .042-848-5372

全国47都道府県からご依頼可能

営業時間 平日 9:00~17:00 (土日祝日休み)

メールでのお問い合わせは、必要事項をご記入の上、
確認ボタンを押してください。
改めて当社担当スタッフがご連絡いたします。

任意

必須

必須

必須

必須