ラクチン!デザイン大量作成が叶う!XD活用術
⏳サクッと5分以内で読み終わる内容です
こんにちは!ネクストビートの新卒デザイナーのオイカワです!
私が担当している保育士専門の転職支援サービス「保育士バンク!」では、マーケ部門と密に連携し、都道府県にローカライズした広告バナーを大量に作成し運用→数日後には別のデザインに切り替えて運用…を繰り返しPDCAを回していました。
特に時間がかかる作業として、都道府県や市区町村名を手打ちで書き換える作業がありました。。。
これは効率的ではないと思い、何か時短で大量作成できる方法はないかと考えたところ、業務でよく使用しているAdobe XDの機能が使えるのでは!?と閃きました。
デザイナーから提案したところ、作成するバナーの量は変わらないのに、作業時間2時間→30分に短縮できました✨
その結果、バナー作成のスピードが爆上がりし、今まで以上に高速でPDCAを回転できるようになり、デザインのストックを作れる余裕が生まれました。
XDはスマホやWEBなどのUI画面を作成する際に使用することが一般的かもしれませんが、プラグインを活用することでバナーや印刷物の作成に応用でき、さらに効率化が期待できるんです!
この記事では、UIタスク以外でも活用できるXD活用術とそれを叶えるプラグインを実例を用いて紹介したいと思います!
💡記事でわかること
・テキスト情報を一括変更する方法
・バナーを大量に複製する方法
・ファイル名を規則的に変更する方法
😎どんな人におすすめ?
・XDの操作効率を上げたい人
・大量のバナーを爆速で複製したい人
・可変テキストを1つ1つ手打ちで変えている人(都道府県や日時などの情報)
1️⃣おすすめ機能 : Google sheets
(1)こんな時におすすめ
・デザインそのまま、テキスト情報をそれぞれ変えたいとき
・時短でバナーを大量複製したいとき
(2)手順
〜デザイン準備編〜
1:デザインを作成する(作成ツールはなんでもOK)
2:可変する情報のテキスト要素を削除し、書き出しXD上に配置する。
以降、テンプレートと呼びます。
〜スプレッドシート準備編〜
1:GoogleスプレッドシートにXDと連動させるテキストは必ず1行目に、2行目以降に可変テキストを記入する。
2:ファイル→ダウンロード→カンマ区切り形式(.csv)
3:フォルダーにダウンロードされていることを確認
〜XD編〜
1:XDのプラグインから「Google sheets」をダウンロード
2:XDに画像を置き、XDと連動させるテキスト(札幌◯◯)と記載したテキストボックスを配置し、画像とテキストボックスをグループ化をする
3:必要な枚数に応じて「リピートグリット機能」で複製→「リピートグリットを解除」を忘れずに押下
4:Shiftを押しながら、情報を適応する順番にクリックして選択された状態にする
5:XDのプラグインから「Google Sheets」を開き、「Up load CSV」→「Import」→「Apply」
6:完了🎉 「XDと連動させるテキスト:札幌◯◯」→「可変テキスト:市名」に変更されていること確認してください!
2️⃣おすすめ機能 :Rename it
(1)こんな時におすすめ
・データ名を規則的に時短に変更したい(数字順、固定名の設定)
・データ名を管理しやすくしたい
(2)手順
〜デザイン準備編〜
1:XDのプラグインから「Google sheets」をダウンロード
2:適応させたい順にShiftを押しながら選択する
3:Renameit を起動し、命名順にKEYWORDSから要素を選択する。Name内の要素と要素の間に「_」や「x」を追加してOK。
今回は「1_札幌_1080x1080」と命名設定したいので、「❶_❷_❸x❹」の順番で選択し「_」「x」を要素の間に追加し「❶_❷_❸x❹」に設定。
4:完了🎉 レイヤー名が変更されていることを確認してください!設定したレイヤー名で書き出されます!
最後に
皆さんの業務の改善につながるきっかけになれば幸いです!
少しでも役に立った!参考にしよう!と思ったらいいねを押していただけると励みになります💪
毎週木曜日20時より、バーテンダーが作るお酒を楽しみながら気軽に社員と交流できる「Crew's bar」が開催されています!
少しでもネクストビートやデザイン業務が気になりましたら、まずは気軽にお話ししましょう🎉
ご参加希望の方は下記からお申し込みください!
この記事が気に入ったらサポートをしてみませんか?