AdobeXDで作業効率UP！ワイヤーフレームやデザインカンプに最適なメリットとは？

AdobeCCコンプリートプランに含まれている「Adobe XD」。とはいえ、PhotoshopやIllustratorを使い慣れているWebデザイナーの中には、今イチ「メリットが分からない…」という方も多いようです。そこで本記事では、ワイヤーフレームやデザインカンプの作成時にこそ効果を発揮するAdobe XDの便利な機能についてご紹介します。

「リピートグリッド」で作業効率UP！同じ要素を並べたい時に最適

AdobeXDの利用者から「ワイヤーフレームの作成時間が劇的に短縮できた！」「Photoshopよりも簡単でカンプがサクッと完成する！」といった好意的な感想が寄せられているのは、「リピートグリット機能」のお蔭といっても過言ではありません。

リピートグリットとはAdobeXDの代名詞とも言える機能で、特定のオブジェクトを複製しながら等間隔で並べて配置してくれるのが特徴です。そのため、ワイヤーフレームやカンプだけでなく、下記のように繰り返しエレメントを多用するWebサイトのデザイン作成時にも役立ちます。

▼繰り返しエレメントの一例

• 横並びに配置する要素：グローバルナビゲーション／ブログカードなど
• 縦並びに配置する要素：更新情報／ピックアップコラム／お知らせ一覧など

しかも、操作は繰り返したい要素を選択してドラッグするだけ！要素間のマージンを一カ所だけ設定すると全体に反映されるので、個別に指定する手間もかかりません。

AdobeXD用のプラグインが続々と開発されているもの、それだけユーザーが増えている証拠でしょう。

▼併用で利便性が向上するプラグイン

• Repeat Grid Fitter：計算しなくても最後尾の余白までピッタリ合わせてくれて、アートボードのサイズにもフィットする
• Google Sheets：Googleスプレットシートから直接テキストや画像を読み込んで、まとめて置換してくれる

なお、ワイヤーフレームの作成ポイントについては下記の記事で詳しく解説しております。

「レスポンシブサイズ・リサイズ機能」で画像・配置の調整が不要！

Googleがモバイルファーストインデックスを全サイトへ拡大すると発表した通り、モバイル最適化がSEOにおいて重要であることは間違いありません。

ここで問題となるのが、デバイスごとに異なる画面サイズです。Photoshopなどを使用した場合、画面サイズごとにワイヤーフレームを作成したりデータのサイズを手動で調整したりと、かなりの手間がかかります。

その点、AdobeXDの「レスポンシブサイズ・リサイズ機能」ならアートボード内に画像やオブジェクトを配置しておくだけ！全てのデバイスに対して最適なサイズ・配置になるよう、画面サイズごとに比率などの相対関係を維持したまま自動的に調整してくれるのです。

オブジェクトの幅や高さ、マージンといった微妙なコントロールができる「手動モード」、端末ごとに構成を確認できる「デバイスプレビュー」も備えています。

ちなみに、モバイルファーストの仕様やGoogleの動向については下記の記事を参照して下さい。

使用感が伝わる「ページ遷移」！ホバーの動きも再現できる

クライアントにページ遷移を説明する際、リンク先の資料を個別に用意する手間が省けるのも、AdobeXDならではのメリットでしょう。

なぜなら、オブジェクトとアートボードをコネクタで連結できる「ページ遷移」が備わっているから！実際の使用感を伝える作業が画面上で完結するうえ、ページ内の遷移も可能です。

また、インタラクティブな要素を口頭や静止画だけで説明するのは簡単ではありません。その点、AdobeXDなら「ホバーボタン」や「ポップアップ」といった簡単な動きをシミュレーションできるので、より具体的なイメージが伝わります。

データをURLで共有！コーダーとのやりとりも快適

ワイヤーフレームやデザインカンプの作成にAdobeXDが選ばれている理由として、PhotoshopやIllustratorよりも優秀な「クラウド共有機能」が挙げられます。

クリック1つで公開用のURLが作成され、データの原本をクライアントやチームのメンバーと共有しながら同時に編集することができるのです。

▼データ共有のメリット

• 同じドキュメントに対し、複数のメンバーで同時に作業ができる
• 修正の指示など、ピンポイントでコメントが書き込める
• 双方向で使えるコメント機能によって、素早い修正依頼やフィードバックが可能
• リンク更新によって修正内容が反映され、常に最新のデータが確認できる
• パスワードによってセキュリティの管理ができる

フォントや画像のアセットまで共有できるので、デザイナーとコーダーとのやり取りも快適になるはずです。

まとめ

AdobeXD（Adobe Experience Design）は、UI／UXデザインからデータ共有までを一貫して実現できるアプリケーションツールとして誕生しました。特に、ワイヤーフレームやプロトタイプの制作に適しており、チームや複数拠点での共同作業にも向いています。AdobeXDには今回ご紹介した機能の他にも便利なツールが備わっていますので、興味がわいた方はチャレンジしてみてはいかがでしょうか。