フローティングバナー
web制作 流れ

【Web制作の流れ5ステップ】依頼主の視点からポイント解説

この記事の監修者
5789
橋本 琢王
CIRANUI株式会社代表取締役 2015年にエンジニアとしてのキャリアをスタートし、制作会社のWEBディレクター、ヘルスケアスタートアップのWEBエンジニア、事業会社のプロジェクトマネージャー・プロダクトマネージャーなど様々なプロジェクトに参画。 プロジェクトマネージャー、WEBディレクター、WEBエンジニアとしてのキャリアを築く。 プロジェクトに参画しながら、2016年にフリーランスチーム「FIREWORKS」を立ち上げ、フリーランスで活躍するエンジニアやデザイナーと共に、WEBブランディング、WEB開発を行う。 2021年に個人事業主から法人化をしてCIRANUI株式会社代表取締役に就任。

会社のホームページを作ることになり担当を任されたけれど、どうしたらいいのかわからない、社内に聞ける人もいない。

そのような方もいらっしゃるのではないでしょうか。

Webサイトを作るにあたって、まずはWeb制作の大まかな流れを押さえておくことが重要です。

全体像が見えることで何をすべきかがわかってくるため、不安も少なくなります。

  • Webサイトを作るには何から始めたらいいの?
  • どのくらいの時間が必要なの?
  • 費用はどのくらいかかるのかな?

本記事ではこんなお悩みをすべて解消します。

初心者の方にもわかりやすいように5ステップにまとめましたので、順を追って説明をしていきます。

【ステップ1】制作前の3つの準備

web制作 流れ

何かを始めるときには準備が必要です。

Webサイトを作る際も準備が大切になってきます。

いきなりサイトを作り出すと、途中で行き詰まったり、失敗して後戻りできないという事態になりかねません。

必ず準備をしてからサイト作りに踏み出すことが成功へのカギです。

まずは、下記の3つについて自社内で確認を取りましょう。

  • Web制作を行う目的を明確にする
  • ターゲットを絞る
  • 予算・スケジュールを考える

一つひとつ見ていきます。

Web制作を行う目的を明確にする

Webサイトを作るための準備として、まずは目的をハッキリさせましょう。

どこかに旅行に行くときには行き先をまず決めますね。

それによって、電車で行くのか、車で行くのか、飛行機でいくのか手段が違ってきます。

Webサイトも同じことです。

目的によってどんなサイトを作るのか、設計方法が異なるのです。

「会社・サービス・商品のことを知ってほしい」「問い合わせを増やしたい」「売上げを伸ばしたい」など具体的に考えることをオススメします。

また、サイト制作を専門の制作会社に依頼する場合は、どの会社に依頼するのかも目的によって変わってきます。

ターゲットを絞る

どのような人にWebサイトを見てほしいのかターゲットユーザーを決めましょう。

ターゲットを決めることで、「どのようなサイト設計にしたらいいのか」「どのようなデザインにしたらいいのか」「どのようなサイトならアピールできるのか」などのイメージが明確になってきます。

ターゲットについては「30代の会社員」という漠然としたものではなく、ペルソナと呼ばれる詳細な人物像を設定することが大切です。

年齢、性別、職業、居住地、家族構成、休日の過ごし方、趣味、悩みなど具体的に設定することで、ターゲットユーザーへの訴求力が高いWebサイトを制作することが可能になるのです。

普段お客様と接している営業やカスタマーサービスのメンバーなどを巻き込んで設定するのもいいでしょう。

予算・スケジュールを考える

Webサイト制作にかけられる予算とスケジュールを決めておきましょう。

予算に関しては、制作にかかる費用には幅があります。

先ほど設定した目的を達成するために必要な金額を確保できれば理想ですが、社内事情によりそれが難しい場合もあります。

予算を確保するために上司の承認が必要な場合などは、社内での合意を先に得ておくとよいでしょう。

制作のためのスケジュールもあらかじめ十分に確保しておきたい要件の一つです。

どのくらいの期間がかかるのかは、サイトの規模にもよりますが、通常は2−3ヶ月かかることが多いです。

少なくとも数ヶ月かかることを見積もって、時間を確保しておく必要があります。

関係各所との調整が必要になる場合もありますので、締切に追われないように余裕を持って計画を立てておくことをオススメします。

RFP作成のすすめ

「【ステップ1】制作前の3つの準備」で準備すべきものが明確になったら、RFPにまとめましょう。

RFPとは、Request for Proposalの略で提案依頼書と呼ばれるものです。

サイトに対する発注者側の要望をまとめた資料で、Webサイト制作会社に発注する場合は、発注前に依頼主側で用意しておく必要があります。

RFPには、先に定めた目的、ターゲット、予算、スケジュールを盛り込んでいきましょう。

発注者の要望が制作会社に明確に伝わりやすくなりますし、コミュニケーションもスムーズに進みます。

また、RFPを社内に共有することでサイト制作に対する意思統一を図ることもできます。

制作の過程でうまく進まないことがあったときなどに都度確認をすると、作りたいWebサイトの本来あるべき姿に立ち返ることができるでしょう。

【ステップ2】企画

web制作 流れ

次のステップではサイトのコンセプトを企画します。

サイトコンセプトとも呼ばれ、ターゲットに対してどのようなことをアピールするサイトにしたいのかを言語化したものです。

このサイトコンセプトが制作プロセス全体の基本方針となり、以降のサイト設計やコンテンツ、デザインなどのすべてに対する指針となるため、非常に重要なフェーズです。

制作会社に依頼する場合、ここからは制作会社との共同作業となります。

コンセプトを企画するにあたっては、ターゲットのニーズや競合サイトなどの調査・分析をしておくと役立つでしょう。

これまでに設定した目的やペルソナ、調査・分析の結果をもとにコンセプトを作成していきます。

【ステップ3】設計

web制作 流れ

サイトコンセプトの内容が決定したら、Webサイトの設計に移ります。

サイト設計とは、階層を整理してサイト全体の構造を決めていくプロセスのことです。

制作会社に依頼する場合は、制作会社がメインで設計してくれます。

コンセプトやペルソナの行動パターン・ニーズなどを考慮しながら、設計を進めていきましょう。

UI/UXの最適化

Webサイトの設計をするときに大切なのは、UI/UXを最適化して導線を設計していくことです。

UIとは、ユーザーインターフェースの略称でユーザーとサービスをつなぐ接点(インターフェース)を意味します。

具体的には、デザイン、フォント、イラスト、ボタン、メニューなど、ユーザーが接するすべての構成要素です。

一言でいうと、Webサイトの「使いやすさ」「わかりやすさ」のことです。

UXとは、ユーザーエクスペリエンスの略称でユーザーがサイトやサービスを通して得られる体験を意味します。

たとえば、ユーザーが商品やサービスを探しやすくしたり、フォームの入力をしやすくしたりする体験のことです。

UIはUXに含まれます。

UI/UXを最適化した導線設計をすることで、ユーザーが求める情報へスムーズに辿り着くことができ、離脱防止にもつながります。

サイトの構造を設計する

サイト設計は、各コンテンツをサイト内にどう配置するかを設計するプロセスです。

Webサイト全体の骨格となる大切なポイントになります。

サイトの構造を設計するには、階層を整理し全体の構造をサイトマップに見える化していきます。

サイトマップとは、サイトの設計図のことで階層構造をひと目でわかるようにした一覧図です。

サイトマップに落とし込んでいくプロセスでは、ターゲットがほしい情報に辿り着きやすいように意識して作成することが大切です。

【ステップ4】制作

web制作 流れ

これまで企画・設計したものをもとに、いよいよ制作に着手していきます。

サイトマップを確認しながら、コンテンツやデザインの制作に入っていくプロセスです。

この段階も制作会社がメインとなり、依頼主側は制作会社が作ったものをチェックする役割に回ります。

デザイン・コンテンツ

サイトコンセプトやターゲットを考慮して、デザインコンセプトを決めていきます。

デザインコンセプトは、サイトに使用する色やフォント、レイアウトなどサイト全体のデザインの方向性のことです。

デザインコンセプトが決まったら、各ページのワイヤーフレームを作成します。

ワイヤーフレームとは、簡単な構成図のことです。

ワイヤーフレームを作ることで、ページを構成する要素やコンテンツのボリューム感などを把握できます。

コンテンツは、サイトに掲載するテキスト、イラスト、動画、写真、画像などを指します。

デザインとコンテンツを作成する際にも、ターゲットに訴えかける内容になるように意識しましょう。

また、デザインと文章にはトーン&マナー(トンマナ)を決めて統一感を持たせることが重要です。

コーディング

デザインのコンセプトが決まったら、コーディングと呼ばれる作業に入ります。

コーディングとは、プログラミング言語を使ってプログラムを構築していくことです。

このときに使用する言語には、主にHTML、CSSやJavaScriptなどがあります。

HTMLはサイトの基本的構造を記述する言語、CSSはサイトの表示やレイアウトなどを制御する言語、JavaScriptは各要素の動作を制御する言語です。

これらはフロントエンドと呼ばれ、ページの表側の部分を担っています。

テスト・公開前チェック

コーディング作業が完了したら、公開前のテストを実施します。

テスト用のサーバーを用意し、テスト環境の中でサイトが仕様通り作動するかを確認していきます。

リンクが正しくつながっているか、レイアウトが崩れていないかなど細かい点まですべてのページを漏れなくチェックしましょう。

PCのとき、スマートフォンのとき、タブレットのときなどデバイスを変えてのチェックも必要です。

サイトが正確に表示されないなどバグが見つかったら、修正しなくてはなりません。

たいていの場合、何かしらのバグが見つかるため、バグ修正の時間も計算に入れてスケジュールを組んでおきましょう。

制作会社でのテスト終了後に依頼主側が確認し、問題がなければ納品となります。

【ステップ5】公開する

web制作 流れ

テストで動作が正常であることを確認できたら、いよいよサイト公開となります。

公開したら、すぐに動作や表示に問題がないかをテストして確認しましょう。

テスト環境で正しく表示されていたとしても、本番環境にサイトをアップしたら異変が生じることがあるためです。

テスト段階で見つからなかったエラーが、予想外の要因で起こりうるので油断は禁物です。

万が一不具合があれば直ちに修正できるように、デザイナーやエンジニアを手配するなど制作会社と調整をして体制を整えておきましょう。

公開後の保守運用も大切な作業

web制作 流れ

ついにサイト公開までこぎつけました。

ですが、これで終わりではないのです。

公開後は保守運用という大切な作業が待っています。

コピー機などの機械をときどきメンテナンスするように、Webサイトも定期的にメンテナンスをする必要があります。

これを怠ると、本来の目的や期待していた効果が得られないこともあるくらい重要です。

保守作業の内容としては、ドメイン・サーバーの更新、SSLサーバー証明書の更新、CMSのバージョンアップ、最新のブラウザ・端末への対応などがあげられます。

これらは自社で実施することもできますし、外注する手段もあります。

社内の担当者が変わったらサイトの詳細情報がわからなくなってしまったということがないように、保守運用の体制も整えておきましょう。

Web業界は進歩のスピードが速いですし、技術的な問題が起こったときにすぐに対処できるように、プロに任せるのが安心かもしれません。

Web制作の相場

web制作 流れ

制作の流れはわかったけれど、一体どのくらいの料金がかかるのかが気になっているのではないでしょうか。

相場を調べてみると、制作会社にもよりますが10万円~100万円以上と価格のばらつきがあることに気づかれると思います。

料金を決める際に基準となるのが、目的、ページ数・ボリューム、デザイン、予約・購入システムの有無などです。

依頼先も個人事業主で1人で制作するのか、法人でチームとして制作するのかで人件費に違いが出てきます。

制作の流れをつかんでおくと、単に安い・高いだけではなく「料金の差が出るのは何が違うのか」を理解しやすくなり、自社に必要なものは何かを判断できるようになります。

Web制作の流れを理解しよう

web制作 流れ

ここまでWebサイト制作の流れを解説してきましたが、大まかな流れを把握できましたでしょうか。

まずは目的・ターゲット・予算・スケジュールを決めることから始め、企画→設計→制作→公開と進んでいきます。

サイトは制作して終わりではなく、公開後も定期的なメンテナンスが必要です。

サイトの規模にもよりますが、知識がない状態で1人で制作するのはかなり時間を要する大変な作業になるかと思います。

何か技術的な問題が起こると、サイト全体に影響を及ぼすことも考えられます。

ホームページは、世界中に公開される会社の顔となる大切なものです。

ここはプロの手を借りて、相談をしながら進めていくのが早道です。

デザインも洗練されたものを作ることができ、技術的なトラブルにも対応してくれるため安心して任せられます。

本記事により、サイト制作の不安が少しでも軽くなる一助になったのであれば幸いです。