【ホームページ制作のノウハウを解説!】WEBサイト制作・リニューアルのプロセスとは?

この記事では、1990年代後半からメーカーやBtoB企業のWEBマスターとして活動してきた筆者が、企業のWEBサイトをリニューアルする際に従ってきたプロセスについて紹介しています。

自社のWEBサイトについて危機感を抱いている方々に、この記事が参考になれば幸いです。

サイト制作の全体的な流れと制作期間について

全体を見渡せるように、まずは以下のようなフロー図を用意しました。

WEBサイト制作のフロー
WEBサイト制作のフロー

まず、WEBサイトの制作フェーズは大きく2つに分かれます。

  1. 計画フェーズ
  2. 制作フェーズ

計画フェーズ

計画フェーズでは、主に「コンセプトメイキング」を行います。コンセプトメイキングとは、Webサイトの目的を明確にし、その目的を達成するためのデザインやサービスの全体概念を策定するプロセスです。

Webサイト制作は「WEBデザイン」と呼ばれますが、この文脈での「デザイン」は芸術的な意味合いではなく、「設計」を指します。特に、企業のWebサイトは、その企業の事業活動を支援するツールである必要があります。

コンセプトメイキングのイメージ
コンセプトメイキングのイメージ

ツールとして求められること

  1. ターゲットにマッチングする外観
  2. 事業活動の内容や強み
  3. 実績を示す導入事例など

さらにそれを形にするために、エンジニアによるアーキテクチャ(機能・構造設計)があり、SEO 最適化や広告運用といった WEBマーケティング があります。

もし計画段階でつまずくと、目的とは異なるユーザーを引き寄せてしまう可能性があります。これにより、多大な労力を投じてWebサイトを構築しても、ビジネスの成長には何の貢献もしないという事態に陥り得ます。このため、最初に行う「コンセプトメイキング」は、非常に重要なプロセスであると理解してください。

目的を明確にするためのヒアリング

近年、Webサイトを持たない法人は少なくなったと考えられます。そのため、ここでは「現在のサイトをなぜリニューアルしたいのか?」「リニューアルを通じて何を達成したいのか?」といった質問をさせていただきます。

また、貴社がどのような社内体制でプロジェクトに取り組むのかも重要です。例えば、私のようなWeb制作業者に依頼する場合でも、コンテンツを充実させ利益を生み出すためには、貴社自身で主導権を握る必要があります。

さらに、Webサイトをいつ完成させ、どのように活用するかという全体的なロードマップも必要になります。

Webサイトは単に作成して終わりではなく、中長期にわたって企業の顔となります。社内体制と合わせてロードマップを明確にすることが、成功への鍵となります。

顧客へどんな価値を提供していくのか

Webサイトを制作する際には、自社が属する市場や狙いを定めるターゲット市場にどのような影響を与えるかという点が重要です。

この部分が明確になれば、どのようなデザインやコンテンツを掲載すべきかがはっきりしてきます。さらに、競合他社のWebサイトを調査し、それらを「ベンチマーク」として利用することを推奨します。このアプローチにより、競合を超越するデザインやコンテンツを持つことで、共通のターゲットユーザーを自社のサイトへと引き付けることが可能になります。

ユーザー視点を捉える

次に、市場やユーザーの視点での「ユーザビリティ」のシミュレーションが重要です。ユーザビリティは、ターゲットユーザーがサイトを訪れた際に、目的地に容易にたどり着けるか、または意図した行動をとれるかどうかの設計を意味します。

たとえ見た目が美しく、満足度が高いサイトでも、ターゲットユーザーにとって利便性が低ければ、企業の業績向上にはつながりません。そのため、ターゲットユーザーの視点を基にサイトデザインを考え、ユーザーが目的を達成するまでのシナリオを策定することが重要です。

このような計画を通じて、目指すべき方向性が明確になり、Webサイトのコンセプトが固まります。Webサイトの制作やリニューアルは、企業のブランディングとも密接に関連しています。私たちは、これらを再構築し、効果的な売り上げ構造を構築するためのマーケティングと組み合わせたコンサルティングサービスを提供しています。

これまでのヒアリングやリサーチを基に、貴社からRFP(提案依頼書)をいただくことになります。貴社が独自のRFP書式を持っていない場合は、当社が選定した項目で共に記入していくプロセスを進めていきます。

制作フェーズ(WordPressベース)

当社のWeb制作には基本的に「WordPress」を使用します。WordPressは世界で最も広く利用されているオープンソースのCMSであり、その長い歴史と豊富なユーザーベースにより、さまざまな要件に柔軟に対応できることが大きな強みです。

しかし、その一方で、専門知識を持つエンジニアやデザイナーによる構築がなければ、予期せぬリスクを招く可能性もあります。当社には、長年にわたりWordPressを使用して法人向けWebサイトを運用してきた経験豊富なデザイナーが在籍しており、確かな自信を持ってプロジェクトに取り組んでいます。

サーバー・WordPressの準備

コンテンツ制作に先立ち、まずはそれを格納する「容器」を準備します。この容器とは、Webサーバーと呼ばれるコンピュータであり、これをWeb上に設置し、WordPressをインストールする作業を指します。

Webサーバーには様々な選択肢がありますが、現代では自前でサーバーを準備する必要はほとんどありません。

小規模な企業サイトやコンテンツサイトであれば、低コストの共用サーバーが適しています。一方で、多くの訪問者が予想されるサイトや、直接サービスを提供するサイト(例:オンラインショップ、アプリ、会員サイト等)では、メモリやCPUが専用に割り当てられるVPSなどが適切です。

現在Webサーバーをお持ちでない、またはWebサーバーの見直しを検討されている場合でも、当社ではご相談に応じることが可能です。

WEBサーバーのレイヤーイメージ
WEBサーバーのレイヤーイメージ

Webサーバーは大まかに、OS以上のレイヤーでユーザー自身が設定を行う構造になっています。

例えば、データベースとアプリケーションの連携、PHPとWordPressの整合性、WordPressとテーマの整合性、WordPressプラグインとの整合性、コンテンツの作成などがあります。

初見では複雑で手間がかかるように感じるかもしれませんが、これらの構築を事前に行うことで、自社での運用が可能となり、持続的に魅力的なコンテンツを提供できるようになります。

管理者は、これらの設定やバージョンアップを継続的に監視する必要があります。

制作やWebマーケティングと併せて、これらの管理業務も提供することが当社の強みです。

具体的に実施する項目は以下の通りです:

  1. サーバーの選択と契約、初期設定
  2. ドメインまたはサブドメインの設定
  3. WordPressのインストールとデータベースの初期設定
  4. SSLやメールサーバー、その他のセキュリティ設定
  5. 動画やSNSの運用を考慮したアドバイスと付随サービスの紹介・設定

デザイン選定・制作準備

ここでは、以前いただいたRFPを基にデザインの選択及び準備を進め、大まかな同意を得ることになります。

決定すべき項目には以下が含まれます:

  1. 予算と制作スケジュールの策定
  2. WordPressの全体デザイン(テーマ選定)の決定
  3. 主要カラー、フォント、ロゴ、ファビコン、バナーなどの決定
  4. サイトマップ、ディレクトリマップ、メニュー構造の策定
  5. キャッチコピー、コンテンツ内容の決定
  6. 画像、動画、テキストの準備

この段階で決定された内容はサイト公開に直結するため、極めて重要なプロセスです。このプロセスのみを抜き出して低価格でWebサイトを提供する業者も存在しますが、それは既にここまでのプロセスを自社で完結できる企業を対象としたサービスです。

実際、これらのプロセスを社内で実施できるのであれば、外部にサイト制作を依頼する必要はないかもしれません。

「とりあえず作るだけ」の戦略のないサイトでは、SEOを考慮した場合、ブログサービスやSNSの活用の方が成果を出しやすいでしょう。

私は、自社のドメインでWebサイトを立ち上げる場合、コストを外注にのみ投じるのではなく、事業の一部としてしっかりと責任者を指名し、制作だけでなく、社内運用者(Webマスター)の育成とKPI・KGIを考慮に入れることが重要だと考えます。

制作スタート

素材が揃ったことで、制作が本格的にスタートします。

これまでに集めた素材やコンセプトを基に、デザイナーとエンジニアが詳細なコーディング作業に取り組みます。WordPressを利用する場合、テーマにより基本的なコーディングは既に完了しているため、主な作業はテーマの設定、必要なプラグインの追加、CSSやHTMLを用いたサイトの細部にわたるデザイン調整になります。

現代のWebサイトはモバイルファーストが標準であり、スマートフォン向けの最適化(レスポンシブデザイン)やナビゲーションの調整が重要です。また、Chrome、Firefox、Edgeなど現在主流のブラウザに対する最適化も行います。

この段階では、ユーザビリティ向上およびSEO対策の一環として、表示速度の検証や画像属性の設定なども実施します。

PageSpeed Insight の結果画面
PageSpeed Insight の結果画面

表示速度のチェックには、「PageSpeed Insights」を使用します。このツールでWebサイトのドメインを入力することで、モバイルおよびPC向けの最適化レベルが確認できます。

画像は本WEBサイトの結果です。この結果がすべてではありませんが、限りなく100点に近づけることで、ユーザビリティの向上に繋がるはずです。

ただし、内容が乏しく軽量なサイトはパフォーマンススコアは高いものの、SEOやその他の指標で低いスコアが出ることがあります。

SEO対策をしても効果が限定的な有名メーカーや有名人のサイトでは、この点があまり重視されないこともありますが、一般的には重要なプロセスです。特に、最新のSEOトレンドではモバイルファーストが優先され、スマートフォンでの表示結果が基準になります。

最終的に、法人として必要なポリシーの策定も行います。これには、プライバシーポリシー、セキュリティポリシー、コンテンツポリシーなどが含まれます。

海外市場を対象とするビジネスでは、対象国の法律に準じたポリシーの適用が必要です。特にEUの一般データ保護規則(GDPR)への対応が求められます。

サイトに掲示するポリシーについても、当社ではご相談に応じます。

マーケティング施策の実施

サーチエンジンへの登録とSEOの準備

Webサイトを公開した後に絶対に行うべきことが「SEO対策」です。「SEO」とは、Search Engine Optimization(検索エンジン最適化)の略で、検索エンジンに対してサイトを最適化することを意味します。

検索エンジンと言えば、Googleが最も有名です。StatCounterの報告によると、2022年6月時点でGoogleの世界における検索エンジンの市場シェアは91.88%となっており、次いでBingが3.19%です。これにより、Googleのシェアが圧倒的に高いことが明らかになります。また、皆さんがよく知るYahoo! Japanで使用されている検索エンジンもGoogleです。

以下に示す図は、Webサイトの最適化に関する一例を示しています。

WEBオプティマイゼーションのイメージ

まず基本として、内部施策と称されるサイト内最適化が必要になります。WordPressを利用することで、この作業がやや容易になる部分がありますが、根本的にはマニュアルに基づいた作業と実務経験によって進める必要がある工程です。この最適化作業は、基本的には制作フェーズの初期段階で行います。

外部施策の実施

次に、外部施策として、GoogleやBingに自社サイトをクロール(Webサイトの情報を収集するロボット)させることが重要です。

このためには、「Google Search Console」や「Bing Webmaster Tools」などのツールに自社サイトを登録し、最適化する準備が必要になります。

さらに、サイト訪問者の情報を収集してマーケティングに利用したい場合、「Google Analytics」への登録や、ニュースレターの配信、MA(マーケティングオートメーション)やCRM(顧客関係管理)といったデジタルマーケティング実施のための分析ツールの導入も考慮する必要があります。

デジタルマーケティングは営業組織の効率化を図るものであり、現在注目されているDX(デジタルトランスフォーメーション)にも繋がる工程です。

過去に担当したクライアントでは、デジタルマーケティングの組織再編と共に、名刺管理システム、メールマガジン配信システム、オウンドメディアの導入を行い、メールマガジンから多くの新規ビジネスを生み出すことに成功しています。

法人活動を効果的にアピールし、スムーズに発見してもらうためには、「Google ビジネス プロフィール」などのサービスが有効です。このサービスを利用することで、検索結果に自社の情報を掲載し、Googleマップでの検索にも対応できます。

しかし、これらの施策を実施しても、自社サイトへのアクセス数を短期間で大幅に増加させることは難しいでしょう。もしより効率的に広報活動を行いたい場合は、リスティング広告やディスプレイ広告、ECモールサービスへの参加を検討すると良いでしょう。

これらのサービスへの登録自体は自社の担当者が行えば基本無料ですが、最適化を図るためにはさまざまな専門知識が必要になります。そのため、これらの活動も当社でサポートすることが望ましいと考えられます。

SEOよりも重要なSXOという考え方

最近のGoogleアルゴリズムは、ユーザー体験の最適化に重点を置いています。ユーザー体験の最適化とは、「Usability(ユーザビリティ)」つまりユーザーの利便性の向上、「Relevance(レリバンス)」すなわちユーザーの検索意図との関連性の強化、そして「Authority(オーソリティ)」、より信頼性の高いコンテンツの提供、という3つの要素に注目することを意味します。

これらの「U-R-A」要素に基づいたウェブサイトデザインを「SXO(Search Experience Optimization)」と呼びます。

ユーザー体験の向上が重要
ユーザー体験の向上が重要

SEO(Search Engine Optimization)が検索エンジンに焦点を当てた最適化であるのに対し、SXOはユーザー体験の最適化に重きを置くアプローチです。

要するに、ユーザーにとって便利なサイトは、検索エンジンにとっても価値のあるサイトと見なされるというわけです。

具体的に、主要な「U-R-A」要素は以下の通りです:

  1. レスポンシブデザインを網羅したモバイルファーストとなっているか?(ユーザビリティ)
  2. 記事は読みやすく、読み込み速度は速いか?(ユーザビリティ)
  3. ユーザーが目的を達成するための動線は最適か?「ショッピング、問い合わせなど」(ユーザビリティ)
  4. ユーザーが求めるコンテンツとなっているか?「検索意図との整合性」(レリバンス)
  5. ユーザーの検索意図がサイト内で達成できるようになっているか?(レリバンス)
  6. 記事に信頼性はあるか?(オーソリティ)
  7. こういった条件を網羅した良質なサイトからリンクされているか?(オーソリティ)

これらはすべてではありませんが、コンテンツ提供者は基本的にこれらの要素を考慮する必要があります。

特に、多くのコンテンツを提供する運営者には、「E-A-T」すなわちExpertise(専門性)、Authoritativeness(権威性)、Trustworthiness(信頼性)が求められます。

「E-A-T」を高めたコンテンツを作成することが、Googleによる高品質なページとしての評価を受ける鍵です。

最新のGoogle検索の動向については、「Google 検索セントラル」を定期的に確認することをお勧めします。

このように、Webデザインにおいて、SEOとSXOを両立させることが重要であることが理解できます。

まとめ

Webサイトの制作には大きな投資が必要になりますが、マーケティングへの投資は、企業の成長やデジタルトランスフォーメーション(DX)の実現にとって欠かせないものです。

当社では、目に見える機器を用いたシステムの設計・構築だけでなく、企業が目標を達成するための戦略的なサポートも提供しています。

企業内には営業などの収益を生む部門から、開発、現場支援、業務サポート、人事、総務に至るまで、多様なセクションが存在することでしょう。

現在よく話題になるDXは、単にデジタル化を進めることだけではありません。企業全体の効率化と統制を図り、企業が目指す真の目的に合致した事業戦略を策定することが不可欠です。

この資料はマーケティング支援がなぜ必要なのかを中心に詳しく説明したものです。

当社では、モバイルファーストに対応したWEBデザインを提供しております。

Googleニュースアプリで最新情報をゲット!

Quad CompetenceのブログはGoogleニュースからご覧いただけます。
Googleニュースで当サイトのフォローをしていただければ、最新情報のチェックが可能です。

Quad CompetenceのブログはGoogleニュースからご覧いただけます
Quad CompetenceのブログはGoogleニュースからご覧いただけます
左上に表示されるフォローをクリック

Googleニュース又はGoogleニュースアプリ(Android/iOS)の上部検索窓から「Quad Competence」と検索してフォローいただくと、最新ニュースが配信されます(左上に表示)。Googleアカウントをお持ちの方は、ぜひよろしくお願いします!

▼略歴

  • 学生時代には経営・財務の分野を学び、建設・不動産業界で経理部に在席。
  • 家電メーカーにて直営店舗の運営、マーチャンダイザーを経験。PCのBTOビジネス推進やホームネットワークの普及推進、デジタル家電活用のセミナー講師、直営の免税店を経験。
    同時に、グループ企業のWEBマスターとして、ポータルサイト、eコマースサイトの制作・運営、情報セキュリティマネジメント、ナレッジマネジメントを推進。
  • 家電量販店にて情報部門リーダー、都心店舗の店長を経験。
    その後、店舗開発部で新店舗出店時のレイアウト設計やスタッフの育成、出店準備、VMDの企画・制作などを歴任。
  • システムインテグレーターとして、手術室及び血管造影室の画像・映像配信システムの開発・設計、エンジニアリングを担当。さらに、遠隔手術支援システムの企画・開発を担当し、専門誌へ医師の偏在問題に関する論文を寄稿。
    また、医療向けシステムやフェリーの設備を安全にリモートメンテナンスするソリューションを開発・運用。
    その後、会社のリブランディングプロジェクトへの参画、デジタルマーケティング組織の立ち上げ、メディカル組織のマネジメントを経験。
  • 論文 医師偏在の課題と向き合う遠隔手術支援ソリューション(CiNiiで検索
  • 論文 手術室の生産性向上に貢献する医療映像ソリューション(CiNiiで検索
  • 現在、企業向けにIT技術者育成セミナー(ネットワーク/ウェブデザイン等)を主催しております。