サイトの読み込み速度を早くする！ECサイトにsvgの使用をオススメします。
本日はECサイト、特にアメリカでECサイトを運営されている方におすすめしたい、svgのことをお話ししようと思います。
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フォントを作ることができるのですが、それに加えて、無料で使える商用利用可のアイコンフォントがたくさんあります。
それでは実際にダウンロード方法を見てみましょう。
今回はフリーで用意されているwebアイコンを使用してみます！
1,まずトップ右上のIcoMoon App をクリック。
2,次に左下のAdd Icons From Libarry…をクリック。
3,するとこのようにたくさんのアイコンたちが表示されます。
4, 使用したいアイコンを選択して、ページ右下の「Generate Font」をクリックします。
5, ページ右下のDownloadをクリックで保存完了です！
あとはデスクトップに保存されたフォントファイルを自分たちのサーバーに置くだけで、、、
このように大きさを変えたり、
また色を変えたりすることができます。
Icomoonがオススメな理由は、デフォルト＆無料でオシャレで可愛いアイコンフォントが使い放題というところで、例えばECサイトを初めて間もないのであまりお金をかけたくないけれど表示を速く＆綺麗にしたい！という方にもぴったりかなと思います。
ページの読み込みスピードが遅くなる理由のほとんどが、大量の大きなデータ量の画像を読み込みが原因と言われています。
ロゴマークやアイコンなどをsvgにすることで、少しでもページを軽くして、読み込み速度を早くすることができるので、ぜひお試しください:)
Shopify ExpertのGO RIDEは、ShopifyでのECサイト制作・運用代行を行っております。
是非お気軽にお問い合わせください。
お問い合わせはこちらから
▼GO RIDEのホームページ
▼GO RIDEのSNS