Webデザイン

2021.04.09 (公開: 2021.04.05)

Webサイト制作の流れでおさえておきたい2つのフェーズ

Webサイト制作の流れでおさえておきたい2つのフェーズ

Webサイトは会社の売上やサービスの運営に大きく影響することがあります。良いWebサイトはユーザーやクライアントからの好印象を獲得することができ、企業イメージの向上や売上拡大・事業の発展につながります。

そのように重要な意味を持つWebサイトですが、何も知らずに制作できるものではありません。いきなり会社のWebサイト制作担当に任命されたものの、何をしていいのか、そもそも何から始めれば良いのかわからないという場面もあるでしょう。

Webサイトの制作といっても新規制作だけではありません。すでにあるサイトを大幅にリニューアルすることもWebサイトの制作といえます。昔に作られたものの現在ほとんど運用されていないコーポレートサイトを、活用できる状態に作り変える場合が当てはまります。

実質新たにWebサイトの制作を進める形ですので、企画や設計から行うことになります。制作そのものだけでなく事前の計画も非常に重要です。

Webサイトの制作は踏むべき手順が非常に多いため、流れに沿ってしっかりと対応する必要があります。どのステップも良いWebサイトを作るためには欠かせないものです。

この記事ではWebサイト制作の流れについて、フェーズや手順ごとに詳しく解説していきます。

【基本は2ステップ】Webサイト制作の流れ

【基本は2ステップ】Webサイト制作の流れ

Webサイト制作をするときの流れを紹介します。大きく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サイトを制作するのに、それが原因で会社の経営に支障が出ては意味がありません。

今後の推定売上や利益計画などを使いながら、Web制作の予算を決める必要があります。

スケジュールの設定も大切です。Webサイトをいつまでに公開したいかある程度決めておき、そこから逆算してスケジュールを立てていきます。

Web会社制作にかかる時間の例は以下のとおりです。

  • Webサイトの目的・ゴール・予算設定 1~2週間
  • 発注候補の制作会社と打ち合わせ 制作会社のスケジュールにもよるが1~2週間
  • 制作会社からの見積りや提案 1~2週間
  • Webサイト制作前の打ち合わせ 週1回程度の打ち合わせを1~2ヶ月ほど
  • Webサイトの設計 数週間~1ヶ月
  • デザイン案の作成 数週間~1ヶ月
  • Webサイトの開発 数週間~1ヶ月
  • 納品されたWebサイトのチェック 1~2週間

すべてが独立して進むわけではなく、例えばWebサイト設計とデザイン案の作成を並行して進めることもあります。各会社の進め方やスケジュールにもよりますので、あくまで参考程度としてください。

それぞれにかかる時間を考慮しながらスケジュールを組んでいきます。

制作会社への発注を検討

予算やスケジュールに関する計画ができたら、実際に制作会社への発注を検討します。

まずは依頼先の候補となる会社をいくつか選定しましょう。これまでのWebサイト制作実績や制作会社の強みなどを比較します。例えばインターネット上で商品を販売するためのECサイトを制作するのであれば、ECサイトの制作実績が豊富な会社を選ぶと良いでしょう。もしグローバル展開を検討しているのであれば、海外関連に強い会社が適しています。

このときに具体的な見積り案をもらうためには、制作会社になるべく多くの情報共有をする必要があります。曖昧な情報のみでは制作会社側は機能や対応時間(工数)の判断ができないため見積りの作成が難しく、場合によっては断られてしまう可能性もあります。

制作会社に伝えるべき情報として、Webサイト制作の目的・ゴール・ターゲット・伝えたい情報・予算・スケジュール感が挙げられます。備えたい機能や要望があればそれらもなるべく盛り込むべきです。具体的な情報を共有するためにも、発注前の計画段階で妥協してはいけません。パソコンでの閲覧だけはなく、タブレットやスマートフォン対応の必要性についても盛り込みましょう。

伝えるべき情報がまとまり、候補となる制作会社のリストアップが済んだら、各会社に問い合わせを行います。比較検討をするために複数社に問い合わせをすると良いでしょう。しかし、あまり多すぎても連絡等で手間がかかり、負担になってしまいます。

見積り依頼を出す会社は3社程度が適切でしょう。良いと思った制作会社を絞り込み、見積り依頼を出します。

制作会社に問い合わせ・発注

制作会社の候補が決まったら、問い合わせを行い、要望を伝えたうえで見積り依頼を行います。このとき、提案依頼書というものを準備し、目的やターゲット・伝えたい情報・予算・依頼したい範囲・スケジュール感などを記載して提出すると良いでしょう。提案依頼書はRFPとも呼ばれます。

問い合わせをするときは、返信の速度や文章の内容についてもチェックしましょう。

外注依頼をする以上、依頼先の会社と連絡する場面は多くなります。そのときレスポンスが遅いと作業が滞る原因になりますし、不安にもつながります。丁寧さが欠けた文章が届いた場合もパートナーとして選ぶには心配です。最初の連絡に対する返答の段階でもなんとなくの印象を掴めますので、この時点で懸念を抱くようであればその会社はやめたほうが良いでしょう。

また、実際に打ち合わせをしたときに感じた担当者との相性も大切なポイントです。スムーズに進めるうえで大切なのは成果だけではありません。人との関係性や感じる印象なども大きく影響します。不親切である担当者と、親切にヒアリングをしてくれる担当者であれば、時と場合によるものの後者のほうが気持ちよく仕事ができることが多いはずです。

可能であれば、過去に制作したWebサイトの具体的な制作スケジュールや予算などを聞いておきます。実例があるとイメージがしやすいですし、安心感も高まるでしょう。

費用だけではなく返信内容や打ち合わせの時の対応面など、さまざまな要素を総合的に考慮して制作会社を検討し、発注を行います。

要件定義

無事に制作会社が決まったら、要件定義を進めていきます。

・サイトコンセプト

Webサイトの目的やコンテンツをはっきりさせるために、サイトコンセプトの設定が必要です。コンセプトは「ベースとなる考え」を意味し、Webサイト全体で一貫させるべき考えを指します。

例えば「10代の若い学生が手軽に流行のおしゃれに関する情報を得られるサイト」などのように、ターゲット層や目的・機能性のポイントなどをまとめて表します。このコンセプトに沿ってWebサイトを運営するのであれば、サラリーマン向けの商品紹介や主婦向けのサービス展開はしないでしょう。

・サイト設計

サイト設計とはWebサイトの骨組みを作る作業のことで、Webサイトの要素を作るための下準備です。

画面のレイアウト図であるワイヤーフレームの作成・掲載する情報のカテゴライズなどを行います。Webサイトのタイトルやデザインイメージなどもこの段階で定めます。

・ディレクトリ構造設計

ディレクトリ構造とはWebサイトの階層構造のことです。

コーポレートサイト内に自社ECサイトへのリンクが貼られている場合を例にすると

  • 第一階層:コーポレートサイトトップページ
  • 第二階層:ECサイトトップページ
  • 第三階層:商品カテゴリページ
  • 第四階層:商品ページ

となります。

ディレクトリ構造をしっかり行っておくと、Webサイトの管理がしやすくなるだけでなくユーザー側もサイトを使用しやすくなります。どのような構造にするか検討しておくことが大切です。

・開発・CMS導入の有無(サイト全体をCMS化するのか)

開発・CMS導入の有無についても検討します。CMSとは「コンテンツ・マネジメント・システム」の略で、HTMLなどの知識がなくてもWebサイトの更新や運営ができるシステムです。

Webサイトの更新を自社で行うのであれば、HTMLなどWeb制作の知識がなくても更新ができるようにCMS化しておいたほうが良いでしょう。ただし定期的な更新や自社での編集をしないのであれば不要ですので、開設後の運用もふまえて検討します。開発の必要があるか、CMSを利用したほうがよいかは、制作会社に相談を行いましょう。

・サーバ・ドメインの取得

Webサイトを新しく制作する場合は、サーバやドメインの取得を並行して行います。

Webサイトは基本的にサーバを運営している会社にインターネット上でスペースを借りて、そこに制作したWebサイトのデータを置くことになります。ドメインはURLの元となるもので、基本的にこれがないとユーザーはWebサイトにアクセスすることができません。インターネット上の住所のようなものです。*****.co.jpであらわされるものがドメインです。サーバとドメインを紐づけることで、ユーザーはURLから自動的にサーバにアクセスし、Webサイトの情報を閲覧できるようになります。

ドメインは会社名やサービス名をアルファベット化していれることが一般的ですが、日本語のドメインも利用可能です。ドメインを取得する際はドメイン管理会社にて空き状況を確認します。会社名であれば重なることはあまりありませんが、同名の会社名が存在する場合、ドメインが空いていないということもありますので、あらかじめ確認を行いましょう。

・想定スケジュール

Webサイト制作全体における想定スケジュールを立てることも大切です。公開予定日を定めて、スケジュールを制作会社に確認しましょう。制作会社の対応スケジュールだけではなく、自身や会社の確認にどのくらいの日数がかかるかも考えながら、スケジュールを設定することが大切です。確認に漏れが発生すると、後で追加変更や修正が発生し、スケジュールの遅延や追加費用の発生にもつながるため注意が必要です。多少長めに設定しておくとよいでしょう。

素材提供

要件定義が完了したら、制作会社に情報共有やすり合わせを行ったうえで制作フェーズへと入ります。このとき、Webサイトで使用可能な素材もあわせて提供します。

企業ロゴや自社が保有している画像のほか、各ページに掲載したいテキスト案などがあれば制作会社に送付しましょう。ロゴや画像については可能であれば制作会社側ですぐに使えるような元データが望ましいです。

目次へ

②制作フェーズ

Webサイトの要件定義が完了し、情報や素材の共有も済んだら、いよいよ制作フェーズに突入です。制作を行うのは制作会社となりますので、Webサイト制作担当者の主な業務は確認作業となります。

制作会社から定期的に進捗連絡が入るはずなので、担当者は都度確認をし、要件やイメージからずれていないかをチェックします。「サイトコンセプトが守られて統一感が出ているか」「提供した情報が必要箇所に掲載されているか」「何か問題はないか」など確認すべき点は多いです。

制作そのものを行うのは制作会社とはいえ、成果物に可否を出すのは担当者の仕事です。ここでチェックをおろそかにし、後から問題が発覚すると余計な手間がかかり、スケジュールの遅延や追加費用が発生することがありますので注意しましょう。

ワイヤーフレーム作成

ワイヤーフレーム作成

制作フェーズで最初に行うことが多いのがワイヤーフレームの作成です。ワイヤーフレームとはWebサイトのレイアウトを決める設計図のようなもので、構成が異なるページごとにそれぞれ作成します。どこにどのコンテンツを配置するかを大まかに設定します。
自社のデザイナーに制作してもらう場合は、画像のように手書きのものでも十分ですが、制作会社に依頼する場合はデザイン案に近い形で上がってくることもあります。構成要素に抜け漏れがないか、しっかり確認をしましょう。

ワイヤーフレームの作成は、Webサイトの構成やデザインの方向性を決めるために重要です。Webサイト制作を成功させるためには、自社と制作会社の関係者全員で共通認識を持つ必要があります。個々人でイメージに相違が生まれないよう、ワイヤーフレームの制作段階で綿密なすり合わせを行いましょう。

画面に必要な要素や必要ない要素を整理しつつ、ユーザーの導線を考えてワイヤーフレームを作成する必要があります。

一度作ったワイヤーフレームはなるべく修正しないようにしましょう。通常、デザインの作成段階に入ったら変更できません。Webサイトの大枠を決める重要な段階ですので、妥協せずに進める必要があります。

ワイヤーフレームは要件定義に沿って制作会社が作成するものです。このワイヤーフレーム作成をスムーズに進めるために、綿密な要件定義が求められるのです。パソコンの閲覧だけではなく、タブレット端末やスマートフォン端末での閲覧時に構成が変わる場合は、あわせてワイヤーフレームを作成してもらいます。

ワイヤーフレームに問題がなければ、次の段階に進みます。

デザイン作成

具体的なデザイン作成の工程に入ります。ワイヤーフレームをもとに制作会社がデザイン案を作成します。担当者は要素に抜け漏れがないか確認します。

もし、デザインに希望や条件があるなら、事前になるべく詳細を伝えます。テーマカラーやイメージなどが具体的に決まっているのであればデザイン案の作成が始まる前に共有が必要です。使用してほしい画像や素材については素材提供の時点ですでに共有済みかと思いますが、改めて確認をしておきましょう。

掲載する画像やテキストは基本的にクライアントである自社が用意します。自社の著作物やフリー画像など、使用に問題がないものを選びましょう。万が一著作権に問題のある画像を使用してしまうと他社とトラブルになってしまうことがあります。画像を提供し使用するよう指示したのは自社ですので、責任を負うのも当然自社です。無用なトラブルを避けるためにも注意しましょう。

デザインはコンセプトをもとに統一感のあるものにします。階層に応じて構成も異なるため別のワイヤーフレームが使われますが、そのうえで同一サイトであることを認識できるような統一感のあるデザインにします。

デザイン作成は制作会社のデザイナーが行うものです。テーマカラーや使用する画像・文字のフォントなどを揃えることで、統一感のあるデザインになります。

また、閲覧するデバイスごとに別々にデザインを作ることがあります。パソコン向けとスマートフォン向けのWebページではそれぞれ適したデザインレイアウトが異なるため、別々の制作が必要なことがあります。その場合でも、コンセプトを守りイメージに統一感を持たせるために、テーマカラーやフォントなど大まかな部分はなるべく同じにしたほうが良いでしょう。

デザインはWebサイトのイメージを大きく左右する重要なポイントです。理想的なWebサイトになるようにしっかりと確認をしましょう。

コーディング・テストアップ

デザイン案が決まったら、一枚絵の状態のデザインを実際にWebサイトとして機能するようにコーティングを進めます。コーティングとはプログラムを組んで実際に構築していくことです。

Webサイトのコーティングはまず「HTML」と「CSS」というプログラム言語を使って行われます。その他「JavaScript」や「php」「Java」など聞きなれない言葉が制作会社から出てくることがあるかもしれませんが、実際にコーティング作業を行うのは制作会社ですので詳しく知らなくても問題はありません。HTMLはWebサイトを作るために必要な言語、CSSはHTMLで作られた文書の表示やデザイン形式の指定をするものを指します。

自社でWebサイトを制作する場合は運用面まで考えてコーティングを行わないと、後から編集が難しくなる可能性があるので、注意しましょう。
コーティングは最初に作成したフレームワークやデザイン案をもとに進められますが、より細かい部分を決めるためにすり合わせが必要となることもあります。もしコーティング段階で制作会社から指示の要請や相談を受けたときには、イメージ通りのWebサイトを完成させるためにも明確な答えを出すようにしましょう。

また、CMSを導入したり、開発を行うのもこのタイミングとなります。

コーティングが完了したら、テストアップを行います。制作会社側でサーバにアップロードし、関係者しか閲覧できない状態でインターネット上にて確認できる状態にします。この工程をテストアップと呼びます。

実際の公開用とテストアップ用でふたつのサーバーが用意できるのが好ましいですが、予算の都合などで難しければ、同じサーバー内でディレクトリを分けてテスト環境用を用意しましょう。
テストアップで問題なくWebサイトが表示さたら完成まであと少しです。

動作確認

テスト環境でWebサイトの最終確認をします。Webサイトとしての機能性や、掲載されている情報に誤りがないかなど隅々までチェックが必要です。

Webサイトには各ページ間で多数のリンクが設置されますが、それらがすべて問題なく動作するかひとつひとつクリックしてチェックします。そのうえですべてのページを開き、誤字脱字の有無やレイアウトの崩れなど細かいところまで確認しましょう。

また、近年はブラウザの種類や使用する端末も多数あります。PC・スマートフォン・タブレットそれぞれでWebサイトを開き、さまざまなブラウザを使用するなどをして、どんな環境下であっても適切にWebサイトが閲覧できることを確認しましょう。しかし、すべてのブラウザや端末に対応したWebサイトを制作することは難しいため、ユーザーの利用率を考慮して、あえて対応しないという判断をすることもあります。

もしWebサイト内に特別な機能を搭載しているのであれば、それらが正常に作動するかも試す必要があります。記事や商品をブックマークする機能やECサイトの決済機能などが最たる例です。Webサイトの目的によってはこれらの機能が正常に動くことが欠かせない条件となりますので、くまなくチェックします。

Webサイトの性能そのものだけでなく、要件定義に反していないかも確認しましょう。いくら動作に問題がなく誤字脱字も発生していないWebサイトであっても、そもそもの要件から逸れていたら理想的なWebサイトとはいえません。改めて要件と照らし合わる必要があります。

Webサイトの一般公開前の動作確認はかなり時間がかかる作業ですが、Webサイトの公開後に修正や調整をするのはより大変なことです。この段階で細かいところまで確認しておきます。

Webサイトとしての機能に問題がなく、表示されている情報にも誤りがないことがはっきりと確認できたら、無事一般公開へと進みます。

公開

テスト環境から一般公開用の環境に移したら、無事リリースとなります。公開後も動作確認をしっかり行うことが大切です。

また、アクセス解析を設定している場合は、正常にデータが取得できているかを早めに確認しましょう。

また、Webサイトが公開したことを顧客に伝える必要があります。Webサイトを活用させるためにはまずは知ってもらうことが必要です。認知度を上げるため、SNSでの情報公開やプレスリリースの配信などをしましょう。

まとめ

Webサイトの制作は非常に手順が多くそれぞれ重要な役割を持つため、流れに沿いながらポイントをしっかり押さえて進める必要があります。Webサイトは事業運営に大きな影響をもらたすものです。どこかで妥協してしまうと良い効果が得られなくなってしまう可能性が高いので注意しましょう。

大切なのはWebサイトの目的やゴールの設定、ターゲットにどの情報を伝えたいかを明確にすること、そして理想を実現させるために最適なパートナーともいえる制作会社を見つけることです。費用だけで決めることをせず、過去の実績や担当者との相性など総合的に判断して制作会社を選びましょう。

Webサイト制作には非常に多くの人が関わりますので、全体が共通認識を持つことが非常に重要です。サイトコンセプトやデザインのイメージ・掲載する情報などを全員が共有することが、理想的なWebサイト制作につながります。

さまざまな過程を経て無事にWebサイトを公開できたとしても、そこで安心してはいけません。大切なのは活用することです。Webサイトの公開を関係者やユーザーに知らせ実際に使用してもらうことではじめて効果が出ます。

Webサイト制作の流れを把握し正しく手順を踏む、そして良い制作会社を見つけられれば、きっと理想的なWebサイトができるでしょう。

著者紹介

三木 五月

三木 五月

代表取締役社長

神奈川県の湘南でWeb制作会社を経営しています。湘南をシリコンバレーみたいにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です! 詳しくは採用ページをご確認ください。