webデザインとSEO

webデザインとSEO

【もくじ】

HPデザインとSEO対策の関係とは?

SEOとは?

SEOとは、検索エンジン最適化(Search Engine Optimization)のことで、ホームページを、自分が狙ったワード検索で上位表示させる対策のことをいいます。

Googleなどで検索したときに、自社サイトが上位に表示されていれば、より多くの見込み客に閲覧していただけますので、
ビジネスがWEB中心で回り始めている現代において、とても重要な対策となります。

検索エンジンはHPデザインを評価できる?

では、ホームページのデザインは、SEOとどのような関係があるのでしょうか?
デザインが綺麗で、見栄えが良いと、SEOにプラスに働くのでしょうか?

まず、デザインの良し悪しについて考えてみましょう。

デザインが「良い」「気に入る」「綺麗だと感じる」
…これは、人間一人一人の主観によって左右されます。

あるデザインは、ある人にとっては「気に入る」が、
別のある人にとっては「しっくりこない」「良いとは思えない」ということになるかもしれません。

こうした主観に左右されるのがデザインですので、客観的な指標を基に点数化したりすることは非常に困難だと言えます。

ホームページの検索順位ランキングは、「検索エンジン」というロボットを介して行われますので、検索エンジンがウェブサイトのデザインの良し悪しなどを評価して、検索順位に反映させるということは「できない」「行わない」のです。

つまり、デザインそれ自体の評価が、SEOに直結することはありません

では、webデザインが、SEOと全く関係ないかというと、
そうではない・SEOに間接的に影響を与えるところがあります。

それはそういうことでしょうか?
以下のような内容で、デザインはSEOに影響を与えます。

デザインは、SEO影響と大きな関係がある

ホームページのデザインの良し悪しは検索エンジンの評価対象がですが、
実際には、ホームページのデザインが、SEOに大きな影響を与えることがしばしばあります。

  • モバイルでの快適な閲覧環境
  • 表示速度を遅くするデザイン手法
  • 検索エンジンが内容を読み込めない画像化

つまり、上記内容によっては、検索順位を左右することになり、
webデザインは、間接的にSEOと大いに関係があるということです。

ホームページデザインにおいてどのようなことを注意すればよいか、
具体的に見て行きましょう。

モバイル対応デザインとSEO

モバイル対応デザインとSEO

インターネット利用の中心がパソコンからモバイル(スマホ・タブレット)に移行する中で、ウェブサイトのモバイル対応は今や常識・必須となっています。

そして、モバイルでのホームページの閲覧環境が、検索結果に反映されるようになり、SEOとモバイルデザインは密接な関係になっています。

モバイル閲覧環境と検索エンジンアップデート

インターネット利用の半数以上がスマホなどのモバイルになる中で、検索エンジンのアルゴリズム(検索ランキングの計算式)もそれに対応するためのアップデートを行っています。

モバイルフレンドリーアップデート

2015年に、Google検索エンジンは、「モバイルフレンドリーアップデート」を行いました。
これは、対象ウェブサイトが「モバイル端末で快適に閲覧できるか?」ということを評価し、検索順位に反映させるというものです。

モバイルフレンドリー」というワードが一気に広がり、このアップデート以降、SEOに大きな影響を与えています。

モバイルファーストインデックス

2016年にGoogleが発表した「モバイルファーストインデックス」とは、検索ランキング評価に際して、モバイル用検索エンジンの評価を第一に置く、というものです。
つまり、SEOは、モバイルを中心に考えなければならない時代に入ったことを意味します。

このように検索エンジンアルゴリズムが「モバイル中心」「モバイル閲覧環境の重視」に動く中で、モバイルデザインがSEOに大きな影響を与えるようになっています。

では、具体的にどのような対策が必要でしょうか?

モバイルフレンドリー対策

モバイルフレンドリー」とは、スマホなどのモバイルで閲覧したときに「快適か?」「読みやすいか?」「操作はしやすいか?」などの評価のことです。

検索エンジンは、様々な指標で、そのサイトがモバイルフレンドリーであるか否かをチェックし、検索順位に反映させています。

ですので、モバイルデザインを行うときに、
以下の内容をチェックして、快適な閲覧環境を提供する必要があります。

スマホ画面からはみ出していないか?

スマホ端末にきれいに収まっておらず、画面からはみ出してしまい、一部しか表示しない状態ではNGです。
このような状態になる要因は、
「テキストで作られたリンクボタンの文字数が多すぎる」
「図表に引っ張られて横幅が広がっている」
など様々な要因がありますので、「はみだし」が起こっている場合は、一つ一つをチェックして、正常な状態を保つようにしましょう。

文字は読みやすいか?

文字があまりにも小さと、肝心のコンテンツな用を読むことができません。
文字の大きさは「16px」がよいでしょう。
高齢者のユーザーが多いサイトは「17~18px」程度を目安としてください。

タップしやすいか?

ボタンなど、指でタップして操作する要素を入れる場合は、「32pxの間隔」が必要と言われています。
テキストリンクの場合も同様です。
誤操作が起こらないようにリンク要素などのデザインを行ってください。

スマホで表示不可な内容はないか?

自動再生の動画は、パソコンでは表示できますが、スマホでは表示不可の場合がほとんどです。
また、Flashを使ったアニメーションも表示できませんので、
これらをスマホで表示しないようにしましょう。

図表はスマホで見やすいか?

パソコンで「表」を作る際は、横長の表でも見やすいですが、モバイル端末は「縦長」ですので、表が小さくて見えなかったり、表が縦に長く見にくかったり…ということが起こります。
「図表」は、スマホ用・パソコン用に分けて制作して表示するのがベストです。

モバイルフレンドリーテストを行う

Googleは、自分のサイトがモバイルフレンドリーかどうかをチェックできるように「モバイルフレンドリーテスト」を提供していますので、
ホームページデザインを行って公開する前に(ページを増やした時にも)
このテストをか習う行うようにしましょう。

⇒モバイルフレンドリーテスト



↑を開いて、対象ページのURLを入れるだけです。(1~2分程度で結果が出ます)
テストしてページがモバイルフレンドリーである場合は、↓のように表示されます。

モバイルフレンドリーテストの結果表示

レスポンシブデザインを選ぶ

ホームページをスマホ対応する方法には

  • モバイル用URLでの対応
  • 動的配信
  • レスポンシブデザイン

の3つがありますが、Googleが推奨しているのは「レスポンシブデザインです。

「モバイル用URLでの対応」「動的配信」の2つは、
モバイル用に別のデザインを組み、閲覧者がモバイルからの場合に、その信号を受けてモバイル版のデザインを返す仕組みですが、
レスポンシブデザインは、1つのデザインで、閲覧者の端末の横幅に合わせてデザインが変化する仕組みです。

1つのデザインで、あらゆる端末に対応しますので、
「表示が早い」「確実性が高い」「シェアしやすい」「リンクでの混乱がない」などメリットが大きいデザインです。

これからホームページ制作を検討している場合は、Googleが推奨し、SEOにプラス効果が期待できるレスポンシブデザインを選ぶとよいでしょう。

レスポンシブデザインは、端末横幅に合わせて自動で変化する

webデザインと表示速度とSEO

webデザインは、ホームページのイメージやインパクト、信頼感に関係しますので、とても重要で、ホームページ制作依頼者が最も気にするところかもしれません。

ですが、デザイン方法によっては、サイトが重くなり、表示速度が下がってしまうことがあります。

表示速度が極端に遅いと、SEOにマイナスの影響が出ますので注意が必要です。

ウェブページの表示速度はSEOに影響します

ウェブページの表示速度がSEOのマイナス要因とならないように
以下の対策を行いましょう。

  • スマホ表示の画像は適正サイズに縮小する
    パソコンで表示するための横幅1000pxの画像をそのままスマホでも表示しますと、画像サイズが大きいため(こうした画像が複数あると)、モバイルでの表示速度が遅くなり、SEOにマイナスの影響が出る場合があります。
    できるだけ、パソコン表示用とスマホ表示用の画像を分け、スマホ用には、横幅300px程度の画像を使うようにしましょう。
  • 外部情報をタグ表示しない
    webフォントを使ったり、Youtube動画をタグで表示したりなど、外部サイトの情報をホームページに表示しようとしますと、外部にいったん読み込みに行きますので、その分ウェブページの表示速度が下がります。
    たとえば動画を表示する場合は、動画ファイルをmp4形式でアップロードして表示させるようにして下さい。

表示速度のチェックをしましょう!

表示速度(特にモバイル)は、SEOに影響を与えますので、スピードチェックは必ず行うようにしましょう。

Googleが提供する「PageSpeed Insights」を使ってください。

⇒Google「PageSpeed Insights」



↑のページを開いて、測定するURLを入力して「分析」ボタンをクリックします。
 ↓のような結果が表示されます。

PageSpeed Insightsの結果例



Googleは、「表示速度が極端に遅い場合に、検索順位に影響が出ます」といていますので、
「パフォーマンス」の数字が「30」以上ならOK範囲と考えてよいでしょう。
ただし、それ以下の数字が出た場合は、画像サイズ、外部システム表示、サーバーなどの見直しが必要ですので、
表示速度が遅い要因をチェックして改善対策を行いましょう。

webデザインの考え方と検索エンジン対策

デザインは閲覧者・ユーザーのために

ホームページデザインは、しばしばSEOと対立したものとして認識されます。
ホームページ制作会社が「デザイン系」「SEO系」に分けて考えられ、目的に応じて選択されているのもその表れです。

ですが、一番考えなければならいことは
「デザイン性」と「SEO対策」を統一的に行い、融合させることです。

より良いデザイン性は以下の効果をもたらします。

  • ページエクスペリエンスの向上
    優れたホームページのデザインは、閲覧者のイメージや印象に働きかけ、視覚的なアピールをもたらすと同時に
    「使いやすさ」「情報の探しやすさ」「操作のしやすさ」につながります。
  • ブランドイメージの向上
    適切なデザインによって、きぎょのブランドイメージ向上につながり、愛電池ティーを確立します。

では、デザインがSEOと対立してしまうケースとはどのようなものでしょうか?

「奇抜なデザインばかりが目につき、不快感を与える…」
「過剰なデザインによって、コンテンツ(文章・内容)が読みずらい」
「デザイン性にこだわるあまり、SEOタグ設定がおろそかにされる」…などです。

以下のようなことを考えてみる必要があります。

  • 閲覧者が、内容を理解しやすいデザインか?
  • 読みやすい文字の大きさや行間か?
  • コンテンツが読みやすいか?
  • hタグ(見出しタグ)はしっかり考えて入れているか?
  • alt属性(画像の説明文)はすべて設定しているか?
  • ナビゲーションなどで、閲覧者が情報を得やすいか?
  • ページ間のリンクで、関連情報を探しやすいか?
  • 過剰なデザインで、読み込み速度が遅くなっていないか?
  • モバイルでの閲覧環境はユーザーファーストか?

などです。

つまり、ホームページのデザインは、閲覧者を想定して、閲覧者のために考えるべきもの…ということができます。

どんなに斬新なデザインでも、
閲覧者が内容に関心を持ち、時間をかけて読み込むようなものでなければ
「平均閲覧時間」が短くなり、SEOにプラスとはならないのです。

デザイン優先でSEOを無視するHP制作会社

私たちがHP制作会社を選ぶ場合、「WEBデザイン」ばかりに目が行きがちです。

「デザインが良い制作会社」=「力のある制作会社」・・・という思い込みです。

ですが、デザインばかりに目を向けると、
SEOの力が全くないホームページを持ってしまうことになりかねません。

たとえば、「画像」を多く使えば、見栄えが良いホームページになるのですが、
肝心の「コンテンツを画像化」してしまっているケースが非常に多くあります。

検索エンジンは、書かれているテキスト文字情報を読み取ってコンテンツを判断してランキングの材料にしているわけですが、
せっかくのコンテンツ(文字情報)を「画像」にしてしまう
検索エンジンには「1枚の画像がある」としか認識できず、SEO的に非常に弱いページになってしまいます。

SEO対策には、SEO各種タグ設定(タイトルタグディスクリプションタグhタグ )や内部リンク設定(「パンくずリスト」「ナビ」「ページ同士のリンク」)など、様々な対策・設定が必要となるのですが、デザイン偏重のウェブサイトでは、
デザインを邪魔しかねないタグ・リンク設定を省略する…ということも多く見かけます。

デザイン中心の制作会社の場合、そもそも「SEOを深く理解していない」ということが非常に多いのです。

デザイン性+SEO実績でHP会社を選びましょう

デザイン性のためにSEOが犠牲にされる…ということを避けるために
ホームページ制作会社に依頼する際は、事前にしっかりと調査を行う要があります。

多くの人に閲覧され、ビジネスに役立つホームページを持つためには、「デザイン性」+「SEO実績」の両方を確認して行く必要があります。

その会社が手掛けたHPでの、検索上位化実績を確認するなどで、「SEO実績」を確認したうえで、選んで行くようにしていただければと思います。

sen-2.png

《関連ページ》

SEOに強いホームページ制作

「SEOホームページ」は、デザイン性とSEO・上位化対策を融合させ、様々なワードで検索上位化を実現させるSEOに強いホームページを制作しています。

月額無料・15ページまで追加料金なし・レスポンシブデザイン設置無料・ブログ設置無料…など、これまでにない形で制作し、低コスト+集客実現という新しいweb制作モデルで、中小企業・個人事業者・地域密着型ビジネスを応援しております。

まずはトップページをご覧いただき、
お気軽にご相談くださいませ。

画像の説明