Web関連

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

0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

お楽しみに!

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

関連するサービス

ホームページ制作

Webデザイン制作

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

0

グーグルアルゴリズムとSEO前のページ

Webマーケティング ナーチャリングを知ろう次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. AIに求められているものは、実は意外な物だった
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    運動不足のweb担当者に伝えたい!この効果はスゴイと実感する心とカラダの姿勢を整えるヨガ

    こんにちは。管理部の川又です。みなさん、毎日のデスクワークで目もカラダ…

  2. Web関連

    2016年はVR元年?WebにVRは来るか

    本格的なVR体験が出来るOculus Rift(オキュラス リフト)を…

  3. Web関連

    子連れ家族向け情報サイト

    こんにちは。育児に家事に大忙しのディレクター、望月です。子供が出来る…

  4. Web関連

    苦情対応はWebサイトでもできる!クレームを活かす対応方法!

    こんにちは。ISO10002取得のお手伝いを少しだけしていた真野です。…

  5. Web関連

    気づけないWEBサイトの欠点をAIが分析・提案!

    WEBサイトの分析はAIにお任せ!Webサイトを運用していくには、…

  6. Web関連

    【デザイナー必見!】街中でよく見かけるフォント(英語編)

    デザインをする上でとても重要なフォント。例えどんなにかっこいいデザイン…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    web制作会社が紹介するW3Cチェック(validator)の使い方
  2. Web関連

    デジタルコンテンツをカード化するサービス conca(コンカ)とは
  3. Web関連

    「一度だけ客」をリピーターに変身させる方法(3)
  4. Web関連

    Web担当者なら知っておきたい「マイクロモーメント」とは?
  5. Web関連

    動画を長く見てもらうために、例をもとに考える。
PAGE TOP