SEOとWebデザインを共有させるテクニックを考える

Webデザイン関連(RSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。

SEOとWebデザインを共有させるテクニックを考える

カテゴリ » WEBデザイン
書いた日 » 水曜日, 9月 23rd, 2009

SEOとWebデザインは喧嘩しがちです。本当はお互いがお互いの技術を理解していればこんな事にはならないと思うのですが。。。個人的にWebデザインとSEOをうまく共存させるテクニックを考えています。

※先日、お知らせさせて頂きましたように、この記事は僕が管理していた別のブログの過去記事を移行したもので正確性に欠ける可能性があります。何卒ご了承願います。

まず、WebデザインとSEOの主張を考えます。

Webデザインの主張

テキストばかりでは見難い
イメージが伝わらずコンバージョンを低下させる
安っぽく見られるのはマイナスイメージ

SEOの主張

上位表示しなければサイトを見て貰えないから意味が無い
画像やFlashはクローラビリティに適していない
デザイン重視にすると表示スピードが遅くなりユーザビリティが低下する

こればかりでは有りませんが、適当に挙げてみました。確かに双方の主張は間違っていませんし、Webサイトを作成するにあたり、コンバージョンを意識する上では両方とも欠かせないファクターです。

SEOに適したWebデザイン

SEOに適したWebデザインを構築すれば済む訳ですので、そのTips的な考えをメモしておきます。
まず、WebデザインとSEOの主張を羅列すると

テキストばかりでは見難い
イメージが伝わらずコンバージョンを低下させる
安っぽく見られるのはマイナスイメージ
上位表示しなければサイトを見て貰えないから意味が無い
画像やFlashはクローラビリティに適していない
デザイン重視にすると表示スピードが遅くなりユーザビリティが低下する

テキストだらけでもイメージを上手く伝え、画像も少なくすれば容量も抑えられて表示スピードも増します。これを実現可能にするWebサイトの考え方が「Minimalism(最小限主義)」です。情報を最小限に押さえ、テキストに工夫をしてうまく分散させて視認性を高め、画像を１つ、２つ使うことでそこに集中させ、その画像に最重要項目を付加させます。

Tips（ヒント）

Minimalismサイト構築の為のTipsです。

タイトルはサイズを大きくし、視認性の高いフォントを使う

細かいコンテンツに分けてそれぞれを十分に離す

目立たせたいコンテンツは画像の近くに配置し、背景カラーを変える

フォント同士の距離感を意識する。line-height指定を行う→日本語OKのCSS Type Setが便利です。

全体の背景は出来る限り白、テキストは黒か濃い目のグレーを使う。

hxタグ（見出し）のカラーとフォントサイズを変える

サイト全体で使うカラー画像を含めて３色までに抑える※近い色は同色と見なします

３つのカラーのうち、目立つ1色を主題に使う

余計な情報は別のURLに配置する

画像は１つ～２つまでとし、その画像に最も重要なコンテンツと関連付ける