第14回 SEOとデザインクオリティ その3~グラフィカルなデザインとの共存 | デザインってオモシロイ -MdN Design Interactive-

第14回 SEOとデザインクオリティ その3~グラフィカルなデザインとの共存

2026.5.13 WED

【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像、SEOをはじめよう。

第14回 SEOとデザインクオリティ その3~グラフィカルなデザインとの共存


“Web標準”はSEO対策にもなる、という話を、最近よく耳にするようになった。はたして、Web標準に則って作成されたサイトは、同時にSEO対策がなされているといえるのだろうか。

(解説:株式会社ディーオーイー エグゼクティブプロデューサー 稲垣 誠司)

DOEロゴ
[プロフィール]
株式会社ディーオーイー(DOE)●2007年1月より、ECJコンサルティング株式会社(ECJC)のSEMコンサルティング事業を統合。DOEでは、 数々の有効なネットマーケティング手法を定着させてきたECJCのサービスを、新サービスブランド 'DOE Search' として提供する。
http://www.doe.jp/
SEOに関するご相談はhttp://www.doe.jp/inquire/から。

「Web標準=検索エンジン対策」ではない


Web標準とSEOとの親和性は高い。ただし、誤解されている点も多く、Web標準に則ってWebサイトを制作したからといって、それだけでSEO対策が完了するわけではない。

第7回で解説したように、SEOはマーケティング活動の一環であり、決して技術的なテクニックのみを指すわけではない。また、第13回で述べたように、検索エンジンロボットに情報を理解させるには、論理的マークアップが必要となる。

つまり、親和性が高いというのは、ある程度W3Cに則って作成されたWebサイトであれば、適切なタグの使用をしているため、検索エンジンロボットに正確に内容を理解されやすいHTMLコードになっているということだ。

テキストだけのページになるという誤解


「SEOを実施するとページはすべてテキストで」というイメージを、Webデザイナーが抱いているように感じることが多々ある。しかし、それは誤解である。

ではどういうことかというと、画像として必要な部分は“画像”で、画像でなくてもよい部分に関しては“テキスト”で作成すればよいという、単純な話である。

例えば、ページ内の見出し要素。見た目を重視して画像にすることが多い要素だが、本当に画像である必要があるのだろうか。見た目のイメージの統一感、ページ全体のブランド訴求という反論もあるかもしれないが、見出しを画像からテキストに変えたことによってどれほどブランドイメージが低下するのだろうか。

ページを閲覧するユーザーに対しては、画像であってもテキストであっても、同じ情報が伝わるはずである。であれば、テキストのほうが好ましいということだ。

FlashとSEO


Flashに関しても同様だ。確かにFlashにはインパクトがあり、イメージを訴求するには非常に適している。効果があり、必要であるなら使うべきだ。動きのあるナビゲーションなどをJavaScriptで作成するよりも、ソースが短くなるという利点もある。

ただし、ActionScriptなどを使用し、ナビゲーションとして使用する場合には、少々工夫が必要だ。特に、テキストでリンク遷移できるナビゲーションは必ず用意していただきたい。

テキストリンクによるナビゲーション補完の例
テキストリンクによるナビゲーションの補完例
ActionScriptなどを用いたナビゲーションを使用する場合には、テキストリンクによるナビゲーションも設置する

検索エンジンロボットは、ページ内のリンクをたどってWebサイト内の情報を収集するが、Flash内に埋め込まれたリンクをたどることはできないからだ。

テキストで遷移できるナビゲーションの設置は、検索エンジンロボットのためだけではなく、プラグインを入れていない、あえてFlashを表示させないなど、Flashを読むことができないユーザーにとっても有効であり、ユーザビリティをも向上させるのだ。

デザイナーの知恵と腕で


このように、テキスト情報はテキストで、画像情報は画像で見せるというのが、SEOに適したデザインの考え方だ。デザインを犠牲にしなければSEOを実施できないというようなことではない。

SEOに適したデザインを考える際には、CSSを駆使し、テキストをいかにキレイに見せるかということが重要になるのだ。これこそ、デザイナーの知恵と腕、工夫次第ということになるだろう。

しかし、その「デザイナーの工夫」と思っていることが、検索エンジンからはスパム扱いされてしまうこともある。

次回は、CSSの使い方と、スパムの危険性について解説する。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在