SEOフレンドリーなWebデザインとは?

  • 更新
ウェブデザインのSEO

サイトやページのコンテンツを読みやすく、わかりやすく、使いやすく、そして美しくすること、つまり良好なユーザーエクスペリエンスを提供することは、デザインが担う重要な役割であり、人間のユーザーに対して有効であるのと同様に、SEOにも有効に働きます。

SEOに強いWebデザインの基本

ターゲットユーザーの設定はWebデザインに欠かせないプロセスです。そのターゲットユーザーのひとつに検索エンジンを加えることで、WebデザインはSEOフレンドリーになります。現在の検索エンジンは、人間のユーザーと同じようにサイトのユーザーエクスペリエンスを評価するからです。

ウェブサイトは利用者の便宜のために構築するべきであり、すべての最適化はユーザー エクスペリエンス向上のための調整である必要があります。検索エンジンもそうした利用者のひとつであり、他のユーザーがあなたのコンテンツを見つけるための手助けをしています。

Google 公式 SEO スターター ガイド(2022年時点)1

検索エンジンは人間のユーザーと同じように、サイトやコンテンツの信頼性やユーザビリティ、速度、モバイルフレンドリー性などを評価します。デザイナーは人間のユーザーにとって最適な形でそれらを提供しようとしますが、検索エンジンにも同様にすることでSEOの効果を高めることができます。

コンテンツ・ファースト・デザイン

検索エンジンのランキング・アルゴリズムは、ユーザーの検索意図を満たすことができるコンテンツを検索結果の上位に掲載するように調整されています2。検索エンジンのアルゴリズムの評価を受けるのはコンテンツであり、ユーザーの目的もコンテンツです。SEOを重視したデザインでは「コンテンツが中心」を忘れてはいけません。

メインコンテンツの質は、ページ品質の評価において最も重要な検討事項のひとつです。メインコンテンツは、ページの目的をどれだけ達成できるかを決定する大きな役割を担っています。メインコンテンツの質を評価するための統一的なテーマは、メインコンテンツがページの目的を達成し、満足のいくユーザー体験を提供する度合いです。

Google 検索品質評価ガイドライン2022年12月版3

優れたデザインとは、わかりやすく魅力的にコンテンツを表現するものです。デザイナーはワイヤーフレームの作成やコードの記述に入る前に、ユーザーがサイトで求める情報や体験に焦点を当てることが重要です。これにより、作成者は本当に重要な要素に集中し、明確で簡潔、そして美しく、ユーザーにコンテンツを提供することができます。4

モバイルの画面サイズと限られた帯域幅を、サイト内の最も重要なものに集中する。そして、そこを起点に構築する。

ジェフリー・ゼルドマン「Content First」20115

質の高いコンテンツは、それ自体にSEO効果があります。そして、デザイン要素がそれをさらにインパクトのあるものにします6。コンテンツ中心のデザインは、ユーザーの目的に適い、また、検索エンジンにも優しいため、SEOとの親和性が高まります。SEOにおけるデザイン(視覚的なデザイン)の役割は決して小さくありません。

KISS原則 – Keep it Simple, Stupid

KISS原則とは、Keep It Simple, Stupid の略語で「誰でもわかるくらい単純にせよ」という意味です。SEOにおいては、シンプルなデザイン、シンプルなサイトの構成、シンプルな文章、シンプルなHTMLコードで、ユーザーや検索エンジンに対するわかりやすさを向上させる取り組みを指します。

  • 重要な要素の強調不要な要素や装飾を削ぎ落とすことで、本質的なコンテンツに焦点を当てます。重要な要素がユーザーにも検索エンジンにも迷いなく伝わるように、情報の整理と重要な要素に注力しましょう。
  • 直感的な操作性 – 冗長な要素や複雑なレイアウトを避け、ユーザーがサイトを直感的に操作できるようにします。ユーザーの経験や知識、語学力、現在の集中力に関係なく、使いやすいデザインを目指しましょう。7
  • クローラビリティとインデクサビリティの確保 – シンプルなデザインは、クローラの効率を向上させ、ページのインデックス化を容易にします。クローラがサイト構造を理解しやすく、インデクサがページの重要部分を理解しやすくするために、構成をシンプルに維持しましょう。8

E-E-A-Tと信頼性の向上

信頼の獲得は、Googleが提唱するE-E-A-Tの最終的な目標です。そして信頼を獲得するための第一歩は、整ったプロフェッショナルなデザインを提示することです9。ユーザーは美しく整ったウェブサイトにより信頼を寄せ、その結果としてウェブサイトの信頼度が向上し、検索エンジンのランキング向上につながる可能性があります。

  • プロフェッショナルな印象 – デザインがプロフェッショナルで高品質なものである場合、ユーザーはウェブサイトの運営者やブランドに対して信頼を抱く傾向があります。プロフェッショナルなデザインは、ウェブサイトが信頼できる情報やサービスを提供しているという印象を与えます。
  • 視覚的な説得力 – デザインは視覚的なコミュニケーション手段です。適切に選ばれた配色や画像、フォントなどは、ユーザーに好印象を与えることができます。視覚的な説得力のあるデザインは、ウェブサイトのメッセージやコンテンツの信憑性を高めます。
  • 統一感と安心感 – 統一感があり整ったデザインは、ユーザーに安定感を与えます。一貫性のあるブランドイメージやロゴ、配色、フォントを使用することで、統一されたビジュアルスタイルが作られ、ウェブサイトが信頼できる組織やブランドを表しているという印象を与えます。
  • ユーザーエクスペリエンスの向上 – デザインはユーザーエクスペリエンスと密接に関連します。使いやすく見やすいデザインは、ユーザーがウェブサイト上で簡単に目的を達成できるようにサポートします。優れたユーザーエクスペリエンスはユーザーがウェブサイトを頻繁に利用したいと思う要因となります。

SEOとユーザーエクスペリエンス

SEOとユーザーエクスペリエンスには密接な関係があり、ユーザーエクスペリエンスの向上はより多くの検索トラフィックをもたらします10。検索エンジンは検索サイト上や検索対象のサイトそのものから多くのシグナルを収集し、機械学習によってランキングに活用しています。そして、良好なシグナルの少なくない部分はユーザーエクスペリエンスからもたらされます11

内容の理解しやすさ

理解のしやすさはユーザーの役に立つだけではなく、SEOにも寄与します。コンテンツが明確で理解しやすければ、検索エンジンはそのコンテンツの意図やテーマを正確に把握しやすくなります。これによって検索エンジンは、適切なキーワードや関連性を把握し、コンテンツを適切な検索クエリに表示させることができます。

  • Above the fold – ユーザーがスクロールしなくても重要な情報に素早くアクセスできるように、必要な情報を画面上部のスクロールせずに見ることができる位置に配置します。これはSEOの観点からはGoogleのページレイアウトアルゴリズム12への対応としても重要です。
  • ページ内の情報の階層構造 – ページ内の要素の重要度や関連性や構造を視覚的に伝えるために、タイトル見出しパラグラフなどの要素を活用して、情報の重要性に応じた視覚的な階層構造を明確に示します。こうすることで、ユーザーだけでなく検索エンジンの理解も助けます。
  • 流し読みへの対応 – 多くのユーザーはページの内容を最初から順に精読するのではなく、スキャンするように流し読みします。整然としたレイアウトの中に目立つキーワードや重要な情報を強調することでユーザーの注目を引き、ユーザーの流し読みに対応することができます。
  • ビジュアル的な魅力 – 高品質な画像(写真、イラスト、グラフ、図解など)を使用し、ページにビジュアル的な魅力を与えます。適切な画像や表を使用することで、コンテンツの理解を促進したり、ユーザーの興味を引くことができます。

コンテンツの読みやすさ

コンテンツの読みやすさは、ユーザーエクスペリエンスを向上させます。読みやすさはユーザーの満足度と関連しており、滞在時間やページビュー数の増加につながります。また読みやすさはユーザーがサイト訪問の目的を達すること、つまり検索意図を満たすことにつながるため、SEOにとってはランキングの向上を後押しする効果を持ちます。

  • 見出しや箇条書き – 適切な見出しパラグラフ、箇条書きなどの要素を使用してコンテンツを整理し、読みやすく、理解しやすくします。
  • 文字サイズと行間 – 適切なフォントスタイルが選ばれ、読みやすさと視覚的な魅力を両立します。また、フォントサイズや行間を適切に設定し、読みやすさに配慮します。
  • 適度な余白 – スペース(余白)は、関連するコンテンツのグループを識別するとともに無関係なコンテンツを区別する重要なビジュアルデザインツールです。適度なスペースを使用することで、読みやすさと視覚的なバランスを取ることることができます。13

操作のしやすさ

操作性の良いウェブサイトは、ユーザーがウェブページにアクセスしてすぐに離脱する直帰率を低減します。ユーザーが求める情報や機能を提供しているページに簡単に移動できれば、ウェブサイトにとどまる可能性が高くなり、直帰率(またはバウンス率)が低減します。検索エンジンは低い直帰率を評価し、ランキングにプラスの影響を与えます。

  • 従来性の保持 – 一般的なウェブデザインの原則に従い、ナビゲーションやロゴの配置、検索バーの位置など、ユーザーが慣れ親しんだパターンを採用し、従来的なウェブデザインの特徴を保持します。これによりユーザーは直感的にウェブサイトを操作でき、満足度が向上します。
  • 視認性の確保サイト内の要素を視覚的に認識しやすいように、適切なカラースキームが選びます。コントラストや視認性を考慮して慎重に配色するとともに、テキストやボタンなどの要素と背景の適切なコントラストを確保することで、視認性と操作性を確保します。
  • 操作性の確保 – ボタンやリンクなどのユーザーインターフェイス部品を視覚的に強調し、クリック可能であることを明確にします。また、リンクやボタンの配置を一貫したものにし、ユーザーが意図した操作をしたり、目的のページに簡単にアクセスできるようにします。

ページの読み込み速度

Googleは2010年に一部のサイトでページの読み込み速度をランキング要素として使用することを発表し14、その後2018年にはすべてのモバイル検索で使用することを発表しました15。読み込み速度はクエリとの関連性よりも弱いシグナルです。しかしクエリとの関連性が同程度なら、速いほうのページが上位にランキングされる可能性があります16

ページ読み込み速度のランキングへの影響は、極めて遅いページを除けばほとんどないと言われています。しかしランキングへの影響は小さくても、実際のユーザーへの影響は小さいとは言えません。以下に挙げた例を含めて、ユーザーが遅いサイトを嫌い、速いサイトがより多くの収益を上げるという調査結果はたくさんあります。

  • Googleが2016年に実施したグローバルの調査17によれば、モバイルサイトの読み込みに3秒以上かかると、53%が離脱します。
  • GoogleとSOASTAによる2017年の調査18によれば、ページの読み込み時間が1秒から3秒になると、直帰率は32%増加します。
  • 同調査によれば、ページの読み込み時間が1秒から5秒になると、直帰率は90%増加します19
  • Walmart では、読み込み時間が1秒改善されるごとに、コンバージョンが最大2%増加しました。100ミリ秒の改善ごとに、収益も最大1%増加しました。20
  • 元Amazon.comのグレッグ・リンデン氏の2006年の研究は、ページの読み込み時間が100ミリ秒(0.1秒)増えるごとに売上が1%減少することを明らかにしました。21

読み込み速度はユーザーがサイト上で最初に体験するものであり、サイト上でのその後のすべての体験に付随します。サイトのユーザー体験と密接に関わるものであり、また、テクニカルSEOの重要な一部分を占めています。特に、非常に遅いサイトを運営しているような場合には、優先して改善に取り組むべきでしょう。

Googleはページの高速化のためのツールを無料で提供しており22、必要十分なガイド23も用意されています。改善にあたってはこれらを参考にするのがよいでしょう。また技術に詳しく、ある程度英語が読める場合には、ベストプラクティスを詳しく解説したページ24もあります。

デザインの実装とテクニカルSEO

SEOの技術的な側面は、ウェブサイトの構造や設計を最適化することにより、検索エンジンによるクロールやインデックス、ランキングを適正におこなえるように支援します。また検索結果やソーシャルメディア上でのプレゼンテーションを最適化することにより、コンテンツの存在感を高める役割も果たします。

クローラビリティとインデクサビリティ

SEOの第一歩は「すべての正規ページをクロールさせ、正確にインデックスさせる」ことにあります。これはWebアクセシビリティにおける多様なブラウザへの対応と非常に近いものであり、アクセシビリティに対応することで得られる恩恵はSEOにとっても非常に大きなものです。

  • Webアクセシビリティの確保 – 検索エンジンのクローラーがウェブサイトを正しくクロールし、インデックスできるようにするためにするべきことの大半は、Webアクセシビリティの確保と同様です。人間にとってアクセシブルなサイトは、ロボットにとってもアクセシブルなのです。
  • リンクの適切な使用 – ページ間のリンクにはa要素とhref属性を用います。Googleのクローラがたどれるリンクは、解決可能なURLが指定された適切な<a>タグが使用されているリンクだけ(JavaScriptを使う場合もレンダリング結果が<a>タグとhref属性になればクロールできます)であるためです。25
  • 意味のあるマークアップ – 適切なHTMLタグとマークアップを使用し、コンテンツの意味や論理性を明確にします。見出し(h1、h2、h3など)やパラグラフ(p)リスト(ul、ol、dl など)やtableなどを適切に使用し、コンテンツのまとまりや階層、重要度を示します。
  • 画像のimg要素とalt属性 – 画像や動画には適切な代替テキストを提供し、画像を処理しないユーザーエージェント(音声ブラウザや検索エンジンロボットなど)でもアクセスできるようにします。なお、Googleがimg要素のalt属性値を使用するのは、画像検索と26、ウェブ検索では画像がリンクとして使われているとき27だけです。

モバイルファーストとレスポンシブデザイン

Googleのインデックス登録とランキングではモバイル版のサイトコンテンツが使用されており、これをモバイルファースト インデックスと呼んでいます28。Googleは2018年にモバイルファーストインデックスの展開を開始29し、2023年時点では、モバイルでアクセスできない一部のサイトを除いて移行を完了したと考えられています30

検索エンジンがインデックスするデータもモバイルファーストとなっている現在、Webサイトの開発やデザイン、そしてSEOも同様に、モバイル機器を標準としたモバイルファーストで実施するのが合理的なものとなっています。

  • レスポンシブ・デザイン – レスポンシブ・デザインを採用し、異なるデバイスや画面サイズなどあらゆる環境での視認性と操作性を確保します。クロスデバイスとクロスブラウザの互換性を確保し、デバイスやブラウザや画面サイズが異なるユーザーでも、同じ情報と機能にアクセスできるようにします。
  • モバイルファースト・デザイン – スペースに制限のある小さな画面向けに設計し、徐々に大きな画面に対応させていくモバイルファーストの設計を行います。このプロセスを採用することで、どんな画面サイズにも対応でき、どうしても必要不可欠な要素以外をすべて削除してシンプルで迷いのないデザインを実現できます。 31
  • モバイル対応のナビゲーション – モバイルデバイスの画面サイズに合わせて、スマートフォンやタブレットで使いやすいナビゲーションメニューを提供します。ハンバーガーメニュー、ドロップダウンメニューなどのすでにユーザーが慣れ親しんだナビゲーションパターンを採用しましょう。
  • タップターゲットの最適化 – モバイルデバイスの小さな画面でも、ボタンやリンクなどのタップ領域を適切な大きさに設計し、誤タップを最小限に抑えます。米メリーランド大のベン・ベンダーソン博士32らの研究グループは、タップターゲットの最小サイズは1cm × 1cmであることを明らかにしています33

内部リンクとURLの設計

内部リンクはユーザーと検索エンジンにサイトの階層構造やページ間の関連性、各ページの重要度を伝える役割を持っています。また、適切なナビゲーションによってユーザーにわかりやすさと移動のしやすさを提供することで、直帰率を下げ、滞在時間を延ばすことが期待でき、SEOへの効果も期待できます。

  • アンカーテキスト – 説明的で簡潔なアンカーテキスト(リンクのラベル文字列)を使います。良いアンカーテキストはリンクに文脈を提供し、ユーザーにとっての使い勝手を向上させるだけでなく、Googleがリンク先のページの内容を理解する助けにもなります。34
  • ナビゲーションメニュー – メニューの項目数はできるだけ少なくしましょう。理想は7項目以下です。メニュー項目が増えるほどユーザーにとっては情報を処理することが難しくなり、SEOの観点からはリンクポピュラリティの効果が分散します。項目数を少なくすることで、ユーザーにも検索エンジンにも特に重要なページを教えやすくなります。35
  • 関連コンテンツへの誘導 – コンテンツ本文からのリンクや、コンテンツ下部に関連記事エリアや関連商品エリアを設けることで、ユーザーが関連するコンテンツに移動しやすくするとともに、関連の深いページを検索エンジンに教えます。ユーザーの文脈に沿った関連コンテンツへのリンクはテーマを強化し、SEOを有利にします。
  • パンくずリスト – パンくずリストを設置することで、ユーザーと検索エンジンは、サイトの階層構造を理解しやすくなり、現在位置を特定できるようになります。この結果、ユーザーはサイト内での移動が容易になり離脱が減少し、検索エンジンのクロールとインデックスが効率化することで、SEOに役立ちます。36
  • 意味のあるURL – シンプルで意味のあるURLを使用します。キーワードを含んだ簡潔なURLを作成し、ユーザーが理解しやすく、検索エンジンにとってもわかりやすいURLを提供します。なおGoogleのガイドライン37にはその他の細かな推奨事項が記載されています。

メタデータとサイトマップ

タイトルや構造化マークアップなどのメタデータは、検索エンジンがページの内容を理解しやすくする役割を果たします。また、リッチリザルトなど検索結果での表示を最適化したり、ソーシャルメディアでの共有時における表示を最適化するなどの役割もあり、これらはクリック率の増加に寄与します。こうしたことはSEOに対して間接的な効果をもたらします。

  • タイトルタグタイトルタグには、各ページに独自の、そのページの内容を具体的に表すわかりやすいテキストを、キーワードを自然に含めて記述します。不必要に長いもの、無駄な情報が含まれるもの、キーワードの乱用、テキストの繰り返しや定型文の使用は避けましょう。38
  • 自己参照の正規化タグ – すべてのページに自己参照の正規化タグ(rel=”canonical” linkタグ)を挿入します。これは検索結果でユーザーに表示したいURLを指定し、重複ページ(必ず発生します)の被リンクを統合し、重複ページのクロールに要するリソースを削減するなど、SEOを強力に推進する目的があります。39
  • オープングラフタグ – ウェブページのメタデータにオープングラフ(OGP)タグを追加40してソーシャルメディアプラットフォームにタイトル、説明、画像などの情報を提供し、ソーシャルメディアでコンテンツが魅力的に表示されるようにします。コンテンツの拡散はオンラインでのプレゼンスと評判を向上させ、SEOを有利にします。
  • 構造化マークアップ – 構造化データを追加することで、リッチリザルトと呼ばれるユーザーの興味をひく検索結果を表示できるようになり、検索結果からのクリック率の増加が期待できます41。この結果、間接的にランキングを上昇させる効果もわずかながら期待することができます。
  • XMLサイトマップ – XMLサイトマップはサイト上のページや画像などのファイルについて、主に正規URLの情報を検索エンジンに伝えるファイルです。XMLサイトマップを送信しておくことで、サーチコンソールを通じてクロールやインデックスで問題が発生したときに素早く発見することができます。CMSなどXMLサイトマップを自動で生成できる場合には送信しておきます。

まとめ

SEOは完成したWebサイトに後付けで対策するよりも、Webサイトの制作時にあらかじめ組み込んでおくほうが効率的です。Webサイトが優れたユーザーエクスペリエンスを提供するためには、Webサイトの設計段階からの一貫した取り組みが必要であり、このためにはデザイナーの力が欠かせません。

SEOフレンドリーを意識しても、またはしなくても、Webデザインでするべきことはそう大きくは違いません。SEOフレンドリーを意識したとしても、通常のWebデザインが想定するターゲットユーザーに検索エンジンを加えるだけのことだからです。そして検索エンジンは、多くのデザイナーが思うほど特殊な存在ではありません。

検索エンジンは人間ではないので特殊なユーザーのように思えますが、検索エンジンもコンテンツを目的に訪問してくるユーザーであり、通常の人間のユーザーとそう変わりません。デザイナーがすべきことは、コンテンツの利用者に対して最良のエクスペリエンスを提供するだけです。難しく考えず、デザイナーとしての役割を果たしていきましょう。

脚注

  1. Google 公式 SEO スターター ガイド | Google 検索セントラル(Wayback Machine 2022年12月31日) ↩︎
  2. 有用で信頼性の高い、ユーザーを第一に考えたコンテンツの作成 | Google 検索セントラル ↩︎
  3. 2022年12月版 Google検索品質評価ガイドライン(英語・PDF) ↩︎
  4. Content-First Design: Let the Content Determine the Design | Wireframing Academy | Balsamiq ↩︎
  5. LukeW | An Event Apart: Content First ↩︎
  6. How content-first design creates a better user experience | GatherContent ↩︎
  7. Universal Design: Process, Principles, and Applications | DO-IT ↩︎
  8. 情報の整理 – Google 検索の仕組み ↩︎
  9. Trustworthiness in Web Design: 4 Credibility Factors ↩︎
  10. SEO and Usability ↩︎
  11. ランキング結果 – Google 検索の仕組み ↩︎
  12. Inside Search: Page layout algorithm improvement ↩︎
  13. Design for readability | Digital Accessibility ↩︎
  14. Using site speed in web search ranking | Google Search Central Blog ↩︎
  15. ページの読み込み速度をモバイル検索のランキング要素に使用します | Google 検索セントラル ブログ ↩︎
  16. ページ エクスペリエンスと Google 検索結果への影響 | Google 検索セントラル ↩︎
  17. Mobile Site Abandonment After Delayed Load Time – Think with Google ↩︎
  18. Page Load Time in Relation to Bounce Rate – Think with Google ↩︎
  19. New Industry Benchmarks for Mobile Page Speed – Think With Google ↩︎
  20. Walmart pagespeed-slide | SlideShare ↩︎
  21. Why Brands Are Fighting Over Milliseconds ↩︎
  22. PageSpeed Insights ↩︎
  23. PageSpeed Insights のルール | Google for Developers ↩︎
  24. Performance Audits – Chrome Developers ↩︎
  25. リンクをクロールできるようにする | Google 検索セントラル ↩︎
  26. English Google SEO office-hours from March 18, 2022 – YouTube ↩︎
  27. Google 画像検索の SEO(alt 属性や構造化データ)| Google 検索セントラル ↩︎
  28. モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル ↩︎
  29. モバイル ファースト インデックスの展開 | Google 検索セントラル ブログ ↩︎
  30. Google Does Another Bulk Mobile First Indexing Batch On May 22, 2023 ↩︎
  31. Mobile First Design: What it is & How to implement it | BrowserStack ↩︎
  32. Ben Bederson – Wikipedia ↩︎
  33. Target size study for one-handed thumb use on small touchscreen devices | Request PDF ↩︎
  34. SEO Link Best Practices for Google | Google Search Central ↩︎
  35. Website Navigation Best Practices – 9 Navigation Design Tips and Warnings ↩︎
  36. Breadcrumb navigation: types and best SEO practices ↩︎
  37. Google の URL 構造ガイドライン | Google 検索セントラル ↩︎
  38. Google 検索結果のタイトルリンクの変更 | Google 検索セントラル ↩︎
  39. 重複 URL の正規化と canonical タグの活用 | Google 検索セントラル ↩︎
  40. ウェブ管理者 – シェア機能 – ドキュメンテーション – Meta for Developers ↩︎
  41. 構造化データ マークアップとは | Google 検索セントラル ↩︎