Adobe XD で魔法使いになろう
こんにちは。
最近デザインの勉強を始めました、古屋です。
タイトルにもある通り、
今回はワイヤーフレーム作成について調べていて
「Adobe XD」
というツールが気になり、魔法のようにクールで便利そうだったので
実際に使ってみることにしました。
Adobe XDとは
Adobe XDのサイトには以下のような説明があります。
Webサイトやモバイルアプリのデザイン、プロトタイプ作成、共有までを1つのアプリで実現する全く新しいUI/UXデザインツールです。驚くほど軽快な動きと直感的な操作で、あらゆるデバイスでの最適なUI/UXをデザインし、その使い勝手をクライアントとも簡単に確認できます。
上記のように「XD」ではデザインからワイヤーフレーム、プロトタイプの作成などが
とても簡単にできます。
決して海外の顔文字ではないのですね。XD
説明を見て、
「Sketch」
というツールを思い浮かべた方もいらっしゃるのではないでしょうか。
こちらも同じようにデザイン、プロトタイプ作成が行えるツールですが、
「Sketch」はより デザイン寄り
「XD」は ワイヤーフレーム・プロトタイプ作成寄り
のツールであると言えると思います。
ですが、
「Sketch」でも問題なくワイヤーフレーム・プロトタイプ作成はできますし、
「XD」は同じAdobe製品のPhotoshopとの連携がしっかり行えるのでよりデザインに力を入れることも可能です。
では「XD」の魅力とは。
それは動作の軽量さと学習コストの低さにあるのです。
ここからは「XD」を使って簡単なワイヤーフレーム兼擬似プロトタイプを作成してみたいと思います。
実際に使ってみる
「Adobe XD」は課金制のツールではありますが、
下記から7日間の無料体験ができます。
https://www.adobe.com/jp/products/xd/free-trial-download.html
実際に使用できる環境であれば下記の
に沿って動かしていけば基本は学べます。
なので今回は実際にどのような部分が便利かという部分にフォーカスを当てて
説明していきたいと思います。
まずはこのような画面が表示されます。
作成したいウィンドウサイズに合わせて作成が可能です。
選択すると表示される画面が「XD」のメイン画面です。
見て分かる通り、とてもシンプルな構成になっています。
簡単に新規ページ追加ができます。
ページを大量に追加しても全くと言って良いほど動作が重くなることがないです。
多彩なUIテンプレート
試しにページを2画面作成してみました。
ここで便利なのが様々なUIテンプレートが用意されている点です。
上記で作成したページもテンプレートに画像を設置するという形で、2,3分で作成できました。
Wires, free wireframe kits for Adobe XD
テンプレート自体をカスタマイズすることもできるので、
テンプレートを使って大体のことができてしまうと思います。
リピートグリッド
試しに以下のようにオブジェクトを作成し、同じものを画面に並べたいとします。
その際にちまちまコピーアンドペーストを繰り返す必要はありません。
リピートグリッドを使えば以下のようにできるのです。
また、マージンも一括で変更可能です。
これは驚いた・・・。
まるで魔法ですね。
アセット登録
作成したボタンなど、使い回すことが多そうなオブジェクトはアセットに登録することができます。
プロトタイプ作成
以下のようにオブジェクト同士を関連付けていきます。
関連付けが正常にできれば、
このようなプロトタイプが作成できます。(今回はもどきですが)
プロトタイプの共有
今回はひとり作業なので触りませんが、
作成したプロトタイプをチームメンバーに共有したり、
プロトタイプを動かしている様子を動画ファイルとして保存する機能などが標準で搭載されているので、
チームでの作業の際には大変強力なツールになるはずです。
いかがだったでしょうか。
今回紹介した内容は15分ほど色々いじれば習得できるレベルの内容です。
もっともっと色々なことができたり便利なポイントがあるのですが、
百聞は一見に如かず
というように、この先はぜひご自身で魔法の一端に触れてみてください。
自分自身もまだまだ使い始めたばかりなので
便利な使い方など、また発見があれば共有できたらなと思っています。
