SEO対策で考えるデザイン・コーディングとは?

2019年9月22日

ウェブサイトのデザイン及びコーディングでSEO対策を考える際のポイントを紹介。WordPressの活用方法も含めてQ&A形式でまとめてみました。

モバイルユーザーのUI/UXを考える
Photo by 写真AC

Q.単なるレスポンシブではなくモバイルを重視しているか?

ウェブサイトのデザイン構築をするにあたって、レスポンシブデザインにしないという選択肢はないでしょう。ただし、Googleはより母数の大きいモバイル(主にスマートフォン)を重視しているのが現実。
一方、ウェブサイトのデザインを考える時、より見た目の面積が大きなPC表示のデザインから優先する傾向はまだまだ残っています。デザインの前段階としてワイヤーフレームを作成するわけですが、その際に構成要素をどう見せるか、まずPCサイトのデザインで考えてから、モバイル用にメニュー構成や画面レイアウトを再構成するといった流れで制作作業を進めていると、特にBtoCサイトではSEO対策として不利になるリスクがあるのです。

A.モバイルユーザーのUI/UXを考える

モバイルユーザーはPCユーザーと大きく異なる特性を持っています。ウェブサイトのデザイン・コーディングに影響する主なポイントを3つ紹介しましょう。

ページの表示速度が遅いサイトでは直帰率が高い

Googleに代表される検索エンジンからモバイルユーザーがウェブサイトにアクセスした際、一説には表示に2秒以上かかってしまうと多くの人が直帰してしまうといわれています。
ブロードバンドが当たり前の時代ではあるものの、モバイルユーザーはできるだけスピーディーに表示されるコンテンツを求めているので、ナローバンド時代よりも表示速度には注意してデザイン・コーディングする必要があります。

クリッカブルな要素など操作性が高いUIにする

ごく当たり前のことですが、クリックできる要素はわかりやすく、そして指でタッチしやすくデザイン設計する必要があります。PCユーザーであれば要素にマウスオンすることで、クリッカブルであることが明示的になるところ、モバイルの操作だとそうはいきません。
また、タッチできる要素が近過ぎる場合など、モバイル端末ではご操作の要因にもなります。

縦の流れでコンテンツの最適な配置を考える

例えばPCサイトで右カラムのレイアウトを採用すると、右上にある情報は目に付きやすくなるのも当然。ディスプレイ広告などがその代表例ともいえます。
一方、モバイルの場合、レスポンシブデザインで右カラムの要素を一番下に持ってくると、辿り着くユーザーが少なくなるので、画面の上下の中でどのようなレイアウトにするかはとても重要なポイントとなります。
なお、文章を主体としたページだと、本文を最後まで読んだ後に関連するリンクを配置する方がクリックされやすいというケースもあります。横レイアウトでの調整が難しい分、モバイル表示のレイアウトはより縦の流れを重視してページ設計するのが賢明です。

Q.SEOを考慮した正しいコーディングができているか?

WordPressなどのCMSを使って記事を作成する際、見た目を調整しようと本来とは異なる使い方でHTMLタグを記述しているケースは少なくありません。
プロのウェブデザイナーでも、SEO対策を軽視してグラフィカルな意味でのデザインを重視してしまうと、ついついHTMLコーディングが雑になってしまうこともあるほど。
それらは結果的に検索エンジンにおける自然検索の順位を下げることにもなりかねません。

A.見た目だけでなくHTMLの記述が正しいか確認する

ここではすぐに実践できる、ウェブサイトのコーディングに関するチェックポイントを紹介します。

正しくコーディングができているかツールでチェック

W3Cが提供している「Unicorn – W3C 統合検証サービス」を利用すれば、そのページが正しくコーディングできているかを簡単にチェックすることができます。
これはHTML/XHTML、CSS、RSSフィードなどをまとめてチェックできるツール。エラーを完全になくすのは難しいかもしれませんが、できるだけ修正することをおすすめします。

主要なタグが正しく記述されているかをチェック

極めて初歩的なことですが、h1タグは本来ページで1つしか指定しません。HTML5では複数のh1を使う方法もありますが、見た目優先で大見出しを使いたいからと複数のh1タグを同一ページで使うのは賢明とはいえないでしょう。
画像関連ではALTテキストの抜けや無意味な記述も避けたいところ。また、できるだけキャプションでその画像を説明するようにしたいものです。
metaタグのtitleやdescriptionは、アクセスするユーザーには見えないものの、SEO対策としては欠かせない要素。例えば、WordPressのテーマによっては記事のタイトルや概要を自動でmetaタグにもセットしてくれるものもありますが、忘れがちな要素なので注意すべきです。

SEO対策に強い無料のWordPressテーマ