WebデザイナーのためのSEO基礎｜検索の仕組みとデザインが影響する4つの箇所

「SEOも分かるデザイナーだと助かる」と言われて、何から手をつければいいか分からなかったこと、ありませんか？

このレッスンでは、まず検索エンジンの仕組みとSEOの全体像を押さえます。そのうえで、デザイナーの判断が検索結果に影響する4つの箇所（見出し構造・画像のalt・表示速度・OGP）を1つずつ見ていきます。読み終わったら、自分のポートフォリオを点検してみましょう。

そもそもSEOとは：検索エンジンの仕組み

SEO（検索エンジン最適化）は、Googleなどの検索結果で自分のページを上に表示するための取り組みです。
相手にする検索エンジンの動きは、3段階で説明できます。

1. クロール：クローラーという巡回プログラムが、リンクをたどってWeb上のページを見つける
2. インデックス：見つけたページの内容を読み取り、検索用のデータベースに登録する
3. ランキング：誰かが検索するたびに、登録済みのページへ順位を付けて表示する

では、順位は何で決まるのか。Googleは「検索した人の役に立つ順」に並べようとします。主な基準は3つです。

• 検索意図との関連性：探している内容と、ページの中身が合っているか
• 内容の質：疑問に具体的に答えているか。情報の根拠は確かか
• 他サイトからの評価：他のサイトがリンクや言及で参照しているか

順位はこうした基準からGoogleが計算で決めるもので、お金で買えません（検索結果の上に出る「広告」枠は別の仕組みです）。だからこそ、ページ側を整えるSEOに価値があります。

SEOの全体像とデザイナーの担当場所

SEOの仕事は、大きく3つの領域に分かれます。

デザイナーの持ち場は、3つ目の技術面の中にあります。キーワード調べや記事の執筆まで背負わなくて大丈夫。ただし全体像を知らないと、「なぜ見出しの階層を守るのか」が理解できないまま作業することになります。仕組みと全体像は、ここまでの説明で十分です。

デザインがSEOに関わる4つの箇所

検索エンジンは、ページの中身を読み取って検索結果の順位を決めます。このとき見ているのは文章だけではありません。ページの構造と、表示の速さも評価の対象です。ここにデザイナーの判断が入り込みます。

逆に言うと、この4つ以外のSEOはデザイナーの担当範囲の外です。全体像が頭に入っていれば、あとはこの4つを押さえるだけで、制作会社の現場で会話が成立します◎

見出し構造：見た目ではなく階層で選ぶ

Webページの見出しには、h1からh6までの階層があります。h1がページの主題、h2が章、h3が節。HTMLの基礎で学ぶ文書構造ですね。
検索エンジンは、この階層からページの構成を読み取ります。

やりがちなのが、「この文字は大きくしたいからh2」という見た目基準の選び方です。階層が飛んだり逆転したりすると、検索エンジンには構成の崩れたページに見えます。

大きさはCSSで、階層はタグで。この分担を覚えてください。「h3のまま文字だけ大きくする」は自由にやってよくて、「大きくしたいからh2にする」はやってはいけない。ここが境界線です。

デザインカンプの段階で、どのテキストが何階層の見出しかをコーダーに伝えるのがデザイナーの仕事です。指定がないと、見た目から推測でタグが決まってしまいます。

画像のalt：写真の説明文を用意する

altは、画像に付ける説明のテキストです。検索エンジンは画像の中身を文章ほど正確には読めないので、altが「この画像は何か」を伝えます。画像検索からの流入にも、読み上げソフトを使う人にも効く設定です。

• 意味のある画像：内容を説明する一文を書く。「カフェの外観。白い壁に木の看板」
• 装飾だけの画像：altは空にする。飾りの線や背景に説明は不要
• 文字入りの画像：画像の中の文字と同じ内容をaltに書く

デザイナーとして一番大事なのは、本文の文字を画像にしないことです。凝ったあしらいの見出しを画像で書き出すと、検索エンジンからその文字は消えます。文字はテキストのまま、装飾はCSSで。これも分担の話です。

表示速度：重い画像が一番の敵

表示の遅いページは、検索評価でもユーザー体験でも損をします。開くのに数秒かかるページは、読む前に閉じられてしまいますからね。

そして遅さの原因の多くは、デザイナーが書き出した画像です。ここは完全にデザイナーの領域。

• 表示サイズに合わせた寸法で書き出したか（4000px幅の写真をそのまま載せない）
• 用途に合う形式を選んだか（写真はJPEGかWebP、図はPNGかSVG）
• 圧縮ツールを通したか（無料のTinyPNGなどで足ります）
• メインビジュアルに動画や超高解像度画像を安易に使っていないか

形式の選び方は画像形式のレッスン、書き出し寸法の考え方は解像度のレッスンで扱ったとおりです。ページの速さは、Googleが無料で公開しているPageSpeed Insightsで測れます。

OGP：シェアされたときの顔を作る

OGPは、ページがSNSやチャットでシェアされたときに出る画像・タイトル・説明文の設定です。検索順位を直接動かす仕組みではありませんが、シェア経由の流入と読まれ方を左右するので、セットで扱われます。

デザイナーの担当はOGP画像です。推奨サイズは1200×630px。作るときの注意は2つあります。

• 小さく表示されても読める文字サイズにする。スマホのタイムラインでは名刺サイズまで縮みます
• 端が切れても成立するレイアウトにする。表示先のサービスごとに、端のトリミングが変わります

OGP画像は「SNSに置かれる小さなバナー」として作ります。ページを開く前の人に、誰向けの何のページかを一枚で伝える仕事です。

ミニ実践：自分のページを4点で点検する

15分の点検課題です。対象は自分のポートフォリオサイト。なければ、好きなWebサイトを1ページ選んでください。

1. ページをブラウザで開き、右クリック→「検証」でデベロッパーツールを出します
2. Elementsタブでh1〜h3を検索し、h1が1つだけか・階層が飛んでいないかを確認します
3. 主要な画像を検証で選択し、altが入っているか・中身に合っているかを見ます
4. PageSpeed InsightsにURLを入れて、速度スコアと「適切なサイズの画像」の指摘を確認します
5. X（Twitter）やLINEの投稿画面にURLを貼って、OGPの画像とタイトルがどう出るか見ます（投稿はしなくてOK）

直すところが見つかったら、それがそのまま今日の成果です。ポートフォリオの点検結果は、面接や商談で「SEOを意識して作っています」と言える根拠になりますよ💡

よくある質問

独学でSEOは学べますか？

学べます。一次情報として、Googleが公式ドキュメント「検索セントラル」を無料で公開しています。デザイナーなら、まずこのレッスンの4箇所を自分のサイトで実践して、そこから必要に応じて公式ドキュメントへ進む順番が遠回りしません。

WebデザイナーにSEOの知識はどこまで必要ですか？

検索エンジンの仕組みを説明でき、見出し構造・alt・表示速度・OGPの4つを制作物に反映できれば実務では十分です。キーワード選定やコンテンツ設計まで担当するのは、SEOを専門にする場合の話です。境界を知っていること自体が強みになります。

デザイン性とSEOは両立できますか？

両立できます。SEOが求めるのは「構造が正しく、速い」ことで、見た目の制約はほぼありません。衝突しやすいのは、本文の文字を画像にする表現と、重すぎるメインビジュアルの2つだけ。この2つを避ければ、デザインの自由度は保てます。

SEOのために資格は取ったほうがいいですか？

デザイナーの採用や案件で、SEO資格が条件になることはほぼありません。資格より、「見出し構造とaltを整え、PageSpeedのスコアを改善したポートフォリオ」のほうが実力の証明になります。手を動かした実績を残すほうが先です。

次に学ぶこと

今回の要点です。

• 検索エンジンは、クロール→インデックス→ランキングの3段階で動く
• 順位の基準は、検索意図との関連性・内容の質・他サイトからの評価
• SEOはキーワード選び・コンテンツ・技術面の3領域。デザイナーの持ち場は技術面
• デザイナーが関わるのは、見出し構造・alt・表示速度・OGPの4つ
• 大きさはCSSで、階層はタグで。本文の文字を画像にしない

次のレッスンは「数値で改善する（CTR・CVR・ABテスト）」。検索やSNSから来てもらった後、ページがどれだけ成果を出したかを数字で確かめる方法です。マーケティング編の締めくくりですよ。

あわせて読みたい

ABテストのやり方とCTR・CVRの見方｜バナーとLPを数値で改善する作ったバナーがその後どうなったか、知らないまま次の制作に進んでいませんか？ デザインの良し悪しは、公開後の数字で確かめら…

コース全体の流れはデザインの基本コース目次から確認してください。