レスポンシブ画像のアートディレクションをするための基礎知識

画像のアートディレクションをするために必要な基礎知識をまとめた記事一覧です。

画像のアートディレクションとは

画像のアートディレクションとは、縦横比率の異なるデバイスに応じて、それぞれに最適化するようにトリミングや解像度を決めた画像を表示させることです。

 

画像のアートディレクションをするためには、それぞれのデバイスに最適化した画像を用意し、picture要素やsrcset属性でデバイスに応じて表示する画像を指定する必要があります。

 

解像度とメディアクエリに関する知識を持つ

picture要素やsrcset属性を理解するために、メディアクエリや解像度についての知識を持つ必要があります。

 

特に解像度は状況によって意味することが違うため混同されやすいです。また、メディアクエリや解像度についての知識があいまいだと、picture要素やsrcset属性で最適化した画像を指定するのが難しいです。

解像度について

解像度は、「画面サイズ」を表すときと「デバイスピクセル比」を表すときがあります。

 

例えば、Googleアナリティクスでの「画面の解像度」は、「画面サイズ」を表しています。

一方で、AppleのRetinaディスプレイでの解像度は、「デバイスピクセル比」を表しています。

Apple『Rerinaディスプレイを使う』:https://support.apple.com/ja-jp/HT202471

 

「画面サイズ」を表わす時の解像度の単位は「px」です。「デバイスピクセル比」を表わす時の解像度の単位は「x」です。

 

画像のアートディレクションにおける解像度は、「デバイスピクセル比」を表しています。なので、ここでの解像度の単位は、「x」です。

 

メディアクエリについて

メディアクエリは画面サイズ応じて異なるCSSを指定する方法です。メディアクエリで指定する解像度は、「画面サイズ」です。なので単位は「px」です。

 

picture要素とsrcset属性の基礎知識

メディアクエリや解像度について理解した上で、picture要素やsrcset属性を学ぶと理解しやすくなると思います。picture要素やsrcset属性については、以下の記事にまとめました。

 

 

おわりに

自分自身がレスポンシブ画像のアートディレクションを理解するまでに必要だった経路をまとめました。参考になれば幸いです。

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO