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. AIに求められているものは、実は意外な物だった
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    モバイルフレンドリーってなんだ?

    こんにちは!写真のことなら私、デザイナー出口です。先月ゴールデ…

  2. Web関連

    ECサイトは個別接客が売れる!

    突然ですが、絶対にお客さんが商品を買ってくれる方法があるのをご存知です…

  3. Web関連

    どうなるVR競争?GoogleがVRゴーグル開発から撤退

    みなさんは「VR」はご存知ですか?去年から映像業界に革命をもたらす!と…

  4. Web関連

    ヤフオク初心者が、ECサイトとは違う気になる点をピックアップしてみた

    こんにちは、デザイナーの角田です。皆さんは、ネットオークション…

  5. Web関連

    タスク管理ができるようになるための3つのコツ

    タスク管理は仕事を行う上でもっとも重要な部分ですが、みなさんは得意です…

  6. SNS関連

    SNSボタンがよく押される場所はどこ?

    SNSボタン、サイトによって配置がかなり違いますよね。今回、SNS…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    検索キーワード「ヒッグス粒子」
  2. Web関連

    ポケモンGOはなぜヒットした?
  3. AI関連

    着るコンピューター? ウェアラブルデバイス×人工知能(AI)で出来ること
  4. Web関連

    急げ、感染する前に!スマートフォンの脆弱性対策
  5. Web関連

    Webサイト売上げアップに使える”行動心理学” その3
PAGE TOP