サイトの読み込み速度を早くする！ECサイトにsvgの使用をオススメします。

2020/01/29by GO RIDE

Shopify デザイン

本日はECサイト、特にアメリカでECサイトを運営されている方におすすめしたい、svgのことをお話ししようと思います。

INDEX

ECサイトにsvgを取り入れたい理由
そもそもsvgとは？
Icomoonを使ってアイコンフォントを簡単に使える！

ECサイトにsvgを取り入れたい理由

当たり前だと思われるかもしれませんが、日本と比べてとてつもなく広いアメリカ、生活している方の環境もさまざま、、Wifi環境がいつも素晴らしいとは限りません。

特に画像データの多いオンラインストアはサイトが重くなりがち。サイトの読み込みが遅いと、せっかく来てくれたお客様が離脱してしまう可能性が高くなってしまいます。

そこで、取り入れたいのがsvg。ロゴやアイコンなどをsvgで作成することで、少しでもサイトを軽くし読み込み速度を早くすることができます。オーディエンスにストレスを与えてしまう可能性を減らして、オンラインストアでのお買い物を楽しんでいただけます。

そもそもsvgとは？

jpeg / png / svg の違い

jpegやpngといったwebサイトでよく見られる画像とsvgの違いは、jpegやpngは「ビットマップデータ」。それに対して、svgは「ベクターデータ」という点です。

ビットマップデータはピクセルを縦横に碁盤のように並べて画像を描画します。例えば写真やグラデーションなど、複雑な表現の画像がビットマップデータに当てはまります。もちろんアイコンや文字等もビットマップデータで表現することができますが、拡大・縮小することで画質が劣化してしまったり、ファイルサイズが大きくなってしまうというデメリットがあります。

それに対してsvgは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとにして演算によって再現する方式」
つまり、複数の点の位置とそれをつなぐ線・カーブ・色などを数値データとして記憶する形式。数値で管理しているので、データ量が小さく、拡大縮小しても画像が劣化しません。

例えばこのPizzaのアイコン画像はjpegだと14KBですがsvgだと8KB。結構差がありますね。

またレスポンシブ対応のECサイトでもスマホ・PCのデバイスで画像の見え方が変わらず、どのデバイスで見ても綺麗に表示することができます。

svgはベクターデータなので、写真やグラデーションのような複雑な画像（ビットマップデータ）の描写はできませんのでご注意ください。

ロゴやアイコンなどのベクターデータを軽量で描画できる拡張子です。

またsvgファイルはテキストエディタで編集ができるのもポイント！cssで後から色やサイズを自在に変えることもできるので便利です。

実際のwebサイトでそれぞれの形式の使い分けとしては、

写真・・・・・jpeg / png
ロゴやアイコン・・・・・svg

このような棲み分けがおすすめです！

Icomoonを使ってアイコンフォントを簡単に使える！

実際にsvg形式のアイコンを使いたいなと思った時に、おすすめなのがアイコンフォントのジェネレーター。Illustlatorで作成したsvg形式のアイコンを、フォントとして扱えるようにするためのものです。

コードを入力するだけでアイコンが表示されたり、カラーコードを変えるだけで色が変えられたり、サイズを変える際もフォントサイズを変えるのと同じ要領で簡単に変更できます！

有名なアイコンフォントジェネレーターにはこんなのがあります。

◆Fontastic

◆Fontello

◆Glyphter

◆Icomoon

と、このように有名どころのアイコンフォントジェネレーターがあるのですが、本日はIcomoonの使い方をピックアップしてお伝えします。

Icomoonではアイコンデータをアップロードして自作のオリジナルWebフォントを作ることができるのですが、それに加えて、無料で使える商用利用可のアイコンフォントがたくさんあります。専用の作成ソフトを持っていなくても、svgで描画されたアイコンを使うことができるんですね。

それでは実際にダウンロード方法を見てみましょう。
今回はフリーで用意されているwebアイコンを使用してみます。