アクセス解析とコンテンツデザイン

/アクセス解析とコンテンツデザイン
アクセス解析とコンテンツデザイン2018-08-24T07:30:04+00:00

アクセス解析(Googleアナリティクス)を使って、デザインを改善してアクセスアップにつながるのか!と、疑問に思う人も少なくないかもしれません。また、アクセス解析を使ってデザインの改善ができること自体に疑問を感じる人もいるかもしれません。

ここでは、アクセス解析(Googleアナリティクス)を使って、コンテンツデザインを改善する「簡単な方法」と、そこから得られる成果についてご紹介します。

アクセス解析を使い「視覚的デザイン」を改善する

本サイトでは「デザイン(Design)」を「設計」と「意匠」の両側面から捉え、コンテンツのデザインが、成果にどのような効果を与え、どのように施し、そして改善するのかをご紹介しています。

「設計」とは、サイト内コンテンツの「ページ構成」や「ページ内のコンテンツ構成」を意味します。「ページ構成」とは、ページ同士の「リンク構成」と考えていただいて差し支えありません。

簡単に言うと「どのページと、どのページをリンクで関連つけるのか」と言うことです。この関係は、通常「閲覧導線」を軸に考えます。「ページ内のコンテンツ構成」というのは、俗に言う「起承転結」を構成することで、コピーライティングに関わる設計です。

この2つに関しては『WEBデザインの全体像』と『WEBコンテンツの設計』を参照ください。

本ページでは、WEBサイトデザインの「意匠」的側面に着目し、アクセス解析を使った改善方法とその効果に関して解説します。

コンテンツの視覚効果を狙ったデザインを改善すると、どんな効果があるのかといえば、第一に「精読率」が改善されます。

一般的に「人は文字を読まなくなってきている」と、言われますが、今も昔も人は自分に関係性が強い文章は積極的に読み進めます。

ここでとても重要なことは「自分に関係性が強い」と、コンテンツへのアクセス者に感じ続けさせることです。「自分に関係性が強い」と言う(無自覚とも言える)感情は、「興味を持つ」ことから始まります。

コピーライティングの技術では、この「自分に関係性が強い」と言う感情を引き出すために、読者が興味を引く「ヘッドライン(ヘッドコピー)」で、これを示します。しかし、「言葉」は直線的な影響を及ぼすため、極端に、その成果を分けます。

ここを補うのが視覚効果を狙ったデザインです。そして、この場合の「デザイン」には、「画像の選択」が含まれます。

コピーライティングの「ヘッドライン」に呼応するデザインパーツはページ上部(ヘッドラインの上部もしくは下部)に掲載する「アイキャッチ画像」となります。

また、この「アイキャッチ画像」は、SNSなどにリンクを投稿した際の「サムネイル画像」として利用されることも多く、コンテンツへの「掴み」を担当する「ヘッドライン」や「アイキャッチ画像」は、SNSへのリンク投稿データを参照し改善を加えます。

アイキャッチ画像を改善し、アクセスを増やす

アイキャッチ画像を改善しただけでアクセスアップに繋がるのかと、ここでも疑問を持たれる方がいらっしゃるかもしれません。それもそのはず、アイキャッチ画像は一般的にアクセスされた際に目にする画像ですので、このように考えられています。

しかし、前述の通り、昨今のインターネット活用を振り返るとSNSにリンクを投稿した際に表示されるサムネイル画像には、このアイキャッチ画像が表示されることがほとんどです。

アイキャッチ画像は、SNSのサムネイル画像になる

ホームページのアクセスアップを検討するとき、多くのWEB担当者が検索経由のアクセスアップを想定し「SEO」や「検索上位表示対策」を試みます。

私たちも創業当初は、このSEOや検索上位表示対策を中心にアクセスアップを図り、そのサポートも行なっていました。しかし、『最短で利益を上げるサイトデザインと運営方法』でも、お伝えしている通り、ホームページを営業ツールのひとつと捉えた運営を進めていくと、ことさら特別なSEO対策や検索上位表示対策が必要だとか必要じゃないと言う議論ではなく、ある種「不毛」とさえ感じられるようになってきました。

そのひとつが、アクセスアップはSNS経由のトラフィックをきっかけに、検索経由のアクセスも増やすことができるとわかってきたからです。

まず、アイキャッチ画像は、SNSにリンク投稿を行った際の「サムネイル画像」として、サイトへの訪問者以外にも見せることができます。

Facebookやツイッターでは、このアクセスを呼び込む画像のテストが可能です。

そして、このテストをきっかけにSNSからのアクセスを呼び込むことができるアイキャッチ画像(サムネイル画像)を見つけ、SNS経由のトラフィックを増やし続けると、間接的ではありますが、検索経由のトラフィックも増えていきます。

ただし、この原因を特定することはできません。

なぜなら、Googleが検索ランキングを決定する要因(検索アルゴリズム)は、ブラックボックスだからです。

しかし、検索エンジンは「ユーザーに役に立つコンテンツ」「ユーザーに評価されているコンテンツ」を、検索ランキングでも評価すると発表しています。

そのため、私たちは、SNS経由であれ、第3者が運営するWEBサイト経由であれ、より多くのアクセスを獲得することは、結果的に検索経由のトラフィックも増やすのではないかと言う仮説のもと、これまでウェブサイトを運営し、実際に検索経由のトラフィックを増やし続けてきました。

また、SNSを通じてテストを行った、ページへの訪問を促すアイキャッチ画像(サムネイル画像)は、検索経由の訪問者が初めてページに訪れた際に、そのユーザーを引きつける効果が高いのではないかと考えています。

この効果を厳密にアクセス解析から分析することは、とても困難だと感じています。

詳細は脱線し過ぎてしまいますので割愛しますが、これまでの調査で、私たちが確信を持ってお伝えできることは、SNSを通じてテストを行った、ページへの訪問を促すアイキャッチ画像(サムネイル画像)は、検索経由のユーザーが「数秒で直帰する確率」を大幅に減らすと言うことです。

検索経由の訪問者が、わずか数秒でアクセスしたページから離脱し、検索結果に戻ると言う行為は、その後の検索ランキングへの影響を悪くすると言われています。

SNSに投稿したアイキャッチ画像は、SNSユーザーに「興味」を持たせ、ページへと訪問させます。そして、検索経由のユーザーにも同様にページにアクセスした際にはじめに飛び込んでくるアイキャッチ画像を見て「興味」を膨らませ、本文を読み進み、わずか数秒での直帰率を引き下げ、滞在時間を確保することで、検索エンジンの評価を獲得しているのではないかと考えているわけです。

繰り返しになりますが、検索ランキングを決定する要因を特定することができないため、このような表現になることをご了承願いたいと思います。

コンテンツ装飾を改善して、アクセスアップ

コンテンツ装飾とは、このページでは、ほとんど行なっていませんが、そのほかのページで取り入れている「背景画像」や「背景色」と言った「背景デザイン」と、太文字や大文字、短い文章の中央配置(センタリング)やマーカー装飾といった「文字装飾」があります。

この他にも、コンテンツ(各ページ)のコンセプトに合わせた3種類の「コンテンツ・デザイン」があります。

この3種類の「コンテンツ・デザイン」には「ナビゲーション・デザイン」と「セールス・デザイン」そして、詳細情報を掲載するページのデザインがあります。それぞれのコンセプトに合わせた視覚的デザインとコピーライティングの様式があり、詳しくは『コンテンツのコンセプトと3種類のコピーライティング』を参照してください。

この3種類のコンテンツ・デザインで、もっとも装飾が行われるのが、トップページに代表される「ナビゲーション・コンテンツ」です。

「ナビゲーション・コンテンツ」では、そのページからアクセスできる、いくつかのページを効率よく端的に紹介しますので、各パーツを視覚的にも区別できるようなデザインを施すことが重要です。

そのため、以下のような背景色の切り替えを用いて、それぞれナビゲート先のコンテンツが異なることを読者に視覚的にも伝えます。

下記の配色サンプルは、スマートフォン(iPhone8 plus(幅414px)より幅の狭い端末)でアクセスした場合と、パソコンでアクセスした場合には、配列パターンが異なります。

この背景色の違いですが、「何色の背景がクリックしやすい」という「色」をアクセス解析のデータをもとに突き止めることは、非常に骨の折れるテストになります。しかし、「色の配列」を入れ替えることで、アクセスアップに繋がることは少なくありません。

そして、時には、パソコンでの閲覧の際には、中央のコンテンツがもっともアクセスを誘発しているのに、スマートフォンでは、パソコン画面上の配列で左のコンテンツにアクセス誘導が偏るなど、どちらを優先すべきか、頭を抱えて状況が生じることがあります。

レスポンシブWebデザインの配列問題

この理由は、配色もさることながら、パソコン上で横3列に並べたコンテンツは、ユーザーの視点が中央に集まりやすいため、アクセス誘導も引き起こしやすくなるのに対して、この「パソコン上で横3列に並べたコンテンツ」は、スマートフォンの画面では、「左→中央→右」の順で上から並んでしまうので、結果的には、スマートフォン上では1番上(パソコン上では左)のコンテンツにアクセス誘導が偏ってしまうからです。

このような現象が起こった場合でも、現代は「モバイルファースト」だからと言って、見過ごすわけにはいきません。

このような場合は、アクセス誘導率と成果率を分析し、やはり「パソコン画面で中央」に配置したナビゲーションパーツからのアクセス誘導に有意差がある場合、『パソコン版デザインの「配列問題」』で紹介している「Flex」と言う技術を用いて、デザインを改善します。

人は色彩に序列を付けている

人間の視覚は無自覚なまま、視覚情報に対して「順序」を決定すると言われます。

この人が無意識のまま「色彩に序列」を付ける性質は、ウェブコンテンツ上「読みやすさ」で順序を決めていると考えられます。そのため、この性質をコンテンツデザインに応用する場合は「背景色の濃淡」を用います。

色の濃淡による視覚効果

背景色が薄いほうから濃いほうへと序列をつけると決めつけることはできませんので、逆バージョンを使って、あなたのサイトでは、どのような結果が出るのかをテストしてみてください。

そして、本サイトでは採用する内容が、サイトの立ち上げ段階では見当たらなかったため、サンプルを準備できませんでしたが、もっとも、読者の無意識をコントロールするデザインパターンに「信号機配色」があります。

信号機の「青」「黄」「赤」は、それぞれ「安全」「注意」「危険」を意味する色だと、人は認識しています。この人の認識を踏まえ「成功」や「晴れやかな未来」に関する情報を掲載するパーツには「緑系」を使い、「注意」を促すコンテンツには「黄色」、「警告」や「望まない近未来への警鐘」に関するコンテンツの場合は「赤」などを使って、ユーザーの感性にアプローチします。

ホームページの全体的なイメージカラーを、ご自身の好みや会社のロゴ色などから決定される依頼者も少なくありませんが、検索経由のトラフィックの中から、その検索されているキーワードが「不安」に対する解決策を求めているキーワードなら「緑系」、都合の良い結果を求めている検索ユーザーに注意を促し、顧客化するのが得意なら…といった、ページコンセプトと合わせて、冒頭色だけでも工夫すると精読率を高め、アクセスアップを実現することができるようになります。

また、赤が好きだからと言って、下記のようなミスマッチは避けましょう。

コンテンツ・デザインを改善する

Googleアナリティクスを使うと言っても、細かな項目まで分析する必要はありません。基本的には、以下の3項目だけを使えば十分です。

  1. 【集客】→【すべてのトラフィック】→【参照元 / メディア】
  2. 【行動】→【サイトコンテンツ】→【ランディングページ】
  3. 【行動】→【サイトコンテンツ】→【すべてのページ】

はじめの【参照元 / メディア】では、ホームページの運営方針通り、実際に運営できているかをチェックできます。

また、特にコンテンツを足していないのに、営業先でホームページを使ったプレゼンの実施回数以上に、検索経由のトラフィックが増えているようなら、【集客】→【キャンペーン】→【オーガニック検索キーワード】で、そのキーワードを知ることができます。

2番目の【ランディングページ】も同様のチェックが行えますが「プラスα」を発見することもできます

営業先でプレゼンに使うホームページ内のコンテンツは、いつも「ランディング(着地)ページ」と、なりますので、必然的に、この項目は意図したページに偏ります。それ以外のページに偏ったランディングがされている場合は、そのアクセスが発生した経緯を調べ、それが検索経由なら、その検索キーワードは、あなたのビジネスにとって「稼げるキーワード」と呼ぶことができます(もちろん、ランディング数だけではなく、その後の成果率も参照することは欠かせません)。

3番目の【行動】→【サイトコンテンツ】→【すべてのページ】では、ページビュー数(アクセス数)、平均滞在時間(精読時間)、閲覧開始数(ランディング数)、直帰率(ナビゲート失敗率)、離脱率(最終ページ割合)の5項目をチェックすることができます。

ページビュー数は、『最短で利益を上げるサイトデザインと運営方法』を実践することで、目標値を設定することができ、単純にその目標に合わせて実行できているかを判定できます。

目標値以上にページビュー数の総和が伸びている場合は、検索経由のトラフィックが増えていることを表していますので、相乗効果が出ている証しです。

平均滞在時間は、カッコ書きの通り「平均精読時間」に直結しますので、この時間が短く、直帰率も離脱率も高いようなら、アクセス者は「情報に価値がない」と、感じているのか、または、読むことに「飽き」が生じている可能性を疑うことができます。

この場合は『デザインとコピーライティング』のページを確認し、さらには『次を読みたくなるコンテンツ・デザイン・テクニック』を参考にデザインを改善してください。

「閲覧開始数」とは、そのサイトにアクセスした際にはじめに閲覧した数でカッコ内にはその割合が表示されます。ページビュー数の項目と合わせ、サイトの運営方針が実施できているかをここでも確認してください。

直帰率(ナビゲート失敗率)と離脱率(最終ページ割合)が高く平均滞在時間は十分な時間を獲得できている場合は、そのページ内で読者に提示する「アクション」または、「オファー」に改善の余地があると考えられます。

「平均滞在時間が充分」だということは、読者への情報提供には成功していると考えてまずは問題ないでしょう。しかし、企業サイトの「情報ページ」では、最終的に閲覧者に顧客となるための行動(アクション)を起こしてもらわなければ意味がありません。

この場合は、視覚効果的なデザインではなく、コピーやページの構成といった「設計」視点でのデザインの改善が求められます。

人は、「売り込まれたから買うのではなく、買うための情報で満たされた時に「購買行動」を起こす」の鉄則を踏まえ、「押し」と「アク」の強いコピーにならないようにだけご注意ください。

以上のように、Googleアナリティクスに特別な設定をしていなくても、たった3項目をチェックするだけで、これだけの改善ポイントを見つけることができます。

通常、オンラインだけで完結し、お客様と人的な接点を持たなくてもビジネスを発展できる場合(オンラインゲーム・ビジネスなど)以外、この3項目のチェックと改善だけを行えば十分な成果改善を達成し続けることができます。

また、さらなる営業効率を引き上げるための改善ポイントに関して以下に2通りの方法をご案内致します。

ナビゲーション・デザインの改善

上記3項目以上にアクセス解析からデザインの改善を望む場合は「ナビゲーション・コンテンツ」のデザインから改善することがオススメです。

「ナビゲーション・コンテンツ」のデザイン改善には、以下の3項目をチェックします。

  1. 【行動】→【行動フロー】
  2. 【行動】→【サイトコンテンツ】→【すべてのページ】
  3. 【集客】→【キャンペーン】→【オーガニック検索キーワード】

アクセス発生の経路を調べたいときは【集客】→【すべてのトラフィック】→【チャンネル】と進み、ここで示された項目の中から【Social】を選択すると各ソーシャルメディアごとのアクセス発生数を知ることができます。

また、この段階で「セカンダリディメンション」のメニューから【行動】→【ランディングページ】を選択すると、各SNSから、どのページにアクセスが発生したのかを調べることができます。

逆引きも可能で【集客】→【ソーシャル】→【ランディングページ】と進めば、SNS経由でアクセスされているコンテンツを知ることができ、そこから「セカンダリディメンション」メニュー内の【集客】→【参照元】を選択すると、該当ページのアクセスが発生したSNSを特定することができます。

Googleアナリティクスでは「目標」を設定して、計測し改善することもできますが、はじめにあげた「行動フロー」のデータを見るだけでも、ナビゲーション・デザインの改善を行うことはできます。

まずは、これらの項目をチェックし、設計通りのナビゲーションができているのか、それとも「そもそもの数」が足らないのかをチェックしてください。

これまで改善に立ち会ってきた経験では、多くの場合「そもそもの数」が、足らないことがほとんどです。デザインの改善に労力や資金、時間を費やすよりも、単純に実行できることから始めるように心がけてください。

また、本ページの『コンテンツ装飾を改善して、アクセスアップ』で、お伝えしていることや、『人は色彩に序列を付けている』を参考に「デザインと文章のミスマッチ」が起こっていないのかもご確認ください。

詳細情報ページを改善する

詳細情報ページに採用するコンテンツデザインには、大きく分けて3種類あり、1カラムレイアウトのページデザインが2種類、2カラムレイアウトのページで1種類があります。

1カラムか2カラムかの違いは、サイドメニューの有無です。ページコンセプトや実際にアクセスされているキーワードの特性によって、これらを使い分けるのですが、制作時点では「ページコンセプト」で、1カラムか2カラムかを選択します。

ページコンセプト上1カラムを選択した詳細ページで「アクセス数は多いのに、直帰率や離脱率が高い」場合は、まず、アクセスされている検索キーワードを【集客】→【キャンペーン】→【オーガニック検索キーワード】で確認します。

抽象的なキーワードや1つの語句によるキーワードで検索されている場合は、より広いニーズに対応できるコンテンツだと検索エンジンが判断していると考えられるため、実際のアクセス者は、閲覧したページの情報だけに満足できず、それでいて「関連ページ」を見つけることができなかったため、「直帰率や離脱率が高い」状況を生んでいると考えられます。

このような状況は、SEO対策サービスを依頼している企業サイトに多く、検索経由のアクセスは増えているのに、成果につながっていないという、費用対効果の悪い依頼を実施してしまっています。

この場合の改善策は、2カラムに変更しサイドメニューを使った関連ページへのアクセス誘導救済措置を講じることから始めます。

もし、SEO対策サービスや上位表示サービスを依頼しているのなら、詳細情報ページにアクセスされるキーワードの数を減らす(絞る)ように依頼しましょう。

詳細ページの滞在時間が短い場合の改善策

詳細情報を掲載したページの滞在時間(精読時間)が、想定した時間よりも極端に短い場合は、SEO対策サービスなどに無駄な経費を使っていない限り、余計なキーワードによるアクセスは自然と減っていきます。

詳細情報ページに記載した内容を確認し、「これ以上書くことはない」「どのように書き方を変えれば良いのかわからない」という場合は、詳細ページのデザインに『パワーポイント・デザイン』を採用します。

詳細情報ページは、時として「非常に縦長のページ」になってしまうため、アクセス者がコンテンツを斜め読みしてしまったり、一気にページの最下部までスクロールし、最終的なオファーや「結論」だけを確認し離脱している場合が多々あります。

このような訪問者は「早合点」しがちなタイプですので、あなたが実際にこのようなタイプまで顧客として迎え入れるかどうかは検討の余地があります。しかし、早合点しがちなタイプな人でも、「各段階の要点」を的確に伝えることができれば、順序立てて話を理解し、あなたが余計な心配をしなくても理解を深めてくれるタイプの人たちがいます。

このようなタイプの人たちに「パワーポイント・デザイン」は最適です。

パワーポイント・デザインは、スマートフォンでは機能しない仕組みがありますが、パソコンでアクセスされている場合は、一気にページ下部までスクロールすることができない仕組みになっています。

また、パワーポイント・デザインで作成されたページにスマートフォンでアクセスされた場合でも、各段落のデザイン上の性質から一般的によくある縦長のページを一気にスクロールさせた時とは異なる挙動を起こしますので、ページの上部に素早く戻り、そこから改めて読み始めるケースを増やします。

「確実にこうなる!」と、言うことは出来ませんが、ある種、強制的にページの滞在時間を確保できるパワーポイント・デザインは、文章の改善やコピーライティングのセンスに左右されず、実施できる「表現手法の改善」ですので、オススメです。

パワーポイント・デザインで作られた本サイト内のページは以下の2つです。
幅900px 高さ600px以上の端末でご確認ください。

Webデザインの全体像

Webデザインの全体像

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

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

パワーポイントデザインに関する詳細はこちら

パワポデザインとは

コンバージョン率が悪い詳細情報ページを改善する

「コンバージョン率」とは、一般的に「顧客転換率」を指して、こう呼ばれます。詳細情報ページでは、必ずしもそのページで読者を顧客かするだけではなく、資料請求や問い合わせを発生させたり、狙った関連する詳細ページにナビゲートする(順序立てて情報を伝える)「アクション」を発生させる目的で作られている場合も多くあります。

この「アクション」には、それぞれ「アクションハードル(詳細はリンク先を参照)」の高さに差があり、このアクションハードルは、読者の情報吸収率にも左右されます。

もし、あなたが作成した詳細情報コンテンツが、「情報の対比」を用いたほうが読者の理解を促す場合は、『詳細1カラムページの視覚的デザイン』を参考に、ページをデザインしてみてください。

「情報の対比」とは、例えばアップルのサイトのように製品同士を比較するように、「情報同士の比較」を行うことで、それぞれの情報をより理解しやすくする表現手法です。

それぞれの情報を横(スマホの場合は連続する上下)に並べ、枠を区切って情報を掲載し、背景色の濃淡などでテーマの関連性や切り替わりを視覚的に表現します。詳しくは『詳細1カラムページの視覚的デザイン』と、このデザイン様式で作成している『WEBコンテンツの設計』を参照ください。