webデザイナーがAdobe XDを使いこなしたい #1

皆さんこんにちは!　webデザイナーのハナフサです。

webデザイナーとしてまだまだ未熟な私が調べたり試したものをブログにまとめることによってより理解を深めて行きたいのでメモのような感じで書いていこうと思います。

※あくまで、今後の自分に活かせていけそうだなというのをまとめてる記事になりますので、正解ではないというのをご了承願います。

Adobe XDは自分が学生の頃から触ったことがあるのですが、全然今まで最大限に使いこなせていなかったので、改めて触っていってどんなおすすめな機能があるか、メリットやデメリットを探して随時更新して行けたらと思っています。

この記事の内容

1 Adobe XDとは？
2 Adobe XDをおすすめする理由
- 2.1 プロトタイプ
  - 2.1.1 プロトタイプのメリットを知る
  - 2.1.2 コストを掛けずにプロトタイプを作る
3 今回の記事のまとめ

Adobe XDとは？

Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。
デザイン、プロトタイプ、共有、すべてをXDでおこなえます。
XDを使用することで、デザイナーはより早く、正確に、高い品質で作業できます。
インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。
（公式サイトより https://helpx.adobe.com/jp/xd/how-to/what-is-xd.html ）

学生時代の私はAdobe XDの機能や活躍どころを意識せず、「わぁ～イラレよりクオリティが高いものが作れる気がする～」みたいな適当な感じでワイヤーフレームやwebサイトのデザインの制作をしていました……。

時間も気にせずのろのろ制作していた自分は、効率をよくする方法などきちんと調べようともしませんでした。知識がほとんどない状態だった為、少し調べただけでも使いどころによっては効率のよさそうな機能を発見できたりして、知らず使っていたのが非常にもったいなく感じました……。

(Adobe XDをダウンロードする https://www.adobe.com/jp/products/xd.html )

Adobe XDをおすすめする理由

Adobe XDではこれら３つのステップが１つのアプリで実現が可能。UIデザインについても不便なくデザインできるようアップデートが重ねられており、どんどん改良されているようです。共有についても、会社のディレクターして他はもちろん公開リンクで簡単にお客様に確認してもらうことができるなどさまざまです。

また、「今までIllustratorを利用していたクリエイターがAdobe XDに乗り換えてみた」や「エンジニアから見たAdobe XD」的な記事を読んでみた結果、以下の3つについて書かれている記事をよく見受けられました。

とにかく軽い
そうとう簡単
サクサク早い

エンジニア目線の記事で書かれていたのは、「デザイナーからファイルを受け取りIllustratorを開き、起動時間に数秒……XDでは一瞬。」「コーディングをする際は、Illustratorだとマージンなどの不足している情報を都度計測。XDでは、要素を選択すれば必要な情報が表示させるため、計測するものはあまりない。」とのこと。

確かにカラーコードやサイズなど要素をクリックするだけで一目で確認できコーダーにとってとても助かりますね。

デザイナー目線からは、お馴染みの起動が速い。「沢山アートボードを設置したり、レイヤを重ねてもフリーズせずサクサク。」「ワイヤーフレームを引く時間が、リピートグリッドなどの便利機能を駆使し、エクセルやその他サービスに比べ早い」「あまりデザインセンスに自信が無い人でもチュートリアルなどを触ればそれなりにリッチでいい感じのモックが作れる」「共同作業ができる」など。

デザイナーにとっても、エンジニアにとっても情報の共有がしやすく、サクサク動き非常に優秀なツールですね。自分自身もいろいろ試し今後どんどん掘り下げてみようと思います！

プロトタイプ

プロトタイプ（英: prototype）は、デモンストレーション目的や新技術・新機構の検証、試験、量産前での問題点の洗い出しのために設計・仮組み・製造された原型機・原型回路・コンピュータプログラムのことを指す。
（wikipediaより https://ja.wikipedia.org/wiki/プロトタイプ）

皆さんはプロトタイプを作っていますか？　以前まで私は、具体的にどんなメリットがあるのか？　そこまで求められているのか？　そもそもどうやって作るのか？　が本質的に全然分かっていませんでした。

プロトタイプのメリットを知る

こちらは「1つのプロトタイプは、1000回のミーティングに匹敵する。」という有名な言葉があります。

webサイトを作っていくに当たってほとんどのケースが、顧客とのやりとりだと思います。顧客の求めているものを作る中でクライアントとの意思疎通、ズレがないかなど細かにすり合わせることが重要だと思います。そのミーティングの時間にどれだけコストを掛けずにできるかは、プロトタイプの有無によって非常に変わってくると思います。

アドビシステムズ株式会社轟啓介さんはこう言っています。

”プロトタイプは誰か(自分を含む)のフィードバックを得るために作るモノ”
(youtubeより【CC道場＃161】Adobe XDやろうぜ！XDではじめるUIデザイン入門 | Creative Cloud -アドビ公式- https://www.youtube.com/watch?v=2lUFzRqcXR4 )

こちらの轟さんの言葉は、webデザインを学ぶ私にとってとても納得する言葉でした。「これからこんなのを作ろうと思っているのだけどどう思う？」自分でもどうかなを確認することもでき、フィードバックをもらうことで知識を深めることができると思います。

デザインカンプではダメなのか？
そもそもプロトタイプとデザインカンプの大きな違いは動かせる・動かせないだと思います。
こちらも調べて得た情報なのですが、実際動かせない静止画で緻密に想像してくれる想像力豊かなクライアントは少ないため、「良質なフィードバック」を得るためには、「触れるもの」を作った方が手戻りのリスクが発生の可能性が低くなり、結果的に近道になるそうです。

コストを掛けずにプロトタイプを作る

動くものを作るってことは、プログラミングをするのかという話になってくると思うのですが、それではコストがかかってしまうので、体力がない企業以外は厳しい状況です。
その状況下で「基本誰でも触れるようなプロトタイプを作れるツール」を実現させたのが　”Adobe Experience Design CC(＝Adobe XD)”　になります。
今後、こちらについてもAdobe XDでどのようにプロトタイプを作れるのかの記事をまとめてみようとおもいます。