フロントエンドグループクリエイティブユニットにてHTMLでのサイト制作とCMSのサイト構築を担当。現在はシステム開発本部にて新規プロダクトのフロントエンドの開発に携わる。Vue.jsに弄ばれている光の戦士。EPS...画像フォーマットは多々あります。Webサイトをコーディングする際には、使う画像とその目的に合わせて拡張子やサイズを選ぶことになります。ホームページ上に画像を表示するためのフォーマットとして、これまでJPEG、GIF、PNGが多く用いられて来ましたが、ここ数年は、Web制作で使用する画像はSVGへと目まぐるしく切り替わってきました。すべての画像をSVG化!とまでいかなくとも、ロゴやアイコンをSVGで作成して読み込むサイトが増えています。してここまでSVGフォーマットが広まったのでしょうか?「アイコン」の表示をメインに、改めてその理由を振り返ってみます。Web制作で利用されるアイコンの種類アイコンは、サイトの中のワンポイントです。タイトルや項目の分類に使われます。アイコンの一例アイコンはサイトを楽しく表現したり、細部を彩るのと同時に、機能をひと目でわかりやすくする補助の役割を担います。ピクトグラムやシンボルマークが使われることが多く、曲線や中抜き(透過)が使われた画像が多くなります。このようなアイコンをWebサイトで使用する際には、主に下記の3パータンから選択します。画像アイコンアイコンフォントSVGアイコン各パターンはそれぞれ下記のような特徴があります。画像アイコンWebサイトでは主にGIF、JPEG、PNGの3つのファイル形式が用いられます。インターネットが普及した当初からある一番ベーシックな表示形式です。アイコンに主に使われるのはその中でも「.gif」と「.png」になりますので、この2つの特徴を説明します。使い分けとしては「色数の少ない要素は.gif」。「色数の多い場合、円形など透過部分の端処理(エッジ)を綺麗に出したい場合は.png」を用いることが多いです。現在通信速度が上がり、小サイズの画像にも容量を使えるようになりましたので、これまでgifを使っていた表現もpngを使ってより鮮明な表示を行えるようになっています。.gifのメリット・デメリット[メリット]データ容量が軽い。アニメーションを比較的かんたんに作ることができる。(半透明は不可)[デメリット]描画数が少ない(256色)ため、グラデーションや写真に不向き。.pngのメリット・デメリット[メリット]フルカラー(1670万色)を指定することができる。何度圧縮しても画質が劣化しない。[デメリット]IE8以下のブラウザ対応が必要。gifに比べてデータ容量は重い。「アイコン型のWebフォント」のこと。フォント1文字に対して、テキストではなくアイコン画像が設定されます。CDN(外部からファイルを読み込んでサービスを利用する方式)を使って読み込みを行います。アイコンフォントのメリット・デメリット【メリット】ベクターデータのため、Retinaディスプレイでも鮮明に表示される。テキスト(文字)データであるため、画像を表示するよりも軽量。IE8以下の古いブラウザにも対応。CSS3を用いることで、サイズやカラーを簡単に変えることができる。フォントなのでテキストとのベースラインが合わせやすい。【デメリット】アイコンフォントを表示させるために、ソース上に意味を持たない専用の文字列を書く必要がある。一部のブラウザでは、対応していない。(対応用コードが別途必要)配布元により設定方法が異なる。Graphics(スケーラブル・ベクター・グラフィックスの略称)。SVG自体は古くから存在していましたが、HTML5の普及とともに多くのブラウザでサポートされるようになりました。ベクター画像を表示する技術であり、拡大縮小を行っても画質が劣化しない特徴があります。SVGのメリット・デメリット【メリット】ベクター画像である。解像度の異なる環境や印刷において高品質。テキストエディタで開くことができ、画像編集アプリケーションを使用しなくても書き換えが可能。アニメーションタグ、JavaScript、CSSによるアニメーションが可能。点や形状の複雑なオブジェクトや線の集まりでは表現しきれない。写真のような沢山の画素を持つものには不向き。複雑さを増すほど表示速度が遅くなる。計算して描画処理を行うためデータ量が重たくなる。現在の主流はSVG!その理由は?ここまで、アイコンの表示に用いられる手法をご紹介しました。それぞれメリットとデメリットがありますが、文頭で記した通り、その中でも近年ロゴやアイコンの表示はSVGが使われる事が多くなってきました。これまで画像やアイコンフォントで行ってきたことを、SVGで行っていくその利点とはなんでしょうか?スマートフォン・Retinaディスプレイといった複数タイプ&高解像度のディスプレイに対応可能SVGが広まっている一つの理由に、レスポンシブサイトの増加によってサイトの表示サイズが固定されなくなったことが挙げられます。高解像度のディスプレイが主流となってきたため、特にRetinaディスプレイ※1の需要増加が大きいです。高解像度のディスプレイに対応しては、画素数を増やして画像ファイルを保存するのが一般的ですが、専用の画像を用意する必要がある他、画素数を増やせば増やすほどに画像容量も大きくなってしまいます。SVG画像は一つ作ってしまえばスマホ対応・Retina対応といったディスプレイに関わらず、キレイな画像をユーザに提供できます。不要コードを必要とすることによるアクセシビリティ問題がありました。ユーザーの環境(ブラウザ設定など)によって表示が行えないなどデメリットも大きく、それを改善できる手段としてもSVGは最適でした。4より採用された高画素密度のディスプレイ。端末の横幅を変えることなく、2倍の画素数を表示する。ベクターデータであるということSVGの強みとして、CSSやjavaScriptとの組み合わせで「後から色やサイズを変えられる」「アニメーションや透過といった処理を追加できる」という利点があります。これまでは、画像をアニメーションさせるためには複数の画像を用意してgifアニメーションを作成するか、javaScriptで切り替える“パラパラ漫画”のような表現が用いられてきました。SVGであれば、“線を描画する“、“形状を変える”、“組み合わせて模様を描く”など、これまで画像でできなかった表現を行えます。何より、ベクター画像の場合はピクセルの概念が無いため、どんなに拡大してもくっきりとしたきれいな線を保ちます。これは、前述の高解像度ディスプレイの対応他、同じSVGデータを別の場所に違うサイズで利用できるなど、大きな魅力と利点になります。対応ブラウザの増加これまで、SVGを非対応ブラウザへ表示するためにはスクリプトの使用や、代替画像を用意する必要がありました。便利であっても、シェアの多いブラウザであるIEへの対応が遅れていたため、SVGはWeb制作においては「使いにくい」ファイル形式と思われてきました。HTML5の普及とIEの標準対応が行われたことで、ぐっとSVGが扱いやすくなりました。現在では最新のブラウザであれば、多少の表示差異はありますがWeb制作に利用するにおいて問題なくSVGを扱えるようになっています。対応ブラウザが増えるということは、サイト構築のツール選択において大きなプラスとなりました。まとめ:SVGはフロントエンドエンジニアの悩みを解決してくれるとても便利なフォーマットSVGはデザインの形状を保ち、高解像度のブラウザにも対応できます。ファイル内にパスのデータを持っているため、アニメーションの作成も画像データを元にするより簡単に行うことができます。上記から、SVGはこれまで主流となっていた画像やアイコンフォントのデメリットを無くして、サイトにきれいな画像を表示することができる素晴らしいフォーマット形式といえます。複雑なオブジェクトを扱うには、SVGはまだ完璧ではありません。「CSS上でサイズや色を変更できる」「アニメーションや透過も行える」ことができるので、一つファイルを作ってしまえばその後の編集の自由度は大変高いためロゴやアイコンといった、シンプルでかつ美しく見せたい箇所にSVGは最適なファイル形式といえます。「こちらのディスプレイで表示がきれいに出ているのに、あちらのディスプレイでアイコンがボヤボヤしてる...」といった、表示の差異とその対応には頭を悩ませていました。そんな悩みを解消できるSVGは、PLAN-Bでもどんどんと取り入れていっています。制作にSVGを使っていない人は、SVGを使ってどんな環境でもきれいな画像を表示してみましょう。DOWNLOADこの記事に関連する資料はこちら今から始めるSEO知っておきたい用語集からSEOの基本的な考え方、Goolgeが提唱する良いウェブページの定義など、全50ページに及び徹底解説をしています。今からSEOを始める方も、今の施策に疑問を感じている方も、まずはこちらをご覧ください。無料で資料ダウンロードが可能です。資料ダウンロードありがとうございました。資料のダウンロードが可能になりました。下記のボタンより、資料をご確認ください。CREATIONMARKETINGDMP/AIRSS購読ファンになるページトップに戻る株式会社PLAN-Bは確実な成果に特化したデジタルマーケティングカンパニーです。企業に役立つ情報を発信します。