[SVG]デバイスピクセル比に対応するべく「ベクターデータ」を使用する

いまさらながらですが、「モバイルファースト」が当たり前の時代になりました。PC向けのウェブ制作を行っていた時代から見ると隔世の感があります。

スマホやタブレットなどのモバイル向けのデザイン対応が優先順位のトップにくるわけですが、それらデバイスの解像度の良さに戸惑うわけです。例えば旧サイトのデザインを生かすという条件でレスポンシブウェブデザインを導入する場合、今までPCでは問題ない見栄えだった画像がスマホでは粗くなるという現象に、ため息をつくデザイナーの方も多いのではないでしょうか。

デバイスピクセル比の問題はSVGなどベクター形式の画像、アイコンフォントを採用することで解決するということが当たり前?になっているようです。

SVG

最先端のデザイナーの方は、高画質なデバイスに対応すべく、SVG画像やアイコンフォントなどベクター形式の画像を使っている方も多いのではないでしょうか。

AdobeのIllustrator(イラストレーター)を使っている方なら釈迦に説法ですが。「SVG」、「ベクター」で検索するとベクターは別名でベクトルというそうです。言葉の発音の話になってしまい話がそれるのですが、「ベクター」は、数学の「ベクトル」を意味するんですね。昔から「ベクター」と言っていましたので、今更ながら納得する次第です。

点の座標とそれを結ぶ線で作られるという点でビットマップとは画像の構造が全く異なるベクター画像。今後アイコンなどはベクター画像でいくべきというトレンドです。

【導入例】
巧みな技術でSVG画像を採用されているサイトをご紹介いたします。
BMW Motorradウェブサイト内のモーターサイクルのアイコンにSVGアイコンが使用されています。右クリックで画像の要素を確認すると座標値が表示されます。SVG画像へのリンクはこちら(画像は著作権で守られています)

BMW Motorrad

SVGについては下記サイトにSVG画像の扱い方についての記載がありました。(英語サイトです)

Using SVG | CSS-Tricks

アイコンフォント

SVGでできているアイコンフォントも便利です。筆者はFont Awesomeを使用しています。アイコンフォントは、画像ではなく文字情報ですので大きさや色など変更することができて大変有用です。上記のようなデバイスピクセル比を考慮したJavaScriptを設置する必要もないため、CSSで修飾するなどデザイン面での思考に集中できます。

Font Awesome

Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました

デバイスピクセル比で画像出し分け

ビットマップをデバイスピクセル比に対応する方法については、下記サイトで教示されています。

デバイスピクセル比で画像を出し分ける方法

関連記事

  1. 「和」をテーマにしたウェブデザイン:日本旅館

  2. [Google Search Console]サイトマップの登録

  3. [WordPress]デフォルト投稿タイプの記事にカスタム投稿タイプの…

  4. [CakePHP3]AWS Linux2にPHP7.2とCakePHP…

  5. [Amazon Polly]英会話サイトオープンのご案内

  6. [英会話ダイアログ]映画で英語学習

  7. [AWS]EC2内へのMySQLインストールとRDSの設定

  8. [Google Adsense]WordPressにAds.txtを設…

最近の記事

PAGE TOP