【広告代理店の時短術】WebP化・文言変更・比率展開の無料ツール「サムネイルメーカー」

広告代理店の制作担当やWebディレクター、インハウスでバナーを量産する担当者へ朗報です！

PhotoshopやFigmaで仕上げたはずなのに、納品直前になって「WebPで出してほしい」「ファイルサイズを〇〇KB以下に」「ABテスト用の差し替えパターンも」と追加の依頼が重なってくる。

筆者自身も、Illustratorでアートボードを横にずらりと並べて派生バナーを作ったり、書き出した画像を別の軽量化ツールに1枚ずつ読み込ませたり、同じ単純作業を何度も繰り返してきた一人です。

その「地味な後半戦」をブラウザで片付ける無料ツール「サムネイルメーカー」をリリースしました。

サムネイルメーカー

画像から複数のサイズのサムネイルを制作する無料ツール。縦型では「Youtube」「TikTok」のセーフエリアをプレビュ...

smarvee.com

Photoshopで仕上げた、そのあとの時間を侮れない

デザイナーが本番のバナーを仕上げ、PSDを保存し、一度作業を閉じる。ここからが、制作担当や進行担当にとって本当の山場だったりするのではないでしょうか。

• 「クライアントからWebPでの納品指定が来ました」
• 「広告出稿側からファイルサイズ制限の連絡が」
• 「キャッチコピーだけ変えたパターンも並行で出しておいてください」
• 「SNS用に、同じ絵面でヘッダーとプロフィール画像も」

本番のクオリティを詰める時間より、この「地味な後半戦」に取られる時間のほうが長かった、という記憶はバナー制作の現場を経験した方にとっては「あるある」ではないでしょうか。

毎回Adobeのソフトを立ち上げ直し、書き出し設定を変え、別名保存して、さらに別の軽量化ツールに読み込ませて……と同じ作業を繰り返していると、1時間があっという間に消えていきます。しかも、その作業は毎回ほとんど同じ内容なのです。

「サムネイルメーカー」は画像処理のサポートツール

「サムネイルメーカー」は、Photoshop・Figma・Illustratorの役割は変わりません。デザインの本番はそこでやるべきですし、サイズによってレイアウトを根本から組み替える必要があるバナー、例えば縦長と横長で写真と文字の配置を大きく変えるようなケースなどは、これまで通り本番ソフトで作るのが正解です。

ここでお話するのは、あくまでその「後」の話。本番のデザインは手元にある前提で、そこから派生する納品・軽量化・微調整だけを切り出して、ブラウザで片付けるという棲み分けのご提案と考えてください。

ブラウザで片付く、3つの”後半戦”作業

今回Smarveeがリリースした無料ツール「サムネイルメーカー」は、地味なアップデートを繰り返し、ようやくバナー制作の後半戦を引き取るためことができる機能が一通り揃いました。名前に”サムネ”とありますが、広告バナーやSNS用画像にもそのまま使えます。代表的な3つの使い方をご紹介します。

WebP化・軽量化納品

PNG・JPEG・WebPのいずれも、書き出し時に品質スライダー（10〜100%）で圧縮率を調整できます。書き出し前にファイルサイズの目安が常時表示されるため、「〇〇KB以下」というサイズ指定にも、スライダーを動かしながら合わせるだけで対応できる流れです。透過が必要な場合はPNGかWebPを、通常の写真系はJPEGを、と用途で選び分けるとよいでしょう。

書き出してから別の軽量化ツールに1枚ずつ読み込ませて、また書き出して…、というあの単純作業をツールを行き来せずに1箇所で終わらせられる。それだけで、納品直前の段取りから30分〜1時間が消えるはずです。

テキスト・色だけ差し替えたパターン違い

ABテストは、やり始めると地味に大変です。文言を1箇所だけ変える、グラフィックを1箇所だけ差し替える。たったそれだけのテストなのに、本番ファイルを開き直して、該当レイヤーを選んで、別名保存して、書き出して……と、毎回同じ手順をなぞることになってしまいます。回数を重ねるとかなりの時間になる作業です。

そういう「ちょっとした差し替え用バナー」であれば、本番のデザインファイルは触らず、ブラウザ上で済ませるほうが速いケースが多いです。サムネイルメーカーは、テキストや図形をプレビュー上で直接ドラッグして動かせ、8方向のハンドルでリサイズ、マウスホイールでもサイズ変更ができます。中心や端、他の要素にスッと吸着するスナップガイドも効きます。

Ctrl+ZのUndoとCtrl+YのRedoも揃っているので、「やっぱりさっきのコピーに戻して」という指示にも軽く応えられます。使った色は各カラーピッカーの直下にある「＋保存」ボタンでパレットに登録しておけば、他のパターンを作るときにそのまま呼び出せる、という流れです。

同一レイアウトの比率違い展開

「SNSバナー、ヘッダー、プロフィール画像、3種類とも同じ絵面で出してほしい」。こうした依頼は、同じ構図を横長・縦長・正方形で並行して仕上げるタイプの作業で、筆者自身もIllustratorで横にアートボードをずらりと並べて、よくやっていたものです。サムネイルメーカーは最大4つのキャンバスを画面上に同時に並べ、同じ素材を使いながら別々の比率で書き出せます。アートボードを並べて行き来する感覚を、そのままブラウザに持ち込んだイメージと考えてください。

もちろん、サイズごとにレイアウトを根本から組み直す必要があるバナーは、本番ソフトでの制作が向いています。ここで想定しているのは、「同じデザインを複数の比率で展開する」ケースに限ります。

ほかにも、地味に効く小さな機能

メインの3本柱とは別に、作業中にじわじわと効いてくる機能もいくつか入っています。

• JSON形式で作業を保存・復元できる：途中で手を止めても、プロジェクトファイル（JSON）として書き出しておけば、翌日別のPCで開き直して続きから再開できます。チームメンバーへ受け渡す際にも、同じ手順で済むのは地味に助かるポイントです。ブラウザ上で閉じると作業が消えるのでは、という不安を持たなくてよい設計と言えます。
• パワーポイントのような感覚で要素を動かせる：テキストや図形、画像はマウスでつかんで動かすだけ。角をドラッグすればサイズが変わり、マウスホイールでも拡大縮小ができます。専用ソフトの独特な癖を覚えなくてよいというのは、「たまに触る担当者」にこそ効いてくるポイントではないでしょうか。
• 画像をキャンバスにぴったり収めるボタン：画像を手動で配置すると、どうしても1pxや数pxの隙間が端に残って気持ち悪い、という経験はないでしょうか。ボタンひとつで画像がキャンバスの端に吸着し、あの微妙なストレスから解放されます。

例えば、日曜の夜に鳴るSlack

例えば、運用型広告を多く扱う広告代理店で、クライアントのキャンペーン用バナーを金曜の夕方に仕上げたとしましょう。月曜の朝一で納品、と合意していたはずが、日曜の夜にクライアントから「WebPでも欲しい」「プロモ用にタイトル違いを2パターン追加で」「Instagramのストーリーズ用に縦長も」というメッセージが届く。

本番のPSDはもう保存済み。ここからPhotoshopを立ち上げ直していると、休日が一本まるごと溶けていきかねません。こんなとき、デザインファイル自体を触らずに、ブラウザで手元の書き出し画像を開き、文言だけ差し替え、軽量化して、縦長キャンバスにも同じ素材を流し込んで仕上げる。そういう”逃げ道”がもう1本あるだけで、月曜朝に自分が立っている場所はずいぶん変わってくるのではないかと思います。

「サムネイルメーカー」が、制作後半の段取りを変える

サムネイルメーカーは、制作ツールを置き換えるものではありません。本番のデザインはこれまで通り、ただ納品直前の雑用だけをブラウザで片付ける、それだけのツールです。もとはといえば、筆者自身が「同じ単純作業を何度も繰り返すのはもう嫌だ」と思って少しずつ機能を足してきたもので、今回のリニューアルでようやく人に勧められる形になりました。無料で使え、データは手元のブラウザに残ります。制作中にもう1つのタブとして開いておく、くらいの気軽な使い方で充分機能してくれるはずです。

サムネイルメーカー

画像から複数のサイズのサムネイルを制作する無料ツール。縦型では「Youtube」「TikTok」のセーフエリアをプレビュ...

smarvee.com

よくある質問（FAQ）