「SEOとデザインはどんな関係？」
「デザインがSEOに与える影響は？」
「SEO効果を高めるためのポイントを知りたい！」
SEO対策を手掛ける中で、デザインの優先度が落ちている方も多いです。
そこで今回はデザインがSEOに与える影響と、押さえておきたいデザインのポイントを解説します。
筆者はSEOやデザインに関して以下の実績を持っており、悩みやお困りごとを解決できますよ。
SEO会社の代表
・WEBサイト制作実績100件以上
・SEO対策後、半年でECサイトの売上190万円→580万円と3倍以上にした経験あり
・WEBサイト制作も行っているため、サイトの内部からSEOの評価をアップ
毎月5社限定で無料であなたのサイトのSEO分析を行っています。気になる方は下記バナーをクリックしてください。
目次
SEOとデザインの関係性
Googleの評価基準で「デザインが優れているから上位表示する」「華やかなページだから検索順位を上げよう」などの優遇措置はありません。
実際にデザインに力を入れても、すぐに効果が出るケースは少ないでしょう。
しかし直接関係はなくても、間接的にSEOへ影響を与えるのも事実。
時間をかけてデザインへ取り掛かった分、アクセス数アップが見込めます。
ゆえにSEOとデザインは切っても切り離せない関係と言えるのです。
デザインがSEOに与える3つの間接的な影響
ここからはデザインがSEOに与える間接的な影響を解説します。
具体的には以下の3点です。
・ページの表示速度
・滞在時間
・モバイルへの対応
次から順番に見ていきましょう！
SEOに与える影響①：ページの表示速度
ページの表示速度が遅いとGoogeからの評価は落ちます。
それだけでなく、ユーザーに対してストレスを与えてしまうのも事実。結果的に検索順位は上がりません。
ページ表示速度と関連するデザインの要素として、最も関連深いのは画像です。
画像はデザインの一種であるため、確実に対策していきましょう。
具体的なポイントは後ほど紹介します！
SEOに与える影響②：滞在時間
デザインが魅力的なページは何時間でも読みたくなります。
「分かりやすいからもっと読んでみよう」「スラスラ読めるから続きが気になる」といった気持ちになりやすいもの。
結果的に滞在時間が伸び、SEO効果が高まっていくのです。
加えてそのページだけでなく、他の記事を読んでもらえる確率も高まります。
滞在時間が伸びずに悩んでいる方は、まずデザインに力を入れてみましょう！
SEOに与える影響③：モバイルへの対応
現在はPCよりもスマホ検索ユーザーが圧倒的に多いと言われています。
実際には3.5（PC）：6.5（スマホ）であるサイトが多く、いかにモバイルへの対応が重要か見て取れるはず。
文字の大きさ・画像の見え方・文字の間隔などをスマホ対応する必要があります。
これらの要素をクリアして、はじめてGoogleから評価してもらえるのです。
万が一PCだけにしか目を向けていない場合、モバイル対応についても意識してみましょう！
SEOでデザインに力を入れるなら知っておきたい9選
続いてはSEOにおけるデザインのポイントを解説します。
具体的なポイントは以下のとおりです。
・サイト階層を浅くする
・画像を統一させる
・文字のフォントサイズを工夫する
・箇条書きを活用する
・画像を最適化する
・パンくずリストを作成する
・カード型リンクを使用する
・グローバルナビゲーションを設置する
・動画を埋め込む
次から順番に見ていきましょう！
デザインのポイント①：サイト階層を浅くする
サイト階層はシンプルかつ浅くする必要があります。
例えばビルを思い浮かべてみましょう。目的地が高層ビルの50階にある場合、行くまでに時間はかかってしまうもの。
当然ながら、1階や2階で用を済ませられるのが効率的です。
これはWebページでも同様。読みたい記事になかなかたどりつけないのは評価を下げます。
「めんどくさいから他のサイトへ行こう」となり、ページから離脱してしまうもの。できるかぎり3クリックで目的地へ行けるサイトをつくりましょう！
サイトの構造についてより深く知りたい方は【成功への近道】SEOに強いウェブサイト構造の設計手順3STEPとポイント5つを解説の記事をご参考ください。
デザインのポイント②：画像を統一させる
画像はインパクトがあり、ユーザーの目に飛び込みやすいです。
だからこそ統一感を持たせておきましょう。例えば同じ提供者の画像を使用したり、シンプルな画像で揃えてみたり。
一貫性があるとユーザーは見やすいだけでなく、Googleから評価されやすいです。
反対に画像のテーマがばらばらであるとユーザーにストレスを与えてしまうもの。
デザインを手がけるなら使用する画像も意識していきましょう！
デザインのポイント③：文字のフォントサイズを工夫する
パソコンとスマホでは文字の見え方も違います。
「スマホでは文字が読みにくかった」「文字が小さすぎて見にくい」などのケースは多いため、注意が必要です。
ユーザーに悪い印象を与えるだけでなく、Googleの評価も下げてしまうもの。
スマホで読みやすいフォントサイズは見出し2が28px、見出し3は20px、最後に本文が16pxとなります。
誰が見ても読みやすいフォントサイズに設定していきましょう！
デザインのポイント④：箇条書きを活用する
デザインを意識する上で欠かせないのが箇条書きです。
Googleは「いかに分かりやすい文章であるか」も評価に入れているため、SEOに強い記事を書くなら必須と言えます。箇条書きはシンプルに3つ程度で絞っていきましょう。
例えば「私は3年前にイギリスへ行き、仕事が落ち着いた2年前にブラジルへ行きました。そして去年イタリアへ行きました」と書くよりも、以下でまとめるのがおすすめです。
私が直近行った旅行先は次のとおりです。
・イギリス 3年前
・ブラジル 2年前
・イタリア 1年前
このように書くと、ユーザーはストレスなく読んでくれます。
デザインのポイント⑤：画像を最適化する
画像ファイルは重すぎるとページ表示速度が遅くなります。
反対にファイルサイズが小さすぎると、画像が荒く見えにくくなってしまうもの。このバランスを維持し、いかに画像を最適化するかが重要です。
一般的には横幅1000px、ファイルサイズは100～200kbがおすすめと言われています。
現在はwebp（ウェッピー）と呼ばれる、次世代画像フォーマットが登場しているのも事実。
圧縮率が高いため、積極的に活用していきましょう！
デザインのポイント⑥：パンくずリストを作成する
パンくずリストとはページ上部にある階層リンクです。
「HOME＞セミナー＞SEO講義＞3月」と書かれた項目を見た経験のある人も多いはず。
自分自身が今どこにいるか、ユーザーに現在地を示しています。
Googleに対しても巡回を促すため、SEO効果が高いです。
WordPressならプラグインでかんたんに設定できるため、すぐにでも対策しておきましょう！
デザインのポイント⑦：カード型リンクを使用する
SEOの内部対策でリンクを活用するのは重要です。
デザインの観点からすると、一歩踏み込んでカード型リンクを使用すると効果的。
カード型リンクとはタイトルだけでなく、導入文や画像などもアプローチできるリンクです。
カード内に上記の情報が載せられているため、ユーザーからクリックしてもらえやすいのが特徴。
ページにアクセントを加えられる、SEOには欠かせないデザインの一つです！
デザインのポイント⑧：グローバルナビゲーションを設置する
グローバルナビゲーションとはページ上部にある共通リンクです。
「HOME・サービス・ブログ・会社概要」など、ページが切り替わっても残り続ける項目。
Googleは情報の見える化を求めているため、グローバルナビゲーションを設置するだけで効果的です。
ものの数分で設定できるリンクのため、欠かさず設置していきましょう！
デザインのポイント⑨：動画を埋め込む
デザインに力を入れるなら、動画を埋め込むのも一つの方法です。
ユーザーの目に留まるだけでなく、滞在時間も長くなります。
しかし動画は容量が大きいため軽量化は必須。
近年は従来のMP4に変わるWebMが広まりつつあります。
MP4より画質も良く、ファイルサイズも小さいためフル活用していきましょう！
デザインに関するSEO以外のSEO対策について詳しく解説している記事【対策必須】コーポレートサイトの具体的なSEO対策6STEP【3つのメリットも解説】もぜひご覧ください。
SEOでページ表示速度を計測できるツール3選
それでは最後にSEOでページ表示速度を計測できるツールについて解説します。
おすすめのツールは以下のとおりです。
・PageSpeed Insights
・Gtmetrix
・Chrome Developer tool
次から順番に見ていきましょう！
ページ表示速度計測ツール①：PageSpeed Insights
はじめに紹介するのはPageSpeed Insightsです。
PageSpeed Insightsはシンプルかつ手軽にページ表示速度を調べられるツール。
URLを入力するだけで各項目の表示速度と、トータルでの「合格」「不合格」が分かります。
ツールで迷ったら、まずはPageSpeed Insightsを使用してみましょう！
ページ表示速度計測ツール②：Gtmetrix
次に紹介するのはGtmetrixです。
GtmetrixはPageSpeed Insightsと同じく、URLを入力するだけで計測できるツール。
特徴はGoogleとYahoo! それぞれの評価を調べられる点です。
0～100%、ABCランクで表示され、課題点が発見しやすいのもGtmetrixならではと言えます。
ページ表示速度計測ツール③：Chrome Developer tool
Chrome Developer toolはボタン一つでかんたんに計測できるツールです。
Chromeで対象ページを開いた状態で「Ctrl+Shift+I」を押すだけ。
表示速度だけでなく、ユーザーエージェントやソースコードも確認できます。
デザインを極めればSEO効果はアップする
今回はデザインがSEOに与える影響とデザインのポイントを解説しました。
デザインとSEOは深い関係があるのも事実。デザインに力を入れれば、SEO効果は徐々に高まります。
この機会にぜひ魅力的なデザインへ仕上げていきましょう！
REEING株式会社では、SEOコンサルティングを行なっており、毎月5社限定で無料でサイトを分析し、SEOレポートの共有まで行っています。
プロだから気付けるあなたのサイトの問題点を隅々まで洗い出します。
毎月すぐ定員に達してしまうため、今すぐ下記からご連絡ください。
