ホームページ制作の流れ - 5つのステップをWebディレクターが解説 –

ホームページ制作の流れ - 5つのステップをWebディレクターが解説 –

ホームページ制作の流れ - 5つのステップをWebディレクターが解説 –の画像

ホームページ制作の流れ - 5つのステップをWebディレクターが解説 –

今回はホームページ制作の流れを初めてWebサイトを作成する方にもわかりやすく5つのステップに分けて解説をしていきます。

ホームページ制作を検討されている企業やWeb担当者方にとって役立つ内容になりますのでぜひ最後までご覧ください。

ホームページ制作の5つのステップ

ホームページ制作は大まかに「企画・設計フェーズ」と「構築フェーズ」の2つに分けることができます。さらに「企画・設計フェーズ」は「コンセプトの設計」と「サイト設計」の2つに、「構築フェーズ」は「デザインコンセプトの設計」と「構築・コーディング」、「テスト・公開」の3つに細分化することができます。

それでは「企画・設計フェーズ」から具体的に解説していきます。

コンセプト設計のイラスト

①コンセプトの設計

企画・設計フェーズの「コンセプトの確定」ではおおまかに下記のことをお客様と制作会社で確認して、ホームページをどのように活用していくのか、どのようなターゲットに向けて発信するのかなどの方向性を確定していきます。

  • 現状の課題の抽出、要望のヒアリング
  • お客様の事業の理解
  • 競合の調査
  • ターゲット・ペルソナの定義
  • ディレクトリマップの作成
  • 目標・KPIの設定
  • 制作フローの確認
  • 既存サイトの分析・調査(あれば)

一つずつ詳しく解説していきます。

現状の課題の抽出、要望のヒアリング

まずはお客様が現時点で抱えている課題を抽出し、どのような展望があるのかを確認します。

もし、お客様側で漠然と「ホームページを新しくしたい」「新規事業立ち上げに伴いホームページが必要」などと活用目的の抽象度が高い場合はヒアリングで深掘りしていきホームページの利用目的を明確にします。

お客様の事業の理解

ホームページにどのようなページを作成し、各ページのどのようなコンテンツを掲載するのかを検討するためにお客様の事業の特徴や優位性をできるだけ深掘りします。

当然、制作会社側も同業種や競合他社のホームページを調査してある程度の業界の特徴は理解することはできますが、お客様の事業を最もよく理解しているのはお客様自身であるので、制作会社に依頼する前の時点でどのような内容をホームページに掲載したいのかはまとめておくことをおすすめします。

競合の調査

コンテンツ設計をする上で重要になってくるのが競合の調査です。

競合のサイトではどのようなターゲットに向けてどのような情報を発信しているか、ドメインパワーは狙っているキーワードなどを専用のツールで洗い出したうえで競合に勝てる領域を見つけます。

ターゲット・ペルソナの定義

コンテンツの方向性が決まったら具体的にどのようなターゲット属性のユーザーに使用してもらいたいのかをイメージします。

その際にどのような悩みを抱えたユーザーがどのような入口からホームページに流入してきて、どのような価値を提供することで問い合わせや申し込みといったコンバージョン(CV)に至るのかを想定したカスタマージャーニーマップを作成します。

ターゲット・ペルソナを設定する際には営業などの直接お客様と接点を持つ方の意見を取り入れつつ、できるだけ実際のユーザーの考えを取り入れるようにします。

ディレクトリマップの作成

サイトコンセプトやターゲットの方向性が固まった段階でどのようなページを作成するのかというディレクトリマップ(制作会社によってはサイトマップと呼ばれる場合もあります)を作ります。

この段階で掲載コンテンツが漏れていたりすると後々ページの追加が必要になり、制作会社によってはページ追加費用が発生するため注意が必要です。

目標・KPIの設定

最終的なゴールをどこに設定するのかを制作会社と決定します。

例えばお問い合わせ数やカタログダウンロード数、セミナー申し込み数などにコンバージョン(CV)を設定して実際の数値を計測していきます。

この目標はお客様の事業やフェーズによって異なるので自社のマーケティング担当者などの意見も取り入れながら設定します。

制作フローの確認

ホームページ制作全体のスケジュールを確認します。

最終的な公開日や各フェーズを何営業日で進めていくかなどを確認して制作会社側とお客様側である程度の共通認識を持ちます。

ホームページ制作あるあるなのが制作の途中でお客様もしくは制作会社側の繁忙期が重なっている場合、全体の進行が遅れることが多々あります。

そのため、最初の打ち合わせの時点でお互いの繁忙期や担当者が出張などで対応できない期間をあらかじめ共有したうえでスケジュールを作成することが重要です。

既存サイトの分析・調査

これはホームページを既にお持ちのお客様の場合は現在のサイトの状態を調査し、改善が必要な点などを洗い出します。

その際には実際の使い勝手や困っていることなども抽出し、新しいサイトではどういった機能を持たせるのかなどを踏まえて設計します。

また、アナリティクスなどの数値をもとにホームページ自体のパフォーマンスを改善した方が良いのか、コンテンツを見直した方が良いのか、デザインや導線などのUI/UXデザインを回収した方が良いのかなどの改善施策を提案していきます。

以上がコンセプト設計の大まかな内容になります。

Webパーツのイラスト

②サイト設計

コンセプト設計が完了したらサイト設計に移ります。

サイト設計は主に3つの工程に分けられます。

  • コンテンツ企画
  • システム要件定義
  • ワイヤフレーム作成

1つずつ解説していきます。

コンテンツ企画

前のコンセプト設計のディレクトリマップ作成の工程である程度どのようなコンテンツをホームページに掲載するのかは考えていますが、このコンテンツ企画ではより詳細に各ページにどういった内容を掲載するのかを確認します。

例えばサービス紹介ページは各種事業内容および事業内容の特徴や優位性、サービスの流れや実績紹介などを掲載する必要があるでしょう。

会社案内ページであれば企業理念や代表挨拶、会社概要やアクセスなどを掲載する必要があります。

コンテンツ企画の段階ではこれらの各項目の情報を掲載することが可能かなどを踏まえて各ページにどのような情報を掲載していくのかをより具体的にイメージして検討します。

システム要件定義

ホームページにどのような機能を持たせるのかを洗い出します。

例えば世界的によく使用されているCMSであるWordPressの場合を例に考えるとどのようなプラグインを導入する必要があるのか、また、ホームページのどの箇所をお客様側で更新できるようにするかなどによって必要な機能が変わってきます。

具体的にはお知らせやコラムのみを更新できるようにする場合と、トップページや会社案内のテキストもお客様側で更新可能にする場合とで工数が変わってきます。

これもホームページ制作あるあるですが、お客様側ではこの機能は当然ついているものだと思っていた機能が実は追加費用が発生する機能ということはあるあるなので、システム要件定義は細かすぎるくらい制作会社とすり合わせすることをおすすめします。

ワイヤーフレーム作成

ホームページに掲載するコンテンツと実装するシステム要件が確定したら各ページのワイヤーフレームを作成していきます。

ワイヤーフレームというのは家づくりでいうところの設計書のようなものでどの位置に画像やテキスト、ボタンを配置するのかを視覚化するための資料です。

これによりユーザーがホームページに流入してきた後にどのような動線でコンバージョン(CV)までに至るのかをシミュレーションすることができます。

また、この段階で必要・不必要なコンテンツを洗い出すこともできます。

以上がコンテンツ企画の内容になります。

デザイン作成のイラスト

③デザインコンセプトの設計

デザインコンセプトの設計の段階ではターゲットに適した色味やトンマナの設定、使用するフォントを決めていきます。

また、この段階で会社ロゴはあるのかであったり画像素材はフリー素材を使用するのか実際の写真を使用するのかなどについても確認する必要があります。

実際にこれらはお客様側から指定されるというよりかはデザイナーから提案ベースで確認・決定するケースが多いです。

デザインコンセプトが決まったらまずはトップページのデザインカンプと呼ばれるラフ案を提出し、お客様のフィードバックをいただきながら調整作業を行なっていきます。

コーディングのイラスト

④構築・コーディング

ここからは基本的には制作会社側での作業フェーズに入っていきます。

使用するCMS(ページ作成ツール)によって多少異なりますが大まかには下記の通りです。

まずは作成したデザインカンプ通りにページを作成していき、下層ページについてもトップページデザインに合わせてコーディングと呼ばれるページ構築作業を進めていきます。

全ページのページ構築作業が完了したらCMSに対応するようにプログラムを実装していきます。

ホームページのイラスト

⑤テスト・公開

全ページの構築作業が完了したらフォームが問題なく動作しているか、PCやスマホでの表示でデザインが崩れている箇所がないか、誤字脱字などがないかなどの動作確認・テストを行います。

問題なければ本番アップして本番環境でも問題なく表示されているか、フォームが動いているかなどを確認します。

まとめ

今回はホームページ制作の流れを解説しました。

具体的な流れは制作会社に依頼するのかフリーランスに依頼するのかなど依頼先によって異なるのであくまでも参考までに留めてただけますと幸いです。

Webマーケットではホームページ制作以外にもホームページ診断や制作会社との間に入って制作をスムーズに進めるWeb代行業務なども行なっておりますので、ホームページに限らずWebに関するお困りごとがございましたら無料相談申し込みフォームよりお気軽にご相談ください。