インストール方法。

インストールは上部メニューの「Resources（リソース）」から、「TinyImage Compressor」で検索する。

「TinyImage Compressor」が表示されたら、クリックすると画面が切り替わる。

右横の三点リーダーの「Save（保存）」からインストールができる。

※右クリックメニュー、または、プラグインの配布サイトTinyImage Compressorからでもインストール可能。

インストールしない場合。

インストールをせずに使用する場合は、「TinyImage Compressor」のパネルが表示されたら、「Run（実行）」をクリック。

「TinyImage Compressor」パネルの開き方。

「Main menu（メインメニュー）」 > 「Plugins（プラグイン）」 > 「TinyImage Compressor」で開く。

※右クリックメニューからでも可。

※再起動などは不要で、そのまますぐに使うことができる。

今回の使用画像。

Photo and Painting by Diana H

CMYKへの変換、エクスポート方法。

現在のところ有料プランの機能だが、15回までは無料プランで使用可能。

1. フレームを作成し、画像を配置する。
2. CMYK化したい画像を選択する。
3. 「TinyImage Compressor」のパネルを開く。
4. パネルの上部メニューから、「Create PDF」を選択。
5. パネル左下のプルダウンメニューから、「CMYK（For Print）」を選択。
6. パネル左側の「Export PDF」をクリック。
7. 設定したPDFファイルがダウンロードされる。

という流れとなる。

例）

（※画像サイズとフレームサイズを合わせる。）
（※dpiのスライダーは、300、150、72の３択となっている。）

画像サイズとフレームサイズを合わせなかった場合。

フレームサイズを合わない場合、画像とフレームサイズの間に余白ができてしまう。

Grayscale（グレースケールで書き出した場合。）

グレースケールで書き出すことも可能。

画像の軽量化の方法。

レイヤーのダウンサイズはカジュアルユーザー向けの無料プランでも無制限で利用可能。

• 軽量化したい画像を選択する。
• 「TinyImage Compressor」のパネルを開く。
• パネルの上部メニューから、「Downsizer」を選択。
• 「Size Target」で軽量化するサイズを調整。（今回の例では200KB）
• 右上の「Export」から書き出し。
• 軽量化されたファイルがダウンロードされる。

例）

最初行った際にはうまくいったが、あたらめてスクショを撮りながら進めていると、「Export」ボタンがグレーアウトのままで書き出しができなかった。

プラグインが頻繁に更新がされているようなので、もしかしたらその影響なのかもしれない。

軽量化された画像。

下記は、うまくいったときの画像。200KBの設定をして書き出したところ、ほぼ想定通りの197KBと軽量化がされている。

この場合はCMYK化の場合と違い、フレームを作る必要がなかった。

また、上記のカラフルな色の画像ではなく元々白黒のペン画の画像だが、うまくいったいかなかったの原因に、色は関係ないと思われる。

Drawing： Norihisa Igawa

アニメーションにも対応している。

今回は見送ったが、「TinyImage Compressor」はアニメーションGIFやWebMに対応している。

その場合は、Figmaを使用するブラウザがChromeかBraveではければならないとのこと。

Figma 関連メモ。

• FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
• FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
• FigmaからWebPで書き出しす方法。Olive Pressの使い方
• Figma プラグインを削除する方法。追加も削除もシンプルに。
• Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。
• Figma 削除したファイルを復元したいとき。復元の方法。
• Material SymbolsをFigmaへ。インストールしてすぐに使える。
• Figmaのルーラー（定規）の出し方。表示方法がイラレとちょっと違う！
• Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
• Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。

• Figmaを日本語化。言語切り替えの使い方。再起動も不要。
• Figmaで検索・置換する方法。ショートカットからでOK。
• Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
• Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
• Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
• Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
• Figmaがダークモードに対応。背景色設定も簡単、目に優しい！

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。