• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2019年3月12日(火曜日)  (村本 友梨)

「ディスプレイ」と「解像度」_3

皆さんこんにちは。
アシスタントクリエイターの村本です。

今回はRetinaディスプレイ(レティナディスプレイ)への対応についてです。



■そもそもRetinaディスプレイとは?

ひとことで言うと、通常のディスプレイの2倍の解像度を持った高解像度ディスプレイのことです。
Macや、iPhoneのディスプレイがこれにあたります。



■Web制作においてどんな影響があるの?

通常のディスプレイが1pxで表現するところを、
Retinaディスプレイは(縦・横2倍の)4pxで表現します。

そのため、グラデーションや影など、曖昧な色で表現している部分がぼやけてしまうのです。
写真を使って訴求することを目的としているのに、画像がぼやけてしまっては台無しです…。

Macや、iPhoneによるサイト利用者は非常に多いため、
Retinaディスプレイへの対応が必要になってきます。



■Retinaディスプレイへの対応方法

いくつか対応方法はありますが、一番基本的なものは次の通りです。
①表示したい画像サイズの2倍で画像を作成(書き出し)しておく
②html,cssで縮小表示する

例:800×500pxで画像を表示したい場合
・1600×1000pxで画像を書き出す(img_text.jpg)
・html,cssで画像のサイズを指定して表示
 

<img src="img_test.jpg style=“width:800px; height:500px;">




■注意点

上記の方法で、Retinaディスプレイへの対応はできるのですが、
Webサイト自体が重くなる(表示が遅くなる)恐れがあるため注意が必要です。

表示の遅いサイトは、SEOとしても良くないですし、ユーザの離脱にも繋がります。
サイズの大きい画像は、単純にファイルサイズも大きくなってしまうため、
画像掲載前に確認して、ファイルサイズを小さくする必要がありますね。



■画像のファイルサイズを小さくする

・画像をリサイズする
 100×100pxの画像を表示したい場合に、500×500pxの画像サイズは不要です。
 Retinaディスプレイへ対応するとしても200×200pxにリサイズしましょう。

・トリミングする
 写真でイメージ画像を表示する場合、撮った写真をそのまま使うのではなく
 不要な箇所はトリミングしましょう。
 ファイルサイズが小さくなるのはもちろん、
 画像のもっているイメージを強めることもできます。
 
・解像度を下げる
 Photoshopなどの画像編集ソフトを使って、解像度を75〜90%に落として保存する。
 最近のデジカメやスマホは高性能なため、多少解像度を下げて保存しても
 見栄えはほとんど変わりません。

・出来るだけファイルの小さくない保存形式を使う
 JPEG:景色/人/食べ物の写真など、色表現が複雑な画像
 PNG:図形/イラスト/サイトキャプチャなどの、いろ表現た単調な画像
 SVG:アイコン画像※
    
 ※SVG形式はベクトル形式の画像のため拡大、縮小しても劣化しません。
  そのためRetinaディスプレイ用に2倍サイズの画像を用意する必要もありません。
ーーーーーー


■まとめ

画像は、読む必要がなく、一瞬で情報を伝えることのできる優秀な表現です。
デザイナーとしてデザインや導線設計と同じくらい意識して、
作成、実装(表示)できるように努めていきたいです!



AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン