WEBコンテンツの設計

//WEBコンテンツの設計
WEBコンテンツの設計2018-03-14T10:21:29+00:00
WEBコンテンツのデザイン手順

ひとつのウェブサイトには、通常2種類のコンテンツデザインが採用されます。

それは、「1カラム・レイアウト」と、呼ばれる左右いずれにも他のページと共通する「サイドメニュー」が存在しないレイアウトデザインと、サイドメニューのある「2カラム・レイアウト」です。単純な話のようにも聞こえますが、実は、反応を引き出すホームページは、このカラム数の選択にも意図的な仕掛けを施していることは少なくありません。

通常、この2種類はパソコン版デザインのみで再現されます。スマホ対応デザインのほとんどは「1カラム」と、なりますがWEBコンテンツが閲覧されるのは自然発生トラフィックのみではありません。

そのため、ホームページ全体はもとより、各コンテンツのデザインを行う場合は、まずは、ホームページが果たす役割と「目的」をさだめ、「運営方針」を決定します。次に「アクセス経路」割合を目標値として暫定的に設定し「レイアウト」を決めます。最後に、これらのことを踏まえ「コンテンツ」を作成していきます。

それでは、各パートごとに解説していきましょう。

WEBサイト全体の「目的」をデザインする

目的設計

WEBサイトのデザインから訪問者の反応を引き出すためには、まずは、サイト全体でどのような反応を引き出すのかを設計します。

「サイト全体で、どのような反応を引き出すのか」ということは、ホームページがあなたのビジネスの中で、どのような役割を果たすのかと言うことです。例えば、集客の一部をホームページに担わせ、問い合わせや資料請求といった反応を引き出し、あとは、直接スタッフが営業をかけ制約に結びつけると言う流れです。

この場合のホームページ全体の「目的」は、「集客」となり、各コンテンツから極力セールス要素を削減します。

サイトが果たす目的を「セールス」に設定する場合は、主なアクセス経路はリスティング広告やリマーケティング広告、SNS広告などを選択するほうが、効率の良いサイト運営を実現できます。なぜなら、WEBサイトの目的を「セールス」に設定する場合は、テストによる改善が欠かせないため、自然発生的なトラフィックに頼っていたのでは、この改善がスムーズに行えないからです。

サイト全体の目的には、コレがおすすめ!

ホームページに設定する「目的」には、「集客」と「セールス」のほか、「営業効率を上げる」というものがあります。

なかなか成果の出ない、ホームページの多くが集客もセールスもホームページで達成しようと欲張った目的設定をしています。以前「ホームページはインターネット上のセールスマン」と、例えられたことがありますが、実質的なセールスマンを注意深く見てみれば、集客もセールスも1人の人物だけで完結できていることはほとんどありません。

セールスマンの多くが、会社が集客し、セールスマンはセールスだけに集中します。営業会社の場合は「アポクロ方式」と呼ばれる手段が採用されています。「アポクロ方式」とは、「集客」に近い「セールスのアポイント」を獲得する「アポマン」と、セールスを完結させる「クローザー」の2人がペアを組み営業活動を行う方法です。

私たちは、この「アポクロ方式」をサイト内コンテンツに採用するとともに、ホームページと営業マンの関係にもアポクロ方式を採用したWEB活用を取り入れ、社内全体の営業効率を上げる目的でホームページをデザインし、運営しています。

自然発生的なトラフィックを「集客」と位置付け、この目的を担うコンテンツをデザインし、また、「集客」を目的としたコンテンツは「情報コンテンツ」となるため、営業マンがプレゼンを行う際にも使えるコンテンツは、プレゼン用デザインを採用するといった具合に、各ページが担う目的や役割に合わせデザインを変更し、それぞれを常にテストし改善を加えています。

コンテンツ同士のつながりをデザインする

サイト全体の目的が決まれば、あなたが取り扱っている商材の中で、インターネットで集客しやすいものと、そうでないものを選別します。ネットで集客しやすい商材は、検索経由のトラフィック(自然発生的なトラフィック)を獲得できる「情報提供から成約につながる」商材です。

また、インターネットには自然発生的なトラフィックとは別に「意図的に発生させるトラフィック」が、あります。この「意図的に発生させるトラフィック」には、SNS経由のトラフィックと広告によるトラフィックがあり、後ほど解説する「顧客応対時のトラフィック」があります。

広告によるトラフィックは、集客からセールスまでを完結させるコンテンツとなり、SNS経由のトラフィックは、既存顧客や見込み客に対するプレゼン的なコンテンツとなります。

検索経由の自然発生的なトラフィックから到達する(「ランディングする」とも言う)コンテンツは、検索キーワードの性質によって、コンテンツ内容が変わり、WEBコンテンツでセールスを完結するにせよ、商談や無料相談につなげるにせよ、どのくらいの情報提供が必要なのか、または、何ページほど閲覧させるかでサクセウするページ数も、そして各ページのデザインも変わってきます。

この時、ホームページへの訪問者に最終的にどのようなアクションを取らせるのかを暫定的に設定することで、各ページから「次のページ」へ誘導するボタン(またはリンク)の掲載位置が決まります。

WEBサイトの「目的」から「運営方針」を策定する

運営方針の策定

WEBサイト全体の「目的」が定まり、その目的を果たすために必要なコンテンツの内容と位置付けが「暫定的」に決まったら、次は経営資源に応じた運営方針と照らし合わせ、実質的な運営が可能かどうかを検討します。

例えば、自然発生的なトラフィックの獲得を望む、検索経由のアクセスを望む場合、検索上位表示のスキルや、より多くのキーワードで小さなアクセスを拾い集めるテクニックが備わっていないと、思うようなトラフィックを集めることはできません。

一般的に言われる「SEO対策」は、この時必要ありません。詳しくは、『SEO対策基礎講座』を参照してください。

検索経由から小さなトラフィックを集めるためには、ブログを活用するのが有効です。実際にどのくらいのペースでブログの更新が続けられるのかを社内で協議し、無理のない範囲でブログ記事を追加し、小さな自然発生的なトラフィックの獲得を始めてください。

ブログの書き方などは、同様に『SEO対策基礎講座』で、お伝えしています。小さなトラフィックを、大きな自然発生的なトラフィックに変える方法や、ブログ記事の改善方法も、この講座でお伝えするとともに、随時メールマガジンから発信しています。

運営方針と目的のすり合わせは必須!

WEBサイト全体の目的という大きな目的から、各ページでどのような小さな目的を持ったコンテンツが必要なのかを設定したら、それに応じた「コンテンツ概要」を組み立てます。しかし、この各「コンテンツ概要」は、経営資源とすり合わせた際に変更されることは、よくあることです。

ただし、目的を定める前に、経営資源から「どのようなホームページ運営が可能か」を先に決めてしまうと「外注化」が優先されてしまい、費用対効果を落としてしまいますので注意してください。

WEB運営に関するSEOやリスティング広告、SNS活用のスキルを有した人材が御社に在籍しており、その人材の指示通りに外注業者をハンドリングし、選定できるのならこの限りではありません。しかし、「人手不足」ではなく「スキル不足」を理由に、外注化を優先させてしまうと、費用対効果は劣悪になってしまいます。

この時、ホームページ運営の大きな目的を「営業効率を上げる」と、しておくとSEOや検索上位表示対策、リスティング広告といった、まったく、それまでに接触していない見込み客を相手に集客やセールスを実行しようとしてしまうために、「どんなブログ記事を書けば良いのか…」「どんな、コンテンツを準備すれば良いのか…」で、行き詰ってしまいます。

ウェブサイトの運営目的を「営業効率を上げる」に設定しておくと、現在追客中の見込み客や既存顧客に向けたアップセルやクロスセル用の「プレゼン・コンテンツ」を想起できるため、コンテンツ作成のアイデアに事欠くことがありません。

私たちは、よく「これまでに使ったプレゼン資料をもとに」コンテンツの原稿作成を提案することがあります。

新規獲得は最後の最後に!

ホームページの成果改善や、ウェブサイトの新規立ち上げを検討される人のほとんどが「新規客の集客」を望まれていますが、これは、マーケティングにおいて、もっとも費用対効果が悪い取り組みであることを覚えておいてください。

私たちマーケターは、「ド新規」と呼ばれる「未知の人物」「何の接点も持たない人物」を対象にマーケティングを実施することはありません。

今の時代、SNSもありますし、今も昔も「くちコミ」や「紹介」は、ビジネスには不可欠な営業手法です。

また、新たな顧客を獲得する際においても「お客様の声」などをホームページに掲載することからも分かる通り、「街の評判」を獲得することは、もっとも集客に欠かせないコンセプトだと言っても過言ではないでしょう。

では、その「街の評判」や「お客様の声」をどうやって獲得するのかといえば、それは、既存顧客の満足度を引き上げることによってのみ、獲得することができます。

既存顧客が、あなたの商品やサービスに満足しており、次にあなたがその方々に提案する商材も喜んで買ってくれ、使ってくれるのなら、次第にその反響は広がり、街の評判にもなるでしょう。

ここに、SNSを通じた拡散の仕組みや、お客様の反応を参考にしたブログ記事やコンテンツを使った「ウェブ・プレゼンテーション」は、自然発生的なトラフィックを増やし、SNSでの予想以上の反響を引き起こすこともあるでしょう。

既存顧客への「アフターフォローの際に、どんなウェブコンテンツを使うことができるか」から検討してみてください。

アクセス経路の整理

アクセス経路の整理

ホームページを運営する際の「アクセス経路」には、検索経由、SNS経由、SNS以外の外部サイト経由があり、メールマガジンやメール、SNSメッセンジャーやQRコードを読み込み直接URLリンクをタップしアクセスする「ダイレクトアクセス」が、あります。

ダイレクトアクセスは、何もオンラインだけで起こることではなく、名刺に記載したURLを打ち込みアクセスされる場合などがあります。この他、チラシに掲載したURLまたはQRコードからアクセスされることもあります。

この他、正確には「検索経由」に含まれますが、私たちは電話でのお問い合わせの際に「〇〇と検索してください」と、お伝えし、任意のページを閲覧いただきながら、ご相談に応じることもあります。電話問い合わせの場合には、先方の手元に資料がないため、ホームページを資料として活用しているわけです。

このように、各コンテンツが果たす役割と、それらのコンテンツをどのように使うのかといった、ホームページの運営方針が決まれば、それらのコンテンツに、どのような経路でアクセスさせることができるのかを整理します。

ホームページの運営に慣れてくると、この「アクセス経路の整理」を実施した経験が活かされ、次第にアクセス経路が先にアイデアでき、その経路でアクセスさせる最適なコンテンツデザインをイメージできるようになります。

アクセス経路は「割合」で整理する

ひとつのコンテンツに、ひとつの限られたアクセス経路だけでトラフィックが発生すると言うことはありません。また、逆に「ひとつの限られたアクセス経路だけ」に、こだわるのは、リスティング広告を使ったABテストなどを行う場合以外、必要ないと言えるでしょう。

インターネットに公開する以上、そして、検索エンジンに登録することを許可する以上、「意図せぬアクセス」が、発生することは避けられません。

それは、検索経由かもしれませんし、誰かがSNSでシェアした結果かもしれません。

あなたの経営資源からSNS活用を多用できる場合は、半ば検索エンジンを意識したコンテンツの作り込みは必要ないでしょう。

逆にSEOやアクセス解析の分析に社内リソースを割くことができるのなら、SNS運営が苦手でも、自然発生的なトラフィックの流入を自動化することができるでしょう。

この「SEOやアクセス解析の分析に社内リソースを割く」場合に必要なことは、はじめから難しいことに取り組まないということです。私たちは『SEO対策基礎講座』の中でお伝えしている「基本的」なことだけで、10年以上、自然発生的なトラフィックの獲得と、ホームページを使った営業効率の改善を果たし続けています。

このように、あなたが定めた「ホームページの運営方針」をもとに、どのコンテンツが、どのようなアクセス経路からトラフィックが発生するのか…、また、発生させることができるのかを検討して、「訪問者層」を各コンテンツごとに見つけてください。

検索経由のアクセスは「小さな」トラフィックから設計する

「検索経由のアクセス」と聞くと、多くの人が「SEO対策」や「検索上位表示対策」を思い浮かべるでしょうが、ここに専門的なスキルがたくさん含まれていると思っているようなら、それは大きな間違いです。

今すぐ『SEO対策基礎講座』に、アクセスして、どれだけ基本的なことをSEO業界がいたずらに小難しくしているのかを知ってください。

この「俗に言う」SEO対策では、より多くのトラフィックが獲得できる検索キーワードの選定からはじまり、続いて人気のキーワードで上位表示できるコンテンツの作り込みに励みます。その結果、そのキーワードで検索する層が、どのような人物であるか特定できないため、漠然としたコンテンツになってしまい、訴求力やメッセージ性を落としてしまいます。

その結果、獲得できるのは「トラフィックだけ」となり、訪問者は何のアクション(行動)も起こさず、サイトから離脱してしまいます。

これと逆のアプローチをとり、「読ませたい人」をイメージし作成したコンテンツが、「どんな検索キーワードでアクセスされているのか」を、アクセス解析からチェックする習慣を身につけると、小難しいSEOのノウハウ書も必要なく、アクセス解析を使いこなすスキルも必要なく、そして、「どんな記事を書こうか…」と、頭をかかえることもなくなります。

すべては、あなたの話を聞いてくれる既存顧客や、今、追客中の見込み客をイメージし、文章を考え、その対象人物が好むコンテンツ・デザインを採用することで、自ずとウェブコンテンツは、成果を積み上げていくことができます。

レイアウトとデザイン

コンテンツレイアウトとデザイン

コンテンツのレイアウトには「1カラム」と「2カラム」があり、情報提供コンテンツに関しては、2カラムでデザインするのがオススメです。

「1カラム」のデザインには、トップページのような「ナビゲートコンテンツ」としてのデザインがあり、本ページのような大きなテーマを対象にした情報コンテンツを作成する時に有効なデザインがあります。

この他、このページの上層に当たる『WEBコンテンツの設計』ページで採用しているデザインは、「紙芝居デザイン」や「パワポ・デザイン」と呼んでいる、流し読みをさせない「1画面ずつ」コンテンツを提供するデザイン方法があります。

1カラムの基本デザインは「1・3・1・2」と言う法則があり、この基本デザインでまずはトップページをデザインし、その後、アクセス解析によって改善を加えるよう心がけてください。

ホームページの運営にも「守・破・離」は、大切だと言うわけです。

1カラムデザインの種類と用途

1カラムを採用する最大の利点は「余計な情報を閲覧者に与えない」と言う点です。そのため、あなたもアクセスしたことがあるでしょうが、「セールスコンテンツ」は、縦長の1カラムでデザインされています。

過去、スマートフォンが普及する以前は、この「縦長デザイン」は、敬遠された時期がありますが、現在は「無限スクロール」と言う技術も誕生した通り、スマートフォンで縦長のコンテンツを閲覧することも日常的になってきたため、敬遠されることはなくなりました。

1カラムデザインを採用するコンテンツは以下の3タイプです。

  1. ナビゲーションコンテンツ
  2. セールスコンテンツ
    (コンバージョンコンテンツ)
  3. プレゼンテーションコンテンツ
    (情報コンテンツ)

「ナビゲーションコンテンツ」とは、トップページに代表されるようなコンテンツのことで、この他、大きなテーマを取り扱い、徐々に詳細を訪問者に伝えたい場合に1カラムデザインを採用します。

例えば、本サイトでも『トップページデザインの基本』ページや『WEBコンテンツの設計』などのページが、これにあたります。

「コンバージョンコンテンツ」というのは、「セールスコンテンツ」が、訪問者に提示する最終アクションが、「支払いを伴う商材の購入」に対して、支払いが発生しない「問い合わせ」や「資料請求」「メールマガジンへの登録」を促すページのことを「コンバージョンコンテンツ」と、呼んでいます。

「プレゼンテーションコンテンツ」とは、オンライン上の運営者が直接関与しないトラフィックとは別に、セミナーの際や無料相談などの際に、意図的にアクセスさせ、オンライン上の「パワーポイント」のような用途で利用するコンテンツのことです。

2カラムデザインの強み

2カラムデザインの強みは、抽象的な検索キーワードでアクセスされた場合に、関連コンテンツへの誘導を誘発しやすい点です。

1カラムデザインを採用した「情報コンテンツ」も、用途によっては必要ですが、もし、頻繁に抽象的な検索キーワードでアクセスされ、直帰率や離脱率が高く、そのコンテンツの主目的が果たされていないようなら、2カラムレイアウトに変更し、デザインを見直す必要があります。

そのため、先の「運営方針」や「アクセス経路」の整理から設定した、各コンテンツの用途とアクセス経路割合は、あくまでも「暫定的なもの」と、覚えておいてください。全ては、訪問者の反応に応じて改善することが大切なのです。

また、これとは逆に、当初はSEO対策や検索経由のトラフィック割合が多いと仮定して作り込んだ2カラムコンテンツから、特定のページに偏って誘導できていたり、コンバージョンコンテンツとしての役割を果たしているようなら、1カラムのデザインに変更することを検討してください。

検索エンジンは、1カラムだろうと2カラムだろうと、レイアウトデザインの違いは、コンテンツの評価対象にはしていません。もちろん、背景色が青だろうとピンクだろうと、これもまた検索ランキングには一切影響しません。

※ 10年前には、背景色と同色の文字色を採用した、人の目では目視できない「隠しテキスト」で、キーワードを埋め込む、検索スパムテクニックがありましたが、今の時代、そんなことを考える人もいないことでしょう。

1カラムの強みは「余計な情報」を与えずに、コンテンツに集中させることでしたが、2カラムコンテンツの強みは、関連コンテンツへの誘導が容易なことと、SEOの仕組みを学びやすいと言うところにあります。

コンテンツデザインとSEO

ページ構成とコンテンツデザイン

アクセス経路の整理

ホームページ全体の「目的」を定め、その運営方針に従って各ページの目的も設定したら閲覧導線を仮定したら、ここまでに計画したページ構成をもとに、コンテンツのレイアウトを決定し、コンテンツを作成していきます。

まずは、『トップページの基本デザイン』を参考に「1・3・1・2」に掲載する内容を決定し、トップページと直結する主要コンテンツを掲載する数ページをデザインします。

トップページから直結するコンテンツは、概ね閲覧導線と訪問者心理を考慮すれば、いきなりセールスや資料請求を促すコンテンツとはならないため、各テーマに沿った「概略情報」を提示するコンテンツが、このページには並びます。

「概略情報」を掲載したページは、プレゼン・コンテンツとしても利用可能なため、その多くは「1カラム」を採用したコンテンツとなります。

プレゼン・コンテンツは、先述した「意図的に発生させるトラフィック」のひとつ「顧客応対時のトラフィック」を発生させますので、余計な情報を閲覧者に与えないためにも、1カラム・デザインが有効です。

あとは、この「概略情報」の「次」を希望する閲覧者に対し、ホームページ上でさらなる情報を伝えるのか、それとも「より早い解決」を求める訪問者に対して、その方法を示した「コンバージョンページ」を提示するのかが決まれば、トップページから数えて3ページ目にアクセスさせるコンテンツテーマを決定することができます。

ここで登場するのが2カラムレイアウトの「詳細情報コンテンツ」です。

それでは、トップページから直結する2ページ目のコンテンツデザイン方法と3ページ目に当たる詳細情報コンテンツを2カラムで、どのようにデザインするのかを見てみましょう。

2種類の1カラムデザイン

1カラムは2種類のコンテンツに採用されます。この2種類とは、トップページに見られるような「ナビゲーションコンテンツ」と、顧客応対時にも利用可能な「プレゼン・コンテンツ」としての役割を果たすことができるコンテンツです。

ナビゲーションコンテンツの基本設計方法は『トップページデザインの基本』ページを参照してください。

「プレゼン・コンテンツ」は、『レイアウトとデザイン』の段落でお伝えした通り、その後のトラフィックデータを参考に、デザインの改修が起こりやすいコンテンツとも言えますので、手軽にデデザインを変更できるワードプレスの仕組みを採用し、ホームページをあらかじめ作っておくことが肝要です。

プレゼン・コンテンツを作成する場合は、これまでにパワーポイントなどで作成した手持ちの資料をウェブコンテンツに改変する作業から始めるのが簡単でしょう。『Webデザインの全体像』のページで採用している「紙芝居型デザイン」を採用しても良いでしょうし、このページのように背景色で段落替わりを強調するデザインを採用しても良いでしょう。

本サイトの目的は、基本的に「プレゼン・コンテンツ」としての機能を担っているうえに、実際のコンテンツデザインを施したページで、そのデザインに会する解説を加えていますので、若干、本来採用すべきデザインとコンテンツ内容が異なる場合があります。

1カラムを採用したコンテンツをデザインする場合に、必ず詳細情報を掲載した2カラムコンテンツに誘導しなくてはならないということはありません。ナビゲーションコンテンツでも、プレゼン・コンテンツでも、訪問者が運営者に接触したいと感じた時には、接触するためのアクション(「お問い合わせ」や「無料相談」など)を起こせるようコンテンツを作成します。

また、1カラムコンテンツは、検索経由のトラフィックが主となる2カラムコンテンツのサイドメニューからアクセスされることもありますので、やはりこのような訪問者に対しても、1絡むページをデザインする時にも、コンバージョンページやセールスページへの誘導、もしくは、問い合わせフォームの設置などは配置しておく必要があります。

この他、問い合わせを行った閲覧者に対して表示する「サンキューページ」などに関しては、1カラムか2カラムかで頭を悩ませるケースもあります。このことに関しては、『デザインとコピーライティング』をご覧ください。

詳細コンテンツのデザインと役割

「詳細コンテンツ」とは、より具体的な検索キーワードを打ち込んだ際にアクセスされるようなコンテンツです。その結果、閲覧数などが伸びれば、検索エンジンが「検索者に有益な情報を期したコンテンツ」と評価し、より抽象的なキーワードで検索された際にもランキングに顔を出すようになるコンテンツです。

また、詳細情報を掲載したコンテンツは、営業の一端を担い、見込み客とセールスパースンの時間を節約する役割を果たします。

例えば、電話相談など限られた時間の中でプレゼン・コンテンツを使い対応したのち「今お伝えしたことは、〇〇のページに記載していますので、ご確認しておいてください」と、告げ電話相談を終えます。

その後、確度の高い見込み客は、必ずと言って良いほど、その指示に従い詳細情報が記載されたコンテンツを閲覧し、次回の応対時には、その詳細を踏まえた上で商談を進めることができるようになります。

この流れがうまく回るようになると、1、2ヶ月もの間、ホームページを読み込んでくださった方から、初回の無料相談の際に「詳細はサイトの内容から理解できています、私の場合はどうすれば良いでしょうか?」と言った内容の相談が寄せられ、その場で成約ということも珍しくはなくなります。

このような、セールス行程の大半をホームページで完結させるコンテンツと、その構成を実現するためにも、2カラムコンテンツのサイドメニュー構成の改善は欠かせません。

ただ、だからと言って、あまり目を引くようなインパクトの強い画像や動きのあるコンテンツをサイドメニューに掲載してしまっては、本文を読まずに、他のページへ移動してしまいますので本末転倒となってしまいます。

最新ブログのサムネイルリンクや、「よく読まれているページ」などをサイドメニューに掲載することもあり、そこには概ね各ページに掲載した「アイキャッチ画像」が表示されるため、サイドメニューを「地味にデザインする」のは、なかなか現実的でない場合もあります。

そこで重要になってくるのが、詳細コンテンツにもセールスライティングの要素を用いて記事を作成するということです。

「セールスライティングのスキル」といっても、下記のページを参考に作文していただければ、それほど難度が高いスキルは必要ないと知っていただけます。

デザインとコピーライティング