SEOフレンドリーWebデザインによるテクニカルSEOの実施

ウェブサイトの技術的な側面を最適化するテクニカルSEOは、設計の意味を含む広義のデザインと密接な関係があります。サイトやページのコンテンツを、わかりやすく、使いやすく、速く、そして美しくすることを通じて良好なユーザーエクスペリエンスを提供することは、SEOにも有効に働きます。

1 SEOに強いWebデザインの基本
2 ユーザーエクスペリエンスを向上させる
3 テクニカルSEOを実施する
4 まとめ
5 脚注

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

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

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

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

コンテンツ・ファースト・デザイン
KISS原則 – Keep it Simple, Stupid
E-E-A-Tと信頼性の向上

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

検索エンジンのランキング・アルゴリズムは、ユーザーの検索意図を満たすことができるコンテンツを検索結果の上位に掲載するように調整されています²。検索エンジンのアルゴリズムの評価を受けるのはコンテンツであり、ユーザーの目的もコンテンツです。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にも寄与します。コンテンツが明確で理解しやすければ、検索エンジンはそのコンテンツの意図やテーマを正確に把握しやすくなります。これによって検索エンジンは、適切なキーワードや関連性を把握し、コンテンツを適切な検索クエリに表示させることができます。デザインの留意点は次の通りです。

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

コンテンツを読みやすくする

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

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

操作しやすくする

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

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

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

テクニカルSEOを実施する

テクニカルSEOとは、オンページSEOの一部であり、検索エンジンがウェブサイトの内容を確実かつ効率的に取得できるように、また内容を理解しやすくなるように、ウェブサイトの技術的な側面を最適化することをいいます。ウェブサイトの構造やコンテンツを理解しやすくし、正しくクロールやインデックスすることを助けます。

クローラビリティとインデクサビリティを確保する
モバイルファーストとレスポンシブデザインで設計する
内部リンクとURLを適切に設計する
ページの読み込みを速くする
クローラーとインデクサを制御して低品質ページを排除する
URLを正規化する
構造化データマークアップを追加する
オープングラフタグを追加する

クローラビリティとインデクサビリティを確保する

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のガイドライン²⁴にはその他の細かな推奨事項が記載されています。

ページの読み込みを速くする

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

クローラーとインデクサを制御して低品質ページを排除する

クローラーの制御とは、特定のURLをクローラーからブロックしたり、またはクロールはさせても検索結果に表示させないようにするなど、サイト内のコンテンツを検索エンジンがどのように取り扱うべきかの指示を明示的に行うことをいいます。インデクサの制御は、クロールは許可するがインデックス登録は許可しない、のような指示を行います。

サイト運営者がクローラーとインデクサを制御する指示を出すことで、検索結果に表示されたとしても検索者に対してそれほど価値を提供しないページやファイルについて、あらかじめ検索結果に表示されることがないようにしておくことができます。これは検索者の体験を阻害しないようにするとともに、検索エンジンから低評価を受けないようにするための対策です。

URLを正規化する

正規URLとは、同じか非常に似たコンテンツを返すURLが複数ある場合に、それらのURLの代表となるひとつのURLのことをいいます。そしてURLの正規化とは、サイト運営者が適切と考える正規URLを検索エンジンに対して明示的に指定することをいいます。URLの正規化は次のような目的で実施します。

運営者が予期していないURLを検索エンジンが正規URLとして扱ってしまうことを避ける。
重複URLがインデックスされることを防ぐ。
重複URLが受け取っている被リンクの評価を正規URLへと統合する。

URLを正規化する方法には、リダイレクトを使う、内部リンクの一貫性を保つ、canonicalリンク要素を使う、XMLサイトマップを使う、などの方法があります。詳しくは記事「重複コンテンツとは？重複URLを正規化し正規URLに統合する」をご覧ください。

構造化データマークアップを追加する

構造化データを追加することで、リッチリザルトと呼ばれるユーザーの興味をひく検索結果を表示できるようになり、検索結果からのクリック率の増加が期待できます³⁶。この結果、間接的にランキングを上昇させる効果もわずかながら期待することができます。ECサイトの商品ページなどでは商品スニペットを表示できるように構造化データをマークアップします。

また、コンテンツの著者やウェブサイトの運営企業の情報を検索エンジンに伝えるために、authorやProfilePageなどの構造化データをマークアップします。これにより、コンテンツの著者やウェブサイトの運営企業といったエンティティについての情報をより詳しく検索エンジンに理解させることができ、E-E-A-Tの向上に寄与します。

オープングラフタグを追加する

ウェブページにオープングラフ（OGP）タグを追加³⁷してソーシャルメディアプラットフォームにタイトル、説明、画像などの情報を提供し、ソーシャルメディアでコンテンツが魅力的に表示されるようにします。コンテンツの拡散はオンラインでのプレゼンスと評判を向上させ、SEOを有利にします。

まとめ

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

テクニカルSEOもウェブデザインも、ユーザーが快適に利用でき、ユーザーがそのサイトにアクセスしてきた目的をより確実に達成できるように、コンテンツを中心とし、不要なものを省いたシンプルな作りを徹底することが有効です。ユーザーはコンテンツに反応しますし、検索エンジンはそのユーザーの行動を見てランキングを作るからです。