SEOとUIの関係性、正しいWEB設計について

SEOは検索エンジンの表示順位を上げるだけ?なんて思っている方は多いのではないだろうか。

今回は、WEB設計に欠かせないSEOとUIの関係性をご紹介します。

そもそも検索エンジンで順位を上げるには、そのページの直帰率、離脱率、滞在時間も気にする必要があります。
PVも軽視できない項目ですが、PVを上げるために、不要なリダイレクトをし過ぎると、マイナス判定をされ、検索順位が落ちることがあるので注意しましょう。

とくにグーグルの検索エンジンは、利用するユーザーが検索したキーワードにマッチしたサイトを上位に上げることを優先しています。普通に考えれば、検索しても利権や広告絡みの検索エンジンなんて誰も使わないですよね。
ユーザーが自分の知りたい情報がすぐに見つかる検索エンジンを求めている以上、そこに重きをおくのは当然の流れ。
そこで見られているのが、直帰率、離脱率、滞在時間などです。

仮に、一つのページを特定のワードで10位以内に表示させたとしても、直帰率、離脱率、滞在時間が悪ければ、検索エンジンからの評価は下がり、すぐに2ページ目、3ページ目に落とされていくでしょう。
とくに、今の検索システムは制度が上がっており、かなりの確率で自分の欲しい情報にヒットします。
なので、SEOはデザインやスマホ対応を含むUIやUXにも関わるということ。

ただ…デザインだけ凝ったサイトを作っても意味がないのも事実。
実は、見栄えだけ整えたサイトというのは、利用するユーザーからすると「カッコイイけど、私の欲しい情報はどこ?」「なんか見難い」「なんのサイトなの?」という判断をされ、直帰率、滞在時間が悪くなることが多々あります。
ブランドメーカーや有名人など大きなコンテンツを扱うサイトなら、とことんデザインにこだわっても、もともとのバリューがあるので直帰率、滞在時間は悪くなりませんが、コンテンツバリューがないサイトで勝負しようと思ったら、コンテンツバリューがないことを踏まえた努力が必要になるのです。

まずは、0.5秒が勝負!

あなたは、検索エンジンから特定の情報を探した時、欲しい情報がそのページにない場合、どのぐらい滞在しますか?

実は、ほとんどの人は、ページの下部までは行かずに、中盤あたりまでスクロールして、欲しい情報がないと感じた時点で、戻るボタンを押してしまいます。
その時間が0.3〜0.5秒と言われています。

サイトを開いた時のファーストインプレッションで、「私が探していた情報はここにある!」と思わせなければなりません。
しかし、長々とした文章を並べればOKというわけではなく、TOPに関して言えば、簡単なキャッチと、それらを結びつけるイメージ画像が重要になります。
LPに近い形のサイト設計は、比較的有効であると考えます。

また、サイトの直帰率は40%台なら妥当だと判断されやすいですが、上位表示を狙うなら30%はキープしなければなりません。

また、今現在のグーグル検索エンジンは、外部SEOよりも内部SEOを重視しています。比率で言えば外部3、内部7というところです。
なので文章の重要度は大きくなります。

では、コーディング面ではどうだろうか?

よく言われるのが「title description h1〜h3」の3項目です。
正直なところ…この3項目を無視したサイトでも上位表示されているサイトは五万とあります。

もし、この3項目がとても重要ということになると、素人が作ったデタラメなコーディングページは評価されない、ということになりますよね?
でも、コーディングがデタラメなサイトでも、ユーザーの求めている内容とは関係ありません。ユーザーからすれば、どんなに綺麗にコーディングしているかは関係ないのです。欲しい情報が手に入ればそれでOKなわけですからね。
その部分でグーグルの検索エンジンは、素人が書いたデタラメなコーディングページでも上位表示されるような評価基準を設けています。
もちろんtitle description h1〜h3などをしっかり書いておいた方が良いですが、重要比率を言えば10段階中「2〜3」というところです。
ただ、新しいドメインで新しいサイトを設計する場合は、この3項目はしっかりSEO対策することをお勧めします。評価されるまでの時間が早くなります。

これらのユーザー目線を考えた上で、サイト設計、デザインを構築していけば、あなたのサイトがより魅力的なものになるかもしれません。

HTML ノーフォローの小技編

SEOでも活用できるノーフォローの小技を紹介します!

外部リンク先をフォローしないaタグ

aタグ内にnofollowを!

<a href=”リンク先” rel=”nofollow”></a>

この記述を入れることで、リンク先にリンクパワーを与えることを防ぐことができます。しかし、この記述は何の意味があるの?と思うかもしれませんが、例えばあなたのサイトから多くのリンクを飛ばしている場合、過剰に外部リンクを設置していると判定され、検索エンジンからマイナス判定を受ける場合があります。そんな時に「rel=”nofollow”」が活躍するわけです。
これを記載することで、「これは外部SEO目的のリンクではありませんよ!」と検索エンジンに知らせることができます。それによってあなたのサイトも守られるのです。

検索エンジンロボットを拒否するメタタグ

以下、メタコードを~内に記述することで、そのページが検索エンジンから拒否できます。

<meta name=”robots” content=”none”>
<meta name=”robots” content=”nofollow,noarchive”>
<meta name=”googlebot” content=”none”>
<meta name=”slurp,bingbot” content=”nofollow”>
<meta name=”robots” content=”noindex,nofollow”>
<meta name=”robots” content=”noindex” />

これだけ入れれば大丈夫!

それでも削除されない場合は!robots.txt

まず、robots.txtというテキストファイルを作成し、以下を記述し、ルートに設置します。

User-Agent: *
Disallow: /test/

「User-Agent」の意味は、すべてのクローラを表しています。これは検索エンジンロボットを指します。
「Disallow」の意味は、そのファイル又はフォルダにアクセスしてはいけません、という指示を表しています。
つまり、上記の書き方だと、/test/ フォルダのすべてのファイルにアクセスしてはいけません、という命令を出しています。

Yahoo!だけを拒否!

小技として「Slurp」を記述することでYahoo!の検索結果だけを非表示にできます!

User-Agent: Slurp

お役に立てたでしょうか?ノーフォローの小技編でした~

CSS 角丸を表現

CSSで角丸を表現してみよう。

まとめて角丸指定

.クラス名 {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

webkitは、chromeやSafari向け
mozは、Firefox(Mozzila)向け

特定部分だけを角丸指定

.クラス名 {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 25px;
}

要素を加える場合は以下のようにします。

dashedが要素になります。
.クラス名 {
border: 3px dashed #000;/* 細かい点線 */
}

▼その他の要素▼
dashed /* 細かい点線 */
solid /* 線 */
double /* 二重線 */
groove /* 立体線 */
ridge /* 立体線(反転) */
inset /* 立体べた線 */
outset /* 立体べた線(反転) */

CSS 透過の小技、背景だけを透過

CSSで背景やボタンなどを透過させよう。

opacityを使用したよく使われる透過CSS

filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

filterは、IE向け
-moz-opacityは、chromeやFirefox(Mozzila)向け
opacityは、SafariやOpera向け
となります。

背景だけを透過させたい時は?

よくありがちなケースとして、背景に透過をかけたら、その中の文章や画像が全部透過してしまったというケースです。
そんな時は以下を使用↓0.15の数字を自分好みの透過レベルに修正ください。255は色になります、要素を検証で指定すると早いですね。

background-color: rgba(255,0,0,0.15);