デザイナーのための「SEOフレンドリーWebデザイン」入門

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

1 SEOに強いWebデザインの基本
2 SEOとユーザーエクスペリエンス
3 デザインの実装とテクニカルSEO
4 まとめ
5 脚注

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

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

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

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

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

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

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

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

モバイルの画面サイズと限られた帯域幅を、サイト内の最も重要なものに集中する。そして、そこを起点に構築する。
ジェフリー・ゼルドマン「Content First」2011⁵

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

KISS原則 – Keep it Simple, Stupid

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

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

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

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

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

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

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

内容の理解しやすさ

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

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

コンテンツの読みやすさ

コンテンツの読みやすさは、ユーザーエクスペリエンスを向上させます。読みやすさはユーザーの満足度と関連しており、滞在時間やページビュー数の増加につながります。また読みやすさはユーザーがサイト訪問の目的を達すること、つまり検索意図を満たすことにつながります。これらは検索結果でのランキングを押し上げるシグナルです。デザインでは次のようなことに留意しましょう。

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

操作のしやすさ

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

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

操作系統のインターフェイスデザインは、パーツのデザインから配置まで「どこのサイトにもある」退屈なデザインほどユーザーを迷わせません。デザインに新奇性や斬新性などを求める場合、キービジュアルなど操作系統とは切り離された場所で存分にそうしたものを盛り込むのがよいでしょう。

ページの読み込み速度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

内部リンクとURLの設計

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

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

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

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

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

まとめ

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

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

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