コンテンツマーケティングを実施していると、キーワードランクチェッカーなどで狙いたいキーワードの順位だけに終始しがちです。確かに自身が講じたSEOが正しい方向に進んでいるのかは検索順位を確認することが最も重要です。しかし、検索順位だけに終始していると読者にとって必ずしも良いものにはならずに、結果としてSEOがうまくいかないというケースも出てくるでしょう。そんな時には今回ご紹介するデザインに関しても考慮すると良いでしょう。今回はコンテンツマーケティングに重要なデザインに関してご紹介いたします。
検索結果のデザインには変化がある
Googleで検索をした際に表示される画面をSERP（Search Engine Result Pages）と呼び、検索結果の各サイトのURLや情報のことをカードと呼びます。Googleではこれまで、このSERPやカードの表示デザインを変更してきました。
例えば、2016年2月にはパソコンの検索結果画面で右側の広告掲載枠の表示が廃止されるようになりました。廃止されてからは数年経つので、「そんな広告枠あったかな？」と忘れている方もいるかもしれません。そして、それに合わせて上部の広告枠が3つから4つに増えています。
この時の変更はGoogleから正式にコメントが出される前にされたこともあり、事前にSEOサイト（Search Engine Land）からのリークがあったとはいえ、広告を配信している方々は困惑したようです。
しかしながら、このようにGoogleでは、SERP（SERPs）やカードデザインを徐々に変更しているため、WEBマーケティングを考えるにはそれに合わせた戦略も考えていかなくてはいけないということがわかります。
また、急なUIの変更をする可能性もありますので、常にGoogleの動向に気を配る必要があるでしょう。
サイト集客には検索結果のデザインを無視できない
SERP（SERPs）のデザインについて広告部分が削除されたと記載しましたが、現在までにSERP（SERPs）の表示やカードデザインも大きく変更しています。表示の面での大きな変更といえば、「強調スニペット、リッチスニペット、ナレッジグラフ」などの追加が大きいでしょう。
例えば、強調スニペットでは、検索をしたキーワードに応じて上部にその説明や画像が表示されます。一方リッチスニペットでは、カード内に☆マークでお店の評価が表示されたり、ナレッジグラフでは、右側に検索したキーワードに関連した情報が掲載されたりするようになっています。
これらの機能は、ユーザーが一目見てその情報を確かめられるようになっているので、その後サイトへの訪問が大きく変わることが予想できるかと思います。特に強調スニペットに関しては、オーガニックで表示されるサイトの内容を持ってきていることがありますので、ここに表示されれば訪問者を増やせる可能性があります。
Googleでは、強調スニペットに自分のサイトの情報を意図的にのせる手段はないとしていますが、ある程度意識をするだけでもアプローチができる可能性があります。
特に注目したいのはモバイル検索結果のデザイン
Googleでは、モバイルファーストという考え方を基本にSERP（SERPs）のデザインを組み立てています。これはつまり、モバイル検索のSERP（SERPs）のデザインが起点となり、続いてPCのデザインに反映されるということです。
なぜモバイルのデザイン変更が起点になるかというと、一番の要因は各プラットフォームでデザインを統一する目的があるのではないかといわれています。現状、SERP（SERPs）で表示されるデザインは、「デスクトップ、モバイル、タブレット」で分かれます。
これは、デスクトップやタブレットでは2列表示できるのに対し、モバイルでは1列しか表示できないからです。もしデスクトップを起点にデザインを考えた場合は、モバイルでは1列しか使用できないので別のUIを実装する必要があります。その点、モバイルに合わせたデザイン作りを行えば、全てを1列に表示できるので大きな変化がありません。
このような理由があることから、SERP（SERPs）を考える時にはモバイルのUIを重要視する必要があります。また、最近では、モバイル検索結果をリニューアルしており、デザイン面で大きな変更がありました。
そのため、WEBマーケティング担当者はモバイルのSERP（SERPs）を意識し、ユーザーにアピールできるようなデザインを考えることで、訪問者数の増加にアプローチできるのです。
サムネイル表示
ある特定のキーワードを検索すると、カードの横にサムネイルが表示されることがあります。これはサイト内にある画像を選んで、サムネイルとして表示しているものです。
カードにサムネイル画像が表示されることによって、そのサイトがどのような雰囲気なのかが一目でわかるようになっています。SERP（SERPs）のカードは基本的に文章やURL、見出しで構成されていますので、画像があるだけでも印象が変わりユーザーの訪問率を上げる要因ともなります。
また、サムネイルの選定は基本的にGoogle側の判断で行いますが、検索エンジンにサムネイルに指定したい画像を促すことができます。クロールへの指示は、「<PageMapデータ、thumbnailメタタグ」のどちらかをHTML内に記述します。
まずPageMapですが、これは構造化マークアップで検索エンジンに情報を伝えるものです。通常のタグのように「<PageMap></PageMap>」と記述し、中に情報をのせます。サムネイルに画像を設定する場合は、PageMapタグの中に以下のタグを記載すれば完了です。
<Attribute name="src" value="画像のURL">
一方、thumbnailはメタタグとして以下のように記述します。
<meta name="thumbnail" content="画像URL”>
このメタタグを入れる箇所は、モバイル対応している方法によって変わります。動的配信、レスポンシブであればページのhead内、セパレートタイプならモバイルページのhead部分となります。
ファビコン表示
サイトのシンボルとして設定できる画像ファビコン。従来は、アドレスバーやタブに表示されるだけでした。しかし、SERP（SERPs）のカードデザインが大きく変わり、カードの一番上部にファビコンとURLが記載されるようになったのです。
そのため、検索結果の段階でファビコンがないサイトがわかる仕組みとなり、一目で手の込んでいないサイトというのがわかってしまいます。そのため、訪問数を増やすためには、ファビコンを作成しておいた方がよいでしょう。
まず用意するファビコン画像ですが、フォーマットは「.ico」となりますので専用のサービスでgifやpngを変換する必要があります。「.ico」に変換したら、headに以下のタグを記述します。
<link rel="shortcut icon" href="画像URL" type="image/vnd.microsoft.icon" />
<link rel="icon" href="画像URL" type="image/vnd.microsoft.icon" />
また、Googleでは、カード横のファビコンの表示に以下のガイドラインを設けています。
- ファビコンのファイルとサイトをエンジンがクロールできること
- ファビコンがブランドを視覚的に表したものであること
- サイズが48ピクセルの倍数であること
- ファビコンのURLが固定されていること
- わいせつ・ヘイト表現ではないこと
これらのガイドラインが満たされていないと、ファビコンが表示されないことがありますので気を付けましょう。
広告表示
モバイルの新しいSERP（SERPs）では広告のカードデザインが大きく変更されており、従来よりも広告とオーガニックに違いが無くなってきています。これまでの広告のカードデザインは、上から「ページのタイトル、URL」の順でした。そして、URLの部分には「Ad」と色付けされたファビコンがあり、一目で広告だということがわかる表示でした。
しかし、変更後は、上から「ファビコン＋URL、ページタイトル、スニペット」となっており、オーガニックの表示と大きく変わらないことがわかります。また、ファビコンとURLは黒い表示になっており、一見広告とはわからなくなっているのです。
これにより「広告だから押したくない」といったユーザーの心理が薄れる可能性があり、広告主にとってはうれしいデザイン変更となっています。今後も広告とオーガニックの境界線は薄くなると考えており、今後は上部・下部にまとめて表示ではなく分散される可能性もあります。そうなるとオーガニックに表示されるサイト運営者は、ユーザーが興味を引くようなデザインになるよう、より一層、気を配る必要があるでしょう。
