Webサイトにとって検索エンジンが重要なユーザー獲得経路であることはよく知られていると思います。しかし、WebサイトをデザインするデザイナーにはSEOに効果的なサイトの設計方法やデザインはあまり知られていないのではないでしょうか？デザイナーの中にも、「Webサイトをデザインする際にSEOに関する知識がなくて不安」という方は多いかと思います。今回は、そんなデザイナー向けに「デザイナーも知っておくと安心なSEOに効果的なWebデザインのポイント」を5つ紹介します。
大前提として、Googleは「ユーザー体験が良いサイト」を重視している。
まず、大前提としてGoogleは「ユーザーにとって良い体験を提供するサイトを検索結果の上位に表示する」という方針をとっています。そのため、実は「良いユーザー体験を提供する」というデザイナーの本来の目的に忠実にサイトをデザインすれば自然とSEOにも効果的なサイトとなるということもできます。
そのため、実はユーザーのニーズに合った適切なコンテンツやデザインを届けていれば、デザイナーとして「SEOの観点でこのデザインは良いのだろうか？」などと過度に不安になる必要はないとも言えます。ユーザーインタビューなどを通してユーザーの正しいニーズを把握してサイトを設計することの方が、細かなSEOテクニックよりも重要ということです。「ユーザービリテ ィ」に関しては、以下の記事で詳しく解説していますので、ぜひそちらも参考にしてみてください。とはいえ、知っておくだけで取り入れることができるようなSEOに有効なデザインパターンといったものはいくつか存在するので、今回はそれらをまとめて紹介していきます！
セクションタイトル: ターゲットキーワードを含めた短い説明文を付けよう
これは、ページ内にテキストが少なくなりがちな場合に有効なデザイン施策です。コンテンツを提供するサイトのホーム画面などでシンプルにデザインしようとすると、どうしても文章が少なくなりがちですよね。このような場合、ページ内のそれぞれのセクションが何を示しているのかが検索エンジンに伝わりにくいことがあります。もちろん、ブランディングやサイトの見た目との兼ね合いもありますが、このような場合にセクションタイトルの下にそのセクション の内容を端的に説明する文章を記載するという手法があります。
https://www.uniqlo.com/jp/ja/contents/feature/ut-magazine/
これによって、検索エンジンはそのセクションの内容を理解することができるようになり、セクションに付随する「もっと見る」ボタンでリンクされている一覧ページとターゲットキーワードの関連性を高めることができます。上記の『UT magazine』では「Styling Book」というセクションタイトルの下に、「UT着こなし紹介」という説明文を加えていますね。このセクションの「もっと見る」のリンク 先のページで、「着こなし」という検索キーワードを狙っていることがわかります。実際にリンク先のページは、「ユニクロ 着こなし」で検索するとトップの検索結果として表示されています。
ナビゲーション設計: 関連コンテンツを内部リンクでつなごう
これは「トピッククラスター戦略」として知られているSEO戦略で、「関連性の高いコンテンツ同士をリンクで繋ぐ」という施策です。Googleはサイト内に張り巡らされたリンクを解析して、関連度の高いコンテンツを「まとまり」として評価します。たとえば、ECサイト内で特定のブランドの商品ページがお互いにリンクで繋がれていれば、それらをまとまりとして認識し、そのブランド名での検索に関するWebサイトの評価を高めることに繋がります。逆に、これらのページがうまくリンクされていない場合には、関連ページの評価はバラバラになってしまい、SEO効果が下がってしまいます。メディアサイトであれば関連記事、ECサイトであればブランドやカテゴリーなど、関連性の高いコンテンツを「まとまり」として定義し、「サイドナビゲーション」や「関連コンテンツ」セクションを使ってお互いのページにリンクを貼るような設計にすると良いでしょう。
https://zozo.jp/brand/nike/
また、このような場合に効果を発揮するのが「ハブページ」と呼ばれるものです。ハブページとは、関連コンテンツのハブ（中心）となるようなページのことで、特集ページやカテゴリーページをイメージするとわかりやすいかもしれません。ECサイトのように、特定のブランドの商品ページがたくさん存在する場合、それらすべてをお互いにリンクするのは難しいですよね。そのような場合にも効率的にリンクを張り巡らすことができる方法として、この「ハブページ」を作るという方法があります。この方法であれば、関連ページ集とそれぞれの個別ページをリンクすることで、効率的にトピックの「まとまり」を作ることができます。
上記のZOZOTOWNの例では、「Nike」という検索ワードに対してサイトの評価を高めるために、Nikeのブランド概要などを含む商品一覧ページを作り、個別の商品ページからのこの「ハブページ」と別のNikeの商品へのリンクを貼っています。このZOZOTOWNのNikeのページは、日本だけでも月間45万回以上も検索されてい る「Nike」というキーワードでの上位表示を獲得しています。
- SEOに効果的なコンテンツハブページのデザイン
- ECサイトやメディアサイトなどで「ハブページ」を設ける際には、そのカテゴリーやブランドの概要説明などをトップに設けると効果的。
パンくずリスト: 実は検索結果での表示にも影響する
Webサイトをデザインする際に意外と忘れられがちなのが「パンくずリスト」です。このパンくずリストですが、「サイトの構造を把握しやすくなる」や「サイト内の前の階層に戻りやすくなる」といったUX的なメリットもありますが、正直「ブラウザのボタンで前のページは戻れるし、モバイル端末ではあまり使用しないかも」と思いますよね。しかし、このパンくずリストは3つの理由からSEOにとって大変重要なコンポーネントなのです。
■ パンくずリストのSEO効果
関連コンテンツをリンクしやすくなる
検索エンジンが回遊しやすくなる
検索結果に適切なパンくずリストを表示できるようになる
1つ目の理由は、前述した「関連コンテンツをリンクでつなぐ」と同じ理由です。個別のページからハブページへのリンクを設ける最も簡単な方法がこのパンくずリストです。個別のページと関連性の高い一覧ページをパンくずリストに含めることで、自然と関連コンテンツのまとまりが形成されます。
2つ目の理由はよく聞くもので、「Googleのボットが回遊しやすくなる」というものです。Googleのボットはページの構造を理解するためにこのパンくずリストを活用しています。Googleに正しいサイト構成を伝え、ボットがクロールしやすくすることでSEO効果を高めることができます。
3つ目の理由はあまり知られていないかもしれません。これは、「構造化データマークアップ 」と呼ばれるもので、検索結果でのページの表示のされ方を調整することができる方法になります。Googleの検索結果を見ると、それぞれのページタイトルの上にパンくずリストが表示されているかと思います。
https://www.google.com/search?q=コーヒーメーカー
上記の例は「コーヒーメーカー」のGoogle検索結果ですが、『mybest』の検索結果では綺麗に「家電 > コーヒーメーカー」という構造が表示されていますよね。ここがURLのアルファベット文字列になってしまうより信頼性が高くなるのがわかると思います。ページ内にパンくずリストを含めた上で、この構造化データマークアップでパンくずリストの内容を定義することで、意図した内容を検索結果のパンくずリストにも表示することができるようになります。
構造化データマークアップには他にも種類があり、Googleはこれらをうまく使うことで検索結果でのクリック率やページ滞在時間が大幅に改善する例があると述べています。
ファーストビュー: ランディングページの直帰率を下げよう
「ファーストビュー」はデザイン業務でよく耳にする言葉ですよね。サイトを開いた時の印象を左右するもので、ユーザーがそのままページに滞在してくれるか、「戻る」ボタンで検索結果に戻ってしまうかはこのファーストビューにかかっていると言っても過言ではありません。このファーストビューのデザインもSEOに大きな影響を与えます。なぜなら、Googleは検索結果からページを開いた後ユーザーがそのままサイトに滞在したかどうかの指標を使って、「ページとユーザーのニーズが合っていたかどうか」を判断しているからです。
一 般的にWebサイトに訪れたユーザーは、そのサイトが自分のニーズに合っているかどうかを約3秒で判断していると言われています。この3秒という時間を考えると、細かいページ内容までは見る前にサイトを閉じてしまう可能性があることがわかります。つまり、どんなに良いコンテンツを提供していてもファーストビューの印象が悪いとユーザーは内容を見てはくれません。ページに訪れたユーザーが何もせずに帰ってしまう割合を「直帰率」といい、これが高いとGoogleはページを検索結果に上位表示してくれません。ホーム画面だけでなく、検索結果からユーザーが流入することが想定されるそれぞれのページで、ファーストビューにて適切な情報をユーザーに提供できているかがデザインのポイントとなります。
- ファーストビュー改善の簡単な施策
- ヘッダー内にそのサイトのコンセプトがわかるような一文（キャッチコピー）を含めるだけでもサイトの内容がユーザーに伝わりやすくなります。
モバイルユーザビリティ: Googleはモバイルでのユーザー体験を基準にSEO評価している
Googleは2018年以降、Webサイトのクロールやインデックス、評価といったSEOに関する分析をモバイル版でのサイト表示を基準に行なっています。そのため、「良いユーザー体験を提供する」ことがSEOにとっても重要と冒頭で述べましたが、この体験がモバイルブラウザで提供されている必要があります。モバイルフレンドリーなサイトデザインのポイントとしては、やや近年では浸透しきっている感じもありますが、以下の通りです。
読みやすいフォントサイズを使用する（Google推奨の本文サイズは16px）
ボタン間に適切な間隔を開ける（Google推奨のボタン最小サイズは48px）
レスポンシブデザインで実装する
フォントのサイズに関しては、小さすぎるとGoogle Search Consoleにてエラーが表示されるなど、明確な悪影響があるため、ユーザーが読む文章などにておいては特に注意が必要です。また、サイトのコンテンツにもよりますが、文章の行間についても広めに開けることで読みやすさが向上するだけでなく、メディアサイトなどではモバイルでの縦スクロールの長さが伸び、ユーザーのページ滞在時間の向上が望めるといったSEO効果もあります。レスポンシブデザインのメリットについては以下の記事で詳しく解説していますので、ぜひ参考にしてみてください。
まとめ: ユーザーのニーズを把握して良いコンテンツを提供しよう
今回は、デザイナーとして知っておくと安心なSEOに効果的なデザインパターンを紹介しました。中にはすぐに取り入れられそうなものもあるのではないでしょうか？それぞれ実用的な手法を紹介してきましたが、冒頭に述べたように大前提として「ユーザーのニーズに合ったコンテンツを提供する」ことがWebサイトのSEOにとってはもっとも重要となります。そのため、実はユーザーインタビュなどのリサーチといった、デザイナー的な手法が大きく役に立つような領域でもあるということができます。別の記事で、ユーザーインタビューの手法についても詳しく解説しているので、ぜひそちらも参考にしてみてください。
