---

ニジボックスのUIデザインフローや案件事例をご紹介！

---

Webサイトをより良くするためには、より良いWebデザインが欠かせません。一方で、Webサイトの集客を強化するためにはSEOも欠かせない施策です。

WebデザインとSEOは、どちらもWebサイトの発展にとって欠かせない施策ですが、関連性が薄いと考えている方もいるのではないでしょうか。

本記事では、WebデザインとSEOの関係性や改善ポイントを解説していきます。

WebデザインがSEOに与える影響とは

SEO（Search Engine Optimization）は、「検索エンジン最適化」という意味の施策です。Googleなどの検索エンジンで、あるキーワードを調べた際の検索結果において上位に表示させる手法となっています。

SEOにおいては、コンテンツ施策が主流となっておりWebデザインは関連性が低いと思われがちです。確かに、Webデザインが直接的にSEOに影響を与えるわけではありません。

ただし、間接的にはWebデザインもSEOに影響を与えます。例えば、利便性が高くユーザーにとって使いやすいサイトであれば、ユーザーの直帰率が減少します。「直帰率が低いサイト＝ユーザーにとって良いサイト」と評価されればSEOにとってプラスとなります。

つまり、Googleから良いサイトと評価され、SEOにプラスになるサイトを作るためには、良いWebデザインが欠かせないというわけです。
また、SEOで流入数を確保しても、そこから申し込みや購入などビジネスにつながる行動をユーザーにしてもらわなければ意味がありません。SEOをビジネスに効率よくつなげるためにも、良いWebデザインは欠かせないのです。

SEOとUI UX

SEOを考える上で、UI UXはセットで考えたい項目の一つです。まずは、UI UXとは何かを改めて整理しておきましょう。

UX（ユーザーエクスペリエンス）は「ユーザー体験」を意味しており、Webサイトを通して得られる経験全てを指しています。

UI（ユーザーインターフェース）は「ユーザーとの接点」を意味しており、サイトの文字、ボタンなどの目に触れるWebデザインを含めた接点全てを指します。

Googleは、公式にページエクスペリエンス（ページ上でのユーザー体験）がSEOにとって重要であると発表しています。そのため、UI UXを向上させることは、SEOにとって効果的な施策と言えるでしょう。
参考：ページ エクスペリエンスの Google 検索結果への影響について

UI UXは、Webデザインが大きく影響するため、Webデザインを通してUI UXに関わる方はSEOにも関連しているという意識が必要です。

UI UXとSEOの関係性について、より詳しく知りたい方はこちらもご覧ください。

Webデザインで改善できるSEOにおける3つの指標

SEOにおいて、重要視されている指標の中には、Webデザインの工夫によって改善できる指標もあります。これらは、Webデザインの改修やUI UXの改善施策において、KPIともなり得る指標です。

Webデザインに関わる方はぜひ理解しておきましょう。

1. 滞在時間

Webサイトを閲覧したユーザーが、Webサイトに滞在した時間を表すのが「滞在時間」です。Google Analyticsなどで確認することができます。

Webサイトの滞在時間が長くなるということは、それだけユーザーが興味を持つサイトであるということができます。興味を持つサイトにするためには、コンテンツとともにWebデザインも重要になります。

ただし、滞在時間が長い理由として、ユーザーが次の行動に移れずに同じページに留まってしまっているケースもあります。これを解消するためには、ナビゲーションやCTAを入れてユーザーが次の適切な行動に移れるような工夫も必要です。

そのため、滞在時間は、次で述べるエンゲージメント率などと合わせて分析するようにしましょう。

2. エンゲージメント率と直帰率

エンゲージメント率は、Webサイトを訪れたユーザーがクリックやスクロール、10秒以上の滞在など何かしらの行動を起こした割合を意味します。一方で、直帰率はエンゲージメントがないまま、Webサイトを離脱した割合です。

ユーザーがWebサイトに興味を持てばエンゲージメントを起こします。つまり、エンゲージメント率を高くし、直帰率を低くすれば、ユーザーが興味を持ったサイトであるということが言えるでしょう。

エンゲージメント率を高くするためには、Webデザインが欠かせません。もちろんサイト全体のWebデザインもそうですが、ファーストビューのデザインはエンゲージメントにとって大きな影響を与えます。ポイントについては、後述しているのでぜひチェックしてください。

エンゲージメント率と直帰率もGoogle Analyticsで確認できるので、チェックしてみましょう。

3. ページの表示速度

Webサイトのページの表示は早ければ早いほど、ユーザーにとっての利便性が高まります。Googleも公式でページの表示速度はSEOに関連すると発表しているため、重要な指標です。ページの表示速度はPageSpeed Insightsなどで調べることができます。

ページの表示速度を決める要因として、プログラムやサーバーの影響が大きいことは確かですが、Webデザインも影響します。例えば、画像や動画をWebサイトに組み込む際に圧縮されたデータを活用するだけでも、ページの表示速度にとってプラスの影響を与えるでしょう。

SEOに効果的なデザインにするポイント10点

SEOにとって、効果的なWebデザインにするためにはどんな点を意識すれば良いのでしょうか。

ここからは、SEOに効果的なデザインにするポイントを10点ご紹介していきます。

1.モバイルフレンドリーなデザインにする

総務省の調査では、2023年のインターネットの利用率において、スマートフォンが72.9％、パソコンが47.4％と、25ポイント以上もスマホのほうが利用率が高いという結果となっています。

今や、Webサイトにおいて、モバイルフレンドリーなサイトであることは必須とも言えるでしょう。Googleも公式にモバイルフレンドリーなサイトは、良い評価につながると発表しています。

参考：モバイルサイトとモバイルファースト インデックスに関するおすすめの方法

具体的な施策としては、レスポンシブデザインのサイトにすることや、フォントサイズや余白、デザインなどをスマホ・タブレットでも見やすいように調整することなどが挙げられます。

また、PCでしか見られないファイルや動画のアップロードを避けるなど、PCでしか使えない機能を搭載しないということも重要です。

レスポンシブデザインについて、より詳しく知りたい方はこちらもご覧ください。

2.デザインデータを軽くする

Webページのデータが重くなると、ページの表示速度が遅くなります。先に述べた通り、ページの表示速度はSEOに関連するため、画像や動画なども含めてデザインデータを軽くする工夫を行いましょう。

ファイル形式の工夫やページへの埋め込み方法などの工夫で、デザインデータは軽くできます。Googleは不定期で推奨する画像のファイル形式などを発表しているので、最新情報をチェックして参考にすると良いでしょう。

ただし、データの軽量化を重視してクオリティが下がらないように注意してください。解像度が低くて見にくいなどの現象が起きると、ユーザーが離れていく一因となってしまいます。

3.トンマナをそろえる

トンマナをそろえることは、UI UXにとって重要なことです。トンマナが統一されていないと、「サイトが見にくい」など利便性の低下にもつながります。つまり、トンマナをそろえることは、UXを向上させ、良質なサイトにするための一つの手段です。

具体的なWebデザインに入る前に、トンマナをそろえておきましょう。

また、トンマナを制作する際には、スマホ・タブレットでの表示も意識しましょう。デバイスやOSによってフォントなどが崩れてしまうとUI UXが低下します。

対策としては「Webフォント」の利用が一例として挙げられます。Webフォントはコンテンツを表示する際のフォントを、閲覧する端末に依存せず一律にするための技術で、Webフォントを使うことでOSやデバイスを問わずコンテンツを正しく表示させられます。このように、デバイス・OSを問わず表示できることの確認も重要です。

トンマナについて詳しく知りたい方は、こちらもご覧ください。

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

上述した通り、ファーストビューはエンゲージメント率や直帰率に大きく影響します。どんなに素晴らしいコンテンツを用意していても、ファーストビューで興味を持たれなければ、ユーザーは離脱してしまい、コンテンツを見ることもありません。

そのため、トップページなどユーザーが初めて見るページのファーストビューには特にこだわりましょう。

ファーストビューで興味を引くポイントはいくつもありますが、一つの例として「What・Why・How」の情報を掲載することが挙げられます。

• What：このサイトで何ができるのか、自社サービスで何ができるのか
• Why：このサイトをなぜ見るべきで、自社サービスをなぜ使うべきなのか
• How：どのように自社サービスを使うのか

これらを明確にすることで、ユーザーはWebサイトへの興味が増すと言われています。

その他のファーストビューのポイントを知りたい方はこちらもご覧ください。

5.ナビゲーションを適切に設置する

Webサイトに訪れたユーザーが、快適にWebサイトを閲覧するためには、ナビゲーションの工夫が欠かせません。適切なナビゲーションで、ユーザーが知りたい情報にアクセスできるサイトは、ユーザーの興味を持続させて滞在時間の向上などにも寄与します。

ナビゲーションには、グローバルナビゲーションやパンくずなどさまざまな種類があります。それぞれのナビゲーションを理解した上で適切に設置していきましょう。

ナビゲーションについて、より詳しく知りたい方はこちらもご覧ください。

6.CTAや内部リンクを分かりやすくする

前述したナビゲーションにも類似していますが、CTAや内部リンクの適切な設置も重要です。

CTA（Call to action）は、ユーザーに具体的なアクションを促すためのバナーやテキストを指します。内部リンクは、ページ内のコンテンツと関連するページへのリンクを指します。

ユーザーに違うコンテンツや自社サービスに対して興味をより持ってもらうためにも、CTAや内部リンクは重要です。ナビゲーションと同様に、滞在時間の向上などへ寄与してくれるでしょう。

また、SEOとは直接関係しませんが、CTAや内部リンクはユーザーを申し込みや購入などのコンバージョンにつなげるための重要施策でもあります。ボタンやリンクの色や形、設置場所の工夫などを行ってコンバージョンへつなげていきましょう。

CTAについて、より詳しく知りたい方はこちらをご覧ください。

7.サイト構造をシンプルにする

サイト構造をシンプルにして、Webサイトの利便性を高めることはユーザーにとっても、Googleのクローラーにとっても重要です。

クローラーとは、Webサイトを認識・評価するために巡回しているシステムのことです。このクローラーが適切にWebサイトを認識する上で、シンプルなサイト構造が推奨されています。

サイト構造はWebサイトの基盤となるもので、Webデザインにも関連します。そのため、Webデザインに関わる方も一緒にサイト構造をシンプルで分かりやすいものに作り上げていきましょう。

8.コンテンツの箇所を分かりやすくする

Webサイトの中には、広告やCTAなどが乱立しており、コンテンツが分かりにくいものもあります。コンテンツが分かりにくいと、ユーザーの興味をそいでしまい、離脱へとつながってしまいます。

そのため、ページを制作する際には、コンテンツが分かりやすくなるように意識しましょう。

具体的なポイントとしては、コンテンツと広告・CTAのトンマナやデザインを異なるものにすることや広告・CTAを入れすぎないことが挙げられます。Webサイトやコンテンツに興味を持ってもらうことを最優先として、デザインをしてください。

9.インタースティシャル広告を設置しない

インタースティシャル広告とは、Webサイトにおいて、ページ遷移や閲覧途中のタイミングで、コンテンツに重なるように表示される広告を指します。

インタースティシャル広告は、広告を閉じないとコンテンツが見られないようになっているため、ユーザーの利便性を低下させます。Googleも公式にインタースティシャル広告を避けるように発表しており、UXを低下させるものなので設置しないようにしましょう。
参考：煩わしいインタースティシャルやダイアログを避ける

10.Googleを意識してWebサイトを更新する

Googleは「Googleが掲げる10の事実」や「検索エンジン最適化（SEO）スターター ガイド」などで、Googleにとって良いサイトを明記しています。
参考：検索エンジン最適化（SEO）スターター ガイド

Googleの検索画面では、Googleのクローラーがサイトを評価し順位付けをして、上位から表示させています。そのため、Webサイトやページは、Googleが発信する情報も意識して制作・更新するようにしましょう。
Googleは、公式Xなどで不定期にSEOやWebデザインで意識すべき最新情報なども発信しています。デザイナーは最新情報をチェックしておくことも重要です。

まとめ

本記事では、WebデザインとSEOの関係性や改善するためのポイントについて解説してきました。

一見、WebデザインとSEOの関連性は低いと感じるかもしれませんが、「より良いサイト」にするという意味では密接に関連しています。Webサイトやページを制作する際には、SEOも意識してデザインしていきましょう。

ニジボックスは、リクルートの新規事業研究機関から誕生した経緯があり、UXデザインやデザイン思考をはじめとするさまざまなビジネス手法を実際にリクルートの事業でも数多く実施し、検証を重ねてきております。

下記の資料では、ニジボックスがクライアント課題に伴走する中で磨き上げてきたUXデザインやUIデザインの支援事例の一端を資料として一部ご紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください。