Web制作

FigmaからWebP形式で直接書き出す方法

サイト制作をしていると、サイトの軽量化、表示スピードアップのために容量を減らす必要がありますよね。

サイト軽量化への影響は画像が一番大きく、基本的には圧縮してサイトに組み込むことが多いと思います。以前にコードレビューをいただいたときに、「画像は1MB以下にしましょう。」と教わりました。

ばく
ばく

そのため、WebPに変換し容量を小さくすることも多々ありますが、Figmaから書き出し→webサイトで変換し、再度ダウンロードと言った手順も、一つ一つは単純で簡単ですが、数が増えると手間です。フォルダの中もごちゃごちゃに。

そこで、Figmaのプラグイン「WebP Exporter」が便利だったのでご紹介です。導入、操作が簡単ですぐにWebPに変換した画像を書き出せるので重宝しております。

以下、使い方です

WebP Exporter使い方

プラグインを起動して、対象のフレームをクリック、プラグイン上に表示されたらExportを押すだけです。非常にシンプル。

複数のフレームも同時に書き出すこともできます。シフト＋複数クリックをすることで選択することができます。

プラグイン導入

figmaのツールバーより、アクション(⌘+K)を選択します。

検索バーにて、webpと入力→一致するプラグインとウィジェットを検索→WebP Exporterと進み、保存をします。

WebP Exporterの機能

Enter filename：

【ファイル名】保存時の名前を入力します

Export：

【書き出し】とりあえずこのボタン押せばよいと思います。

Quality and Resolution：

【品質と解像度】高いほど容量が大きくなりますが、画質がキレイです。

書き出しの倍率：

複数にチェックが入っている場合は、zipファイルに倍率違いで複数枚ダウンロードされます。

Naming：

  • convert to lower case(小文字に変換(デフォルトはこれ
  • Preserve Layer Name(レイヤー名の保存
  • Convert to Case Sensitive(大文字と小文字を判別

Folder structure

  • Exprt for Android：オンオフを切り替える

Exprt for Androidってなに？

「Export for Android」は、Figmaでデザインした素材を Android開発用に適した形式でエクスポート するためのオプションです！

具体的には…

Androidアプリ開発では、さまざまな画面密度（dpi）に対応するために、以下のようなフォルダに分けて画像を保存します：

解像度Androidでのフォルダ名倍率
mdpidrawable-mdpi1x
hdpidrawable-hdpi1.5x
xhdpidrawable-xhdpi2x
xxhdpidrawable-xxhdpi3x
xxxhdpidrawable-xxxhdpi4x

つまり、「Export for Android」をONにすると…

  • 選択した倍率（1x〜4x）に応じて画像が自動でリサイズされる
  • それぞれのdpiに対応したフォルダに画像が保存される

使うべき人は？

  • AndroidアプリのUIデザイナーさん
  • エンジニアに納品する素材を準備する人

デザインをアプリ開発で使うならとっても便利な機能です！

Web用なら、基本はOFFで大丈夫ですね！

どれくらい違う？

figmaの基本機能のPNGで書き出した場合と、プラグインを使って書き出した場合の比較をしました。

単純にPNGで書き出しするときより、1/5程度まで容量が小さくなるのがわかりますね！

簡単なアイキャッチ複雑なデザインカンプ
PNG127KB10,5MB
WebP33KB2.4MB(画像途中で切れていました。

pngで書き出してwebpに変換したほうが良いんじゃない？

サルワカ道具箱様やgoogle公式のsquooshを使用したほうが圧縮率が高いのでは？容量が減るんじゃない？

ということで、実際に試してみました。

簡単な画像複雑なカンプ複雑なカンプ変換時
WebP Exporter127KB→33KB10.5MB→2.4MB画像途中で切れる
サルワカ道具箱様127KB→24KB10.5MB→200KB画質の粗さが目立つ
squoosh127KB→27KB10.5MB→×webpに変換できず

大きな画像はエラーが目立ったため、小分けに変換したり、jpegに変換したりして容量を抑えたほうが良いですね。

プラグインとツールで、何故差が出る？

プラグイン側の初期設定にて、「品質と解像度」が90%になっております。squooshなどはデフォルトで80％でした。

若干品質が高いため、容量が大きくなっていたのですね。

プラグイン側の設定を変更してやれば、更に容量を減らすことができます。ですが、品質を落としすぎるとぼやけてしまったりするかもしれません。

%表記を変化させましょう。

おすすめクオリティ設定

用途推奨クオリティ
写真（人物・自然など）60〜80%
UIキャプチャや図解80〜100%
アイコン・小さい画像50〜70%
速度最優先（中〜低画質OK）40〜60%（※画像の内容次第で調整）

＊大きなファイルを変換する際の注意点＊

プラグインを使用したときは、最後まで変換されずに画像の途中で切れていました。

squooshを使ったときは、WebPに変換されずに、jpegになってダウンロードされていました。

pngで書き出し→webpにブラウザツールで変換した際は、解像度がかなり荒くなったり変換エラーが起きたりするため、一度確認したほうが良いでしょう。

最後までご覧いただき、ありがとうございました。

-Web制作