« 背景に大きな画像を使用したウェブサイトとその利点（その2） | メイン | 立体的に表示される3Dウェブサイト10選（その1） »
背景に大きな画像を使用したウェブサイトとその利点（その3）
2011年09月09日
今回も引き続き、背景に大きな画像を使用したウェブサイトとその利点を紹介していきます。
大きな背景画像を使用する時によくある間違い
大きな背景画像は、画面解像度によっては表示が途切れたり、画質が低すぎて見づらいなどの問題が起きることがあります。
そのためウェブサイトの開発者は、できるだけ多くの画面解像度でテストをする必要があります。
多くのユーザーはブラウザウィンドウを最大化した状態でウェブサイトを見ますが、ユーザーによってはブラウザウィンドウを自由なサイズに変更して閲覧するので、特に幅を考慮する必要があります。
あなたのウェブサイトが魅力を損なわないように、次のミスをチェックして修正してください。
画像の拡大縮小時の中心の設定や、タイル状に画像配置の間違った使用法を避ける
より大きな画面解像度を持つユーザーのため、背景の画像が途切れないよう、拡大や縮小をする工夫をしてください。
少なくとも背景に使用される画像は、一般的な画面解像度では問題ないサイズに設定してください。
または、画像を並べてタイルのように表示する方法があります。
この方法はCSSを使う必要があります。
画像のリピートは垂直方向または水平方向で、両方に画像を繰り返すこともできます。
画像のリピート表示に必要なCSSは以下のようになります。
このCSSは、イメージを水平方向に繰り返します。
background: url(“images/sample.jpg”) repeat-x;
}
繰り返しのスタイルを設定するには、次のもののいずれかを使用することができます。
* repeat-x 画像を水平に繰り返す。
* repeat-y 画像を垂直に繰り返す。
* repeat-xy 画像を水平方向と垂直方向、両方に繰り返す。
* no-repeat 画像を繰り返し表示しない。
画像フォーマットを最適化する
画像とページのロード時間は、適切な画像形式を使用することで最適化することができます。
WEB上で使われる画像形式にはGIF、JPG、PNGなどの種類があります。
* GIFは線、円、テキストや単純なグラフィックに使用されます。
また画像を透過できるのが特徴です。
ただし複雑なグラフィック、例えば写真などを表示するには不向きです。
* JPEGは写真など複雑な画像の表示に向いています。
ただし透過はできないため、ウェブサイトのロゴやパーツの表示には不向きです。
* PNGは高画質で、透過もできますが、その分ファイルサイズが大きくなりやすい形式です。
画像素材の配布や、写真などを透過したい時に使うことができます。
画像を使う際は画質に気をつけるだけでなく、帯域幅も節約する必要があります。
適切な画像フォーマットや解像度を使用して、ウェブサイトのCSSやJavaScriptファイルを最適化することにより、大きな画像ファイルもストレス無く読み込むことができます。
しかしファイルサイズ節約のために、小さい解像度の画像を無理やり大きく表示させるのはやめてください。
表示される画像が、モザイクをかけたような画質になってしまいます。
シームレスな背景を作成する
背景をシームレスに見えるようにするには、繰り返し表示する画像の端が、反対側の端と完全に一致している必要があります。
右端が左端と、上端が下端と、自然に繋がるように画像をトリミング、加工してください。
その画像を垂直と水平にリピートすることで、巨大な背景画像を作成できるようになります。
部屋を模したサイトです。文字通りの壁紙がずっと背景にあります。
丘と道路を背景に置いた、遊び心溢れるデザインのサイトです。背景の雲が動いているのも芸が細かいです。
アイコン等も含めてトータルにコーディネートされたサイトです。
車のサイトです。大きな背景画像に、車はとても相性がいいです。
工場のサイトです。黒で囲むことで、背景画像の表示面積を減らし、サイズを軽くしています。
砂漠の絵が背景になったサイトです。ヘッダー部分のみという割り切ったデザインです。
プロダクトデザインを手がけた商品の写真が次々流れてきます。大きい画像の理想的な使い方でしょう。
キャンバスの様なデザインのサイトです。キャンバスの上にある記事を読むみたいで不思議ですね。
大都会をイメージした画像が背景に出ます。新進気鋭の企業のような雰囲気です。
背景がアニメーションし、さらにそれぞれのメニューがひとつの画像として繋がっているユーモアたっぷりのサイトです。
3回にわけて、大きな背景画像を使ったウェブサイトを紹介してきましたが、いかがでしたでしょうか？
大きな背景画像はとても魅力的な演出です。
しかし、ターゲットとするユーザーや仕事のタイプに向いてない時や、面白いコンテンツやデザインを埋没させてしまう可能性もあります。
皆さんもその点に気をつけながら、背景画像を魅力的に使ってください。
スポンサードリンク
トラックバック
このエントリーのトラックバックURL:
http://blog.templatemonster.jp/mt-tb.cgi/201