![見出し画像](https://assets.st-note.com/production/uploads/images/86749229/rectangle_large_type_2_6a8e9007950257ee99c7db25bcbee42b.png?width=800)
ラクチン!デザイン大量作成が叶う!XD活用術
⏳サクッと5分以内で読み終わる内容です
![](https://assets.st-note.com/img/1664189986547-0S5Xa4Zmb6.png?width=800)
【目次】
最初に
💡記事でわかること
😎どんな人におすすめ?
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上に配置する。
以降、テンプレートと呼びます。
![](https://assets.st-note.com/img/1664191267701-XFZ6NeLBHO.png?width=800)
🚨書き出しファイルは?
基本的にPNGで問題ないですが、サイスが大きい場合はJPEGで書き出すとXD上での操作が重くなりにくいです。サンプル画像はPNGで、画像サイズは1080x1080です。目安のご参考までに!複製枚数が50枚になってから操作が徐々に重くなりました。
〜スプレッドシート準備編〜
1:GoogleスプレッドシートにXDと連動させるテキストは必ず1行目に、2行目以降に可変テキストを記入する。
2:ファイル→ダウンロード→カンマ区切り形式(.csv)
3:フォルダーにダウンロードされていることを確認
![](https://assets.st-note.com/img/1662984222227-gBbJH7Cwbi.png?width=800)
✅文字サイズ、フォント、同じですか?
✅太字、斜線、取り消し線はないですか?
✅セルの結合はないですか?
🚨XDと連動させるテキスト
例)札幌◯◯
※弊社では、マーケと定めた名称で、北海道エリアを「札幌」として共通認識をとっています。
※「札幌◯◯」の”◯◯”は可変テキストの4文字に揃える形で文字数を補完しています。(XDの反映)
可変テキスト
例)「数字」の場合:帯広市、釧路市、石狩市…
〜XD編〜
1:XDのプラグインから「Google sheets」をダウンロード
![](https://assets.st-note.com/img/1662985794858-ODH45sFJwd.png?width=800)
2:XDに画像を置き、XDと連動させるテキスト(札幌◯◯)と記載したテキストボックスを配置し、画像とテキストボックスをグループ化をする
![](https://assets.st-note.com/img/1662985600281-dtqIkxt39u.png?width=800)
3:必要な枚数に応じて「リピートグリット機能」で複製→「リピートグリットを解除」を忘れずに押下
![](https://assets.st-note.com/img/1662986062119-13WNy2ISIH.png?width=800)
4:Shiftを押しながら、情報を適応する順番にクリックして選択された状態にする
![](https://assets.st-note.com/img/1662986198153-F11O8UoOV1.png?width=800)
🚨なぜ順番が大事?
選択順=スプレッドシートの上から順番(番号順)になります。
例では見にくいですが、テンプレート画像の左にあるグレーの長方形に番号をふっており、選択ミスが発生しないように番号の目印にしています。
※2を参照
5:XDのプラグインから「Google Sheets」を開き、「Up load CSV」→「Import」→「Apply」
![](https://assets.st-note.com/img/1662985331989-1O69BbnELY.png?width=800)
6:完了🎉 「XDと連動させるテキスト:札幌◯◯」→「可変テキスト:市名」に変更されていること確認してください!
![](https://assets.st-note.com/img/1662986186658-I2SwGQlhSo.png?width=800)
2️⃣おすすめ機能 :Rename it
(1)こんな時におすすめ
・データ名を規則的に時短に変更したい(数字順、固定名の設定)
・データ名を管理しやすくしたい
(2)手順
〜デザイン準備編〜
1:XDのプラグインから「Google sheets」をダウンロード
![](https://assets.st-note.com/img/1662986702884-l4fvt23vYv.png?width=800)
2:適応させたい順にShiftを押しながら選択する
![](https://assets.st-note.com/img/1662987082517-tuVVkmBXOW.png?width=800)
3:Renameit を起動し、命名順にKEYWORDSから要素を選択する。Name内の要素と要素の間に「_」や「x」を追加してOK。
今回は「1_札幌_1080x1080」と命名設定したいので、「❶_❷_❸x❹」の順番で選択し「_」「x」を要素の間に追加し「❶_❷_❸x❹」に設定。
![](https://assets.st-note.com/img/1662987158352-mvi9tf5rTo.png?width=800)
❷固定名(基本的には1枚目のレイヤー名)
❸横幅
❹縦幅
🚨固定名を直接一括設定する
「Name内」に記入した内容がそのまま反映されます。
例)「❶_東北_❸x❹」→「1_東北_1080x1080」「2_東北_1080x1080」
…
4:完了🎉 レイヤー名が変更されていることを確認してください!設定したレイヤー名で書き出されます!
![](https://assets.st-note.com/img/1662987853921-3ClQEW4nBn.png?width=800)
最後に
皆さんの業務の改善につながるきっかけになれば幸いです!
少しでも役に立った!参考にしよう!と思ったらいいねを押していただけると励みになります💪
毎週木曜日20時より、バーテンダーが作るお酒を楽しみながら気軽に社員と交流できる「Crew's bar」が開催されています!
少しでもネクストビートやデザイン業務が気になりましたら、まずは気軽にお話ししましょう🎉
ご参加希望の方は下記からお申し込みください!
この記事が気に入ったらサポートをしてみませんか?