「デザインはSEOと関係ない」と思われがちですが、実際には検索結果での評価に影響する要素の多くが、デザインと実装の段階で決まります。見出しの構造、画像の扱い、表示速度、スマートフォンでの見やすさ。これらはすべてデザイナーが判断している領域です。
逆に言えば、公開してから「SEO対策をしましょう」と言われても、設計段階の判断ミスは取り返しにくいということでもあります。作り直しになれば、費用も時間もかかります。
この記事では、Webデザイナーが押さえておくべきSEOの基本を、デザイン設計・コーディング・画像・表示速度という順に整理します。専門的な施策ではなく、誰が作っても外してはいけない土台の部分に絞って解説します。
前提：検索順位は誰にも約束できない
最初に共有しておきたいのが、この点です。検索エンジンのアルゴリズムは公開されておらず、更新も継続的に行われています。したがって、「この施策をすれば上位に表示される」と断定することはできません。
できるのは、検索エンジンが評価すると公表している要素を満たし、ユーザーにとって使いやすいサイトを作ることです。Googleが公開しているガイドラインはGoogle検索セントラルで確認できます。判断に迷ったときは、ここに立ち返るのが基本になります。
Webデザインの設計段階で決まるSEOの土台
サイト構造は階層を浅く保つ
トップページから目的のページまで、何回のクリックでたどり着けるかを意識してください。階層が深くなるほど、ユーザーも検索エンジンのクローラーも到達しにくくなります。目安としては、トップから3クリック以内で主要ページに到達できる構造が扱いやすい形です。
URLの設計を最初に決める
URLは公開後の変更が難しく、変えるとリダイレクト設定が必要になります。設計段階で次の点を決めておきましょう。
- 英数字と半角ハイフンで構成する（日本語URLはエンコードされて長くなります）
- ページの内容がわかる単語を使う
- 不要な階層を挟まない
- 年号を入れない（更新時に不整合が起きます）
ナビゲーションとパンくずリスト
グローバルナビゲーションは、サイトの主要カテゴリを示す役割を持ちます。ここに何を並べるかは、そのままサイトの構造をどう伝えるかという話です。デザイン上の見栄えを優先して主要ページをメニューから外すと、内部リンクの流れが途切れます。
パンくずリストは、ユーザーが現在地を把握するためのものであると同時に、サイト構造を伝える手段にもなります。階層のあるサイトでは、パンくずリストを省略しないでください。
内部リンクの置き場所をデザインに組み込む
関連ページへのリンクを、記事の下部だけでなく本文中にも自然に置ける設計にしておきます。デザインカンプの段階で「関連記事エリア」を用意しておくと、運用時にリンクを追加しやすくなります。
SEOで後から手を入れにくいのは、URL設計・サイト構造・パンくず・内部リンクの置き場所の4つです。これらは公開前に決めておくべき項目だと考えてください。
設計段階で押さえておきたいSEOの考え方は、Webデザイナー向けのSEOの本でも体系的に解説されています。気になる方はチェックしてみてください。
コーディングで押さえるべき基本
見出しタグは装飾ではなく構造で使う
h1からh6は、文字の大きさを変えるためのタグではありません。文書の階層構造を示すためのものです。次の原則を守ってください。
- h1は原則としてページに1つ、そのページの主題を表す
- h2、h3と順序を飛ばさない（h2の次にh4を置かない）
- 見た目の大きさを変えたいだけなら、CSSで調整する
デザインカンプの段階で見出しレベルを指定しておくと、コーダーが迷いません。「この文字は見出しか、それとも強調された本文か」を明示するのは、デザイナーの仕事です。
タイトルタグとメタディスクリプション
検索結果に表示される見出しと説明文です。タイトルはページの内容を端的に表し、重要な語を前半に置きます。長すぎると検索結果で途中が省略されるため、簡潔にまとめてください。
メタディスクリプションは順位を直接決める要素ではないとされていますが、検索結果でクリックされるかどうかに影響します。ページごとに内容を変えて設定しましょう。
画像のalt属性を書く
alt属性は、画像が表示されない場合の代替テキストであり、スクリーンリーダーが読み上げる内容でもあります。画像の内容を簡潔に説明してください。
装飾目的の画像には空のalt（alt=””）を指定します。すべての画像にキーワードを詰め込むのは逆効果なので、あくまで内容の説明として書くことが原則です。
セマンティックなマークアップを使う
すべてをdivで組むのではなく、header、nav、main、article、section、footerといった要素を適切に使います。文書の意味が伝わりやすくなり、アクセシビリティの向上にもつながります。
表示速度とCore Web Vitals
ページの表示体験を測る指標として、Core Web Vitalsが公開されています。デザイナーの判断が直接影響する領域なので、内容を理解しておく価値があります。
| 指標 | 測るもの | 良好とされる基準 |
|---|---|---|
| LCP | 主要なコンテンツが表示されるまでの時間 | 2.5秒以下 |
| INP | 操作に対する反応の速さ | 200ミリ秒未満 |
| CLS | 表示中のレイアウトのズレ | 0.1以下 |
これらは、そのページを訪問したユーザーの75パーセンタイル値で評価されるとされています。つまり、一部のユーザーの環境で基準を超えていても、全体の4分の3が基準内に収まっていれば良好と判断される仕組みです。指標の詳細はweb.devで公開されています。
LCPを悪化させるデザインの例
- ファーストビューに大きな未圧縮の画像を置く
- 読み込みの重い動画を自動再生させる
- Webフォントを複数ウェイト読み込む
デザインの見栄えと表示速度は、しばしばトレードオフになります。ファーストビューの画像は圧縮し、フォントのウェイトは必要最小限に絞るといった判断を、デザインの段階で行ってください。
CLSを防ぐための実装
読み込み中に広告や画像が後から入り込み、読んでいた文章が下にずれる。この現象がCLSです。防ぐには、画像や埋め込み要素に幅と高さをあらかじめ指定し、表示領域を確保しておきます。
後から挿入されるバナーやポップアップも、レイアウトのズレを起こしやすい要素です。設置場所をあらかじめ確保するデザインにしておきましょう。
画像の最適化
画像はページ容量の大部分を占めることが多い要素です。次の対応で大きく改善します。
- WebPなど圧縮効率の高い形式を使う
- 表示サイズに合わせて画像を書き出す（2000pxの画像を400pxで表示しない）
- ファーストビュー以外の画像に遅延読み込みを設定する
現状の数値はPageSpeed Insightsで計測できます。公開前に一度確認しておくと、大きな問題を見逃さずに済みます。
表示速度の仕組みをもう一歩深く理解したい場合は、Webパフォーマンスを扱った技術書も参考になります。
モバイルでの見やすさ
モバイルファーストで設計する
多くのサイトでスマートフォンからのアクセスが多数を占めます。パソコン用のデザインを縮小して当てはめるのではなく、スマートフォンでの見え方を先に設計してからパソコン用に広げるほうが、結果的に破綻が少なくなります。
タップしやすいサイズを確保する
ボタンやリンクが小さすぎたり、隣接する要素と近すぎたりすると、誤タップが起きます。指で押す前提のサイズと間隔を確保してください。
文字サイズと行間
スマートフォンで読みにくい文字サイズは、それだけで離脱の原因になります。本文は読みやすいサイズを確保し、行間にもゆとりを持たせましょう。デザインの美しさを優先して文字を小さくすると、実機で読めないという事態が起こります。
実機での確認を工程に入れる
ブラウザの開発者ツールによるシミュレーションだけでは、実際の見え方や操作感まではわかりません。「デザインカンプでは問題なかったのに、実機で見たら文字が読めなかった」という経験は、多くのデザイナーが通る道です。
- 確認用のスマートフォン実機：iOSとAndroidの両方があると、表示の差異を確認できます
- 23〜27インチのフルHD以上のモニター：デザインツールとブラウザを並べて確認できます
- スマートフォンスタンド：実機を立てた状態で、パソコン画面と見比べながら作業できます
- 色域の広いIPSパネルのモニター：色の見え方の差を減らしたい場合に用いられます
実機確認を工程に組み込んでいるかどうかで、納品後の修正回数が変わります。
Webデザインのコンテンツ設計でできること
ユーザーが探している情報を上に置く
訪問者がそのページに来た理由を考え、答えになる情報を早い位置に配置します。会社の理念を長々と書いてから本題に入る構成は、離脱を招きます。
見出しだけで内容がわかるようにする
多くの人は本文を読む前に見出しを拾い読みします。見出しだけを並べたときに全体の流れがわかる構成になっているかを、デザイン段階で確認してください。
目次を設置する
長いページでは目次があると、必要な情報にすぐたどり着けます。ユーザーの利便性が上がるだけでなく、ページ内の構造が伝わりやすくなります。
アクセシビリティへの配慮
文字色と背景色のコントラストが不足していると、読みにくいだけでなく、環境によっては判読できません。デザインの段階でコントラスト比を確認してください。アクセシビリティへの配慮は、結果的に幅広いユーザーにとっての使いやすさにつながります。
やってはいけないこと
検索エンジンを欺く目的の手法は、ガイドライン違反として扱われる可能性があります。背景と同色の文字でキーワードを埋め込む、CSSで画面外に文字を隠す、意味のないリンクを大量に設置するといった手法は行わないでください。
また、他サイトの文章や画像をそのまま流用する行為は、著作権の問題に加えて、コンテンツの評価という観点でも問題があります。参考にするのと複製するのは別物です。
よくある質問
Q. WebデザインのためにSEOはどこまで知っておくべきですか
専門的な分析まで担う必要はありませんが、見出し構造、alt属性、表示速度に影響するデザイン判断、モバイルでの可読性の4点は理解しておくべき範囲です。この4つを外さないだけで、後工程の負担が大きく減ります。
Q. 画像を多く使うデザインはSEOに不利ですか
画像そのものが不利になるわけではありません。問題は、圧縮されていない大きな画像がページを重くすることです。適切な形式とサイズで書き出し、遅延読み込みを設定すれば、ビジュアル重視のデザインでも表示速度は保てます。
Q. 文字を画像にするのは避けるべきですか
本文や見出しをすべて画像にすると、検索エンジンが内容を読み取れず、拡大表示にも対応できません。ロゴやキャッチコピーの一部にとどめ、本文はテキストで実装するのが原則です。
Q. Webフォントは使わないほうがいいですか
使ってはいけないということはありません。ただし、複数のウェイトや複数の書体を読み込むと表示速度に影響します。使用するウェイトを絞る、日本語フォントはサブセット化するといった対応を検討してください。
Q. 表示速度はどこまで改善すればいいですか
Core Web Vitalsの基準を満たすことが一つの目安になります。ただし、数値を追いすぎてデザインの表現を過度に削る必要はありません。基準を大きく外していないかを確認し、明らかな問題を潰す、という優先順位で十分です。
Q. 公開後にできることはありますか
コンテンツの追加と更新、内部リンクの整理、表示速度の改善は公開後でも可能です。一方でURL設計やサイト構造の変更は影響が大きいため、公開前に固めておくのが望ましい項目になります。
まとめ：Webデザインの土台がSEOを支える
WebデザインとSEOは切り離せません。サイト構造とURL設計、見出しの階層、alt属性、表示速度、モバイルでの可読性。これらはすべてデザインと実装の段階で決まる要素です。
特別な裏技を探すより、Core Web Vitalsの基準を意識し、見出しを構造として使い、実機で表示を確認する。この当たり前の積み重ねが、結果的に検索でも評価されるサイトにつながります。検索エンジンのためではなく、読む人のために設計するという原則を軸に、日々の制作に落とし込んでみてください。
