blog

design

XDの便利な機能を使いこなそう!

今回はワイヤーフレームやWebデザイン作成に便利なXDの機能についてお話しさせていただきます。

「時短に使えそうな機能があることは知っているけど活用できていない…」
「今更初歩的な機能を人に聞くのはちょっと恥ずかしいかも…」
「今はPhotoshopやillustratorを使ってるけど、XDって実際どんなことができるんだろう?」

日常的にXDを使う方やこれから使いたいと考えている方必見!簡単で便利なXDの機能の一部をご紹介いたします!

ブログやニュース記事を一気に作成!リピートグリッド機能の使い方

ブログ記事一覧やニュース等、同じ要素がいくつも並んでいるワイヤーフレームやデザインを作成することってよくありますよね。
一つの記事をコピーしてはペースト、またコピーしてはペースト…なんて作業はもうしなくていいんです。
リピートグリッド機能を使ってパパっと簡単に作成してしまいましょう!

1.コピー元のオブジェクトを作成する

まずはコピー元になるオブジェクトを作成します。
ここまではいつも通りのやり方で普通に作成していただいて大丈夫です。

2.オブジェクトを選択した状態でリピートグリッドをクリック

オブジェクトを選択した状態で右のメニューのリピートグリッドをクリックします。
するとオブジェクトの周りに緑の破線が表示されますので、縦と横に伸ばしてみましょう。
コピー元のオブジェクトが複製されたものが表示されます。

3.余白を調整したり色を変えたり好きなようにカスタム

並んでいるオブジェクトの間の余白をクリックすると、変更可能な余白がピンクで表示され、任意の余白に設定できます。あとはタイトルや画像を変更したり自由にカスタムして完成です。

 

もちろんこういったタイプのニュース記事一覧も作成可能です。

 

文言の増減があっても崩れない!パディング機能の使い方

例えばXDでこういうボタンを作成したとき、文言の増減でデザインが崩れてしまうことってありますよね。

パディングを保ったまま作業できればなぁ…と思いますよね。XDなら簡単な操作でパディングを設定できます!

1.オブジェクトを作成する

まずはオブジェクトを作成します。
リピートグリッド機能の解説の時の同じように、ここまではいつも通りのやり方で普通に作成していただいて大丈夫です。

2.パディングを設定する

オブジェクトを選択しグループ化します。グループ化したオブジェクトを選択した状態で右のメニューのパディングにチェックを入れます。
現在のオブジェクトのパディングの数値が表示されるので、任意の数字を入力します。
今回は上下のパディングを15、左右のパディングを40にしたいので、数値を変更します。

3.文言を増やしたり減らしたりして動作を確認してみる

これでパディングが適用されているはずなので、ボタンの文言を増やしたり減らしたり改行したりして動作を確認してみてください。きちんとパディングが適用されていれば完成です!

4.応用編

パディング機能の応用でシンプルなテーブルを作成してみました。
テキストの量が多くなってもパディングを保ったまま綺麗に改行されます。一部手動での調整が必要となりますが、テキスト量の増減で崩れたテーブルを整える作業がとても楽になります。
パディング機能に慣れてきたら是非一度試してみてください。

 

共通パーツの変更も怖くない!コンポーネント機能の使い方

ワイヤーフレームやWebデザイン作成をしていると、共通で使用しているパーツや頻繁に使用するパーツが必ず出てくると思います。そのパーツの要素が変更になった時、どう対応していますか?
XDのコンポーネント機能を使えば複数のアートボードで使用している共通パーツを一括で変更することができます。

1.共通パーツをコンポーネント化する

まず共通で使用するパーツ(例:ヘッダー、フッター、ボタンデザイン、テーブル等)をコンポーネント化します。
今回はボタンデザインをコンポーネント化してみたいと思います。
コンポーネント化したいオブジェクトを選択し、Ctrl+Kを押します。すると画面左のドキュメントアセットのコンポーネントの欄に選択したオブジェクトが登録されます。登録されたオブジェクトは緑の罫線で囲われます。
このコンポーネント、よく見ると囲まれている緑色の罫線左上に塗りつぶされたひし形のマークがついていますね。これがメインコンポーネントの目印になります。

2.作成したコンポーネントを複製してメインコンポーネントの要素を変更してみる

先ほど作成したコンポーネントを複製してみます。複製は画面左のドキュメントアセットのコンポーネントをアートボードにドラッグ&ドロップでも良いし、親コンポーネントをコピー&ペーストしても良いし、どのやり方でも大丈夫です。
複製されたコンポーネントの左上を見てみましょう。先ほどのメインコンポーネントとは違い白いひし形のマークが表示されています。この白いひし形のマークがついたコンポーネントをインスタンスと呼びます。

 

メインコンポーネントとインスタンスを並べた状態で、試しにメインコンポーネントのボタンの色と文字の色を変更してみましょう。するとインスタンスにも同じ変更が適用されます。

 

この機能を上手く使えば後からの共通パーツの変更も怖くないですね!
実際にワイヤーフレームやWebデザイン作成でコンポーネントを使用する時は、メインコンポーネント用にコンポーネント専用のアートボードを作成し、複製したインスタンスをその他のアートボードで使用する等、分けると管理がしやすいです。
コンポーネントについてはこの他にも便利な機能がたくさんあります。今回のコンポーネントの紹介はかなり初歩的な部分ですので、コンポーネントをもっと使いこなしたい!という方は是非Adobe XDのコンポーネントについてのマニュアルをご確認ください。

 

まとめ

いかがでしたでしょうか。
今回はワイヤーフレームやWebデザイン作成に便利なXDの機能についてお話しさせていただきました。
紹介した機能はほんの一部で、XDにはもっと便利で時短に活用できる機能がたくさんあります。
XDは動作が軽くて同時編集もできるとても便利なツールです。また月に一回ほどのペースで機能が更新されていて、これからの進化にも期待できます。
この記事を見て少しでもXDに興味を持ったり、他のツールからの移行を検討する方が増えれば幸いです。