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

    今回は、以前ご紹介した行動心理学について書いていきます。今回も3つの…

  2. Web関連

    ネット通販で買える生き物

    生き物大好き。犬派だけど猫を飼っています。何でもネット通販で買える便利…

  3. Web関連

    たかがキャラクター。されどキャラクター。~町おこし編~

    前回のコラム(たかがキャラクター。されどキャラクター。)では各企業がキ…

  4. Web関連

    クラウドサービスのメリット・デメリット

    去年の今頃、急速に普及した「クラウドサービス」。普及率が30%という今…

  5. Web関連

    オタクと刀と活性化

    突然ですが、みなさんは好きなアニメやゲームってありますか?私は山ほどあ…

  6. Web関連

    規制に苦しむ、パチスロ業界の動向について

    パチスロ業界は、時代の流れの影響を受けやすい業界だと言われています。年…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. サービス・新技術

    「モノ」から「コト」へ。変わる購買理由。
  2. Web関連

    歩いて・お得に・健康に!ヘルスケアアプリ
  3. AI関連

    人工知能(AI)の導入がマーケティングを変える!?
  4. Web関連

    ティファナが考えるWeb制作会社とWebマーケティング会社。いったいどこが違うの…
  5. Web関連

    雨の日の過ごし方
PAGE TOP