レスポンシブで見せる写真の使い方│東京のWeb制作会社のレスポンシブWebデザイン関連コラム

Columnコラム

レスポンシブWebデザイン(RWD)

レスポンシブで見せる写真の使い方

レスポンシブで見せる写真の使い方

2015/06/05
このエントリーをはてなブックマークに追加

写真好きデザイナー出口です。

皆さん写真撮影楽しんでいますか?

最近一眼レフを借りて勉強をはじめました。
やっぱり一眼レフって面白いですね!

何事も触れたり挑戦することが大切です。

話は変わりますが、皆さんはよくスマートフォンを利用されていますか?
電車の中、駅のホーム、ベットの中、ソファに座って・・・など

昔に比べてインターネットを利用されることも増えていると思います。

なかなか気づいていないと思いますが、
パソコンで見たサイトのページが実はスマートフォンでも同じデザイン同じ内容で表示されていることがあります。

これを「レスポンシブWEBデザイン」といいます。

レスポンシブWEBデザインは、パソコンやスマートフォンでサイトを見た際に、
各端末で最適化したものを表示するという技術です。

なんか聞いていると難しいですよね。

今回は、そんなレスポンシブWEBデザインの作成時に気をつけたい、
写真の使い方について注意点をまとめてみました。

deguchi_01_150531.jpg

画像データはPCとスマートフォンで切り替える!

レスポンシブWEBデザインの特徴として、
ひとつのHTMLソースで各端末の表示する画面に最適化するというものがありますが、
一つ注意することがあります。

それは、画像データの使い方です。

PCサイトは画面が大きいため、画像データも大きい物を使用しますが
スマートフォンは大きい画像を使ってしまうと、
表示までに時間がかかってしまいユーザーが離脱してしまう可能性があります。

離脱されてしまうと意味が無いですね。

そうならないように、対策をしましょう!

対策その1: Media Queriesを使って画像を変換しましょう

Media QueriesというCSSプログラムを使うことでPC用の画像とスマートフォン用の画像をウィンドウサイズで

変換するプログラムが有ります。

それを使うことで、大きい画像と小さい画像を切替えることで画像読み込みの時間を軽減することができます。

例えば、画面サイズが480pxを下回った場合はBという小さい画像を表示させる。

といったように、プログラムで制御することができます。

※詳しい記事は下記に記載されています。

http://allabout.co.jp/gm/gc/400630/2/

deguchi_02_150531.jpg

対策その2:画面が小さくても高解像度の画像を用意!

最近スマートフォンの画面解像度が上がってきているため、
画面に対して約2倍の高解像度の画像を用意することをおすすめします。

そうしなければ、画像が荒く表示されてしまうので
せっかくの商品画像やかっこいい画像が台無しになってしまいます。

まとめ

いかがでしたでしょうか。

レスポンシブWEBデザインの作成も楽しそうですね!
私も自身で撮った写真をWEBサイトに乗せて独自のサイトを作成してみようかな^^

みなさんもぜひレスポンシブWEBデザインを作成して
どんなデバイスにも対応できるようにしてみてください。

今回は画像についてまとめてみましたが、
次回は動画をレスポンシブWEBデザインに活かすことを書いてみようと思います。

お楽しみに!

では、楽しい写真ライフを!

関連するサービス

ホームページ制作

Webデザイン制作

レスポンシブWebデザイン制作

関連キーワード
text_totop