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

WEBサイト制作の流れ

この記事は、90年代後半からメーカーや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サーバーにはいくつか選択肢がありますが、現代では自前で用意しなければならないようなことはほぼありません。

もしもそれほど大きな負荷が掛からないコーポレートやコンテンツサイトであれば安価な共用サーバーでいいですし、多くのユーザーが閲覧されるサイトやサービスを直接提供するサイト(ショッピング、アプリ、会員サイトなど)であれば、VPSといったサーバーごとに専用のメモリ・CPUが割り当てられるサーバーが適切です。

当社ではもしも現在、WEBサーバーをお持ちでない場合や、WEBサーバーの見直しをしたいといったご相談も同時に承ることができます。

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

WEBサーバーはざっくりとこの図のようなレイヤー構造になっており、OSより上のレイヤーの設定をユーザー自身が行う必要があります。

たとえば、データベースとアプリの連携、PHPとWordPressのレギュレーション、WordPressとそのテーマとのレギュレーション、WordPressプラグインとのレギュレーション、コンテンツの作成といった具合です。

一見、複雑で面倒と感じられるかもしれませんが、事前にこういった構築を行っておくことで自前の運用が可能となり、継続してユーザーを惹き付けるコンテンツを提供できるようになるのです。

管理者としてはこの辺の設定やバージョンアップ等を継続して監視していく必要があります。

制作やWEBマーケティングと合わせて、こういった管理も承ることができるのが当社の強みです。

ここで実施する項目としては

  1. サーバーのチョイスと契約、初期設定
  2. ドメインもしくはサブドメインの設定
  3. WordPressのインストールとデータベースの初期設定
  4. SSL、その他セキュリティの設定
  5. 動画、SNSを運用される場合はそのアドバイスと付随サービスのご紹介・設定

デザイン選定・制作準備

ここでは前段で頂いたRFPを元にデザインの選定やその準備をさせていただき、大枠の同意をいただきます。

決める項目としては

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

ここで決定した内容がサイトとして一般公開されるため、非常に重要な工程と言えます。
この工程のみを掻い摘んで、安価にWEBサイトを作るだけという業者も多々ありますが、それはここまでの工程を自社内で行える企業向けのサービスだと考えていただいた方がよろしいかと思います。

むしろ、ここまでの工程を自社内でできるなら、サイト制作を外注する必要はないのではないかと思います。

戦略を伴わない「とりあえず作るだけ」というサイトを作られるなら、SEO のことを考えてもブログサービスやSNSを利用される方が、結果にコミットしやすいと思われます。

私は自社のドメインでWEBサイトを立ち上げるのなら、コストを外注のみにかけるのではなく、事業の一環としてちゃんと責任者を指名し、制作だけではなく、自社運用者(WEBマスター)の育成とKPI・KGIを視野に入れるべきと考えます。

制作スタート

素材が揃ったら、いよいよ制作のスタートです。

これまで揃えた素材やコンセプトを元に、デザイナーとエンジニアが詳細なコーディング作業を行います。
WordPressを使う場合は既にテーマによって全体のコーディングが完成していますので、残りはテーマ設定と追加するプラグインの設定、CSSやHTMLによるサイト細部のデザインです。

また、現代ではモバイルファーストのWEBサイトが標準であるため、スマートフォンに最適化された表示(レスポンシブ対応)やナビゲーションの追加などが行われます。
現在よく使用されているブラウザ「ChromeやFirefox、Edge」などに対して最適化を行います。

また、この工程でユーザビリティや次にお話するSEOの一環として、表示速度のチェックや画像属性の設定などを行います。

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

表示速度等に関しては、主に「PageSpeed Insight」でチェックしていきます。
このサイトで自社サイトのドメインを入力するだけで、それぞれ携帯電話や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サーチコンソール」や「bing ウェブマスターツール」といったツールに自社サイトを登録し、最適化する作業が必要です。

また、サイトを訪れたユーザーの情報を収集し、マーケティングに活かしたい場合には、「Google Analytics」などへの登録やメルマガ配信、MACRM といったデジタルマーケティングを実施するための分析ツールも必要です。

デジタルマーケティングは営業組織そのものの効率化を行うものであり、現在トレンドとなっているDXにも関連する工程です。

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

その他、法人活動をスムーズに見つけてもらうためには「Googleビジネスプロフィール」といったサービスもあり、検索結果に自社が表示したい内容を掲載すると共に、Googleマップからの検索に対応することができます。

ここまでやっても自社サイトのアクセスを短期的に増やすことは難しいと考えてください。
もし、少しでも効率的に広報を行いたいなら、「リスティング広告」や「ディスプレイ広告」、「ECモールサービス」への登録などが必要です。

これらのサービスへの登録は自社の担当者ができれば基本的に無償ですが、最適化には様々なノウハウが必要となりますので、当社で合わせて承った方が適切かと思います。

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

昨今の Google のアルゴリズムは、ユーザー体験の最適化を重要視しています。
ユーザー体験の最適化とは、主にユーザーの利便性を高める「Usability(ユーザービリティ)」、ユーザーが検索してきた意図との関連性を高める「Relevance(レリバンス)」、より信頼性の高いコンテンツであること「Authority(オーソリティー)」という3つの要素を網羅していることを言います。

これら「URA」の要素を重視したウェブサイトをデザインすることを、「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デザインを提供しております。

サイトのフォローをお願いします!

▼略歴

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