テキスト画像置換をする時にチェックしたいこと

テキスト画像置換が「グレーな手法」である理由（１）
…スパム行為と認定されやすい

画像置換とは、テキストを画像に置き換えて表示するテクニックです。
javascriptを使用せずにロールオーバーするボタン等を画像で表現したい時や、標準フォントを隠して見た目の良いテキスト画像を配置する時などによく使用されてきました。

例

html

	<div>
	<a href="">お申し込みはこちら</a>
	</div>

css

div {
	width:290px;
	height:40px;
}
div a {
	width:290px;
	height:40px;
	display:block; /* クリックできる範囲を広げる */
	background:url(https://img.phoenix.webcrew.co.jp/91041/images/button.png") no-repeat 0 0;
	text-indent:-9999px;
}

この方法が微妙といわれるゆえんは、かつて画像の後ろにキーワードなどを埋め込んで検索順位を操作するというスパム的な行為が横行したためです。

検索結果の上位表示を狙い、ユーザーが意図しないサイトに誘導されてしまうこの行為を「偽装行為」として警告対象としました。

これにより、巷でも「スパムとみなされないよう、画像置換も注意を払わなければならない」「そもそも画像置換は使うべきではない」という議論が展開されるようになりました。

テキスト画像置換が「グレーな手法」である理由（２）
…「text-indent:-9999px;」が抱える問題点

「text-indent:-9999px;」は、特に画像ボタンの配置でよく利用されるcssテクニックの一つです。
これは「9999px＋αのボックスを作り、-9999pxの位置にテキストの頭をもっていきなさい」と指示しています。 「-9999px」という途方もない数値を指定することであえて消しています。

この問題点は、ブラウザ上で9999pxもの領域を確保するため、パフォーマンスの負荷がかかり、結果的にサイトの表示速度が遅くなってしまう（※）点と、 このような極端な指定はスパム行為でよくみられるため、Googleから目を付けられやすいという点です。
（※）現在は以前ほどパフォーマンス上の影響はないようです

画像置換のためにCSSで過度な指定（text-indent:-9999px;とfont-size:1px;を同時に記述するなど）を行った場合に検索エンジンスパムと判断される場合がある ようです。

それでも画像置換を行うなら

とはいえ、画像置換全てがスパム行為とみなされるとは限らないようです。
Googleの「品質に関するガイドライン」でも、以下のように記されています。

ただし、隠しテキストがすべて偽装行為と見なされるわけではありません。たとえば、サイトで JavaScript、画像、Flash ファイルといった検索エンジンにとってアクセスしにくい技術が使用されている場合、そのようなアイテムについて説明テキストを使用するとサイトのアクセシビリティが向上することがあります。また、スクリーン リーダー、モバイル ブラウザ、プラグインなしのブラウザ、低速接続環境でアクセスする多くの人間のユーザーもそのようなコンテンツを表示できないため、その場合も説明テキストがあれば役立ちます。

また、画像置換をGoogleはどうみなすか？というダイレクトな質問に対して、Googleの中の人、マット・カッツ氏はこう答えています。

置き換えられているテキストとロゴに入っているものが同じならそれはとてもいい状態だ。

これらをふまえた上で、それでも画像置換を使用する場合は以下の点に注意しましょう。

• 画像置換をするテキストには画像内のテキストと同じものを指定する
• 画像の内容と同じalt指定をし、画像の読み込みが遅かったり見つからない場合のユーザビリティに備える
• ＳＥＯを目的とした、もしくはそれと疑われるような使い方をしない
• スパムと疑われそうな他の要素と併用しない
• 使用を最小限にとどめる

「text-indent:-9999px;」に代わる画像置換テクニック

「text-indent:-9999px;」は、不必要な表示領域を確保することや極端な記述が問題に挙げられていました。
この問題点をクリアにして広がったテクニックとして、以下のような記述方法があります。

css

.button {
	width="290px";
	hight="40px";
	text-indent: 100%; /* テキストが収容されるブロック100%分インデントの位置をずらす */
	white-space: nowrap; /* ブロックの大きさに応じて自動改行されるのを防ぐ */
	overflow: hidden; /* ブロックからはみ出した部分は表示しない */
}

ちょっと難しいですが、要は9999pxもの領域を確保しなくて良い点、IE6でも動作する点が評価されて使用するエンジニアが増えました。
しかし、結局は画像置換であること自体は変わらないので、モヤモヤ感は残りますね。

あくまで「ユーザー支援のための使用」を心がけ、Googleのガイドラインの動きにも注意を払って、自己責任のもとに使用しましょう。

画像置換の代替案

Googleが画像を使わずに見た目の良いフォントを使用する一番推奨しているのは、webフォントを使用することです。

webフォントを使用できるサービス

• Google Fonts
• FONTPLUS
• TypeSquare
• フロップデザイン

webフォントはインターネット上に置かれたフォントを読み込んで表示します。
そのため、ユーザーの環境に関係なく意図したフォントを表示することができます。
もちろん、テキストなのでスパムの不安もなく、検索ロボットに認識されやすいのでSEOの観点からも優れています。
しかし、日本語においては数が少ない、ほとんど有償、サイズが大きいので表示速度に影響するといったデメリットがあります。

無償で使用できる日本語フォント

そんな日本語webフォントですが、最近は種類や無料で使用できるものも増えてきています。

オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。

こちらは、ダウンロードして使用する場合とダウンロードしたものをインターネットに上げて使用する二つのパターンで使用できます。
詳しい方法は以下のサイトで丁寧に紹介されているので、ご参照ください。

何で諦めるの？オープンソースフォントを5分でWeb fontにする方法

私も過去に、ナビゲーションを英語表記した時や、ボタンを作成する時にcss3と合わせて使用したことがあります。
使用する箇所が少なかったこともあり、表示速度はそこまで気になりませんでしたし、素敵なフォントがテキストとして使用できる喜びと手軽さはひとしおでした！

日本におけるwebフォントの使用はまだまだ課題が多いですが、皆さんにも使用できるところからどんどん使ってみていただきたいと思います。