STUDY

ワイヤーフレーム作成の爆速化「Adobe XD」のここがすごい!

こんにちは。

ARCHETYPのイベント・便利ツール番長の町田です。
(形容詞が毎回増えていくスタイルでお送りしております)

さて今回のブログは前回の便利ツールの紹介に引き続き、ツールのご紹介をしたいと思います。

突然ですが、ワイヤーフレーム作成の際に皆さんはどんなツールを使いますか?

一般的に使われているツールは

  • ・Microsoft PowerPoint
  • ・Microsoft Excel
  • ・Illustrator
  • ・Photoshop
  • ・Sketch

などが挙げられると思いますが、今回ご紹介するツールは「Adobe XD」というツールです。

今までワイヤーフレーム作成のフローとしては手書き→パワーポイントの流れでしたが、手書きをパワーポイントに起こす作業にどうしても時間がかかってしまうという問題を抱えていました。

そんな中、ある担当案件で情報設計からワイヤーフレーム(コンテンツ制作や原稿含む)を同時に進行する案件を担当する機会がありました。

その際にもいつもと同様にパワーポイントでワイヤーフレームを作成しようとしていましたが、手書き→パワーポイントというフローで生じるタイムラグに限界を感じ、遂にプロトタイピングツールを導入しようという決断をしました。

そこで出会ったのが「Adobe XD」です。

私はデザイナー経由型ディレクターなのですが、「Adobe XD」を使う事で見た目が綺麗なワイヤーフレームの作成が爆速化しました。

パワーポイントでワイヤーフレームを作ると、どうしても見た目を綺麗に作ることに時間がかかってしまったり、縦に長いページを作る際にページ分割をしなければならないなど悩みがつきませんでした。しかし、「Adobe XD」を使うようになり、このような悩みが解消されるようになりました。

私が思う「Adobe XD」をイヤーフレーム作成ツールに使うメリットはこちらです。

・ピタッと揃って気持ちいい

デザイナー経由型ディレクターの私はワイヤーにも見た目の綺麗さを求めてしまいがちなのですが、
そんな期待に応えてくれるのが「Adobe XD」です。

出典元:全員攻撃型デザインのススメ 〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第2回】今すぐパワポとサヨナラできる?! Adobe XDの便利機能5つ

上下左右の余白がガイドとして数値表示されたり、「Adobe Illustrator」や「Adobe Photoshop」のショートカットや概念がそのまま横展開できたり、アートボードをまたいでコピー&ペーストした際に同位置でペーストされることだったり、綺麗に作ろうと意識せずとも余白を揃えているだけで勝手に綺麗なワイヤーフレームが出来上がります。

・繰り返しで楽チン

サイトでよく見るお知らせやテーブルなど定型があるコンテンツは同じような内容が繰り返されますが、パワーポイントでは繰り返し要素に一つでも修正が入ると全てに一つ一つ修正を反映させなければならなかったり、全てのページで繰り返し使うようなヘッダーやフッター、またボタンなどの素材を登録しておけたらなぁと思っていました。

ここでも期待に応えてくれるのが「Adobe XD」です。



出典元:全員攻撃型デザインのススメ 〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第2回】今すぐパワポとサヨナラできる?! Adobe XDの便利機能5つ

リピートグリッドと呼ばれる機能で、繰り返し要素を作成する事ができます。繰り返し元を修正すると全体の要素へ一括で反映するようになっています。

また、シンボルという定型要素を登録しておく機能があり、ドラックアンドドロップで定型要素をページには配置する事ができます。

・書き出し形式もお任せ

社内に展開する際には全ページがpdfでまとまっていて欲しいけど、クライアントに提出する際にはより詳細な説明を追記する必要があるので1ページずつ書き出したい。

そうです。ここでも期待に応えてくれます「Adobe XD」

004

「Adobe XD」の書き出し形式としてはpng/svg/pdf/jpgがあり、webやiOSなどのデバイスによって書き出し倍率をコントロールし、用途によって使い分ける事が可能です。

また、ショートカットで一瞬書き出しできる点も◎。


いかがでしたでしょうか!?

ワイヤーフレーム作成の爆速化「Adobe XD」のここがすごい!

という題名の通り勢いで書いたブログでしたが、
少しでも「Adobe XD」の良さを伝えらたら本望です。

今後は「Adobe XD」をプロトタイピングツールやフローチャートとしてもどんどん使っていきたいと思っています!

またこのブログでも記事を書きたいと思います。

ワイヤーフレームでお困りの方は、是非一度「Adobe XD」の利用を検討されてみてはいかがでしょうか。

最後までお読みいただきありがとうございました!

ARCHETYP 町田