SEOとWebデザインの関係性の論理的な解説

「デザインがイケているサイトは、Googleから優遇されるのか？」
この記事では、上記の疑問に答えたいと思います。つまり、SEOとデザインの関係についてです。

Googleは、デザインの良し悪しを人間のように認識できません。そのため、いいデザインのサイト＝ランキングで優遇される、というわけではありません。しかしそれでも、デザインはSEOに大きな影響を与えると考えられます。本文ではその理由を、詳しく掘り下げて解説していきます。

ちなみに、この記事で取り上げる内容は、「デザインを良くすれば検索順位が上がる」 という単純なものではありません。本質的に重要なのは、サイトの中身（つまりコンテンツ）です。訪問者を魅了するコンテンツがなければ、優れたデザインはムダになるでしょう。とはいえ、デザインがサイトの印象や利便性（ユーザビリティ）を左右するのも、また事実です。

弊社には、「卓越したデザインでマーケティングする」 というポリシーがあります。そのため、デザインの重要性や効果性について、その価値をよく理解しているつもりです。

サイトの中身であるコンテンツと併せて、デザインにもぜひ目を向けてみてください。この記事が、そのキッカケになれば幸いです。

SEOとデザインの関係「ランキングには直接影響しない」

大前提として、Googleはデザインの良し悪しを人間のように判断できません。

• ダサい
• 見にくい
• 操作性が悪い

これらをGoogleが直接的に判断して、ランキングシグナルに使うことはありません。つまり、デザインが優れているサイトが、ランキングで優遇されるわけではないのです。

そもそも、デザインの良し悪しの判断基準は、主観が大きいですよね。

「このサイトはデザインが良い、このサイトはデザインが悪い」 とGoogleが勝手にジャッジするのは、倫理的にマズいことです。そのため、デザインは直接的なランキングシグナルではあり得ません。

しかしそれでも、デザインはSEOにおいて重要だと、私たちは考えています。なぜでしょうか？

デザインはSEOに間接的に影響を与える

デザインがSEOにおいて重要だと、私たちが考える理由。それは、直接的なランキングシグナルでないとしても、デザイン面でのマイナスは間接的にネガティブな検索結果としてフィードバックする可能性があるからです。

「見にくい、使いづらい！」 ＝ 直帰率や滞在時間のパフォーマンス低下

あなたが訪問したサイトのファーストビューが、ごちゃごちゃとして乱雑だったら、どうでしょうか。どこになにがあるのかがわかりづらく、欲しい情報にたどり着けない状況。「見にくい」 「使いづらい」 と感じて、サイトからすぐに離脱するはずです。それは次のような現象となって現れます。

「カッコいい、見てみよう！」 ＝ 直帰率・滞在時間のパフォーマンス向上 → リピート率向上
「見にくい、使いづらい！」 ＝ 直帰率・滞在時間のパフォーマンス低下

このようなサイトは、直帰率と滞在時間のパフォーマンスが非常に悪くなります。すぐにサイトから離脱されれば、「滞在する価値がないサイト」 と、Googleに判断されるかもしれません。

Googleの公式発言では、直帰率や滞在時間を、個々のサイトを評価する目的では使っていないとされています（信じるかどうかはお任せします……）。

ただ、評価指標として使おうと思えば、技術的にはたやすいことです。今後、ランキングシグナルとして導入される可能性もゼロではありません。

それに、直帰率や滞在時間のパフォーマンスの低さは、ユーザーがサイトに満足していないことの証拠です。ランキングシグナルという話以前に、ユーザー体験の観点からデザインやレイアウトを改善する必要があるでしょう。

見やすい、使いやすいデザインに改善すれば、直帰率は下がりますし、滞在時間や回遊率が上がります。

デザインがダサいとユーザーの心象を悪化させる

また、デザインがダサかったり時代遅れだったりすると、ユーザーの心象は悪化します。

「こんなダサいサイト、使いたくないし、人に勧めたくない……」

そうなると、ソーシャルでシェアしてもらったり、被リンクを獲得したりするチャンスを失います。もしかしたら逆に、ネガティブな口コミが拡散するかもしれません（「あのサイト、すごくダサくてさー……」）。

ソーシャルでのシェア数や獲得している被リンク数は、あなたのサイトがWeb上でどれだけ評価されているか、必要とされているかの証明です。

被リンクの質と数、そしてサイテーション（WebサイトやSNSにおける特定のサイト名、ブランド名への言及）の数は、検索順位と密接に関係しています。

それらを獲得するチャンスを失うことは、SEOにおいて大きな損失です。

ファーストインプレッションで印象を残せばリピーター獲得につながる

文字よりも視覚的要素、つまりビジュアルの方が情報として先に入ってきます。そしてビジュアルは文字よりも多くの情報を伝えられるのです。

ゆえにサイトのファーストインプレッション（第一印象）は重要だといえます。ここで強烈な印象を与えられれば、ユーザーの記憶に残り、再訪問につながりやすいからです。リピート化が高いサイトは必然とSEOにつながるというわけです。

こちらはTCDのデモサイトのファーストビューです。どうでしょうか？

デザインの好みは人それぞれだとしても、「洗練されている」 という印象を大多数の人が感じると思います。

洗練された印象で競合サイトとの差別化ができれば、サイトのリピーターになってくれるユーザーも生まれます。そのなかには、指名検索でサイトにリピートするユーザーも多いはずです。

指名検索とは、たとえば弊社なら「TCD WordPress」 「デザインプラス」 といった、ブランド名や商品名、会社名のキーワードによる検索を指します。

指名検索の回数とサイトの順位には、相関関係があります。「たくさん検索されている ＝ 知名度があり信頼できる」 とGoogleが判断するのでは、と推測できるからです。

また、指名検索キーワードなら、Googleのアルゴリズムアップデートの影響を受けることはまずありません。競合も不在です。変化が激しいSEOの世界で唯一、安定した集客を実現できるキーワードだといえます。

サイトの第一印象でユーザーの心を掴み、指名検索でリピートしてもらう回数を増やせば増やすほど、集客は安定し、サイトの力は強大になります。SEOというと、どうしても文字だけの施策と思われがちですが、検索エンジンの目的はユーザーに必要な情報を届けることなので、そのために視覚的な情報（つまりデザイン）が重要になることも多いということです。

SEOを意識したデザインのポイント7つ

ここからは、SEOに間接的影響を与えるデザインのポイントを7つ、ご紹介します。

1. ファーストビュー
2. グローバルナビ
3. パンくずリスト
4. アイキャッチ画像
5. カードリンク
6. 記事装飾
7. モバイルフレンドリー対応

これらを改善して、サイトの利便性（ユーザビリティ）や印象をアップさせましょう。それぞれ、詳しく解説していきます。

ファーストビューでユーザーの関心を鷲掴みにする

ファーストビューは、サイトの印象を決定づける重要なパーツです。人間の第一印象と同じであり、ここで「ダサい、見づらい、わかりにくい」 と思われると、その印象をほかの部分で覆すのは難しいです。

先ほどもお見せした、以下のキャプチャをご覧ください。

美しさと機能性を兼ね備えた、フルスクリーンのヘッダースライダーです。一度見たら、すぐ脳裏に焼き付くデザインではないでしょうか。

スライダー形式でなかったとしても、サイトのターゲットやコンセプト、ベネフィットが一瞬で伝わるヘッダー画像をファーストビューに配置することをオススメします。

ヘッダー画像の素材は、有料のストックフォトもしくは質の高いフリー写真素材から選ぶといいでしょう。以下の記事でご紹介しているサイトもぜひ、チェックしてください。

また、ヘッダーロゴも、サイトの印象を左右するパーツです。もし、デザインにあまり時間や工数を割けなかったとしても、ロゴだけは最低限、質の高いものを用意しておきたいですね。

ロゴの素材は、弊社のロゴマルシェ（LogoMarche）もぜひご利用ください（無料です）。

・ロゴマルシェ
https://logo-marche.net/

ちなみに、ロゴはヘッダーの左側に配置することを推奨します。それには以下の理由があるからです。

• 日本語をはじめ、多くの言語は左から右に向かって書かれるから
• ユーザーの視線は「Z型」で動くから（まず左に視線がいく）

ヘッダーの左に配置されたロゴは、ユーザーに注目されやすいのです。

グローバルナビゲーションに重要な情報を配置する

グローバルナビゲーション（以降、グローバルナビ）は、サイトの全ページに設置するリンクのことで、通常はサイト上部に配置します。赤枠（ハンバーガーメニュー）をクリックすると、以下のようにメニューが展開します。

SPページの場合は、ハンバーガーメニュー（HM）で表示することが一般的です。グローバルナビのメニュー数が3つくらいなら、SPでもPCと同じように横並びで表示できますが、メニュー数が多い場合はハンバーガーメニューを推奨します。

グローバルナビには、以下のような、サイト内の重要なページへのリンクを貼りましょう。ユーザーに見てもらいたいページですね。

• 会社案内
• サイト案内
• 運営者プロフィール
• 特集ページ
• お問い合わせ
• 資料ダウンロード

全ページからこれらのページに移動できれば、ユーザーの利便性はアップします。

スクロールしてもつねに表示されるよう、グローバルナビを固定してもいいでしょう。

パンくずリストでページ階層を明確にする

パンくずリストとは、以下のキャプチャのように、いま閲覧しているページのサイト内における階層が一目でわかるリンクのことです。

「いま自分はどこを閲覧しているのか？」 が明確になるので、ユーザビリティが向上します。前の階層のページにもクリック一つで移動できることも、ユーザーの利便性を高めてくれます。

また、パンくずリストはGoogleのロボット（クローラー）にとっても重要です。

パンくずリストが設置されていることで、サイトのページ階層をクローラーにわかりやすく伝えられるからです（クローラビリティの向上）。クローラビリティが向上することで、サイトの各ページの情報を効率的に収集してもらえるようになり、Googleから適切に評価されやすくなります。

ちなみに、TCDのテーマにはデフォルトでパンくずリストの設定機能があるので、プラグインの追加は不要です。

アイキャッチ画像でユーザーの目を引く

コンテンツ（記事）のアイキャッチ画像は、サイト全体の雰囲気やブランドを反映させたものをチョイスしましょう。

NGな例としては、日本人素材と外国人素材がバラバラで使われていたり、あるいは、有料素材と無料素材が混じっていて、アイキャッチの品質の差が激しかったり……。そうなると、チグハグな印象をユーザーに与えてしまいます。

TCDテーマのデモサイトがなぜあそこまで美しいかといえば、アイキャッチやサムネイルに使用している画像の質が高く、そしてすべてに統一感があるからです。

もし画像を適当に選んで使っていたら、デザイン性は大きく下がってしまいます。そのため、アイキャッチ画像は質の高いものを、統一感をもって選定しましょう。

もうひとつ、ユーザーの目を引くためのテクニックをご紹介します。

記事のタイトル（H1）は、アイキャッチ画像の下に配置してください。

なぜタイトルを下に配置するかというと、人の視線は「ビジュアル」→「テキスト」の順番で動くからです。これは、広告の父と呼ばれたデイヴィッド・オグルヴィが提唱したレイアウト（ヘッドラインを図版の下に置く）とも合致します。

キャプション（画像の下の説明文）がよく読まれるのと、同じ理由ですね。

図版の下のキャプションを読む人は、ボディ・コピーを読む人よりも多い。だから、図版の下には必ずキャプションを入れること。

出典：2010年 海と月社 『売る広告』 【著】デイヴィッド・オグルヴィ 【訳】山内あゆ子

以上の理由から、タイトルをアイキャッチ画像の下に配置することをオススメします。TCDの多くのテーマでも、このレイアウトを採用しています。

発リンクはカード型リンクで表示する

発リンクとは、サイト内のページあるいは外部のページに対するリンクのことです。アンカーテキストにハイパーリンクを挿入する形でもいいのですが、よりデザイン性を高めるなら、記事カード型リンクを設定しましょう。記事カードリンクとは当ページでも使われているこのようなリンクですね。

実は、通常のテキストリンクのほうが、クリック率は高くなる傾向にあります。カード型リンクは広告のように見えることと、青字に下線というテキストリンクの見た目に慣れ親しでいるユーザーがまだまだ多いことが、主な理由です。

ただ、文章を勢い良く読み飛ばすユーザーにとって、テキストリンクでは視認性が悪くなります。リンクが設置されていることに気づかず、スルーしてしまう可能性が高いのです。その点、カード型リンクであれば視認性に優れているので、ほぼ確実に注意を引けます。注意を引いたあとのクリック率を高めるなら、以下のポイントを意識するといいでしょう。

• クリックを促す文言を沿える（詳細をチェック、関連記事はこちら、など）
• サムネイル画像の質にこだわる

カード型リンクの設置方法は、WordpressならURLをそのまま記載するだけで、自動的に出力されます。コードを編集したりプラグインを追加したりする必要はありません。

TCDテーマの場合、「関連記事カードリンク」 というクイックタグが用意されています。

こちらを使うと、よりデザイン性に優れたカード型リンクを出力できます。

記事装飾を適度におこなう

すべての文字が同じ大きさ、太さ、色だと、どこに注目すればいいのか、ユーザーはわかりにくくなります。

もちろん、ユーザーに読む気があれば、どのような見た目の文章でも読んでくれます。

しかしほとんどの場合、ユーザーはそこまで高いモチベーションで文章を読むわけではありません（新規訪問の場合はとくに）。

基本的に流し読みが前提であることを考えれば、以下のように適度な装飾を加えることをオススメします。

太字、囲み枠（ボックス）、青字の装飾を、それぞれ追加しました。こちらのほうが、注目すべき箇所が明確になるので、視認性と可読性がアップします。

装飾のやりすぎは問題ですが（本当に大事な箇所がわからなくなるため）、適度な装飾であれば、滞在時間や直帰率のパフォーマンス改善が期待できます。ぜひ文章に一工夫してみてください。

モバイルフレンドリーにする

PCで見やすくても、SP（スマホなどのモバイル環境）で見にくいのはNGです。たとえばスマホで見たときに、ピンチやズームなどの操作がいちいち必要になると、ユーザビリティが極端に悪化します。

Googleは2020年9月に、強制的にMFI（モバイル ファースト インデックス）を実行します。それまでにモバイル優先の対応は必須です。以下は、モバイルフレンドリーに関するGoogleの公式ガイドです。

・Google Developers
https://developers.google.com/search/mobile-sites/?utm_campaign=sc-mft-test&hl=ja&utm_source=search_console

難しいことが書かれているように感じますが、早い話、「レスポンシブWebデザインを採用しましょう」 ということですね。レスポンシブWebデザインとは、デバイスによってページのデザインやレイアウトを変化させる技術。デバイスの画面サイズに応じてCSSを切り替えることで対応します。

ほとんどのWordpressテーマでは、この技術が実装されています。TCDのテーマも当然、すべてレスポンシブWebデザインです。つまり、Wordpressを使っているなら、モバイルフレンドリーには問題なく対応できているケースが多いです。

ちなみに、モバイルフレンドリーになっているかどうかは、以下のツールでチェックできます。

・モバイルフレンドリーテスト – Google Search Console
https://search.google.com/test/mobile-friendly?hl=ja

モバイルフレンドリーなサイトになっていれば、こう表示されます。そのほか、注意したいのが文章の改行ですね。PCで見たときは問題なくても、スマホで見たときに、読みづらくなることが多いからです。

こちらはPC環境の見た目です。とくに問題はないように思えますが、スマホで見ると、文字が詰まってとても読みづらくなります。左は窮屈な印象ですが、右では改行を少し調整してみました。

だいぶスッキリした見た目になりましたね。このように、モバイル環境でも文章の改行を必ずチェックして、必要であれば調整しましょう。

まとめ

デザインのマズさは、直接的に検索順位に影響するわけではありませんが、デザインがサイトの印象や利便性（ユーザビリティ）を左右するのは、ここまで見てきた通りです。

直帰率や滞在時間、回遊率などに影響し、SEOに間接的に影響しますので、デザインはSEOにおいて重要だと考えられます。

この記事で解説してきたポイントを整理しました。

1. ファーストビューでユーザーの関心を鷲掴みにする
2. グローバルナビゲーションに重要な情報を配置する
3. パンくずリストでページ階層を明確にする
4. アイキャッチ画像でユーザーの目を引く
5. 発リンクはカード型リンクで表示する
6. 記事装飾を適度におこなう
7. モバイルフレンドリーにする

これらのポイントを意識して、サイトの第一印象や利便性を少しでも良くしましょう。

「Content is king（コンテンツは王様）」 という言葉がある通り、サイトの中身のコンテンツが重要であることは事実だと思います。

ただそれは決して、デザインを軽視していいという理由にはなりません。デザインも同等に重要です。

記事冒頭でも軽くお伝えしたように、弊社には「卓越したデザインでマーケティングする」 というポリシーがあります。

TCDというブランドが国内シェアNo.1になった背景には、ひとえにデザインの力があったからだと、私たちは考えています。

SEO（より広くいえばWebマーケティング）では、コンテンツもデザインも等しく価値を見出して活用していく必要があります。

コンテンツを抜きにSEOを語ることも、デザインを抜きにSEOを語ることもできません。

SEOとデザインのどちらがより重要かという二元論ではなく、ぜひ、両方に目を向けてみてください。