背景画像をブラウザ全画面使ってスライド表示させるためのあれこれ

  • Saturday, October 1, 2011

前々から使ってみたかった背景画像全画面スライド表示できるjQuery。
ちょっとお手伝いしてるサイトで試しに使ってみることにしたので紹介がてら私的まとめ。サンプルサイトはTEE STORE終了とともに遊んでるドメインindividuallocker.netにて。

サンプル: http://www.individuallocker.net/

かつてWebサイトの背景画像全画面表示といえばFlashだったわけですが、最近はjavascriptでやれちゃったりします。検索すればいろいろ出てきますが、中でもわかりやすかったのが『maxImage Scaling Plugin』。スライドできちゃう優れもの。

maxImage Scaling Plugin: http://www.aaronvanderzwan.com/maximage/

デザイン的には、ブラウザサイズによって画像サイズが可変するので、文字配置はおのずと四隅に寄せるのがベターになるわけですが、一箇所の隅に固めるよりもフッター部分を分離させて下部固定させるのが良いなと思い、サンプルのようなhtml/cssにしました。
確認済ブラウザ: Mac (Chrome, Safari, FireFox) / Win (IE7, Chrome)

ただ、全画面にする意味というのは、その背景画像を大きく見せて印象に残すことにあるわけで、デザインよりも写真のクオリティが重要になってきます。この場合のクオリティとは『何を印象に残したいのか、演出したいのか』ということになるのですが、解像度的なクオリティを落としたくないというのも正直なところ。
プロならPhotoshopを使って上手く減色すればいいかもですが、もっと手軽にJPEG再圧縮して容量を軽くできるWebサービス『JPEG mini』が便利です。

JPEG mini: http://www.jpegmini.com/

色数にもよりけりですが、50%ぐらいは圧縮されます。
全画面に使う写真の大きさとサイズですが、大きさは横1200px〜1600pxぐらいでサイズは200KB以下(できれば100KBぐらい)を目安にすると良いと思います。思い切ってモノクロにするとグッとサイズも落ちますし、文字の色などにも悩まなくて済みます。

TwitterやFacebook、mixiなどのSNSでコミュニケーションを深めるのが普通になり、ホームグラウンドであったはずの自分のWebサイトがすっかり放置状態だな〜という人も多いと思います。そんなとき、この全画面表示を使ったトップページで自分の世界観を演出して、あとはTwitterやFacebookへと導くのも一つの方法かなと思いますです。

© KOJI KOMIYA.