知っているようで知らない？SEOとWebデザイン（ページデザイン）の関係性について
先日、霧島の「湯本庵 清姫」という露天風呂付きの部屋に宿泊してまいりました！
メゾネットタイプの部屋となっていたのですが、2階の本読めそうなスペースが個人的に超絶お気に入り・・・。
こんな一人部屋がほしいな（笑）
霧島には素敵が沢山つまっているので、鹿児島に来たなら絶対に立ち寄るべきだと思います！！
ということで、今回は
「知っているようで知らない？SEOとWebデザインの関係性について」
述べていきたいと思います！
やはりSEOを意識するなら、見た目にも拘るべき？
例えば、好きな人との初めてのデート。
あなたは何を着ていくでしょうか。
普段着ているくたびれたパーカーか、自分が1番かっこいい・かわいいと思う勝負服か！！
人間であれば、意中の人を射止めようとするならば、見た目に拘ることがほとんどかと思います。
しかしながら、私たちが射止めようとしているのはコンピューター。
果たして、見た目への拘りはコンピューターに対してどのような作用を及ぼすのか？
この記事の内容
それでは、SEOとWebデザインの関係性について、見ていきましょう。
SEOとWebデザインの関係性とは
結論から申し上げると、正直、SEOとWebデザインの「直接的な」関係性はありません。
具体的には、検索順位をGoogleクローラーは、デザインの優劣性において順位を定義付けてはいません。
かっこいいから、可愛いから、おしゃれだから、という理由で順位を付けているわけではありません。
Googleクローラーはコンピューターですので、サイトに対して見ることのできる事項が限られています。
詳しくは後述いたしますが、基本的にそのサイトを定義付けている文字や、色々な数字（成績のようなもの）を読み解き、評価を下しています。
以前の記事【実践編】Webサイトパフォーマンスにお悩みの方へ、今から実践できるサイト高速化 「画像の取り扱いについて2」にて、「デザインをCSSで表現することによるWebサイトパフォーマンスの向上を狙う」と記述はしましたが、例えそうでなくてもきちんとした評価は下してくれます。
それではサイトデザインには全く拘る必要はないのでしょうか？
いいえ、そういうことではありません（笑）
どっちだよ！！って感じですね。
次項で見ていきましょう！！
まとめ：SEOとWebデザインの「直接的な」関係性はないけど・・・？
SEOとWebデザインの「間接的な」関係性について
前項にて、「直接的な」関係性はないことが分かりました。
だからといって、Webデザインに拘る必要はないのかというと、決してそういうことではありません。
結果として、SEOとWebデザインには「間接的な」関係性があります。
Googleは検索順位を決定づける上で重視している様々な事項を提言しています。
メジャーなもので言えば「良質なコンテンツ」かと思われます。
何を持ってして「良質なコンテンツ」と見なされるのかには様々な要因が関係しますが、その中でも
- そのページを見てから、ユーザーがどのくらいそのサイトにとどまったか。
- そのページを見てからサイト内の他のページに移行したか。
- 今いるページから何かしらアクションを起こしたか。
- そのページだけを見てサイトを離れたか（直帰率）
- いくつかのページを見た後に、そのページを見てサイトを離れたか（離脱率）
などのデータは「良質なコンテンツ」を定義つける上で非常に重要になっていきます。
あなたが1ユーザーとしてサイトを利用した際、
- 見た目が複雑で見にくいページ
- 古臭さを感じ信頼しづらいページ
- 単純に読みにくいページ
- 欲しい情報になかなかたどり着かないページ
上記のようなページであれば、すぐにブラウザバックを行うのではないでしょうか？
つまり、見やすさや操作性を考慮したサイトデザインでなければ、「直帰率」や「離脱率」が高くなってしまい、結果として「良質なコンテンツ」を生み出すことができず、間接的にSEOに悪い影響を及ぼす可能性があるということになります。
そのため、ユーザーの気持ちをきちんと考えたWebデザインが「間接的に」SEOに影響すると考えられます。
まとめ：SEOとWebデザインには「間接的な」関係性があることを理解し、ユーザーにとって適切なWebデザインの制作を心がける。
Webデザインとユーザビリティとのバランス
前項にてSEOとWebデザインの「間接的な」関係性を理解しました！
そのため、「じゃあユーザーのためを思ってWebデザインを作り上げよう！」という気持ちでデザインの構築に励むのはよいことかと思います。
しかしながら、取り入れる機能によってはユーザーにもGoogleにも嫌悪感を与えてしまうことになりかねません。
特に、2021年5月より、GoogleはCLS（Cumulative Layout Shiftの略で、「累積レイアウト変更」の意味）に関する問題性を評価指標に加えるとも発表しています。
CLSに関しては後日詳しく記事を書こうかと思いますが、読み込みの際に発生する予期しないレイアウトの変更のようなもので、例えば
- 追尾式のサイドバー
- 自動表示される広告
- ローディング時の代替ローディング画像（扱いによってはCLSを回避することもできる）
などがCLSの問題を引き起こしやすくなります。
また、サイトに訪れる度や、記事を読んでいる途中に表示されるポップアップ広告のようなものは、CLSには関与しない可能性も高いですが、単純にユーザーから忌み嫌われやすい機能となります。
ユーザーのためによかれと思って実装しようとした機能が、結果的にSEOに悪影響を与える可能性もあることを常に頭に入れておき、コンバージョン率を上げるための施策との兼ね合いを上手く付けながら、Webデザインを構築していきましょう！
まとめ：ユーザーのためを思う機能はしっかり吟味する。
デザインを表現する際のソースコードの工夫
デザインを表現する際に、デザインによってはソースコードに工夫を加えなければならないこともあります。
あまり見ないですが極端な例で話します。
例えばデザイン上にて、どうしても上に「詳細な説明文」、その下に「そのコンテンツのタイトル」のようなデザインにしたい場合・・・。
基本的にHTML上では上から順に構築していくこととなりますので、コード上でも「詳細な説明文」の下に「コンテンツのタイトル」を配置するかと思います。
そうなって出来上がったサイト、人間の目から見た上では、「詳細な説明文」というのは「そのコンテンツのタイトル」についての説明文だと理解ができるかと思います。
しかしながら、機械は上から順にプログラムを読み込んでいくことになります。
そうなると、機械からしてみれば「詳細な説明文」とは何に対する説明文なのかを理解することができず、こちらが意図しているように適切に読み取ってくれないことがあります。
だからといって絶対に「タイトル」→「説明文」とデザインしなければならないのかと言うと、そういうことでもありません。
デザイン的にどうしてもであれば、「説明文」と「タイトル」を逆順に置くこともよいかとは思いますが、そうした場合にはコードを書く際に「タイトル」→「説明文」と機械が読み取れるように構築する工夫が必要となります。
出来る限り機械に最適にサイトを読み取ってくれるように、デザインについてもデザイナーさんだけに任せるのではなく、そこにコーダーさんも加え、双方で確認しながら作成していくとより良いデザインが出来上がるかもしれませんね！
まとめ：デザインによってはソースコードの書き方に一手間を加える。
総括
いかがでしたでしょうか？
最終的には、サイトに訪れてくれた人間（ユーザー）にも、検索順位を決める機械にも優しいサイトを作れるかどうかが最適解かと思います！
今回の記事では少ししか触れませんでしたが、CLSの問題に関しては後日詳しく掘り下げていこうかと思いますので、そちらもお楽しみに！
ではでは！！