ユーザビリティを落とさずインパクトを出すには

雑誌などで、ページサイズいっぱいに画像を配置したデザインをよく見ますよね。

写真を全面にレイアウトすることで、インパクトを出すことができます。

今回は、同様の効果をウェブで実現する方法を解説します。

ここ数年、ブラウザサイズいっぱい（width:100%）に背景画像などを敷いたサイトを多く見かけるようになりました。ただ、パターン画像ならリピートすればいいですが、1枚絵だとそうはいきません。1枚絵を背景にする場合、以下の3つくらいの方法が考えられます。

1. backgroundとの輪郭をはっきりさせた形で、画像のサイズでぶつ切りにする
2. グラデーションさせるなどして、backgroundの色となじませる
3. ウィンドウサイズを固定値にする

1と2は、制約のある中でのデザインになるため、自由度が下がります。

3は、デザインする枠のサイズを決められるため、自由度は高いですが、ウィンドウサイズを変えてしまうとユーザーには優しくありません。

では、3の方法で、ブラウザサイズに合わせて背景画像を伸縮させられるとなるとどうでしょうか。デザイン性を保ちながら、ユーザーの環境（ブラウザサイズ）に合わせてページを見せることができます。

jquery.backstretch.jsで背景画像が伸縮するUIに

今回はそれを実現するために、jQueryを使用して、ブラウザサイズに合わせて背景画像が伸縮するインターフェースをご紹介します。jQueryを使うことで、静的なソースの中に、インパクトのある仕組みを加えることができます。

利用するのはScott Robbin氏が公開している「jquery.backstretch.js⁠」⁠。ライセンスがMIT&GPLとなっており、とても使いやすいプラグインです。

それでは、実装方法を見ていきましょう。

<script type="text/javascript" src="/load/view.php?a=aHR0cDovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjQuMC9qcXVlcnkubWluLmpz"></script>
<script type="text/javascript" src="js/jquery.backstretch.js"></script>
<script type="text/javascript">
    $.backstretch("images/bg.jpg", {speed: 150});
</script>

やっていることは以下のようにとてもシンプルです。

1. Google APIから「jquery.min.js」を読み込む
2. 「jQuery Backstretch」からダウンロードした「jquery.backstretch.js」を読み込む
3. 「speed」を指定することでフェードインさせて表示する（フェードイン時のスピードを数値で指定することができます）

あとは、背景画像を指定したパスに置くだけです。

IE6対策はどうする？

デフォルトだと、IE6ではJavaScriptエラーが出るのと、不要な横スクロールが出てしまいます。それを回避するために、「⁠jquery.backstretch.js」の31行目（"if(src) {"の部分）の次の行に、以下のソースを追記してください。

src = src + "?" + (new Date()).getTime();

IE6で縦スクロールが出てしまうのは、対応しきれていないということで仕様となっています。

参考：Error onload in IE 6

http://github.com/srobbin/jquery-backstretch/issues/closed#issue/4

CSS3でも実装可能

背景画像の伸縮は、CSS3を使うことで実装することができます。

CSS3では「background-size」プロパティーが追加されており、CSS3に対応しているブラウザでは、以下のように書くことで実装可能です。

-webkit-background-size:100% 100%;

-o-background-size:100% 100%;

HTML5／CSS3がいつ頃、どこまで広がるかはまだわからないですが、表現の幅が広がるのはうれしいこと。期待したいですね。