当サイトのリンクには広告が含まれている場合があります

【AdobeXD】CCライブラリー使用でサイズ違いのバナーを量産する

【Adobe Xd】CCライブラリー使用でサイズ違いのバナーを量産する デザイン

デザイナーの皆さんは、バナーやSNS用のコンテンツをデザインする機会が多いと思います。大体はIllustratorやPhotoshopで制作している方が多いのではないでしょうか。

バナー制作でこんなことに困っていませんか?
  • サイズ違いのバナーを作るのが大変
  • アートボードからはみ出た、オブジェクトをトリミングするのが面倒くさい
  • 修正があったら、大量のバナーを一つ一つ直さなくちゃいけない。

私も、サイズ違いのアートボードをいくつも作り、IllustratorやPhotoshopでちまちまバナーを作っていました。修正なんか入ったら、それはもうバナーを一つ一つ修正しなくちゃいけなくて大変でした。

でも、そのちまちました作業が簡単に効率良く、出来たらいいと思いませんか?

実はそれ CCライブラリーを使って、AdobeXDで出来ちゃいます。今回は、同じ要素やデザインを使い回して、 XDでサイズ違いのバナーを量産する方法をご紹介します。

因みに、私は英語版のAdobe製品を使っているので、アプリケーション内の言語表記が英語になっている点だけ、ご了承くださいね。

XDの得意・不得意とは

XDはUI/UXデザイン用のアプリケーションなので、プロットコル用のデザインを制作するのに向いていますので、細かなデザイン・画像編集をすることには向いていません。

テキスト機能もありますが、パスの上に文字を配置することや、凝ったタイポグラフィーデザインはできません。

レイヤー機能もありますが、上に重ねるぐらいの単純なものです。

しかし、XDはとにかくファイルが軽いので作業がサクサクできます。アートボードからはみ出たオブジェクトの心配する必要は無く、勝手にトリミング表示されます。パーツさえ揃っていれば、あとはそれをコンポーネント登録してしまえば、繰り返し使えて編集も簡単なので、効率よく制作できます。

▶︎ AdobeXDを無料で始める

制作手順

凝ったベクターイラストや写真加工はXDでは出来ませんので、それぞれIllustratorやPhotoshopで制作します。

今回は、Illustratorで制作しました。バナーデザインのレイアウトを大体決め、パーツをCCライブラリーに登録します。

STEP1 パーツが多い場合は、フォルダーを作ってそこに登録した方が、分かりやすくて使いやすいです。ドラッグ&ドロップで簡単に登録できます。

バナーデザインのレイアウトを大体決め、パーツを制作したら、CCライブラリーに登録します。ドラッグ&ドロップで簡単に登録できます。
ライブラリーのフォルダー内に、アセットが登録できました。

STEP2 次にXDを起動します。XD内のライブラリーに、先ほどIllustratorで登録したアセットが入っているのが確認できます。

ライブラリーは共通して使えるので、XDでも、Illustratorで登録したアセットを使うことができます。

STEP3 初めに背景色を決めてから、アートボードにアセットをドラッグ&ドロップして、どんどん配置していきましょう。

アセットをドラッグ&ドロップで、アートボードに配置していく。

STEP4 アセットを配置し終わったら、これを基本のデザインとして使いまわしていくので、コンポーネントとして登録します。

アセットを配置し終わったら、これを基本のデザインとして使いまわしていくので、コンポーネントとして登録します。

STEP5 メインコンポーネントして登録されたものは、選択するとこのようにダイヤのマークが塗りつぶして表示されます。

メインコンポーネントして登録されたものは、選択するとこのようにダイヤのマークが塗りつぶして表示されます。

STEP6 このメインコンポーネントをアートボードごと複製して(Mac: option+ドラッグ、Win: alt+ドラッグ)、サイズ違いのバナーを作っていきます。メインコンポーネントを元に複製されたものをインスタンスと言います。

簡単に言うと、メインコンポーネントがで、インスタンスは子供です。見分け方は、インスタンスは選択するとダイヤのマークが白抜きで表示されます。

このメインコンポーネントをアートボードごと複製して(Mac: option+ドラッグ、Win: alt+ドラッグ)、サイズ違いのバナーを作っていきます。メインコンポーネントを元に複製されたものをインスタンスと呼びます。

STEP7 メインコンポーネントをそのまま複製しているので、バナーのサイズによって、パーツの大きさや配置の調整を行います。選択したいパーツをダブルクリックすると、選択できます。

メインコンポーネントをそのまま複製しているので、バナーのサイズによって、パーツの大きさや配置の調整を行います。選択したいパーツをダブルクリックすると、選択できます。

メインコンポーネントを元に、サイズ違いのバナーをいくつか制作してみました。次にメインコンポーネントを編集して、一括編集を行います。

STEP8 では、背景色と靴下の色の変更をしてみます。初めにメインコンポーネントの背景をダブルクリックして、塗りつぶしを選択して、色の変更をします。

背景色と靴下の色の変更をしてみます。初めにメインコンポーネントの背景をダブルクリックして、塗りつぶしを選択して、色の変更をします。

STEP9 次に靴下はCCライブラリーから引っ張ってきているので、Christmasのフォルダー内にある靴下を選択します。ダブルクリックすると、オリジナルファイルを編集できます。

靴下はCCライブラリーから引っ張ってきているので、Christmasのフォルダー内にある靴下を選択します。ダブルクリックすると、オリジナルファイルを編集できます。

STEP10 オリジナルファイルはIllustratorなので、自動的に靴下だけのファイルが起動されます。編集をして保存すると、CCライブラリーもアップデートされます。

オリジナルファイルはIllustratorなので、自動的に靴下だけのファイルが起動されます。編集をして保存すると、CCライブラリーもアップデートされます。

XDに戻ってみると、全てのバナー内容がアップデートされているのが分かります。

XDに戻ってみると、全てのバナー内容がアップデートされているのが分かります。

まとめ

このように、CCライブラリーXDのコンポーネントを組み合わせて使えば、効率よく簡単にサイズ違いのバナーを量産することができます。XDが苦手なことは、別のアプリで解決して使い分けすれば良いと思います。

XDの良いところ
  • 動作が軽くサクサク作業ができる
  • 視覚的に操作しやすい
  • デザインルールを統一しやすい
  • 共有がしやすい などなど

今まで、Illustrator・Photoshop単体でバナー製作をしていた方も、これを機にXDも一緒にアプリ同士クロスオーバーして使って、バナー製作の作業効率を更に上げてみてはいかがでしょうか。

XDはまだまだ進化中のアプリなので、機能がどんどんアップデートされて更に便利になっていくのではないかな、と期待しています。

Adobe CCコンプリートプランをお得に利用する方法

デジハリ Adobe マスターコース

Adobe CC のサブスク料って、高いなぁって思っちゃうんですよね。

Adobe Creative Cloud コンプリートプランは、通常価格で年間72,336円もします。しかし、Adobe公認スクールの デジハリONLINE が提供する「Adobeマスター講座」を受講すると、Adobeコンプリートプランが3万円以上もお得に使えちゃうんです。

どういうことかというと

Adobeマスターコース(Adobe CC コンプリートプラン1年間付き)の受講料が、
39,980円なので、実質上39,980円でAdobe CC コンプリートプランが使用できるのです!

この39,990円は通常購入版と使えるソフトや内容は一切変わらないAdobe CC1年分とオンライン講座の受講料、消費税までも含んでの値段です。

デジハリのオンライン講座(動画)が含まれていますので、新しく使ってみたいソフトの講座を受けたりとスキルアップも出来てお得です。

しかも、毎年利用できるので、通常価格で使っている人はこちらのコースがオススメです。

コメント