レスポンシブイメージ入門

レスポンシブのための画像の準備

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブイメージを実装するために必要な、画像ファイルの準備について、ベースとなる考え方や注意点を学びます。
講師:
09:12

字幕

このレッスンではレスポンシブイメージを 実装する為に必要な 画像ファイルの準備について ベースとなる考え方や注意点を学びます レスポンシブイメージの マークアップを進める前に 画像そのものを準備する必要があります レスポンシブイメージの為には 単一の画像を使うのではなく 同じ画像の異なるサイズを 用意することになります その為 予め どれ位の種類のサイズを 準備すべきか検討する必要があるでしょう 例を出して考えてみましょう 一般的なレスポンシブ ウェブデザインの構成では 最も広い画面はデスクトップ PC を対象としたものですので 約 1200px と考えます 少し小さい画面としては タブレットが挙げられますので 800px の幅も必要そうです そしてスマートフォンでは 480px 程度としましょう これで大体 どの位の種類のサイズで 画像を用意すべきかが分かります しかし ここで1つの問題があります これら全てのスクリーンでは 異なるピクセル密度を持つことがあります 特筆すべきことがなければ 通常は1倍のピクセル密度です 当たり前のことですが 1200px の見た目は 実際の 1200px と一致しています その場合は画像も 1200px として 準備すればよいでしょう しかし Retina ディスプレイのように 2倍のピクセル密度であれば 2400px の画像が必要になります 3倍のピクセル密度であれば 更に増えます 最近では3倍のピクセル密度を備えた モバイルデバイスが多く出荷されており また PC のスクリーンでも高密度の ディスプレイが増えています 将来的には4倍のピクセル密度が 登場すると考えられており 我々は解像度戦争の真っ只中に いるとも言えます つまり私達はスクリーンの幅と その画面のピクセル密度の両方に応じて 異なる画像サイズを決定する 必要があるのです ではどうやってそのサイズを 決定すれば良いでしょうか 単純に考えれば非常に多くのサイズが 必要になりそうです 少し整理して考えてみましょう まず 異なるスクリーンサイズを 書き出してみます この中で最小のサイズはモバイル用の 1倍のピクセル密度です 反対に最大のサイズはデスクトップ用の 3倍のピクセル密度です つまり用意する最大の画像は 3600px の幅が必要になり 最小の画像は 480px の幅が 必要になります 更に その中間のサイズも 考えていきましょう ここではとても多くの数字がありますよね 800 960 1200 1440 1800 2400 と 全てのサイズ毎に画像を用意していては 大変なことになりますし あまり合理的とは言えなさそうですので 少し数値をまとめるのが良さそうです まず 800 と 960 のように 近い数字を捜してみましょう 他にも 1200px と 1440px これらは近い数字と言えそうです そして これらは大きいほうの数字に揃えて 数字の種類をまとめてみましょう これで 960px と 1440px に まとめることができました それから いくつか特殊な数字について 考えておきましょう 1800 2400 3600 です 一般に普及している殆どのスクリーンでは 1800px よりも大きなものはあまりないと 考えられます その為 1800px 以上は超高解像度の スクリーンとして扱い それを対象とする必要があれば 最も大きい数字にまとめてもいいでしょう さて 結果をまとめてみましょう これが用意すべき画像のサイズのリストです 小さな画面用の 480px 真ん中の 960px 大きい画面用の 1440px もっと大きい画面では 1800px 最後に 最も大きい画面用の 3600px です 勿論 このリストは あくまで例ですので 想定するレイアウトやターゲットによって 画像を用意すべきサイズは変わってきます 例えば 小さい画面の為に用意する画像を 600px とすることも考えられます 現在 普及しているモバイルデバイスでは 高いピクセル密度が標準と なってきていますので 480px の幅の機種は殆どありません また スマートフォンを横向きにした 時のことも考える必要があります その為 最低の数字も 600px と 統一することも考えられるでしょう このような考え方は 皆さん自身で導き出し 行う必要があります 画像はどのようなレイアウトに 読み込まれるのか どの位の種類のスクリーンを ターゲットとするのか 近いスクリーンサイズを まとめるのか まとめないのか 様々な組み合わせを考慮し 画像毎に最適なサイズを 割り出していきましょう いずれにしても 画像は複数のサイズが 必要になってきますが レイアウトによっては奇妙に思える 状況に遭遇することもあるでしょう 例えば このようなデザインを考える時です デスクトップではテキストの横に 画像がレイアウトされています しかし スマートデバイスでは ページ全体の幅に 画像がレイアウトされるとしたら この中で最も大きい画像のサイズは タブレット用のものということになります このような場合では先程のテーブルを 考え直す必要があるでしょう つまり 準備すべき画像のサイズは ウェブページの設計 レイアウトによってまるで変わってくるのです さて このような経緯を経て サイズを決めた後は 実際に画像を準備する必要があります ここで いくつか画像を準備する時の 注意点を確認しておきましょう 第1に 全ての画像を 最適化する必要があります 原色やカラーパレットの整理など 様々な画像最適化の仕組みがあるので 必要に応じて 専用のソフトや ウェブサービス等を導入すると良いでしょう 次に 写真の為には JPEG グラフィックの為には PNG を使います これらのファイル形式は その為に作られているものであり 画像の内容によって最適な ファイル形式を選ぶのが良いでしょう そして 可能な場合は SVG やアイコンフォントを使う選択肢も 考えられるでしょう これらの殆どは画像よりも ファイルサイズが小さくなります SVG やアイコンフォントの良い所は いくらでも任意のサイズに 拡大縮小が可能な所です これらは今回取り組んでいる レスポンシブイメージとは 少し違うカテゴリの技術のようにも 思えるかもしれませんが 習得しておいて損はない技術です これらの注意点を踏まえて画像を作成したら 今度はファイルにどのような 名前をつけるかを考えておきましょう ここでは2つのタイプをご紹介します 人間が読んで分かり易いことを考えると ファイル名の後ろに small medium large xlarge など 接尾辞をつけるやり方があります もう1つは画像の実サイズを ベースにするやり方です このやり方ではその画像がどの位の サイズかが分かり易いとも言えます どちらでもお好みの方を使って下さい 最後に レスポンシブイメージの為に 様々なサイズの画像を用意する為には 多くの助けが必要になります その為 なるべく自動化できる仕組みを 構築することが重要になります リサイズや最適化など コンピューターにできることは コンピューターに任せ どの位のサイズを用意すべきか そもそも どんな画像を作るか といった― 人間でしか考えられないことに 注力することが大事です このレッスンではレスポンシブイメージを 実装する為に必要な 画像ファイルの準備について ベースとなる考え方や注意点を学びました

レスポンシブイメージ入門

このコースではレスポンシブWebデザインにおける画像の取り扱い方やレスポンシブイメージについての考え方、またその実装方法などについて解説します。Picturefillを使った実装やimgタグのsrcset属性を使った実装、またpictureタグを使った実装方法などを実際にコーディングしながら説明します。

1時間38分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年12月08日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。