Adobe XD

少し前までは私、パワポを使ってワイヤーを作成していました。

紙向けのツールでWebの画面を作ることがどんなに馬鹿らしいか。
分かっちゃいるが、慣れたツールから離れるのは難しいものです。
1年や2年ではなく、10年以上も使ってきたのですから。。

しかし、ここ最近はAdobe XD(Adobe Experience Design CC(ベータ版))を使っています。
これでワイヤーが劇的に作りやすくなったばかりか、それ以上に大きな役割を担っています。

ワイヤーと言っても弊社の場合、枠だけを書くことは少なく、はじめから文章や図を入れたものを作成することが多い。そうするとパワポの一画面に入りきらなくなり、分割して書いていくことになります。エクセルなら一画面で書けますが、操作感がどうしても僕には馴染まない。かと言ってディレクターの僕にとってはPhotoshopやイラストレーターは頭の中身を則具現化するツールではない。やむなくパワポで画面を分割しながら書き込んでいました。

その点XDはPhotoshopやイラストレーターのように一画面で書くことができ、さらには画面サイズをweb画面に合わせて作ることができるので、フォントサイズや余白などもワイヤー段階で調整できてしまう。その点で、ワイヤー段階からデザインに近い状態に持っていくことも可能です。その上非常に軽く、操作感が素晴らしく良い。僕にとっては数年前、ガラケーからスマホに変えた時ぐらいの衝撃です。(例えがおかしいかな。。)

また、ちょっとした動き(モーダルなど)も再現できるので、コーディングに入る前にクライアントへ動作イメージを伝えることができてしまいます。以前からWEB制作においてもプロトタイプが重要と考えていましたが、それはhtmlでと考えていました。それがワイヤー段階で紙芝居できてしまうのが素晴らしいです。

話は変わりますが、XDを使うことになったきっかけは新卒デザイナーが使いはじめたこと。(新卒とは言え、学生時代からカチップに通っているので、一年以上経っていますが。)彼はもともといろいろなツールを試すのが好きで、これまで他にもいろいろと見せてくれましたが、その中でもこれは最高。社として導入を決めるに至りました。彼の最近の成長が目覚ましいのは、僕の指導力によるものかと自負していましたが笑、それだけではないようです。新しいものを吸収しようとするモチベーション、チャレンジ精神があることが一つでしょう。僕にも大いに刺激になっています。