fbpx

中小企業のWeb活用
Webマーケティングブログ

Website Utilization Blog

中小企業の皆さまがWebを活用いただけるよう
基本知識から応用まで発信していきます。

【初心者向け】ホームページ制作のおおまかな流れ!ポイントと注意点 

【初心者向け】ホームページ制作のおおまかな流れ!ポイントと注意点 

ホームページ制作には基本的な工程があります。手順を理解することで、スムーズなホームページ構築の仕組み理解や制作へつなげることができるでしょう。

自社でホームページ制作を実行するのが難しい、あるいは時間が足りないという場合は外注するのもおすすめです。まずは工程を理解して内製するか外注するかを判断してみてください。

今回はホームページ制作はどうやって行われるのか知りたい方向けに、各工程のポイントおよび注意点をご紹介していきます。

手順1:企画・提案

手順1:企画・提案

中には漫然と目的を決めずにホームページを制作・運用している企業もあります。しかしこういったホームページではまず成果が出ません。だらだらとホームページを公開・更新する体制にならないように、まずは企画や提案をじっくり行いましょう。

目的決めを行う際は、

  • ・自社ホームページで認知度を高めたい
  • ・ECサイトを運用して売上を確保したい
  • ・コーポレートサイトとして採用者をホームページ経由で増やしたい

といった実現しない内容を決定しておいてください。もし目的に関する指標を決められなくても、外注を行えば指標に係る細かい数値を設定することが可能です。

また目的を達成するために、誰をターゲットにするかも非常に重要です。たとえば自社商材の対象が高年齢層なのに、若年層へ向けたデザインにして情報を紹介するホームページを公開しても効果は得られません。細かくターゲットを決められるように、

  • ・年齢、年代、性別
  • ・居住地域、家族構成
  • ・職業
  • ・趣味、趣向
  • ・課題、悩み
  • ・生活サイクル

といった各項目は埋めておいてください。

そして項目を埋めた上で、仮のユーザー像を設定できるとより安心です(ペルソナ設計)。企業によっては想定されるペルソナに対して、イメージイラストや実物写真を計画書へ掲載したりします。

ターゲットユーザーが決まったら、目標を達成するためにどんな顧客との接点を持てばよいのか調査・分析していきます。この際ホームページによる顧客との接点のみだと不足することが多いので、他のツールとの連携を考えるのがポイントです。

  • ・Web広告
  • ・SNS
  • ・Googleマップ

といったオンラインのツールや、チラシ広告といったオフラインのツールもときには併用して顧客との接点を増やせるようにしておきましょう。

ここまで進んだら、次はホームページの大まかなコンセプトを決定します。

  • ・機能
  • ・ページ構成
  • ・ページボリューム
  • ・各ツールとの連携方法

などを確認して、実際の設計へと進みます。

手順2:ホームページ設計

手順2:ホームページ設計

次はいよいよホームページを設計していきます。ただし本格的なデザイン作業はまだ行わず、デザインの原案構築やチェック・改善などを行っていくのがポイントです。

ホームページ設計に関しては、UI・UXデザインを考えるのが重要になってきます。

UI UX カスタマージャーニーマップ

UI(User Interface)とは、ユーザーの触るCTAボタンや図表・テキストリンクといったホームページ上のインターフェースのことです。UIはユーザーの体験、つまりUX(User Experience)を考えながら設計を進める必要があります。
またユーザーの購買心理を段階で表現した「カスタマージャーニーマップ」を作り、ホームページに訪問したペルソナがホームページ内をどのように移動しゴールまでたどり着くかを整理し、ページの回遊性(どこからどのページへ移動するか、といった性質)などを確認してUXを設計できます。

内容の精査

次にホームページで伝えたい内容・用意すべき内容を決めていきます。内容に関しては自社の意見もありますが、ユーザー目線で何が求められているのかを優先しましょう。ペルソナ設計がきちんとしていると、求められていることがつかみやすいです。

内容に関しては、ペルソナのイメージに合ったテストユーザーや自社従業員にアンケートする、インタビューするといった方法でも決めることが可能です。また、競合のホームページ内容を参考にすることも重要です。

流入経路のSEO対策

流入経路とは、自社のホームページにどこからユーザーがやってきたのか、そのアクセス元のことを言います。
特に自然検索流入(Organic Search)と呼ばれる検索エンジンからの流入はホームページの流入の中でも非常に重要なため、自然検索の最適化であるSEO対策をどのように行うかイメージしておきます。

この段階では

  • ・キーワード範囲の
  • ・更新しやすい構造の設計
  • ・導入する測定ツール

などを確認していきましょう。

キーワード範囲は中小企業の場合、1キーワードだけでなく3キーワード以上はあるようなニッチな範囲で設定したほうが競合が少ないです。ニッチなキーワード設定で成功すれば、ボリュームを広げてキーワードを後日設定し直すことも可能になります。

またSEO上新しい対策がしやすいように、更新しやすい設計を考えることも重要です。WordPressなどを使うと、初心者でも簡単に情報更新等ができます。

測定ツールはGoogle Analyticsなどです。他にもヒートマップやEFO対策ツールなどもありますが、必要な分だけ登録してホームページと連携できるようにしておきます。

サイト構造の検討

次にサイト構造を細かく検討していきます。

  • ・トップページや階層の数などを決めておく
  • ・どのようなページをさくせいし、どういった項目を配置するか決める
  • ・ジャンルごとにまとめて閲覧しやすい構造にする

といった点を確認しましょう。

トップページは各ページへのポータル的な役割を果たします。そこからどう枝分かれしてページを見せるのか検討する必要があります。階層が10層といったように多いとユーザー・ホームページ担当者双方が見にくくなるので、多くても数層程度にまとめられると安心です。

トップメニューにはたとえば公式コーポレートサイトの場合、

  • ・活動理念
  • ・商品、サービス紹介
  • ・新着
  • ・ブログ
  • ・会社概要

などが並びます。必要な項目を用意して設置・固定して全ページに表示するなどの対応が必要です。

ジャンルはたとえばECサイトの場合

  • ・掃除
  • ・自動車
  • ・PC
  • ・スマートフォン
  • ・食品

といった項目です。

項目ごとにジャンル分けできていないと散らかった感じのページになり、階層が多いのと同じように見にくいホームページになってしまいます。各ジャンルからどの階層(サブジャンル)へ移動するのかも考えて設計を行いましょう。

ワイヤーフレームの作成

必要な項目を確認した上でサイトマップが図表で作成できたら、次は「ワイヤーフレーム」を作成していきましょう。

ワイヤーフレームとはサイトの構造・レイアウトを端的に示した書類であり、

  • ・各ページの内容
  • ・アクセスの関連性
  • ・図やテキストの位置

などを記載していきます。

必要な作業メッセージを入れながら、担当者にデータを共有するのも重要です。ワイヤーフレームの作成・共有の際は有料・無料様々なツールがあるのでチェックしてみましょう(Adobe XD、Figmaなど)。

最後に設計を実現できるツールを選定して導入していきます。ツールには

  • ・テキストエディター
  • ・WordPress
  • ・その他ホームページ作成ツール

などが使えます。

少ないページ・機能であればテキストエディターでコーディング等ができるときもありますが、担当者にスキルがなくまたページ数・機能が多い場合は適していません。ですから通常はWordPressなどの作成ツールを使っていくことになると思います。

WordPressは柔軟性がありいろいろなホームページを作れますが、操作に慣れるまでに時間が掛かります。またその他のホームページ作成ツールにはEC特化型などがありWordPressより簡単にホームページを制作できますが、機能性やデザインに関してはWordPressより取れる幅が少ないのがデメリットです。

予算や機能拡張性などでツールを選定して導入しましょう。

手順3:Webデザインを行う

手順3:Webデザインを行う

次はいよいよWebデザインを行っていきます。ここで決めたデザインが、実際に公開するホームページの土台になってくるので覚えておきましょう。

デザインは

  • ・ターゲットユーザーに合わせた配色になっているか
  • ・フォントやレイアウト、画像などが適切か
  • ・どの要素がボタンやテキストリンクか、などが分かりやすいか

などを確認して設計していきます。

ワイヤーフレームと違い、実際に図表や細かいテキストなどを入れながら完成品に近いものを作成していくのがポイントです。

デザイン時は、機能が実現できるように配置されているかも確認しておきましょう。デザイン時には実際のホームページ挙動が確認できないので、実現できない機能を配置・記載してしまいがちです。デザイン段階で機能に違和感があれば、メンバーで共有して実際に搭載できるのかチェックしないと後で調整が面倒になります。

手順4:コーディング・プログラミング

手順4:コーディング・プログラミング

デザインが完成したら、次は実際にそれを機能として完成品に組み込んでいきます。ここで作った作品が実際に公開されるので、より気合を入れて作業する必要があります。

ホームページのコーディング・プログラミングの際は

  • ・HTML
  • ・CSS
  • ・JavaScript
  • ・PHP

などが使われます。たとえばWordPressではHTMLやCSS、PHPを使いますがJavaScriptも併用することが多く、上記の言語をすべて網羅していることになるのがポイントです。

使わないといけない言語に関しては、細かいコーディング・プログラミングスキルはなくても構いませんが動作の仕方やエラーが出たときの対応などは最低限覚えておく必要があります。機能のテンプレートコピーなどの際に、組み込み先のコードと相性が合わずエラーが出たりします。

ホームページを構築する際は、サーバーやドメインの設定も必要です。

サーバー設定作業の場合、初心者には最初からホームページの作業環境が構築されているレンタルサーバーがおすすめです。WordPressをボタン1つでインストールできたりと便利な機能が搭載されています。またホームページ作成ツールを使う場合、最初からサーバーにツールがインストールされている状態で提供されるのでより簡単にサーバーを導入できます。

ドメイン設定の際は、自社の業種やコンセプトがすぐ理解できる文字列を選ぶとよいでしょう。たとえば初期ドメインで「example.com」という文字列を使うよりも、ドメインサービスを使い「自社名.com」といった文字列を導入したほうがマーケティング面では有利です。

各種調整・構築が完了したら、次は検証を行います。実際にテスト環境でホームページを公開して動作やエラーなどをチェックしましょう。この際間違って一般公開にしたりすることが多いので、事前チェックしてから適切な範囲で検証を行ってみてください。

環境動作チェックのため、

  • ・PC
  • ・スマートフォン
  • ・Chrome
  • ・Firefox
  • ・Microsoft Edge

といった複数の機器・OSで動作をチェックするのも重要です。PC版のWebブラウザーにはディスプレイサイズやスマートフォンモデルなどを設定して仮の動作を確認できる検証機能が搭載されているので、積極的に使っていきましょう。

手順5:リリース

手順5:リリース

最後にホームページを正式に公開して、評判を確認していきます。検証の際になかったエラーやトラブルが発生することもあるので、担当者をいつでも動かせるように準備しておいてください。

公開して終わりではないのが、ホームページの難しいところです。実際の評判や問題点、改善点や新規で入れたい内容などを考えて計画書へ落とし込み、継続的なアップデートを行う必要があります。

ここまで考えると人手が足りない、スキルが不足しているといった悩みでホームページ構築を足踏みしてしまうかもしれません。しかしWebマーケティング会社・ホームページ制作会社へ外注することで問題は解決します。「カモシカスタジオ」では、岩手県を拠点にホームページ制作サポートなどを行っております。ホームページ制作の工程が大変そうだと思っている場合は、ぜひご相談ください。

まとめ

まとめ

今回はホームページ制作がどうやって行われるのか知りたい方向けに、各工程のポイントおよび注意点をご紹介してきました。

ホームページ制作は企画・提案から始まり、リリースした後も改善やアップデートが必要です。大変だと思う場合は内製をせずに、外注でサポートを受けると安心して情報公開ができるようになります。

中小企業だと特に人手やスキルの面でホームページ運用が難しくなるので、気になる方はぜひ外注を検討してみてください。

ご相談・ご依頼はこちらから!

ブログ記事に関する内容や
下記の様なお悩みをお持ちであれば、ぜひご相談ください

自社のWebマーケティングを強化したい
Web中心のビジネス戦略を策定できるパートナーを探している
Webサイトをリニューアルして成果を上げたい

Web制作やマーケティングについて相談してみる

合わせて読みたい

Webサイト制作会社の業者選定のポイント
【担当者必見】ホームページ制作の依頼前に準備しておきたいこと
「MAツール」って何?マーケティングオートメーションの解説からツールの活用法まで「MAツール」って何?マーケティングオートメーションの解説からツールの活用法まで
ECサイトは大型モール出店と自店舗制作どちらが有利?それぞれのメリット・デメリットを比較ECサイトは大型モール出店と自店舗制作どちらが有利?それぞれのメリット・デメリットを比較
SEOとの違いを理解しよう!MEO、LPO、EFOとは
Webサイトの制作前に決める重要な事 目的とゴール設定について理解しよう!Webサイトの制作前に決める重要な事 目的とゴール設定について理解しよう!
売上アップの為にホームページが重要な理由
Webサイトリニューアルの提案依頼書(RFP)とは?制作のポイントなどを解説Webサイトリニューアルの提案依頼書(RFP)とは?制作のポイントなどを解説

お問い合わせ CONTACT

サイト制作、マーケティング施策、プロモーションなど
ご相談はお問い合わせフォームからご連絡ください。

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