AdobeCCコンプリートプランに含まれている「Adobe XD」。とはいえ、PhotoshopやIllustratorを使い慣れているWebデザイナーの中には、今イチ「メリットが分からない…」という方も多いようです。そこで本記事では、ワイヤーフレームやデザインカンプの作成時にこそ効果を発揮するAdobe XDの便利な機能についてご紹介します。
目次
AdobeXDの利用者から「ワイヤーフレームの作成時間が劇的に短縮できた！」「Photoshopよりも簡単でカンプがサクッと完成する！」といった好意的な感想が寄せられているのは、「リピートグリット機能」のお蔭といっても過言ではありません。
リピートグリットとはAdobeXDの代名詞とも言える機能で、特定のオブジェクトを複製しながら等間隔で並べて配置してくれるのが特徴です。そのため、ワイヤーフレームやカンプだけでなく、下記のように繰り返しエレメントを多用するWebサイトのデザイン作成時にも役立ちます。
▼繰り返しエレメントの一例
しかも、操作は繰り返したい要素を選択してドラッグするだけ！要素間のマージンを一カ所だけ設定すると全体に反映されるので、個別に指定する手間もかかりません。
AdobeXD用のプラグインが続々と開発されているもの、それだけユーザーが増えている証拠でしょう。
▼併用で利便性が向上するプラグイン
なお、ワイヤーフレームの作成ポイントについては下記の記事で詳しく解説しております。
Googleがモバイルファーストインデックスを全サイトへ拡大すると発表した通り、モバイル最適化がSEOにおいて重要であることは間違いありません。
ここで問題となるのが、デバイスごとに異なる画面サイズです。Photoshopなどを使用した場合、画面サイズごとにワイヤーフレームを作成したりデータのサイズを手動で調整したりと、かなりの手間がかかります。
その点、AdobeXDの「レスポンシブサイズ・リサイズ機能」ならアートボード内に画像やオブジェクトを配置しておくだけ！全てのデバイスに対して最適なサイズ・配置になるよう、画面サイズごとに比率などの相対関係を維持したまま自動的に調整してくれるのです。
オブジェクトの幅や高さ、マージンといった微妙なコントロールができる「手動モード」、端末ごとに構成を確認できる「デバイスプレビュー」も備えています。
ちなみに、モバイルファーストの仕様やGoogleの動向については下記の記事を参照して下さい。
クライアントにページ遷移を説明する際、リンク先の資料を個別に用意する手間が省けるのも、AdobeXDならではのメリットでしょう。
なぜなら、オブジェクトとアートボードをコネクタで連結できる「ページ遷移」が備わっているから！実際の使用感を伝える作業が画面上で完結するうえ、ページ内の遷移も可能です。
また、インタラクティブな要素を口頭や静止画だけで説明するのは簡単ではありません。その点、AdobeXDなら「ホバーボタン」や「ポップアップ」といった簡単な動きをシミュレーションできるので、より具体的なイメージが伝わります。
ワイヤーフレームやデザインカンプの作成にAdobeXDが選ばれている理由として、PhotoshopやIllustratorよりも優秀な「クラウド共有機能」が挙げられます。
クリック1つで公開用のURLが作成され、データの原本をクライアントやチームのメンバーと共有しながら同時に編集することができるのです。
▼データ共有のメリット
フォントや画像のアセットまで共有できるので、デザイナーとコーダーとのやり取りも快適になるはずです。
AdobeXD（Adobe Experience Design）は、UI／UXデザインからデータ共有までを一貫して実現できるアプリケーションツールとして誕生しました。特に、ワイヤーフレームやプロトタイプの制作に適しており、チームや複数拠点での共同作業にも向いています。AdobeXDには今回ご紹介した機能の他にも便利なツールが備わっていますので、興味がわいた方はチャレンジしてみてはいかがでしょうか。
受付時間：平日10:00~19:00(土・日・祝日を除く)
