背景画像を駆使したホームページのメリットは？

質問

一見画像に見えるけど実は背景画像で
ソースを見るとタグにテキストが入っている（検索対策ですか？）、というホームページをよく見かけます。

パッと見、全体的に画像で作成されたチラシのような感じだけど
画像がそのまま入っているのではなく（スライスじゃない）
背景画像として使っている。

こういうサイトをよく見かけるのですが
スライスを使わないのは
tableタグを使いたくないからなのでしょうか？

また、こういう組み方をすれば検索には有利なんだろうな、とは思うのですが、印刷するときちょっと困ります。
背景画像が印刷されない設定だと、まっ白になっちゃったりしますよね。
印刷されることは無視してコーディングしているのでしょうか？

こういうコーディング方法って今はやっているんですか？
印刷面を考えるとデメリットもあると思うんですが。
この手法が使われるメリットってなんなんでしょうか。

回答No.4

abril · ベストアンサー

> この手法が使われるメリットってなんなんでしょうか。

No.3様が挙げられてる理由でほぼカバーできるんじゃないでしょうか。
「一見画像に見えるけど実は背景画像でソースを見るとタグにテキストが入っている」というのが、ナビや見出し部分の画像置換の方法などを指しているのであれば、SEOや画像が表示されない環境での利便性を図る目的が主だと思います。
＃私はSEO目的ではやってませんが。論理構造を整えるのに都合が良いかどうかぐらいが判断基準です。

> スライスを使わないのはtableタグを使いたくないからなのでしょうか？

tableを使わなくても他の要素でマークアップして分割した画像を一つの画像の様に見せる事はいくらでも可能なので、それは関係ないのでは。

> パッと見、全体的に画像で作成されたチラシのような感じだけど画像がそのまま入っているのではなく（スライスじゃない）背景画像として使っている。

これはどの様なケースの事を仰っているのか今ひとつイメージがわかないのですが。大きな一枚絵をドン！とimgでマークアップしてあるのではなく（これだったら単に見栄え優先の為だけにやってるだろうな、と思いますが）、わざわざ背景画像にしているという事ですか？
その上に何かテキストや他の要素を重ねてマークアップして、それらの要素と組み合わせる事で一つのイメージが完成している、というのであれば特に不思議はないですが。

ともあれ、よそ様の作ったものの真意まではわかりかねますので、ここから先は一制作者としての私個人の答えです。参考になるかどうかあっちへ置いておきます。

私は「背景画像で構わない位置づけのものは背景画像にする」という考え方の元に画像をスライスしています。その画像が、重要な意味を持つもの（例えばプロフィール写真、組織図、製品の図解…等々）であれば背景画像ではなくimg要素としてマークアップします。一方、装飾の意味しか持たない画像（背景テクスチャ、リストやリンクの頭に付けるマーク、角丸ボックスのパーツ…等々）であればそれは背景画像にしてスタイルの一部にします。

> 背景画像が印刷されない設定だと、まっ白になっちゃったりしますよね。
> 印刷されることは無視してコーディングしているのでしょうか？

「印刷されることは無視してコーディング」はしていません。「必要と思われる情報取得に支障がない」様に印刷される様にprintメディア用のCSSを設定しています。そして、「背景画像が印刷されない設定」で印刷されても、「”それ”が表示されないと重要な情報が伝わらない、という役目を担わない」画像しか背景画像にしていないので問題もありません。

お礼

＞大きな一枚絵をドン！とimgでマークアップしてあるのではなく（これだったら単に見栄え優先の為だけにやってるだろうな、と思いますが）、わざわざ背景画像にしているという事ですか？

そうです。参照ページを載せたくなかったので、説明がわかりにくくてすみません。

一制作者としての私個人の答え～の部分とても参考になりました。

＞「必要と思われる情報取得に支障がない」様に印刷される様にprintメディア用のCSSを設定しています。

実は引っかかったのがこの部分で、まさに必要な内容説明の箇所（画像で作ってある）がまるまる背景画像だったので、印刷したいユーザーにはどうなんだろうな、と思ったんです。印刷用のcssがあるわけでもなかったし...
そういうページをいくつか見て疑問だったので質問させていただきました。
ありがとうございました。

回答No.3

think49

- SEO対策
- テキストブラウザ対策 (CSS無効化した環境含む)
- スクリーンリーダー対策
- 論理構造を守るため

というところでしょうか。
例えば、

Adobe - tutorial : 迅速なWeb作成のための画像のスライス
http://www.adobe.com/jp/designcenter/golive/articles/glv6sliceimg.html

のような場合、tableでマークアップするのは論理構造的に正しくない(表の論理構造ではない)ので
左のメニューはul要素でマークアップ、という手法をよく使われます。

メニューをul要素でマークアップするのは論理的に理解できるので、よく使われるんじゃないかと。

お礼

やはりこういう理由によるところなんでしょうね。
tableでマークアップが論理的ではない、というのはなるほどと思いました。

回答No.2

tiltilmitil

簡易的な著作権保護とか。「画像の上で右クリックして保存」程度のことしかできない相手に対するコピー防止。

お礼

コピーしたいだけなら、スクリーンショットという荒業もありますが。。。わざわざこのために背景画像多用というのも？？？です。

回答No.1

noname#100277

単純に「見栄え」だけしか考えて無いと思われる。

お礼

うーんそれだと、別に背景画像にしなくてもいいと思うんですが。。。