ラクチン！デザイン大量作成が叶う！XD活用術

2022年9月27日 20:37

⏳サクッと５分以内で読み終わる内容です

【目次】
最初に
💡記事でわかること
😎どんな人におすすめ？
1️⃣おすすめ機能
　(1)こんな時におすすめ
　(2)手順
2️⃣おすすめ機能
　(1)こんな時におすすめ
　(2)手順
最後に

こんにちは！ネクストビートの新卒デザイナーのオイカワです！

私が担当している保育士専門の転職支援サービス「保育士バンク！」では、マーケ部門と密に連携し、都道府県にローカライズした広告バナーを大量に作成し運用→数日後には別のデザインに切り替えて運用…を繰り返しPDCAを回していました。
特に時間がかかる作業として、都道府県や市区町村名を手打ちで書き換える作業がありました。。。
これは効率的ではないと思い、何か時短で大量作成できる方法はないかと考えたところ、業務でよく使用しているAdobe XDの機能が使えるのでは！？と閃きました。
デザイナーから提案したところ、作成するバナーの量は変わらないのに、作業時間2時間→30分に短縮できました✨

その結果、バナー作成のスピードが爆上がりし、今まで以上に高速でPDCAを回転できるようになり、デザインのストックを作れる余裕が生まれました。

XDはスマホやWEBなどのUI画面を作成する際に使用することが一般的かもしれませんが、プラグインを活用することでバナーや印刷物の作成に応用でき、さらに効率化が期待できるんです！

この記事では、UIタスク以外でも活用できるXD活用術とそれを叶えるプラグインを実例を用いて紹介したいと思います！

💡記事でわかること

・テキスト情報を一括変更する方法
・バナーを大量に複製する方法
・ファイル名を規則的に変更する方法

😎どんな人におすすめ？

・XDの操作効率を上げたい人
・大量のバナーを爆速で複製したい人
・可変テキストを1つ1つ手打ちで変えている人（都道府県や日時などの情報）

1️⃣おすすめ機能： Google sheets

(1)こんな時におすすめ
・デザインそのまま、テキスト情報をそれぞれ変えたいとき
・時短でバナーを大量複製したいとき

(2)手順
〜デザイン準備編〜
　1：デザインを作成する（作成ツールはなんでもOK）
　2：可変する情報のテキスト要素を削除し、書き出しXD上に配置する。
以降、テンプレートと呼びます。

🚨書き出しファイルは？
基本的にPNGで問題ないですが、サイスが大きい場合はJPEGで書き出すとXD上での操作が重くなりにくいです。サンプル画像はPNGで、画像サイズは1080x1080です。目安のご参考までに！複製枚数が50枚になってから操作が徐々に重くなりました。

〜スプレッドシート準備編〜
　1：GoogleスプレッドシートにXDと連動させるテキストは必ず1行目に、2行目以降に可変テキストを記入する。
　2：ファイル→ダウンロード→カンマ区切り形式(.csv)
　3：フォルダーにダウンロードされていることを確認

【ダウンロード前のチェックリスト】
✅文字サイズ、フォント、同じですか？
✅太字、斜線、取り消し線はないですか？
✅セルの結合はないですか？

🚨XDと連動させるテキスト
例）札幌◯◯
※弊社では、マーケと定めた名称で、北海道エリアを「札幌」として共通認識をとっています。
※「札幌◯◯」の”◯◯”は可変テキストの4文字に揃える形で文字数を補完しています。（XDの反映）
可変テキスト
例）「数字」の場合：帯広市、釧路市、石狩市…

〜XD編〜
　1：XDのプラグインから「Google sheets」をダウンロード