WEB制作の基本的な流れ

それでは、WEB制作を行う上での基本的な流れを解説していきます。

企画

まずは制作するホームページの企画を行う必要があります。
企画段階で決めなければいけないポイントは、大きく4つです。
・目的
・ターゲット
・計画
・予算/スケジュール

目的

WEB制作を行うのであれば、目的を明確にしておきましょう。
どのような目的があるのかによって、WEB制作に求められる成果物は大きく異なります。
例えば採用目的なのであれば、企業の事業を説明するより、採用フローや待遇が分かるコンテンツを作らなければいけません。集客目的なのであれば、自社が魅力的に見えるような設計でホームページを制作する必要があります。
また、リスティング広告で運用を考えているのであれば、ホームページではなくランディングページの設計にした方が良いケースもあるでしょう。
まずは目的を明確にして、どのようなWEB制作の成果物が必要なのか検討しましょう。

ターゲット

目的が決まれば、具体的にターゲットの選定を行っていきましょう。
ターゲットによってホームページのコンテンツを変えなければ、誰にも刺さらない成果の出ないホームページが完成してしまいます。
例えば、新卒採用を強化するのが目的なのにもかかわらず、中途採用の内容が多く記載されているホームページを制作してしまったら、新卒の人材を集められません。
他にも若者をターゲットにサービス・商品を販売したいにもかかわらず、高年齢層の人に受けるデザインやコンテンツになっていると、ターゲットから疎遠されて集客効果を得られない可能性が高いです。
これからWEB制作を行うのであれば、どのターゲットに刺さるホームページを制作するのか明確にしましょう、

計画

ターゲットや目的が決まれば、具体的に計画を立てていきましょう。
どれくらいの規模のホームページを制作するのかによって、作業の手間や工数は大きく変わります。
例えば10ページと20ページのホームページでは、作業の手間や工数は倍も変わるので、確保しなければいけない人材の数や、納品までのスケジュールが変わりますよね。
計画を細かく立てておくことで、制作が始まってもスムーズに作業を進めることが可能です。

予算/スケジュール

計画が決まれば、具体的に予算やスケジュールの打ち合わせをクライアントと行いましょう。
あなたが提示した予算・スケジュールをクライアントが受け入れられない場合は、再び打ち合わせをしなければいけません。
例えばクライアントの予算からオーバーしている場合は、ページ数の削減などが必要になるでしょう。スケジュールの折り合いがつかないのであれば、見積もりが上がっても作業員を増やすなどの対策が必要になります。
予算・スケジュールは事前に決めておかないと大きなトラブルになるので、しっかりとクライアントと打ち合わせしましょう。

設計

企画が終われば、具体的にサイト設計を行っていきます。
サイト設計で決めるべきポイントは、下記になります。
・競合調査
・コンテンツ内容
・導線の作成
・必要機能の選定

競合調査

設計の段階になれば、競合調査を行って他社がどのようなサイトを構築しているのかを把握しましょう。
例えば検索上位の競合他社のサイトを把握することで、どのようなコンテンツを作ってSEOで検索上位になっているのか分かります。もし競合他社がSEO対策で上位に表示されている施策が分かったら、真似するだけで大きな成果を得られる可能性が高まりますね。
他にも、リスティング広告を運用している競合他社のランディングページを分析することで、どのような構成でコンバージョンに繋げているのか把握することが可能です。
デザインや集客施策など全ての業務を自社のノウハウ・知見で行っても成果が出る可能性は低いので、既に成果が出ている競合他社を分析して何で成果が得られているのか調査することをおすすめします。

コンテンツ内容

ホームページに掲載したいコンテンツ内容を決めて、どのようなページを作る必要があるのか把握しましょう。
コンテンツ内容が多いのであれば、複数のページに分けた方がユーザーに分かりやすいホームページを構築することが可能です。
よくある失敗事例ですが、ページ数を減らすために1ページにコンテンツをまとめているホームページがありますが、情報が多すぎてユーザーが理解できずに離脱してしまうというケースは少なくありません。
また、ページ数が多くなりすぎて、ユーザーに本当に伝えたい情報を閲覧される前に離脱されるという失敗事例も多いです。
これからホームページを制作するのであれば、本当に必要なコンテンツ内容を洗い出して、ユーザーに伝えたい情報を正確に把握させることができる構成にすることが大切になります。

導線の作成

ホームページを作るのであれば、ユーザーに閲覧されなければ意味がありません。
よくある事例ですが、デザインがすごくおしゃれで綺麗にもかかわらず、ユーザーに閲覧されないので集客などで全く効果が出ていないというホームページは多いです。
しっかりと効果の出るホームページを制作するためには、導線の設計が必須になります。
例えば検索エンジンからユーザーを集める導線を作るのであれば、コンテンツ制作が必須です。リスティング広告から導線を作るのであれば、ランディングページのような構成になっている必要があります。
他にも採用サイトを作る際に、導線を求人メディアにするケースもあります。
無闇にホームページを制作しても意味がないので、ユーザーを集められるように導線を決めておきましょう。

必要機能の選定

ホームページの利用目的に合わせて、必要機能を選定しましょう。
例えば特定のユーザーにだけWEBサイトを通じて伝えたい情報があるのであれば、会員制機能などを作る必要があります。他にも、お問合せをサイトから受けるのであればお問合せフォーム、商品の販売を行うのであれば決済機能などが必要です。
必要な機能を選定して、どのように実装するのか検討することも必要になります。
例えばプラグインで導入するのか、1からコーディングを行って実装するのかで必要になる予算も大きく異なるため注意してください。

デザイン

サイト設計が終われば、デザインを決めていきます。
デザインで決めるべきポイントは、下記になります。
・ワイヤーフレーム
・文章・写真
・具体的なデザイン

ワイヤーフレーム

ホームページのデザインを決める前に、ワイヤーフレームを構築していきます。
ワイヤーフレームによってユーザーの視認性が大きく変わるので、デザインの土台となる非常に重要な作業です。
ワイヤーフレームを決める際は、掲載する画像や文章量に合わせたデザインを作ることがポイントになります。
画像が多いのであれば、画像が見えやすいレイアウトでワイヤーフレームを作りましょう。文章が多いのであれば、適度に画像を入れてユーザーが負荷なく読めるデザインにすることがポイントです。

文章・画像

ワイヤーフレームができれば、どこに何の文章・画像を入れるのか決めていきましょう。
文章・画像の順番を変えるだけで、読みやすさや理解度、興味度を大きく改善することが可能です。
例えば、ユーザーが最も興味を持つポイントをホームページの上部に入れることで、興味度を上げられます。興味度を上げることができれば、ホームページの閲覧時間を改善できますね。
ユーザー目線で文章・画像を選定することで、ホームページの成果を大きく改善することが可能です。

具体的なデザイン

文章・画像が決まれば、ホームページのカラーなど最終的なデザインを決めていきましょう。
デザインによって与える印象は大きく異なるので、どのようなイメージをユーザーに与えたいのか検討してください。
例えば女性らしさを与えたいのであれば、ピンクを基調としたホームページがおすすめです。高級なイメージを与えたいのであれば、黒が良いでしょう。
どれだけ文章・画像を良くしても、デザインの方が与える印象は大きくなります。自社のイメージを正確に伝えられるデザインを作ることが大切です。

コーディング

デザインが終われば、コーディングを行っていきましょう。
コーディングを行う際のポイントは、大きく3つです。

デザイン崩れが起きていないか

ホームページ制作を行っていると、媒体によっては表示崩れが起きてしまっているというケースが発生します。
1つの画面で綺麗に表示さえたとしても、他の画面では表示が崩れているというケースは珍しくありません。
コーディングを行う際は、全ての画面で崩れることなくホームページが表示されているのか調べましょう。

内部SEO対策が施されているか

コーディングを行う際に、SEOで評価される内部SEO対策が行われているプログラムになっているのか確認しましょう。
内部SEOができていなければ、SEOで評価が下がるので検索順位に影響が出る可能性が高いです。
Googleなどの検索エンジンから評価されるホームページを構築するためにも、内部SEO対策ができているコーディングを意識してください。

実装した機能が正常に動いているか

実装した機能が正常に動いているのか、コーディング段階でチェックしておきましょう。
正常に機能が動いていない場合は、原因を解明して改善してください。
技術的に改善するのが難しいのであれば、外注するのも選択肢の1つになります。
特に決済や会員登録などの機能は、個人情報やクレジット情報を取り扱うので、入念に確認しましょう。

テスト・リリース

コーディングも終われば、テストとリリースを行いましょう。
クライアントに完成したホームページを確認していただき、改善点があれば修正してください。
テスト・リリース段階でよく発生するトラブルですが、提示したデザイン案で納得されていたにもかかわらず、実際に画面で見ると印象が違うというクレームを受けることがあります。
その際にデザインの変更を要求されるケースもありますが、その場合は大掛かりな修正になるので、追加費用を頂くようにしてください。
また、テスト段階では気づかず、リリースしてトラブルが発生するケースもあるので、その際は柔軟に対応するようにしましょう。

WEB制作の流れを決める際のポイント

最後に、WEB制作の流れを決める際のポイントについて解説していきます。

クライアントと入念に打ち合わせする

クライアントと入念に打ち合わせすることで、お互いに認識の違いが生まれることなく作業を進めることが可能です。
例えば、企業がユーザーに与えたいイメージを把握しておけば、デザインに反映させることができます。どのような目的でホームページを作るのか共有できれば、必要な機能やコンテンツを提案することが可能です。
打ち合わせを疎かにすると、修正が多く発生するなどの可能性があるので注意して下さい。

トラブル発生のリスクを抑える

WEB制作はトラブルになるポイントが多いので、流れの段階で意識することでトラブル発生のリスクを抑えることが可能です。
例えば、写真・文章などホームページに利用するものを、クライアントと自社のどちらが用意するのか決めておかなければ、契約後にトラブルに発展します。
他にも追加費用が発生するケースを事前に伝えておかなければ、作業開始後にトラブルになるケースもありますね。作業開始後にトラブルが起きれば、最悪の場合は入金されないなどのリスクもあります。
トラブルなくWEB制作を進めるためにも、流れの段階でトラブルになる可能性が高いポイントは重点的に潰しておくことが大切です。

自社のリソースを考慮する

クライアントとWEB制作の流れを決める際に、自社のリソースを考慮して意思決定を行っていきましょう。
案件を受注するためにクライアントの要求を全て鵜呑みにすると、自社のリソースで対応できなくなる可能性があります。
契約後に対応できなくなるとクレームや損害賠償に繋がるので、事前に自社のリソースを考慮してから流れを決めていくことが大切です。
自社のリソースで、無理なく納品できる期日などを提示することで、クライアントとのトラブルを抑えることができますよ。

 

Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。

  • 人材育成領域

    人材育成領域

    サイト流入
    2.3倍
    (6,843セッション→16,001セッション)
    反響
    2.1倍(12→25件)
    上位表示キーワード例
    「人材育成(検索Vol.8,100)」
  • 婚活領域

    婚活領域

    サイト流入
    2.1倍
    (52,945セッション→110,164セッション)
    反響
    1.3倍(412→536件)
    上位表示キーワード例
    「婚活(検索Vol.40,500)」
  • 日常用品領域

    日常用品領域

    サイト流入
    3.3倍
    (31,874セッション→105,514セッション)
    反響
    3.4倍(84→293件)
    上位表示キーワード例
    「お水(検索Vol.4,400)」

Web集客・制作・PRのご相談はこちらよりどうぞ

以下の内容でよろしければ、送信ボタンを押して下さい。

会社名
氏名
メールアドレス必須
電話番号
お問い合わせの種類
お問い合わせ内容

個人情報保護方針に同意の上、
送信ください

この記事の監修者

株式会社ブランディングワークス編集部

株式会社ブランディングワークス編集部

SEO対策・コンテンツマーケティングの支援事業者。SEO支援を中心に、伴うWeb制作修正やコンテンツ制作まで一気通貫した支援を実施。実績のあるパートナー会社と連携してその他Webマーケティング(広告運用・SNS・メディアのマネタイズetc.)も幅広くカバーし、戦略立案から実行までを総合的に支援も可能。

LIGブログに掲載されました