SEO対策の東京SEOメーカー

SEOとユーザーインターフェースやユーザーエクスペリエンスとの関係性とは?SEO対策におけるUIやUX設計のポイントを解説

SEOとUI(ユーザーインターフェース)やUX(ユーザーエクスペリエンス)との関係性とは?SEO対策におけるUIやUX設計のポイントを解説

SEOにおいてユーザーファーストであることが重要視されていますが、ユーザー体験に大きく影響するUIやUXも重要な要因と一つとなります。

 

検索結果の上位に表示させてるためのUI/UX設計とはどのようなものなのかを理解してサイト設計を行うことで、よりユーザーファーストなサイトにすることができます。

 

SEOコンサルタントそこで本記事では、UIとUXのSEOとの関係性や設計のポイントについて解説していきます。

 
 

SEO内部対策一覧
タイトルの文字数 メタディスクリプションタグ 見出し(Hタグ)設定
HTMLタグの置き方 内部リンクの最適化 ディレクトリ構造の最適化
パンくずリストの設置 alt属性とは? インデックス対策
構造化データの実装 SSL化(HTTPS) Canonicalタグの設定
サイトマップとは? robots.txtの設定 URL正規化
ページ表示速度の改善 URLのwwwありとなし コアウェブバイタルの改善
サーバー処理の高速化 モバイルフレンドリーの改善 レスポンシブウェブデザイン

 
 

SEO相談

UIとUXの違い

 

そもそも、UIとUXにはどのような違いがあるのでしょうか?それぞれの違いや特徴を理解した上で、サイト設計を行うことが重要になるためしっかりと抑えておきましょう。

 

UIとは

UIとは、User Interface(ユーザーインターフェース)の略で、直訳すると「ユーザー接点」という意味になります。ユーザー接点とはユーザーが目に触れる全ての要素をを意味し、具体的には次のようなものが挙げられます。

 

  • ページのレイアウト
  • 表示画面のサイズ
  • フォントサイズ
  • ボタンの配置や操作性
  • キーボード表示
  • 見出しなどの見やすさ

Webサイトのデザイン全般が含まれるのはもちろん、ユーザーがサイト内で視覚的に触れる全ての情報がUIの対象となります。また、Googleはユーザーの利便性を重視しているため、UIはサイト評価において重要な要素となるのです。

 

UXとは

UXとは、User Experience(ユーザーエクスペリエンス)の略で、直訳すると「ユーザー体験」という意味になります。ユーザー体験とは、Webサイトを利用することで得られる経験や感想を意味します。

 

UIとは異なり、ある特定の部分を表すわけではないため、UXの中にUIが含まれているというイメージです。UXの具体例には次のようなものがあります。

 

  • 使いやすい
  • デザインが見やすくわかりやすい
  • 欲しい情報がすぐに見つかる
  • スムーズに画像やページが表示される

UIが良いと感じてもらえれば、UXも同様に評価されやすくなります。そのため、UXを向上させるにはまずUIの改善を行う必要があるのです。

 

例えば、UX戦略に力を入れる企業の代表例に「スターバックス」があります。今までにあったコーヒーショップの多くは、コーヒーの質や値段などの「モノ」で勝負をしていました。
しかし、スターバックスではコーヒーだけでなく内装や居心地の良さ、定員のホスピタリティなど「第三の場所」を意識した戦略をとっています。結果的に「スターバックスでコーヒーを飲む時間や経験」に価値を植え付け、成功しました。

モノやサービスが溢れている中で、他社との差別化を図るためにはUXを意識することが重要となります。

 

 

SEOにおけるUIとUXの関係性

 

UIはUXの中に含まれる要素として説明しましたが、SEOとはどのような関係があるのでしょうか?ここでは、SEOにおけるUI/UXのそれぞれの関係性について解説していきます。

 

SEOとUIの関係性

 

UIによってUXが評価されるため、Googleからもユーザーからも評価されるためにはUIが重要な要素となります。UIは、実際にユーザーが見たり操作したりする部分となります。

 

そのため、ユーザーが実際に触れる部分がユーザーにとって使いづらいものであれば、当然ページ滞在時間や離脱率に大きく影響します。そしてGoogleは、これらのデータをもとにサイトを評価しランキングを行います。

 

例えばユーザーは、ページの読み込み速度が遅かったり欲しい情報をすぐに見つけられなければ、別のサイトを見て情報を得ようとします。このように、ユーザーが操作上少しでもストレスを感じてしまうと、サイト全体への評価に影響を与えてしまうのです。

 

SEOとUXの関係性

 

UXは、サイト上での全てのユーザー体験を指すためUI設計に大きく左右されます。上記でも述べたように、Googleは離脱率や平均ページ滞在時間、直帰率などのデータをもとにサイトを評価します。

 

Googleはユーザーの利便性を1番に考えているため、これらの数値をユーザーの満足度を定量的に示すものとして重要視しているのです。そのため、ユーザー体験の質が高いものはサイトとしての評価が高くなり、結果として上位表示されやすくなります。

 

このように、UIを改善しUXの質を高めることはSEOに大きく影響するため、SEO対策の際には十分に考慮したいポイントとなります。

 

また、SEO対策でよく耳にする「Googleが掲げる10の事実」では、「ユーザーに焦点を絞れば、他のものはみな後からついてくる。」と言及されており、UI/UXを指していると解釈することができます。

 

SEOにUXは影響するのか

 

結論から言うと、SEOにおいてUXは影響します。UXが最適化されていればSEO効果を高められますが、UXが悪ければSEOに悪影響を与えるため注意しましょう。

 

ここでは、GoogleがどのようなUXを評価しているのかについて詳しく解説していきます。

 

Googleが発表しているSEOへのUXの影響

 

Googleのガイドラインにおいて以下のような記述があります。

一般的なガイドラインに沿ってサイトを作成すると、Google がサイトを認識し、インデックスに登録し、ランク付けをするプロセスをスムーズに行う手助けとなります。

引用:Googleウェブマスター向けガイドライン

2020年の5月には、Core Web Vitals(コアウェブバイタル)としてUXにおける重要指標について、2021年の5月には、ページ エクスペリエンス シグナルをGoogle検索のランキングに導入すると発表しました。

 

◆ Core Web Vitals(コアウェブバイタル)

LCP(Largest Contentful Paint ):ページの表示速度を測る指標

FID(First Input Delay ):インタラクティブ性を測る指標

CLS(Cumulative Layout Shift :視覚要素の安定性を示す指標

引用:Google「Web Vitals の概要: サイトの健全性を示す重要指標」

ページエクスペリエン シグナルの中にはコアウェブバイタルが含まれており、GoogleはSEOにおいてUXが重要であることを発表しています。また、UXを最適化するためにはユーザーの利便性だけでなく、検索エンジンのクローラーに配慮することもまた重要です。

 

 

SEO対策をするためのUIとUX設計のポイント

 

SEO対策を行いWebサイトを上位表示化させるためには、UI/UX設計も考慮しなければなりません。コンテンツのSEO対策だけではなく、ユーザーが触れるサイト内全てをユーザーファーストにすることが重要です。

 

ここでは、SEO対策のためのUI/UX設計のポイントについて解説していきます。

 

見やすさ

 

ユーザーはまず初めに、視覚的に情報を得ます。そのため、Webサイトを訪れた際の見やすさはUI/UX設計には欠かせないポイントとなります。「見やすさ」とは具体的に次のようなものが当てはまります。

 

テーマに沿った内容

 

ユーザーニーズを満たすためには、ユーザーが検索エンジンで特定のキーワードを入力し検索した際に、表示されたページがユーザーの求める情報を提供しているかどうかが重要になります。

 

そのため、サイト内のコンテンツがキーワードのテーマに沿った内容で書かれてあるかを見直すことも重要です。

 

求めている情報でない場合には、ユーザーの離脱率が高くなりサイト全体の評価にも影響します。また、ユーザーニーズは変化していくこともあるので、定期的にサイト内のコンテンツを確認してリライトすることも重要です。

 

分かりやすい見出し

 

見出しは、ユーザーがいまどの情報を見ているのかということを知らせるために重要なものです。そのため、見出し内に書く内容をわかりやすく伝えられるような見出しの設定が重要です。

 

また、ユーザーの中にはコンテンツ全てを見る前に、目次を見て欲しい情報があるかどうかを判断することもあります。そのため、ユーザーニーズに沿った見出しを設定することで、よりコンテンツ全体が読まれやすくなります。

 

また、Googleはタイトルや見出しの情報を初めに読み取って、キーワードとの関連性を判断するため、ユーザーニーズを満たした分かりやすい見出しはページの評価を高めることにも繋がるのです。

 

テキストサイズや行間

 

テキストサイズや行間なども、見やすいものでなければユーザーにストレスを与えてしまう要素となります。テキストサイズが極端に小さいものや、行間のない長文の段落などはユーザーに読みづらいという印象を与えてしまいます。

 

また、コンテンツ内で重要な部分の文字色を変えたり太くしたりなどの工夫をすることで、よりユーザーの内容理解を助けることができます。

 

その他にも、文字ばかりでユーザーに負担がかからないよう画像を配置したり、広告の位置やサイズに配慮するなどの対策も重要です。

 

使いやすさ

 

ユーザーは情報を視覚的に得るだけではなく、スクロールしたりボタンを押したりと、実際に画面を操作します。画面を操作する際に使いづらいと感じれば、ユーザーは別のWebサイトで情報を得ようとするため、Webサイトの使いやすさを意識したUI/UX設計が重要となります。

 

適切なナビゲーション

 

ナビゲーションとは、Webサイトを訪れたユーザーが探し求めている情報にたどり着くための案内のことを指します。

 

Webサイトを訪れた際に、どこに何があるか分からなければユーザーの滞在時間が短くなり、直帰率も高くなってしまいます。そのため、ユーザーが目的のコンテンツにたどり着くための導線を操作しやすいような形で用意してあげることが重要です。

 

誰もが直感的な操作でサイトを利用できるようなUI設計を行うことで、UXの質が向上しSEOにも良い影響を与えます。

 

関連記事の設置

 

コンテンツ内に、関連する記事を設置することでさまざまなユーザーニーズに応えることができるようになります。関連記事のリンクを設置したりコンテンツ内容の要約を設置することで、ユーザーが簡単に別の関連したコンテンツにアクセスすることができます。

 

また、関連記事をコンテンツ内に設置することで他のコンテンツへ誘導することができ、サイトの滞在時間アップへも貢献します。

 

このように、ユーザーニーズを満たした使いやすいページ設計を行うことで、SEOに大きく影響する滞在時間やページオーバーセッション増加にも貢献することができます。

 

レスポンシブ対応

 

スマートフォンの普及により、多くのユーザーがスマートフォンからもWebサイトにアクセスするようになりました。このような背景から、Webサイトのレスポンシブ対応が重要視されてきています。

 

レスポンシブ対応とは、パソコンやスマートフォンなどのデバイスや端末に合わせてレイアウトを調整することを意味します。レスポンシブ対応されていないサイトは、モバイルユーザーにとって見にくかったり使いにくかったりします。

 

例えば、PC版のWebサイトしかない場合スマートフォンのディスプレイに収まりきらず、適切にサイトが表示されなくなります。横にスライドしないと読めなかったり、メニューボタンがどこにあるかわからない状態だと、ユーザーに大きなストレスを与えてしまうことになります。

 

そのため、あらゆるデバイスや端末で見てもストレスなく操作できるよう、レスポンシブ対応にすることはWebサイト制作において必須となります。

関連記事: 【上級SEO】ページエクスペリエンス最適化

 

表示速度

 

ページの読み込み速度が遅いとユーザーがストレスを感じ、サイトから離れてしまうためSEOにダイレクトに影響を及ぼします。ページの表示速度は、SEO対策には欠かせない重要な要素となりますが、UX向上にも大きく貢献するためしっかりと対策をしておく必要があります。

>>ページ表示速度を早くする/Page speed insight

画像の軽量化

 

コンテンツ作成の際には、ユーザーの理解を助けたり読みやすくするために画像の使用がおすすめですが、画像を使用する際にはデータを圧縮する必要があります。容量の大きい画像をそのまま使用してしまうと、読み込み時の負担が大きくなり表示が大幅に遅くなってしまいます。

 

そのため、ページ内で使用する画像は容量が大きくないと思っている場合でも必ず軽量化するようにしましょう。画像軽量化ツールを活用して、ページの読み込み速度を改善していくことが重要です。

 

また、改善後の表示速度も計測ツールを活用して確認してみると良いでしょう。

 

>>超SEO初心者がまずやるSEO対策⑤/画像最適化

 

ウェブフォントの使用

 

ウェブフォントを使用して容量をカットすることも、ページ表示速度の改善に繋がります。ウェブフォントとは、あらかじめWebサーバー上に置かれていたり、インターネット上で配布されているフォントデータ自体を読み込んで利用するフォントです。

 

Webフォントを使用すると、すべてのデバイスでフォントの見た目を統一できるため、閲覧環境に関係なく必ず同じフォントを適用させることができます。

 

ウェブフォントを使用する際には、使用するウェイトだけを読み込んだり、複数フォント使用する場合は連結して読み込むなど、容量増加させない工夫も必要となります。

 

AMP対応

 

AMPはAccelerated Mobile Pagesの頭文字で、スマホなどのモバイル端末で閲覧するページを高速で表示させる技術です。表示速度が遅い場合はユーザーが離脱するため、AMPを実装し表示速度を高速化することで、ユーザーが快適にサイトを閲覧することができるようになります。

AMPの実装が、直接検索順位に関係してくるわけではありませんが、Googleはモバイルの読み込み速度をランキング要素の1つとしているため、ページの表示速度もSEOに影響を与える可能性も考えられます。

 

SEOに直接影響はなくても、ページの表示速度はUX向上に欠かせない要素となりますので、データが多く表示に時間がかかるようなWebサイトであればAMPの導入を検討してむるのも良いかもしれません。

 

>>AMPとは?検索順位には影響しないがユーザー体験を改善できる手段

 

 

UIとUX改善の際に確認しておきたい項目

 

ここまで、SEO対策のためのUI/UX改善や設計を行う際には、定量的な数値データを確認して効果や成果を判断することも重要です。

 

ここでは、UI/UX改善の際に確認しておきたい3つの項目について解説していきます。

 

ページ滞在時間

 

ページ滞在時間とは、1つのWebサイトでのセッション時間で算出されたページごとの滞在時間のことを指します。ページ滞在時間がながければ、ユーザーはそのコンテンツに興味を持っているということになります。

 

反対に、ページ滞在時間が短ければ欲しい情報がないと判断したもしくは、操作上何かストレスを感じたとも考えられます。そのため、サイト内のユーザー行動を判断する1つの基準として「ページ滞在時間」を把握しておく必要があります。

 

ページ滞在時間は、Google Analyticsなどの解析ツールで確認することができますが、ページ滞在時間が短いからと言って必ず改善が必要というわけではありません。ユーザーが求める情報をすぐに見つけられるようなページは、ページ滞在時間が短くなることもあります。

 

ページ滞在時間を確認する際には、Webサイト内の他ページや競合ページと比較して判断することが重要です。

 

直帰率

 

直帰率とは、Webサイトを訪れたセッションのうち、直帰したセッションの割合を表す指標です。ユーザーニーズとコンテンツの不一致が起きている場合や、ページの表示速度などのUIが最適化されていない場合に直帰率は高くなります。

 

直帰率も、ページ滞在時間と同じようにGoogle Analyticsで確認することができます。直帰率が極端に低い場合は、ページ内の動線やページの読み込み速度を確認する必要があります。

 

また、コンテンツ内容も変化していくユーザーニーズに合わせてリライトしていくことが重要です。まずは、直帰率が低い要因を探して改善していきましょう。

>>直帰率の目安や高くなる原因、改善方法など

ページ表示速度

 

ページ表示速度は、ユーザーにコンテンツを見てもらう以前の問題となりますので、しっかりと対策をしておくことが重要です。読み込み速度が遅いと、ユーザーがストレスを感じページを離れてしまい、「離脱率」や「直帰率」に大きく影響します。

 

Googleは2018年に公式ブログで、ページの読み込み速度をモバイル検索のランキングの要素に使用することを正式にアナウンスしました。そのため、ページの表示速度が遅いページは評価が低くなってしまいます。

 

ページの表示速度は、Googleが提供するページ速度チェックツール「Page Speed Insights」で確認することができます。速度の計測だけではなく、改善の提案もしてくれるためWebサイト運用には欠かせないツールの1つです。

 

関連記事: ページ表示速度を早くする/Page speed insight

UXでSEO効果を高める方法

UXを改善しSEO効果を高めるには、Googleが推奨している要素を理解し実践することが最も近道です。

ここでは、Googleが発表しているUXの基準も踏まえた上で、SEOに効果的なUXの改善ポイントを詳しく解説していきます。

 

コアウェブバイタルを改善する

コアウェブバイタルは、最新のUX指標であるページエクスペリエンスシグナルにも含まれているため、UXの適切さを判断する上では必ず確認しましょう。

 

◆ Googleのコアウェブバイタル

Largest Contentful Paint(LCP): 読み込みパフォーマンスの尺度。

First Input Delay(FID):  インタラクティブ性の尺度。

Cumulative Layout Shift(CLS): 視覚的安定性の尺度。

引用:Googleページ エクスペリエンス シグナル

コアウェブバイタルの中でも、意識すべきことはLCP・LCP・CLSの3項目です。現状の自サイトの数値は、GoogleSearchConsoleの「ウェブに関する主な指標」から確認できます。

 

それぞれに目標数値を記載されているため、まずは数値を計測し目標数値に向けて改善しましょう。

 

ABテストをする

ABテストとは、2パターン以上の検証項目を用意し、結果を数字で比較し良い方法を導き出す方法です。例えば、以下の2パターンでABテストを実施します。

 

 パターン1

お問い合わせボタンを「赤」で設定

結果は月20件のお問い合わせ

 

パターン2

お問い合わせボタンを「青」で設定

結果は月40件のお問い合わせ

ABテストの結果から、お問い合わせボタンは青の方が成果に繋がると判断ができます。このように、色だけで結果が変わる場合もあれば、ボタンの位置や形などの要素で変わる場合もあります。

 

ABテストをするWebサイトによって何が効果的であるかの判断はできないため、改善したい項目は積極的に効果検証していきましょう。

 

モバイル対応にする

WebサイトでUX設計をする場合は、必ずスマートフォンなどのモバイルにも対応させましょう。現在、GoogleはMFI(モバイルファーストインデックス)に移行したため、PC版サイトではなくモバイル版サイトが優先的に評価される仕組みです。そのため、スマホ版に対応したUX設計を行うことは必須となります。

UX設計をする上では、PC版とスマホ版では動きや位置に違いがあるため注意が必要です。スマホ版の表示も確認し、不具合などを判断してから設定を行いましょう。

 

 

まとめ

SEOコンサルタントUIとUXは、ユーザーからも検索エンジンからも評価される重要な要素となります。Googleもユーザーファーストを掲げているため、ユーザーとの接点になるUIの最適化はSEO対策にも欠かせません。Webサイト内でユーザーがストレスを感じない、質の高いユーザー体験ができるようなWebサイトにするためには、「ページ滞在時間」「直帰率」「ページ表示速度」などを定期的に確認し改善していくことが重要です。UI/UXとSEOの関係性を理解し、より見やすく使いやすいサイト作りを行っていきましょう。

 

お問い合わせページボタンの背景画像


SEOコンサルティングの東京SEOメーカーTOPへ戻る

 

この記事の監修者

SEOコンサルタント

アドマノ株式会社 代表取締役 天野 剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析(Googleアナリティクス個人認定資格GAIQ保持)コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。

 

新着記事

人気記事

WEBマーケティング

SEO対策