初心者必見！
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サイト制作の企画フェーズが完了したら、次の流れは「設計」のフェーズです。

UXデザインを決める

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

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

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

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

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

コンテンツを企画する

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

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

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

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

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

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

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

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

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

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

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

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

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

システムを設計する

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

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

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

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

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

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

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

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

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

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

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

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

使用する素材を準備する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

バックエンド作業を行う

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

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

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

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

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

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

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

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

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

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

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

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