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

関連記事

  1. Web関連

    WEB制作を依頼するときに大切な4つのポイント

    こんにちは!元野球部、デザイナーの栄です!最近、また一段と寒く…

  2. Web関連

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

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

  3. Web関連

    【Web制作会社が考える】いまでは良い思い出・・・ってい言いたいIE6

    すこしは楽になりました。ブラウザ対応htmlコーディングを行う中で…

  4. Web関連

    Web制作会社が教える、スマホ広告を出す前に押さえておきたい3つのポイント

    「歩きスマホ」での事故が年々増えてるみたいですね。でも、私は昨年末に、…

  5. Web関連

    イラスト制作における時短への取り組み ~イラストのディレクションをしていて気づいた事~

    働き方改革が謳われるようになってから、様々な業務の効率化が急がれたり、…

  6. Web関連

    顧客満足度を上げるために企業が行うべき「神対応」とは?

    皆さん、顧客満足度向上していますか?商品・サービスを扱う企業にとっ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    クラウドサービスを使うと効率化はできるの?
  2. Web関連

    外国人観光客人気No.1!京都「伏見稲荷大社」から学ぶKYOTOブランドのおもて…
  3. Web関連

    国内2大検索エンジンが提携 ついにシェア90%超えか!?
  4. Web関連

    クラウドファンディングで商品化された事例4選
  5. Web関連

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