前回に引き続き、AdobeXDでバナーを作っていきます。
前回の記事はこちら
画像に載せたテキストが見辛かったため、
白文字+黒文字にしました。また目立たせたい部分に色を入れました。
![](https://kinukog.com/wp-content/uploads/2018/12/14b1a0c0a2ef7ec4f2ac2f9d804ec775-1024x616.png)
とりあえずこれで1つのバナーは完成です!
ここからはバナーを複数パターン作る時の方法を紹介します。
まず、先ほど作ったバナーをすべて選択し、1つのグループにします。
「command+G」もしくは右クリック「グループ化」でグループに変換できます。
![](https://kinukog.com/wp-content/uploads/2018/12/6a74cc31240b31b7d34ba6142d0ae139-1024x641.png)
バナーの複製には『リピートグリッド』という機能を使っていきます。
『リピートグリッド』をクリックすると緑の枠が出てくるので、
クリックしたままびよーんと右に伸ばします。
すると以下のように同じものが複製されます。
![](https://kinukog.com/wp-content/uploads/2018/12/86f505a60a5b77ef25a5c876d858abe6-1024x640.png)
リピートグリッドで複製した後は、右上の「グリッドをグループ解除」を押します。
解除するとバナーそれぞれを選択することができます。
![](https://kinukog.com/wp-content/uploads/2018/12/559f109cbe9699ed722e19ee60858477-1024x639.png)
また上記のようにグループ化解除をすることで、
それぞれのテキストや画像などの編集を行うことができます。
今回は2パターンのバナーを作ってみました。
作ったバナーにメモ書きとしてテキストを残せるので、振り返りも楽ですね。
![](https://kinukog.com/wp-content/uploads/2018/12/d9e9a32b21dacb09b7eedace82a92d11-e1543740571555-1024x719.png)
作ったバナーを書き出すために、再度グループ化を行います。
![](https://kinukog.com/wp-content/uploads/2018/12/8a8f7844beb58640923f04db4e3495fe-1024x640.png)
グループ化できたら、書き出すバナーを選択し、「書き出し」を行います。
![](https://kinukog.com/wp-content/uploads/2018/12/6c1f2840ca41367b23e2d204384aab14-1024x640.png)
自分がわかりやすい所に保存できたら完了です。
できたバナー
![](https://kinukog.com/wp-content/uploads/2018/12/100yen_banner-300x250.png)
![](https://kinukog.com/wp-content/uploads/2018/12/manzoku_banner-300x250.png)
どっちがよりクリックされるんですかね〜
まとめ
デザインのセンスはやはり無いですが、
初心者でも簡単にバナーを作ることができました。
XDの良いところは、
リピートグリッドで簡単に複製できてAパターン/Bパターンが容易に作れるところですね。
広告面でのA/Bテストが加速しそうです。
今後ももっと使えるように勉強していきたいですね。
参考になる記事
- そもそもXDとは?
- AdobeXDでWebサイト制作
https://liginc.co.jp/284436
- UI/UXとは?
https://ferret-plus.com/655
コメントを残す