Web制作ノウハウ

ホームページ制作の流れを徹底解説!Web制作フローの基礎知識から担当者のタスクリストまで

WRITERヒサナガ広報

  • TOP
  • ブログ
  • ホームページ制作の流れを徹底解説!Web制作フローの基礎知識から担当者のタスクリストまで

SAHRE

「いきなりホームページ制作のプロジェクト担当者に任命された」そんなWeb担当者って実は多いようです。
Web制作の流れも分からない!自分は何をやらないといけないのか?
そんな不安を解消できるように、ジーピーオンライン元Webディレクターで現広報担当が解説します。
ジーピーオンラインのWeb制作の相談をする

ホームページ制作のおおまかな流れ

典型的なホームページ制作の流れとしては、「企画・設計」「制作・実装」「公開・運用」という形でおおまかに分かれていますが、成果を出すための制作フローを紐解くと、PDCAに沿った4つのステージと10のフェーズで構成されています。

4つのステージと10のフェーズ

コンサルティングステージ

 ・現状についての会社の状態やビジネスについて把握するヒアリングフェーズ
 ・業界市場や競合会社について調査するリサーチフェーズ
 ・プロジェクト企画やコンテンツ企画などのプランニングフェーズ
 ↓ Plan(計画)

実装ステージ

 ・情報設計や外部設計から取材・撮影の段取りまでおこなう要件定義フェーズ
 ・ユーザビリティやSEOの実装をおこなうデザイン制作(UI実装)フェーズ
 ・システム外部設計に沿った実装をおこなうシステム構築フェーズ
 ↓ Do(実行)

運用ステージ

 ・運用にあたっての体制や業務フローを策定するプランニングフェーズ
 ・更新業務やシステム保守を実施するオペレーションフェーズ
 ↓ Check(評価)

評価ステージ

 ・アンケートやアクセス解析をおこなうリサーチフェーズ
 ・アクセス解析の結果から分析をおこなう分析フェーズ
 ↓ Action(改善)

餅は餅屋と言いますが、制作業者と組むことで上記4つのステージの中で、Web担当者が担うことはそれぞれのフェーズごとの確認や承認業務、それに伴う社内段取りのみとなります。
この記事ではWeb担当者目線での基本的な流れをまとめてみました。

ホームページの目的を明確にする

まずはじめにホームページの目的について社内で決定します。
ホームページをつくるというのは何かしらの目的達成のための手段としてのひとつで、「なぜ、つくるのか?」Web担当者としてはこの点を関係者と共有するためにも明確にします。

ゴールを決定する

例えば、コーポレートサイトの場合は企業イメージの向上を目的にしたり、サービスサイトの場合は資料請求や問い合わせなどのリード客獲得を目的にしたり、リクルートサイトでは自社にマッチした人材の採用を目的にするなどがあげられます。

ターゲットやペルソナを決める

誰向けのホームページなのか?どんな人に見てもらいたいのか?
商品訴求サイトでは、商品購買層のターゲットやペルソナと連動する必要がありますし、コーポレートサイトの場合は、広いターゲットになってしまうため、IRコンテンツやサービス紹介コンテンツなどコンテンツごとにターゲットを設定するのもひとつの方法です。

業者探し・問い合わせ

社内でホームページの目的を明確にしたあとは、実現に向けてパートナーとなる制作業者を探すのもWeb担当者としての役割になってきます。上長や決裁者に向けて「なぜその業者を選定したのか?」という選定理由も必要なため、3社ほどに問い合わせをしたり、予算規模によってはコンペを開催することになります。

予算が決まっている場合は、その予算で目的を達成するためにどんなことができるかという提案内容で業者を選ぶこともひとつです。

逆に目的しか決まっていない場合は、企画内容に合わせて予算やスケジュールを提案してもらうことになり、総合的に業者を選ぶことができます。安かろう悪かろうという言葉もありますので、提案内容をしっかり比較すること、安心できそうな業者かどうかを判断するのに制作体制やこれまでの実績を把握し、一度直接会う機会をもつことをおすすめします。

ホームページ制作会社の選び方が分からない方は、ぜひこちらの記事を参考にしてください。

企画・設計

プロジェクトの成功がかかっている一番大事なフェーズです。
ビジネスの現場で仕事がうまくいく事を表す「段取り八分、仕事二分」や「段取り八分、仕上二分」という言葉がありますが、「企画・設計」フェーズがまさに「段取り」部分になります。

また、このフェーズから制作業者を入れていくことで、スムーズな進行になります。
制作業者とのキックオフミーティングがどのように進むかは、こちらをお読みください。

プロジェクト計画書の作成

制作業者とのこれまでの打ち合わせをもとに、プロジェクトの全貌が固まった計画書を作成して関係者で共通認識をもつことにつなげます。 プロジェクト計画書は「要件定義書」と言われる資料で提出されることが多く、具体的に記載されている項目としては次のとおりです。

  • プロジェクト概要(目的、ターゲット、マイルストーン)
  • 制作要件(動作環境、大枠のサイト構成、技術要件、その他要件)
  • システム要件(サーバー仕様、開発仕様)
  • 課題・リスク
  • 体制
  • 大枠スケジュール

これらについて差異がないかを確認して、社内での承認をとるまでがWeb担当者の役割となります。
なお、RFPの詳細はこちらでご紹介しています。

Webサイト構成を決定する

どのコンテンツをどうやって配置するか、伝えたいことを伝えるにはどのような構成が最適か、さまざまな観点から制作業者が主体となり練り上げます。そして、Webサイト構成をまとめた「サイトマップ」資料が完成されます。
本や雑誌でいう「もくじ」のようなもので、サイトマップに表示されているものがWebページとして作成されていきます。

サイト構成が決定した段階くらいで、大枠のスケジュールから詳細スケジュールへと移行していきます。Web担当者の役割としては、詳細スケジュールをもとにいつまでに何をしないといけないのかを把握して自身や関係者の業務スケジュールを調整します。

画面設計を決定する

Webサイト構成で全体像が決まると、つぎは個別ページの設計段階にはいります。
画面設計の段階ではレイアウトなどは気にせず、そのページに必要な要素や情報に注力する必要があります。
画面設計をもとにこのページにはどんな要素を掲載するかをすり合わせて、必要な情報を社内から集めたり、その情報について社内の詳しい人に取材をしてもらったりと原稿内容の準備が必要になります。

Web担当者としては、一番動き回る必要があるフェーズで、このフェーズでの段取りや準備がホームページ自体の成功に大きく影響してきます。逆にWeb担当者が受け身になっていると、原稿や素材をなかなか用意してもらえなかったり、公開前に社長や上長からこれまでの流れがひっくり返るようなやり直しを指示されたりと制作スケジュールの大幅な遅延につながります。

利用する資料例

  • 画面設計書(ワイヤーフレームと呼ばれることもあります)
  • 素材管理表
  • 取材・原稿について
  • 表記統一ルール表

システム仕様について決める

全体像と個別ページの設計まで進むと、つぎはシステムに関する仕様について話し合いが必要になります。
システムと聞くと難しそうに感じますが、Web担当者として気にするポイントは2つだけです。
①ホームページのどのコンテンツが頻繁に更新をしていく必要があるか
②更新をする頻度やスピード感が必要なのはどの情報箇所か

上記2つのポイントをしっかり伝えることでシステムはどういう仕様が良いか、CMS(自分たちでホームページを更新できるシステム)の導入はどうしておくのがベストかなどを制作業者が吟味してくれます。

ここで注意する点としては、「複雑なシステムにしないこと」がいえます。
念のためあれもこれもと機能を追加したくなるものですが、高機能にするほど使い手のWebリテラシーが求められます。
自分は大丈夫でも他の人に任せるときに使いにくいものになっていては本末転倒です。
年に1回使うか使わないか分からない機能をいれるより、誰でも簡単に操作できそうなシンプルな機能になるよう配慮することも、Web担当者の役割になります。
ここまで読んで、もっと自分でもCMSについて知りたい!と思った方はこちらの記事をお読みください。

利用する資料例

  • システム機能一覧
  • システム仕様書
  • 課題管理表

サーバー環境についてすり合わせる

Web担当者としてはサーバーなどに対してチンプンカンプンだと不安になりそうですが、社内で詳しい人(情報システム部やホームページ制作に関わったことがある前担当者など)に相談できる体制をつくっておくとスムーズです。

そんな人がいない!という時でも、当社のようなシステムやサーバーに明るい制作業者であれば、問題ありませんのでご安心ください。

利用する資料例

  • サーバー仕様書
  • テスト環境
  • ドメイン・SSL

制作・実装

デザイン制作

トーン&マナー検討資料でホームページを見た時にどういう印象を持ってほしいかなど、見た目についての部分を決めていきます。その後、画面設計書をもとにトップページや下層ページのベースとなるデザインを作成してホームページのデザインの方向性を決定します。
方向性が固まったところで各ページに必要なスタイルガイドを定義して、下層ページデザインのルールを決定していきます。

利用する資料例

  • トーン&マナー検討資料
  • デザイン趣意書
  • デザインスタイルガイド

HTMLコーディング制作

デザインが決定した後はそのデザインをもとにWebで表示されるようにするためのHTMLコーディングという制作がはじまります。
本や雑誌の作成の場合はデザイン=印刷物と同じ見た目になりますが、Webでは見る人の環境によって適切な表示になるように配慮されています。
(例)ノートパソコンで見る人、スマートフォンで見る人、タブレット端末で見る人等

このHTMLコーディングの品質によって、SEO(検索エンジン最適化)や表示速度、運用更新がしやすいつくかどうかが決まります。

利用する資料例

  • ディレクトリマップ
  • コーディングガイドライン

ブラウザチェック

HTMLコーディングが完了するとWeb上で確認ができるようになります。
テストアップされたホームページを見て、意図していた通りになっているかを確認します。

当社の場合以下のブラウザチェックが標準で対応しているブラウザです。
チェック時は一斉に行えるように都度チームで全ブラウザの表示についてチェックしています。
 ・Google Chrome(国内シェア、世界シェアともにNo1)
 ・Mozilla Firefox
 ・Microsoft Edge
 ・Internet Explorer11
 ・Safari×MacOS
※要件に応じて追加することもあります。
※その他スマートフォンの機種別、OS別環境でのブラウザチェックもおこなわれます。

システム開発

ブラウザチェックまで済んだところで、最後にシステム開発が行われます。
事前に決定したシステム仕様書にそってシステム構築がなされます。

Web担当者としてはシステム開発後に操作をする段階まで特に役割はありません。
テスト仕様書に沿ったテストを制作業者がしてくれるので、実際に使う時を想定した「ユーザーテスト」と呼ばれるテストがWeb担当者の役割になります。

利用する資料例

  • テスト仕様書

テスト環境で校正含め最終確認をする

最終の確認段階となります。原稿内容と照合して文言をチェック。
その際、表記ルールなどに基づき各文字内容の変更も実施します。
制作業者では各ページのリンクについては、リンク切れ箇所がないか、正常にリンク先ページへ遷移しているかも確認していきます。

Web担当者としては校正部分に注力して、公開して問題ないかどうかを判断します。
事前に決定した「画面設計書」「表記統一ルール表」を見ながら、特に制作期間中に社内で変更となった表記はないかなど、制作業者では分からないような点をチェックします。

公開・運用

公開しなければチェックができない部分というのが一部あります。
代表的なチェック項目でいうと、SNSでシェアをした時に画像が表示されるか、アクセス解析の数値が正常にカウントされているかなどがあげられます。「公開後チェックシート」を用いて、公開後に制作業者と手分けして確認をしていきます。

本番公開って具体的に何してるの?というのは下記の記事で詳しく解説しています!
気になる方はぜひチェックしてみてくださいね。

検索エンジンに公開を知らせる

検索エンジンに公開を知らせるとはどういうことかというと、日々Googleなどの検索エンジンはクローラーという巡回ロボットが色々なホームページを見回っているのですが、街の警察官のパトロールと一緒で、頻繁に見回りにくるわけでもないので、こちらから「見回り来てください~」とアプローチする必要があります。
Web担当者の役割になるタスクのひとつで、サーチコンソールを用いてその連絡を行います。なんのこっちゃと思われた方は制作業者に相談したら教えてもらえますのでご安心ください。

社内外へWebサイト公開の連絡

無事に問題なく公開されたことを確認したら、社内へ向けてホームページ公開の連絡と社外へ向けたリリースやSNS配信などをおこない、広く周知して見てもらえるように段取りをするのがWeb担当者の役割となります。
色々な人の目にさらされることで、色々な意見をもらうことになります。ひとつひとつメモをとっておき、有益な情報は今後の改善に活かせられるように準備をしておくことが大事です。

定期的な更新・運用

ホームページは公開するのがゴールではなく、公開してからがスタートです。
制作に関わった業者をそのまま運用体制に組み込むことが一般的ですが、社内でもホームページ運用チームを設けておくことがスムーズな更新・運用につながります。

利用する資料例

  • CMSマニュアル
  • Webサイト更新管理シート

アクセス解析・分析

公開してしばらくたつと、どう変化したのか?狙いどおり見てもらえているのか?というのが気になるところですが、TV番組の視聴率のようにホームページにも何人訪れたか、何回ページを見られたかなど様々な解析が可能です。

一般的には月に1回アクセス解析を実施したり、四半期に1回分析も含めアクセス解析を実施するのが多いかと思います。はじめに掲げたホームページの目的やゴールに近づいているかを分析して、よくないところがあれば、改善しホームページを育てていかないといけません。

当社の場合、社内でもアクセス解析や分析ができるので、社内スタッフにやってもらっていますが、年に1度やリニューアル前後などの大きなターニングポイントの時だけ、第3者目線からの分析という狙いで、グループ会社のデジタルマーケティングを専門におこなう会社(つながる科学研究所)にアクセス解析と分析を依頼することがあります。
そうやって、スポットで制作業者や解析が得意なプロの業者に依頼することも手段のひとつです。

利用する資料例

  • アクセス解析レポート

ホームページ制作の流れまとめ

ホームページ制作をよく家を建てる時にたとえることがありますが、
「企画・設計」に関しては「間取り」を決定するイメージで、
「制作・実装」に関しては「内装」をつくるイメージ、
「公開・運用」は家の完成と実際に住んでいくイメージです。

家を建てる時なんかは一度決定したあとで変更すると、お金も時間もかかってしまいます。
その点はホームページ制作も同じで、特に「間取り」と同じ「設計」の工程はホームページ制作の流れの中でも一番重要な工程になります。

フェーズごとのWeb担当者のタスク

最後にWeb担当者のタスクをダイジェストでまとめました。

1.ホームページの目的を明確にする

  • 社長や上長含めみんなで共通認識のゴールを決定する
  • ターゲットやペルソナを決める

2.業者探し・問い合わせ

  • 総合的に比較をして制作業者を選定する

3.企画・設計

  • プロジェクト計画書に沿った見積もりをもらって予算を確定する
  • Webサイト構成を決めて詳細スケジュールを把握する
  • 個別ページの画面設計を確定する
  • システム仕様について決める
  • サーバー環境についてすり合わせる

4.制作・実装

  • デザイン制作されたものを問題がないかチェック
  • HTMLコーディング制作されたものを問題がないかチェック
  • ブラウザチェックされたものを問題がないかチェック
  • システム開発されたものを問題がないかチェック
  • テスト環境で校正含め最終確認をする

5.公開・運用

  • 検索エンジンに公開を知らせる
  • 社内外へWebサイト公開の連絡をする
  • 定期的な更新・運用をして情報を最新にしていく
  • アクセス解析・分析をしてホームページを育てていく

なんだか大変そうに見えますが、実際にWeb担当者1人で対応するとなると大変です。
業者探しで成功すれば「社内の段取り」のみに集中できるので、まずは制作業者との良いご縁を目指しましょう。
もし、良いご縁に困ったときは当社にご相談ください!
ジーピーオンラインにWeb制作の相談をする

制作の流れに沿ったWeb担当者のタスクリスト

Web担当者様向けにホームページ制作の流れとタスクをまとめた資料をチェック表にして無料配布しています。資料請求フォームより「Web担当者のタスクリスト」資料希望の旨をお気軽に送信ください。

資料請求フォームへ

関連記事

制作実績

制作実績一覧へ

私たちジーピーオンラインは、
大阪・東京のWeb制作会社です。