【デザイナー向けSEOチェックリスト】デザイン観点からのアプローチ
こんにちは。デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage（くらげ）株式会社でUI/UXデザイナーをしているナンシーです。
SEO対策は、デザイナーにとって少し分かりにくい領域ですよね。
今回は、私の経験（以前は求人サイトでSEOを中心に扱うマーケターでした）を活かし、デザイナー視点でのSEOの重要ポイントを紹介します。SEO情報は常に更新されているので、新しい情報があればコメントで教えてください！
SEOとは？
SEO（Search Engine Optimization）は、「検索エンジン最適化」のことです。
Webサイトが、あるキーワードで検索された時に、Googleなどの検索エンジンでより高い順位（ = 検索結果1ページ目の1番最初に表示 など）表示にするためのテクニックのことです。
なぜ、「高い順位」を狙うかというと、圧倒的にサイトに訪れてくださる（ 「流入」と言ったりします）ユーザーが増えるからです。
「流入」が増えると、比例してそのサイトで成し遂げたいことを成し遂げられる数が増えるはずです。
ex. サービスのWebサイト経由の申し込み人数を増やすために、そもそもそのサイトへの流入数を増やす など
何をするとよいの？
基本的には「ユーザーにとっていいこと = SEOにとってもいいこと」です。
ですが、テクニカルな原則のようなもの（ = 過去SEO対策をしてきた人の知見）があります。
Googleは具体的にこうしなさい、とはあまり明言はしていません。なので、そのテクニックが正しいかどうかはわかりません。ついては、デザインする前に対応する案件においてはどうするか、参加プロジェクトメンバーですり合わせできると良いかもしれません。
気をつけたいポイント
✅ h1,h2など見出しを設ける
具体例
【新規】大見出しや小見出しにあたるものを用意する。この際、流入する際の想定キーワードを入れられるとより良い。
【リニューアル】削除しない、削除の場合は、別でh1に当たるものなどを用意する。
ex. バイト求人サイトの「新着求人」の見出しを、「新着のアルバイト求人」にする
理由
ページの情報構造がきれいだと、Googleがそのページがどのようなページか理解しやすくなり、結果、検索結果が上位表示されやすくなるからです。
参考・エビデンス記事
関連ワード
h1は大見出し、h2は小見出しにあたる要素に当てるメタタグのこと。
✅ キーワードをサイト内に入れ込む
具体例
【新規】そのサイトに流入する際のキーワードを、h1、h2に当たる箇所に入れるようにする
【リニューアル】そのサイトがターゲットとしているキーワードを確認、削除・リライトして問題ないか確認する
ex. バイト求人サイトの「新着求人」の見出しを、「新着のアルバイト求人」にする
理由
Googleが、そのキーワードで検索する人にとって有益なサイトなのかも、と思ってくれるからです。
参考：キーワードの調べ方
競合サイトの見出しやTitleタグなどを調べ、検索キーワードになりそうなものを探す。
Googleトレンドで検索数が多いものを調べ、あたりをつける。
注意点
1つのサイトにおいて、全てのページが同じ検索キーワードではありません。ページによっても最適なキーワードは変わります。
ex. バイト求人サイトの求人TOPページ = バイト求人 , アルバイト求人
ex. バイト求人サイトの求人東京都TOPページ = 東京 バイト 求人 , 東京 アルバイト 求人
✅ PCとSPの テキストを含む要素は基本的に同一にする
具体例
【新規・リニューアル】PCにだけある、SPにだけある、というテキストを含む要素は少なくする
【新規・リニューアル】PCとSPのテキストの内容は揃える
【新規・リニューアル】レスポンシブサイトにする
ex. SPは1画面に収まるようにテキスト量を減らす、ということはしない。PCとSPで同じテキストを表示させる。
理由
モバイルデバイスでのわかりやすさ（ = モバイルフレンドリー）であることをGoogleが推奨しているからです。
エビデンス記事
✅ パンくず・内部リンクの削除・追加・デザイン変更は気をつける
具体例
【新規】フッターはサイト全体のページをリンクさせるようにする
【新規・リニューアル】フッターリンク集は「押下しやすさ」は避ける
【新規・リニューアル】パンくずは削除しない、少なくともページ下部に入れる
【リニューアル】すでにある内部リンクを削除する場合は、確認する
ex. ユーザーが利用しないので、フッターのサイトリンクは削除する
ex. ユーザービリティ観点から、フッターのユーザーが利用しなさそうなリンクも、視認性を上げ、押下しやすくすることはしない
理由
そもそも検索結果一覧に表示させるには、Googleのロボット（ = クローラー）に、ページに来てもらい、そのページを認識、Googleに登録（ = インデックス）してもらう必要があります。Googleのロボットがサイト内を縦横無尽に行き来できたほうが、より下層のページも認知・登録してもらいやすいからです。
結果それは、ユーザーにとってもサイトのナビゲーションになっており、ユーザーにとって利用しやすいサイトと認識されます。
一方で、ユーザーがそのページに遷移してしまうと、コンバージョン（CV）（ex.お申し込み など）が減ってしまう、ということもありえます。そのため、あくまでSEO用にリンクを設置する場合は、ユーザーが押したくなるようなデザインは避ける必要があるのです。
また、サイトパワーという考え方があり、これは、リンクされている（ = 被リンク）数が多いページは、そのサイト内でSEO的に強いページになりやすい、とされている。
そのため、より検索流入が多そうなページは被リンクが多いほうがよりよいと言われています。
エビデンス記事
関連ワード
内部リンク = 同一サイト、同一ドメイン内のリンクのこと
✅ ページの削除・コンテンツ内容の変更は気をつける
具体例
【新規】見出しにあたるh1と一致するコンテンツ内容にする
【リニューアル】ユーザーにとって不要なページとしても、リンクの削除、ページ自体の削除は問題ないか確認する（SEO用のページか確認する）
【リニューアル】リニューアル前とコンテンツ量（ = テキスト量）を減らしたり、削除したり、ページの内容に一致しないコンテンツを追加することは避ける
ex. ユーザーがたどり着かない、PVが少ないページなので削除する、ということはしない
理由
まず、あるページが意図せずSEO流入が多い可能性があるという点があります。次に、そのページがサイト内のハブとなっている可能性があり、その結果としてクローリングがスムーズになっているかもしれません。また、Googleは見出しとコンテンツ内容の一致性を確認しています。さらに、ある時点でのコンテンツ内容に基づいてGoogleから評価されていたページの場合、コンテンツ内容が削減・変更されると順位が下がる可能性があります。
なお、コンテンツ量が多いことによりサイト自体の評価が上がることもありますが、無駄に多い場合はGoogleからペナルティを受ける可能性もあります。また、外部のサイトにリンクされているページは、そのページの評価が高まりますが、意図せずに評価の高いページを削除してしまうことも考えられるからです。
参考：SEO対策用のページ
「ユーザーのため」ではなく、検索順位向上やGoogleのロボットが回遊しやすくするためのページ（ = SEO対策用のページ）を用意することもあります。これはリンク集のようなもので、削除しないように気をつけましょう。なお、ユーザーが閲覧しない前提のページなので、時間がない場合は、しっかりデザインにこだわる必要はないかもしれません。
また、削除の場合は、リダイレクト（ = 該当ページを閲覧すると、指定したページに自動で遷移する）対応と、canonical設定（ = 似ているページがたくさんあるときに、どのページが本物かを指定するもの）を忘れずに。
エビデンス記事
✅ 日付・著者名には気をつける
具体例
【新規】更新日をつけられる要素には更新日をつける
【新規・リニューアル】更新日の日付形式は統一する
【新規・リニューアル】TOPページ等、最もSEO流入が期待されるページに、更新頻度の高いコンテンツを設置できそうであれば実施する
【新規・リニューアル】記事コンテンツには著者名を記載する（著者名は削除しない）
ex. 新着アイテムや新着求人は、パーソナライズされていないためユーザーにとって重要ではない可能性があるが、TOPページにはページ下部や、カルーセルなどユーザビリティが悪い / ユーザーが意図しなければ閲覧できない状態で設置しておく
ex.記事コンテンツの著者名はユーザーにとって有益でないこともあるが、削除せず、記載しておく
理由
Googleは更新頻度が高いサイトを高く評価するからです。
信頼できる記事を掲載しているとサイトは評価されますが、その「信頼」の1つの要素は著者名があるか・ないか、であるからです。
参考：メタタグとYMYL
日付や著者名など、各要素には、意味のあるメタタグで閉じたほうがよいと言われています。
ex. 日付要素を<p>で実装したら意味がない
お金と健康に関する記事（YMYL = Your Money Your Life）は掲載内容を慎重に検討したほうがよいです。悪質な記事を掲載している場合は、サイトがまったく検索結果に表示されなくなってしまうこともあります。
エビデンス・参考記事
✅ アコーディオン、タブ等、テキストやリンクが見えないUIには気をつける
具体例
【新規・リニューアル】リンクリストのアコーディオン提案をする際は、デフォルトで開いている状態にする
【新規・リニューアル】SEO用のコンテンツ（ユーザーがじっくり読むことが想定されないテキスト）をアコーディオンで閉じない
ex. SEO用のリンクリスト要素は、アコーディオンで閉じない
理由
Googleのロボットがクローリングし、インデックスする際に、スムーズにいかないから
参考：Googleの見解と調査結果
Google公式見解では、アコーディオンでも問題なく、ユーザーに最適な見せ方であればよい、とされているが、実際は影響がある
参考記事
✅ テキスト情報の削除、リライト（短くなる場合はとくに）には気をつける
具体例
【リニューアル】SEO用のコンテンツは削除しない
【リニューアル】網羅的で少し冗長に感じる記事も、リライトは慎重に行う
ex. 求人サイトの東京都TOPページ、ページ下部に記載されている「東京都の紹介文言」は削除しない
ex. コンテンツ内の「当たり前」に思われる記載も削除はしない。代わりに、各見出しへのジャンプリンクを設置した
理由
昔のSEOは、テキスト量、各ページのユニークさで評価されていました。現状も評価されているかは明確ではありませんが、削除した結果、順位が下がってしまう可能性が否めないからです。
また、SEO記事は、どんなユーザーが来訪しても答えが存在する「網羅性」が重要されています。
参考記事
✅ 容量の重い画像・動画・フォントに気をつける
具体例
【新規・リニューアル】画像や動画は圧縮する
【新規・リニューアル】webフォントの使用は最小限にし、システムフォントか画像 + alt（その画像をテキストで説明した文章を裏で設定する）指定をする
ex. メインビジュアルの画像に関して、問題ない解像度ぎりぎりまで圧縮する
ex. webフォントは画像で書き出し、alt設定する
理由
ページの表示速度もSEOの評価の1つだからです。
参考・エビデンス記事
終わりに
いかがでしたでしょうか？
デザイナーにとって、少しとっつきづらい領域ですが、ユーザーにとっても魅力的で、SEO観点でもよりよいデザインを実施できればと思っています！
crageでは、WebサイトやLPのデザインもお受けしております。開発や運用のご相談もいただけますので、お問い合わせいただければと思います。
＼ 案件のご依頼はこちら ／
＼ 一緒にcrageでデザインしませんか？ ／
この記事が気に入ったらサポートをしてみませんか？