2024.08.09 Webデザイン

WebデザインはSEOに影響する？Webデザイナーが意識すべきポイントを解説

#SEO

読了目安：10分

Webサイトを構築する際に、WebデザインがSEOに影響を与えると考えている方もいるのではないでしょうか。

デザインの良し悪しは、直接的にも間接的にも順位に影響を与えることがあります。

Webデザイン制作時は、SEOの成果を最大化するためのデザインを意識するようにしましょう。

本記事では、Webデザイナーがサイト制作時にSEOで意識するべきポイントを解説します。

WebデザインはSEOに影響するのか？
WebデザインにおけるSEO対策10選
SEOの効果測定に欠かせないツール
SEOにおいて最も重要なのは「ユーザーファースト」を意識すること
まとめ

WebデザインはSEOに影響するのか？

SEOで最も重要な要素は、ユーザーのニーズに即した（Needs met）コンテンツを作成することです。

実際にGoogleも品質評価ガイドラインの中で、Googleが最重要視する要素として挙げられています。

しかし、WebデザインもSEOに影響するケースは存在します。

例えば、ページの表示速度やモバイルフレンドリーなどは直接的にSEOに影響を与えます。

間接的にSEOに影響がある要素も多く存在します。

見た目がきれいなサイトを作成するだけでなく、ユーザーエクスペリエンス（UX）を高めたデザインを意識することにより、SEOにとって重要な直帰率や滞在時間などの改善を行うことが可能です。

また、見た目がきれいなWebサイトは拡散性が高く、良質な被リンクにつながるケースも多く存在するため、SEOへの好影響を与える可能性もあります。

WebデザインがSEOに影響を与える主な要素は下記の通りです。

直帰率
滞在時間
alt属性
モバイルユーザビリティ
ページの表示速度

ユーザビリティを高め、SEOを意識したサイトを目指すなら、見た目のデザイン性が高いことに加えて、ユーザーが求めている情報に素早くたどり着くようなWebサイトの構築を目指すとよいでしょう。

WebデザインにおけるSEO対策10選

Webデザインで行うべきSEO対策の10のポイントを紹介します。

これらの対策を意識することで、検索エンジンの評価を向上することができます。

以下では、各ポイントについて具体的に解説し、実践するための具体例も紹介します。

ページの表示速度を意識する

ページの表示速度は、重要なSEOの要素です。

重すぎるデザインは、表示速度に悪影響を与えます。

ページの読み込みが遅いと、ユーザーはページを離れてしまう可能性が高くなり、これが離脱率を上げる要因となります。

2018年にGoogleが行っている調査によると、Webサイトの表示速度が1秒から3秒に落ちるだけで直帰率が32%上昇するという結果が出ています。

また、5秒に落ちた場合は90%、6秒に落ちた場合は106％、10秒に落ちた場合には、132％上昇するという結果が出ています。

ページスピードを下げるためには、下記を意識しましょう。

画像のファイルサイズを最適化する
動画のファイルサイズを最適化する
AMPを取り入れる
不要なプラグインを削除する
ファイルサイズを圧縮する
遅延ロードを実装する
ブラウザキャッシュを活用する
フォント読み込みの高速化

ユーザビリティを考慮する

ユーザビリティの悪いサイトは、直帰率や滞在時間に悪影響を及ぼします。

例えば、ナビゲーションが分かりやすく配置されており、コンテンツが読みやすいフォントで表示されていれば、訪問者が他のページに遷移しやすくなります。

なお、Googleは「直帰率や滞在時間はSEOに影響しない」という旨の発表をしています。

しかしながら、最近流出したとされているGoogleランキングアルゴリズムによると、明確に直帰率や滞在時間などのユーザー行動の指標でランキングを評価する旨が記載されています。

Googleランキングアルゴリズムの内容が事実であってもなかったとしても、ユーザビリティを意識したWebデザインは重要です。

ユーザビリティを高める要素としては、下記のようなものが考えられるでしょう。

ページスピード
ナビゲーションの配置
文字の大きさ
色のコントラスト
わかりやすいコンテンツ
入力フォーム最適化（EFO）

上記を意識し、ユーザビリティの高いWebサイトを作成しましょう。

ファーストビューにこだわる

ファーストビューは、離脱率に大きな影響を与えます。

ファーストビューの段階でユーザーの興味を引き付けられなければ、サイトを離れてしまう可能性が高くなります。

わかりやすいコンテンツで誰にどのようなメッセージを伝えるか要件定義をした上でWebサイトの構築を行いましょう。

モバイルフレンドリーを徹底する

現在では、スマートフォンからのWebサイトへのアクセスが非常に多い状況です。

レスポンシブデザイン対応はもちろんのこと、スマートフォンでの使いやすさについても強く意識しましょう。

具体的には、ページの表示速度を向上させる、操作性を改善する、そして画面サイズに応じてレイアウトを適切に調整する、といったことが重要です。

モバイルフレンドリーなWebサイトの制作は、SEOにとっても非常に重要であると言えます。

画像にはalt属性を設定する

検索エンジンのクローラーは本来テキスト情報しか理解できませんが、alt属性を付与することにより画像の内容を理解できるようになります。

例えば、商品画像に「赤い靴」とalt属性を設定することで、その画像が赤い靴の写真であることをクローラーに知らせることができます。

つまり、alt属性に画像内容のキーワードを記述すれば、画像検索でも上位表示を狙えるようになるということです。

画像検索での上位表示も、Webサイトへの流入数上昇に影響します。

そのため、画像には必ずalt属性を設定しましょう。

フォントを適切なものにする

サイトのデザインとフォントの大きさや種類がマッチしていないと、一体感のないサイトとなってしまい、離脱に繋がりやすくなります。

適切なフォントを選択することにより、Webサイト内での顧客体験が向上し、結果的に離脱率の低下につながることが期待できます。

特にスマートフォンのような小さい画面でWebサイトを閲覧する場合、フォントを適切なものにしていないと、ユーザーはすぐに離脱してしまうでしょう。

Webフォントを活用することにより、線幅をスマートフォン用に調整することもできるため、視認性が高まります。

また、適切なフォントを選ぶことは、ブランドのイメージを伝える上でも非常に重要となります。

その他にもフォントを最適化することは、SEOに好影響を与えます。

例えば、Googleは読み込みの早いWebフォントを活用しているサイトを好みます。

このように、フォントを最適化することは、SEOへの影響だけではなくブランディングなどにも影響を与えます。

サイトの階層を深くしすぎない

サイトの階層は深くしすぎないように設計しましょう。

階層が深すぎると、クローリングの効率が悪くなり、クローラーが全てのページを巡回できなくなることから、全てのページをインデックスするのが困難になります。

また、ユーザーが必要な情報に辿り着きにくくなるため、ユーザビリティも低下します。

例えば、トップページから3回以上クリックしなければアクセスできないページは、多くのユーザーが訪れる前に諦めてしまう可能性があります。

このような場合、重要なページはより上位の階層に配置するなどの対策が必要です。

サイトの階層を深くしすぎないようにWebサイトの設計を行い、ユーザーとクローラーの双方にとってアクセスしやすい構造にしましょう。

グローバルナビゲーションを設置する

グローバルナビゲーションを設置することは、ユーザビリティ向上の施策の一つです。

ホームページ、サービス内容、ブログ、問い合わせなどの主要なページへのリンクを確実にグローバルナビゲーションに含めましょう。

グローバルナビゲーションが設置されていることにより、ユーザーが目的のページに辿り着きやすくなります。

グローバルナビゲーションの設置の際には、下記を意識しましょう。

シンプルで分かりやすいワードを使う
最短距離で目的のページにたどり着けるようにする
全てのページでグローバルナビゲーションのデザインを統一する

グローバルナビゲーションの設置は、ユーザビリティを向上させるだけでなくクローラーの効率的なクロールを手助けします。

このため、SEOにも良い影響を与えることを理解しましょう。

パンくずリストを設置する

パンくずリストは、ユーザーが現在のページがサイト全体のどこに位置しているのかを簡単に理解する手助けをします。

これにより、サイト内の他のページへの移動がスムーズになり、ユーザーエクスペリエンス（UX）が向上します。

例えば、「ホーム > 製品 > カテゴリー > 商品名」といったパンくずリストを設置することで、ユーザーは簡単に前のページや上位のカテゴリページに戻れるようになります。

したがって、Webサイトには必ずパンくずリストを設置し、ユーザーが回遊しやすいようにしましょう。

また、Googleなどの検索エンジンはユーザーフレンドリーなサイト構造を好むため、わかりやすいナビゲーションは検索順位の上昇にも寄与します。

パンくずリストは、特にECサイトやポータルサイトなどのページ数が多くなりやすいサイトでは有益であり、ユーザーの回遊率を向上させることにつながります。

インタースティシャル広告は避ける

インタースティシャル広告とは、Webページにアクセスした際やコンテンツを読んでいる途中に画面を覆うように出てくる広告のことです。

インタースティシャル広告は、メリットもある施策ですが、ユーザーの離脱の大きな原因となってしまうので、ユーザーにとって煩わしい活用方法は避けましょう。

具体的には、Cookieの同意確認や年齢確認などの本当に必要な情報を知らせる際に活用しましょう。

インタースティシャル広告については、Googleがガイドラインを設けています。

詳細は、Google Admobヘルプで内容を確認できます。

具体的に禁止されている事項は、下記の通りです。

アプリケーションの開始時および終了時
過度の繰り返し
予期しないタイミングでの表示

これらの項目に反した取り組みを行ってしまうとSEOに悪影響を与える可能性が高くなるので、特に注意が必要です。

SEOの効果測定に欠かせないツール

Webデザインは、作りっぱなしでは意味がありません。

様々なツールを使って効果測定を行い、改善していくべきです。

その中でも、特に重要かつ無料で活用できる以下のツールについて紹介します。

Google Search Console
Google Analytics4
Page Speed Insights

Google Search Console

Google Search Consoleは、Googleが提供している分析ツールです。

よくGoogle Analyticsと分析項目を混同して覚えがちですが、Google Search Consoleはサイトのアクセス前のデータを見ることができるのが特徴です。

分析の際によく活用するデータは下記のとおりです。

検索クエリ
表示回数
クリック数
平均掲載順位
クリック率

いずれもSEOにとって非常に重要な指標であり、効果測定を行う上では必須なツールと言えるでしょう。

また、Google Search Consoleでは、エラーの発見場所やインデックスの問題を確認することも可能です。

ページの公開後も定期的にチェックするようにしましょう。

特に「URL検査」や「エクスペリエンス」の項目に含まれる「ページエクスペリエンス」「モバイルユーザーユーザービリティ」「ウェブに関する主な指標」などで、ページに問題がないか確認することをおすすめします。

例えば、ページが「インデックスに登録されなかった理由」の項目からクロール済インデックス未登録のページがあれば、低品質なページと判断されてる可能性が高いため、noindex設定やページ自体の削除を通じて解決しましょう。

Google Analytics4

Google Analytics4とは、Googleが提供する「アクセス解析ツール」です。

Google Search Consoleとは異なり、ユーザーがWebサイトへどこからどんなデバイスでアクセスし、どのようにWebサイト内で行動したかを分析するためのツールです。

計測対象となるサイトにGoogle Analytics4の専用の「トラッキングコード」をサイト内に埋め込むことで、各種データの計測を開始することができます。

Webサイトの公開時には、必ずGoogle Analytics4を正しく計測できるように設定をしましょう。

Google Analytics4でわかることは下記の通りです。

項目	わかること	計測できる数値
オーディエンス	どんな人がどれくらいサイトを訪れているか	・来訪オーディエンス（PV・UU・セッション）・来訪デバイス（PC・スマホ・タブレット）・来訪OS（Windows・iOS・Android）・新規顧客とリピーター
集客	どこからサイトに訪れているか	・来訪チャネル・広告/非広告・来訪キーワード・ソーシャル
行動	どこのページを見ているか	・ランディングページ・閲覧ページ・行動フロー
コンバージョン	目標を達成することができたか	・コンバージョン・アトリビューション（CVへの貢献度）