Webサイト制作の工程を知っておこう!制作フローの基礎知識について徹底解説 - BizNext

BizNext

Webサイト制作の工程を知っておこう!制作フローの基礎知識について徹底解説

2021年12月07日

今回は、結果を出すためWebサイトのリニューアルをお考えの方やこれから思い通りのサイトを作る方のために、弊社の取り組みにも触れながら、制作工程についても合わせて解説したいと思います。

「Webサイトの制作を発注したけれど出来あがったらイメージしたものと違っていた。」という事態にならないためにも、制作フローを知っておくことはたいへん重要です。

パソコン操作中

制作目的を明確化する

Webサイト制作するにあたっては、まず「ゴール」、つまりサイトの制作目的を明確にすることが大切です。ゴール(目的)は主に、大きく5つ挙げられます。

①問い合わせ・資料請求などによる接点の拡充
②商品・サービスの購入、申し込み
③自社及び製品の認知向上
④ブランディング(ブランド化)
⑤経費削減(お客様サポートも含む)

 

初めにゴールを明確にしておかないと、サイトデザインやコーディングといった今後の各工程に「統一感・一貫性」がなく、費用や時間を無駄に浪費してしまうことにもなりかねません。加えて、ゴールの曖昧さはユーザーにとってもそのWebサイトを訪れる上で、目的を失わせてしまいます。

Web制作会社が受注後に最初の行うのはゴールについて発注者と入念にミーティングすることです。ここを疎かにするWeb制作会社では思い通りのWebサイトは構築できないといっても過言ではありません。

ターゲットを設定

ゴールが決まったら、制作したWebサイトどんなユーザーにアクセスしてもらうか、ターゲットを設定する必要があります。できるだけ沢山のユーザーに訪れてもらいたいと思う方も多いと思いますが、それでは対象が漠然としてまとまりのないWebサイトになってしまいます。

Web制作会社では、ターゲットをより明確にするために必ず「ペルソナ」を設定します。ペルソナとは、年齢・性別・職業などを具体的に挙げ、架空に設定されたユーザー像のことを指します。この作業を行うことで、Webサイトのデザインや機能についても方向性が見通せるようになります。

ターゲティングの要素として挙げられるのが、5W2Hです。

 

when (いつ)  →いつ利用されるのか。

where (どこで)  →どこで利用されるのか。

whom (誰が)  →どのような人に利用されるのか。

what (何を)  →何を商品、サービスとするのか。

why (何故)  →どのようなニーズで利用するのか。

how (どうやって)  →どういう形式でサービスを露出させるのか。

how much (いくらで)  →いくらで露出させるのか。

 

もちろんペルソナは発注者とWeb制作会社で共有しなければ意味がありません。ペルソナをどこまで掘り下げるかや設定における妥当性などを含めて、こういった作業をどれくらい的確に行えるかはWeb制作会社の腕の見せどころです。

デザインイメージを決める

Webサイトのデザインは「ゴール」に対してブレることなく「ターゲット」へアピールする必要があります。そのため「カジュアルに」や「洗練された雰囲気で」など、言葉のみに終始するのは好ましくありません。言葉は人によって感じ方が異なりますから、アピールする意図と、見た人の感覚との間で齟齬が生じてしまう可能性があります。せっかく見てくださった方を逃してしまうのは勿体ないですから、誤解を生まない表現を心がけましょう。

ここでは、Webサイトのデザインを具体的に目に見えるものとして、制作にかかわる人同士で共通認識を作ることが重要ポイントになります。実績のあるWeb制作会社であれば、過去自社で作成したWebサイト画面を提示することでコンセプト(基本的な考え方)を視覚化することが可能です。

例えば、MUUUUU.ORGでは以下のようにデザインイメージが採用されたサイトと共に見やすく掲載されています。

サイト「MUUUUU.ORG」デザイン一覧

(参照MUUUUU.ORG)

その他の方法としてはイメージマップを作成することも考えられます。イメージマップとは、「ゴール」と「ターゲット」を縦横の軸にして、「シンプル」「ゴージャス」「明るい」「暗い(シック)」とカテゴリー分けし、それぞれに参考になるWebサイトや画像を当てはめた図表を指します。

また、ここで決定したコンセプトに基づいてタイトルやキャッチコピーを決める作業も行います。

サイトマップの作成

サイトマップとは、Webサイトがどのようなページ構成になっているかを一覧にした図表です。

サイトマップイメージ例

(参照chot.design)

 

サイト全体を俯瞰的に把握できるので、

・コンセプトがきちんと反映されているか

・必要とするページに漏れがないか

・改善する箇所はないか

を容易に確認可能なのがメリットです。

 

サイトマップ作成の主たる目的はユーザビリティ(使い勝手・使いやすさ)の向上です。ユーザーにとって使いやすいWebサイトでなければせっかく設定した「ゴール」通りに到達することができません。そのためサイトマップは、Webページの多寡にかかわらず作成されることがほとんどです。

弊社では、この段階でhtmlサイトマップを作成しています。

htmlサイトマップとは、Webサイトの各ページへリンクを貼った案内図のようなものです。基本的に各ページへのリンク集がリスト形式で記述したものです。htmlサイトマップを設置することで、先程指摘したユーザビリティの向上により役立てることができます。

なお、多くの場合、サーバーのレンタルやドメインの取得といった手続きもこのタイミングで行います。こういった細かい作業は自社で担当者を決めておいても忘れがちなので、一括してWeb制作会社に依頼しておくと安心です。

 

デザイン・レイアウト決定

「デザインのコンセプト」に基いて、具体的にWebサイトをデザインする作業です。サイトの顔とも言えるトップページのデザインを決め、そこから各ページをデザインすることが多いようです。

注意したいのは、1ページの中に情報を詰め込みすぎないことです。「ゴール」に必要な情報であっても量が多くなるようならページを分ける必要があります。

そのため実作業に入る前に、前項で作ったサイトマップに各ページに記載する情報や機能を書き加えたワイヤーフレームを作成し、全体のバランスを調整することもあります。

また、Webサイトで使用するロゴの作成もこの段階で行います。

SEO対策を含む制作・実装

Webサイトが書籍や紙のパンフレットなどと異なるのは、PCやスマホで見るページのデザインが、そのままの状態で保存されていない点にあります。

たとえば画像は専用の場所に収められおり、以下に記したコーディングによって各ページに表示される仕組みになっています。

今までが家を建てる前の準備だとすれば、ここから実際に家を建てる作業に入ることになります。

今回に限らず、このブログの他のページでも何度か書いていますが、Webサイトは作って終わりではなく、作ったサイトで集客や経費削減などを実現することを目的としています。

そのため弊社では、制作後の運用やメンテナンスについてもこの段階でしっかり見通して作業を行います。

コーディング・SEO対策・プログラミングは重要な部分なので、項目を分けて確認してみましょう。

【コーディング】

コーディングとはWebサイト・コーポレートサイトをブラウザを通じて閲覧できるようにする作業のことです。HTML(※2)やCSS(※3)といったプログラミング言語を用います。
※2:Webサイトの文章を構造化するマークアップ言語(記述方式)。文書を構造化するとは、Googleなどの検索エンジンに対して、Webページにどのようなコンテンツがあるかを認識させるための目印を記述すること。
※3:文字の装飾などコンテンツの見栄えを指定する。

【SEO対策】

Web制作会社に強く求められるが検索上位に表示されるWebサイトの構築です。SEO(検索エンジン最適化)対策はそのためにとても重要な施策です。当ブログでも紹介しているとおりSEO対策用のツールは各種ありますが、急なトラブルやGoogleのアルゴリズムが変化した場合の対応など、Web制作会社にはツールにはない強みがあります。

弊社ではここまででご紹介してきたように、緻密なプロセスを構築・分析することで、SEO対策がなされていなかったサイトの検索順位を大幅に向上させ、実際アクセス数の300%の上昇などを達成してきました。

金額の誤差の小さいお見積もりをさせていただいております。お問い合わせはこちらからどうぞ。

アグリゲート型求人広告運用代行

【プログラミング】

ECサイトにおける決済システムなど、Webサイトで機能させるために新たにプログラムを設計・作成することをプログラミングと呼びます。広義にはコーディングもプログラミングに含まれますが、すでにあるプログラムを利用するという点で違いがあります。

データチェック(テスト)

Webサイトが構築できたら、「きちんとページが表示されるか」「設定した機能が動作するか」などをテストします。ここまでは主にWeb制作会社内で行われる作業でしたが、ここでは実際にデータをサーバーにアップロードしてチェックします。主な確認項目は以下です。
・ブラウザチェック:ブラウザごとにレイアウトが崩れていないか、動作不良がないかを確認します。デバイスごとのチェックも含みます。
・バリデート:コーディングが仕様どおりに記述されているのかをソフトウェアを使って確認する作業です。
・リンクチェック:リンクが適切に処理されているかを確認します。

運用(更新)・保守

Webサイトは制作しただけでは意味がありません。より多くの「ターゲット」にアクセスしてもらい、「ゴール」を達成するためには、効果のあるWeb施策を実施して継続的な運用を行う必要があります。運用に該当する業務はWeb制作会社によって様々ですが、サイト(サーバー)の監視やデートのバックアップなど、毎日行う作業を指すのが一般的です。

また、保守をしっかり行いWebサイトのユーザービリティを保つことも大切です。保守についてもWeb制作会社によって内容が異なりますが、主に不測のトラブルに対して行う業務と考えて良いでしょう。

まとめ

Webサイト制作の工程について「思ったよりも多い」と感じた方もいるのではないでしょうか。それぞれの工程において発注者側の確認作業があることを考えると、その発端となる「ゴール」や「ターゲット」の設定がいかに大切かもお分かりいただけたと思います。Web制作会社を決めたら、まずコミュニケーションを十分に取ることを念頭に置いて、思い通りのWebサイトを構築してください。

弊社でも、サイト構築から運用、コンサルまでを手掛けるサービスを手掛けています。
長年のシステム開発で蓄積、涵養したノウハウを用いることで、効率的で効果のあるサイト運用を行っております。
お問い合わせはこちらまでどうぞ!

お問い合わせはこちらから

お問い合わせいただいた⽅、限定 今ならヒアリング・要件定義書作成を
無料で⾏わせていただきます

お電話でのお問い合わせ

平⽇09:30〜18:30

東京本社
03-5843-1958
大阪本社
06-6366-7906

この記事の著者

井上 博登
1980年・⼤阪⽣まれ、⼤阪育ち。⽴命館⼤学を卒業後、新卒でヤフー(株)に⼊社。
1年後に中⼭(代表取締役)と共に(株)セルバを起業。
⾒た⽬は営業、実態は「利益を出すこと」に徹底的にこだわるグロースハッカー。
費⽤を掛けず、いかにサイトの成果を上げられるか、⽇々研究&実践している。
プライベートの趣味は旅⾏・バスケ・映画鑑賞。⼆次のパパ。

お問い合わせ 「BizNext」について詳しく
知りたい⽅はお問い合わせください

お電話でのお問い合わせ

平⽇09:30〜18:30

東京本社
03-5843-1958
大阪本社
06-6366-7906