数年前まではWebデザインといえばPhotoshopやIllustratorといった専門的なソフトを使うのが主流でしたが、最近では、初心者でも使いやすい「Adobe XD」のシェアがどんどん伸びています。直感的でシンプルな操作性が魅力のAdobe XDですが、多少の事前知識が必要な機能も多く、まだまだ使いこなせていない方も多いのではないでしょうか？
そこで本記事では、覚えておけばWebデザインやUIデザインの作業効率がぐっと上がる6つの便利機能や、プロトタイプ作成に役立つ3つの機能を詳しく解説していきます。記事を読めばデザインや共有作業を短縮する方法が分かりますので、これからAdobe XDを極めていきたいと思っている方はぜひ目を通してみてください！
Adobe XDのUIデザイン作成に使える便利機能
作業効率を大幅に高めるリピートグリッドやアセット機能など、Webデザイン作成におけるAdobe XDの便利な機能を6つご紹介していきます。
AdobeXDのおすすめ機能(1)：リピートグリッド
リピートグリッドとは、選択したオブジェクトやグループをドラッグひとつで縦横に繰り返しコピー＆ペーストしてくれる機能です。複製されたブロック同士はリンクしており、ひとつのブロックに加えたデザインの変更点はすべてのブロックに反映されます。ブロックのデザインやテキストを個別に変えたい場合は、リピートグリッドをオフにするだけのかんたん操作で変更できるのもポイントです。リピートグリッド機能を使えば、単調で時間を取られてしまいがちなコンテンツの繰り返し作業を驚くほど早く終わらせることができます。
AdobeXDのおすすめ機能(2)：共通パーツのコンポーネント化
コンポーネント化とは、ボタンやナビゲーションなどの複数の要素をひとつのセットとして登録できる機能のことです。登録したコンポーネントはいつでも呼び出すことができ、加えた変更点はリンクするすべてのコンポーネントに反映されます。「カーソルをホバーしたときに赤色に変わる」などの動作もコンポート化できるため、一度作ったデザインを最大限に有効活用できる便利な機能です。コンポーネント化はリピートグリッドと同様に、覚えておけば面倒なデザイン変更のやり直し時間を大幅に短縮できます。
AdobeXDのおすすめ機能(3)：余白調整機能
余白調整機能とは、コンテンツ内部の余白の微調整や、Webページ全体との余白バランスを整える機能です。
マスターとなるパディング幅をコンポーネント化しておけば、テキストの長さが変わったときでも同じ余白バランスのボタンが複数作れます。「お申し込みはこちら」「60秒で無料登録」など、Webデザインにおいて修正指示が入ることが多いCTAラベルの作成に効果的です。また、要素をコピーして移動させた際にも、他のマージンと同じになった場合にガイドが表示されるなど、とても便利な機能が搭載されています。余白調整機能をうまく活用すれば、修正指示のたびに余白を微調整していた膨大な時間を別のクリエイティブな作業に使えるようになります。
AdobeXDのおすすめ機能(4)：パーツ固定機能
パーツ固定機能とは、ヘッダーやサイドバーなど任意のパーツを、画面をスクロールしたときも固定して表示する機能です。固定する際には留めておきたいブロックを選択し、「スクロール時に位置を固定」というチェックボックスをオンにします。パーツ固定したWebデザインはプレビュー画面で実際にスクロールさせながら確認できるため、クライアントにも視覚的にプレゼンしやすいことが特徴です。クリックひとつで即座にプレビューできるパーツ固定機能は、作業時間だけでなく打ち合わせもスムーズにしてくれるでしょう。
AdobeXDのおすすめ機能(5)：アセット登録機能
アセット登録機能とは、シンボルマークや画像などのさまざまな要素を登録しておき、好きなときに呼び出せる機能です。登録できるのはAdobe XDの中で作成したものだけでなく、PhotoshopやIllustratorでデザインを練り込んだデータもアセットとして追加できます。気に入ったデザインパーツを次々と登録できて使い勝手が良いため、つい登録数が増えてしまいますが、検索バーを使えばかんたんに探し出せるのもポイントです。登録したアセットはクラウドサーバーを通してチーム内で共有できますので、複数人での共同プロジェクトにも活躍します。
AdobeXDのおすすめ機能(6)：プロトタイプ機能
プロトタイプ機能とは、まるで完成したWebサイトのようにリアルに動作するダイナミックな試作デザインを作成できる機能です。アイコンクリック時にジャンプする場所をドラッグひとつで設定できるほか、アニメーションや画面偏移などの動きも細かく指定できます。作成したプロトタイプは即時にスマホやタブレットに共有できるため、こまめにユーザーの視線や操作を確認できることも大きな特長です。文章では説明しづらい動的なWebデザインでも、プロトタイプ機能を使えば視覚的にクライアントにアピールできます。
Adobe XDのプロトタイプ作成に使える便利機能
Adobe XDの目玉とも言えるプロトタイプ作成を、さらに効率化させる3つの便利機能について詳しく解説していきます。
AdobeXDのおすすめ機能(1)：コメント共有機能
コメント共有機能とは、プロジェクトを閲覧した人がいつでもコメントを残したり閲覧できる機能です。作成したプロジェクトはURLひとつで誰にでも共有でき、Adobe XDをインストールしていないPCやスマホでも、通常のブラウザから操作できます。そのため、手軽にデザイナーさんへフィードバックを送ることができ、迅速なコミュニケーションを実現可能です。共有用のURLはワンクリックで簡単に作れるほか、パスワードでロックできるのでセキュリティ対策も万全です。コメント共有機能を使えば外出時でもクライアントのコメントをチェックできるため、円滑なコミニュケーションが実現します。
AdobeXDのおすすめ機能(2)：自動アニメーションでの動作確認
自動アニメーションとは、複数のアートボードをドラッグでつなぐだけで簡単にアニメーションを作成できる機能です。なめらかなスライドショーやポップアップ、角度や色まで自由自在に変更でき、アニメーションが動く秒数まで細かく調整できます。自動アニメーションを駆使して作成したプロトタイプは視覚的に実際のブラウザ動作を簡単にプレビューできて便利です。
AdobeXDのおすすめ機能(3)：リアルタイムでプレビュー
Adobe XDのプレビュー機能は変更点がリアルタイムで更新されるため、実際の動作を確認しながらデザインを変更できます。プレビュー画面を複数の別ウインドウに表示することもできるので、いろいろなアイデアを試しながらスムーズに作業を進められます。モバイル用のプレビュー機能を使えばスマホやタブレットからも即座に閲覧できますので、実装前のデザインを試すのに最適です。
AdobeXDは痒いところに手が届く便利機能がたくさん
退屈なコピー＆ペースト作業をドラッグひとつで実行できるリピートグリッド機能をはじめ、Adobe XDは「こんな機能を待っていた！」と思える便利機能が多数搭載されています。アニメーションを駆使した高度なプロトタイプ作成も簡単にできますし、クライアントやチームと気軽にプロジェクトを共有できる機能も魅力的です。
比較的歴史の浅いAdobe XDは毎月のように精力的にアップデートされており、今後ますます魅力的な機能が追加されていくでしょう。今ならAdobe XDを7日間無料で試せるキャンペーンも実施中ですので、まずは気軽にダウンロードして機能を試してみてはいかがでしょうか？
