Tweet

はじめに

前回、学生さんとの間にカルチャーショックを受けたまま、Adobe XDとは何なのかを学んでいきましたが、どうもこれはWebやAppデザインをするときには必須になってくるアプリケーションであることがわかりました。
そして、今まで新しいからとやんわりと避けていたことを痛感しました。
ということで今回は実際に使ってみて、どのような機能が備わっているのかを見ていきたいと思います。

デザインモードでデザインしてみる

1.プリセットを選択

Adobe XDを起動させます。
この起動時に、使用プリセットの選択が出来ます。
ここで任意のものを選択し、デザインの制作に進みます。
また、各デバイス名の横の∨のプルダウンをクリックすることで、異なるバージョンのものやサイズの選択も可能です。

2.フレームを作る

プリセットを選択したら、デザインモードの画面が現れます。
ここで、フレームのデザインを行います。
（このデザインモードでは細かなデザインをすることも可能ですが、今回はワイヤーフレームのみの作成とします。）

左側にツールバーがあります。
上から選択ツール、四角、丸、多角形、ライン、ペン、テキスト、アートボード、ズームと並んでいます。
感覚的にはAdobe Illustratorの感覚で使用出来ました。
このツールバーを使ってフレームの作成をしていきます。
この画面で特徴的なのが、左側ツールバーの下にある3つのアイコンです。

上からアセット、レイヤー、プラグインと続きます。
アセットでは共通カラーなどを一度に変更することができ、統一したイメージの調整ができます。
レイヤーでは各アートボードの管理、プラグインでは、作業効率化を図るためのプラグインの追加が可能です。
また、画面右側にはプロパティインスペクターがあり、細かな調整から色付けなどはこちらで作業できます。</
br> また全体的な作業画面をペーストボード、デザインするフレーム一つ一つをアートボードと呼びます。

まず簡単に、1つ目のアートボード内にアプリケーションのホーム画面を作りました。
四角と丸で構成し、角丸とドロップシャドウはそれぞれオブジェクトを選択し、プロパティインスペクターで詳細設定を行えます。

次に2つ目のアートボードの作成にはいりますが、この際、ツールバーレイヤーをクリックし、アートボード蘭を表示、クリック選択してコピー&ペーストすることで、選択されたアートボードを隣に複製することが出来ます。
これにより、共通オブジェクトも他ページに簡単に複製することが可能でした。

また、画面上部の人物のようなアイコン「ドキュメントを招待」をクリックすることで、データがクラウドに保存さ入れている場合、他のユーザーと作業環境をシェアできるようです。
このクラウド保存の場合は、別端末からも自分でログインできるので、どこでも作業を進めることができます。

まとめ

今回は、XDの起動からワイヤーフレームの作成を簡単に行なってみました。
かなり感覚的に操作できるので、ストレスを感じることなく作ることが出来ました。
また、アートボードごとの複製を効率よく行えるので、さすがWebやAppのUX/UIに特化したツールだなと驚きまくりでした。

著者：MainYard Design（メーンヤードデザイン） 北野敦子

1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。 街を歩くだけでも無限の魅力があふれています。 ある日ふとそれらに魅了され別業界からデザイナーへ転身。 関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出展。第31回読売広告大賞協賛社賞受賞。

※KOBITブログでは、定期的に北野敦子さんに記事を寄稿していただいております。
デザインに関するものを中心に、役立つ記事を数多く提供していただいておりますので、ぜひ他の記事もご覧ください。
→北野敦子さんによる寄稿記事を読む

Tweet