記事の詳細

Adobe Experience Designの正式版リリースソフトであるAdobe XDは、Adobeから提供されるWEBサイトやモバイルアプリのデザイン、プロトタイプの作成が、これ一つでできるUXデザイナー向けの初めてのオールインワン製品です。

 

UIデザインのためのソフトウェア

オールインワンとか言われると化粧品しか出てこない貧相な脳みそですが、このオールインワンのUX生成ソフト製品は今までSketch一強というくらいSketchが強かったのですね。プラグインも多数紹介されているこの「Sketch」は、プラグインを管理するためのプラグインまで出る、まるでUXデザインのためのWordPressかよ、っていうくらい汎用性が高かったようです。

AdobeXDの使い方【Sketch】

ようです、というのはアレです。私がSketchユーザーではないからです。何せパソコンがWindows。
SketchはWindowsでは使うことができない、Mac専用アプリということで、「そもそも使えないやん」となったのです。
LunacyというSketch専用のビューワーを利用することで、WindowsでSketchを見ることはできるようですが、編集はできないようだし、それじゃウチじゃ仕事にならんなぁ、と思った次第。(ちなみにおうちではMac、お仕事ではWindowsのダブルユーザーです。)

 

最近自分の周りのデザイナーには「Macを使う意味とは」「コスト的にWindowsのほうがいい」「最近コンテンツの作成依頼もあるけど、Office系のアプリはやっぱりWindowsのほうが強い」「そもそもクライアントがWindowsなのにMacでガチで作ると齟齬が大きすぎて」などなどWindowsに移行する人も増えてきています。
インクループは「WEBサイトはデザインと同じくらい、コンテンツも重要度が高い」という考え方で、デザイナーも「綿密にコンテンツを考えながらWEBを作る」「むしろコンテンツ作りながらデザインする」ことが高いレベルで要求されています。
ロゴを作る片手間で「あ、こういう企画どうかな」とかやってると、事務的な諸所作業や多人数と同レベル、同ステージでの共有がとても大切になってくるのです。

 

FigmaというSketch同様、UXデザインを行うソフトは、MacやWindowsといったデバイスにかかわらず、GoogleChromeやFireFoxといったウェブブラウザで利用することができますが、オンライン上でなければ使えない。
じゃ、インターネット切れた時には泣けって? となってしまうわけです。

ままならない私の世の中に舞い降りてきてくれたAdobe Experience DesignちゃんがAdobe XDさまに進化して鎮座ましましてくださったときはそりゃーもう喜びましたよ。ええ。

Adobe XDはAdobeが提供するUXデザインアプリです。

AdobeXDの使い方【AdobeXD画面】

デザイナーならAdobeのIllustrator、Photoshopは必須アイテムのようなもので、おそらくCloudでもピンで契約して、それだけでやっている人も多かろうとは思うのですが、だったらSketchから早々にXDに移行するべきではないかなぁ、と思います。

 

なぜなら、間違いなくPs、Aiとの相互性の高さはAdobeXDが随一になるはずだから。
Cloudになって、各アプリのアップデートスパンは非常に早くなりました。使い勝手もどんどん良くなっていきます。アセット機能が付いた時の私の発狂ぶりは自分でも異様でした。
このスピード感は問題も多々生むでしょうが、成長速度もすさまじいことになるでしょう。いずれAI機能が入るプランがあるAdobeのプラットフォームで、囲いに来ているなら囲われるのがユーザーとしてはらくなのでは、と思います。

リリースされたばかりでまだまだ未熟なXDですが、三年後、もうある程度「仕上がって」いるのではないかと思います。

Adobe XDでは何ができるの?

SketchどころかUXデザインソフトを一回も使ったことのないダメデザイナーからの視点ですが、箇条書き。

 

  • リピートグリッドが使えて、ドラッグだけで画像が適応される。(複数可能)
  • Illustratorにあるシンボル機能搭載
  • モードは「デザイン」と「プロトタイプ」とあって、「デザイン」でデザインして「プロトタイプ」でリンクする。

 

特に魅力的だなと思ったのはリピートグリッドです。実際使ってみるとめちゃめちゃらくちん。
Sketchと比べられないのでアレなのですが、Illustratorと比較するとこんな感じでメリットが。
(しかし、昔はPhotoshop vs Sketchで論争があったのに、なんで私はここでIllustrator vs Sketchをやっているのだろう)

とにかくインターフェイスが見やすい

XDのパネルの少なさに驚きます。ツールとパネルの連携がよくとれていて、クリックするたびにパレットが様変わりしていくのはとてもわかりやすいですね。机の上に道具を全部並べてから作業を始める人には向きませんが、整理整頓をしながら料理をするタイプの人にはきっとこのすっきりさが心地よいと思われます。

段違いで早い

どれだけアートボードを作っても乱れることがない画面。止まらない。そのせいでアートボードが無数になって困る。
ただ、早いといっても、まだ完璧でないのか、それとも私のPCと相性が悪いのか、たまに突然フリーズして一向に応答しなくなることがあります。また、二つ、三つとファイルを開くと、時々「えっ……どれいじるの」とこれもまたフリーズします。
まだリリース直後ですものね……。安定的になるのはもう少し先でしょうか。

プロトタイピングがめちゃくちゃ早い

プロトタイピングとは「リンクをつなぐこと」ですね。視覚的にもできるしプルダウンから選ぶことも可能。欲を言えば「クリック→アニメーション」的な機能も欲しいのですが、ビフォーアフターのアートボードを作ることで補えます。

Adobe XDでほしいこんな機能

クライアントの方々は、「こんな感じ」とPDFなどの絵で見せても「どう動くか」がわからないことが多くあります。
どこのページに飛ぶのか、どんなふうに遷移するのか、どんなふうに出てくるのか……。口で説明しても「見なきゃわからないYO!」となってしまうわけですね。
なので、このプロトタイピングでリンクが結び付けられるのは非常にありがたいのですが、まーもー整理が大変。HTMLやCSSの偉大さ痛感しますねコレ。

  • 横スクロールの実装!
    レスポンシブになるとカルーセルが結構大事な要素なのです。横スクロール機能が欲しいです……。
  • アニメーション指定!
    ハンバーガーメニューのアクションとか、モーダルウィンドウとか、そのあたり……だ、だめか。いやこれも横スクロールが実装されたら行けるような気がするのですがどうでしょう。
  • アンカーリンク実装
    ペラ一枚での依頼、多くなりましたから……。
  • 整列ツールの等間隔機能とガイドください。
    自分でガイド引きたい……スマートガイドだけだとなんかこう、不便……。あと、等間隔機能をスマートガイドだけで処理するのはちょっと不便……「そこと合わせたいちゃうねん」ってことがたまにある……。

 

Adobe XDのファイルの作り方

ここからAdobe XDの基本的な使い方のメモをしていきます。おもに「初めてXD触るよ!」「WEBデザイナー初心者だよ!」という人向きなので、すでにSketchなどなどで操作されていた方がソフトの移行を考えていらっしゃる場合は、間違いなく使って覚えたほうが早いです。

ファイルの作成

AdobeXDの使い方【AdobeXDスタート画面】

アプリアイコンをクリックすると上記のような画面が展開されます。デフォルトでiPhone6/7/8、iPad、WEBブラウザのwidth1920-height1080の3種類のアートボードが準備されていますが、一番右の「カスタムサイズ」で任意のアートボードを生成することができます。

「UIキット」カテゴリには「Apple iOS」「GoogleAndroid」「MicrosoftWindows」「ワイヤーフレーム」のキットが用意されており、クリックするとそれぞれのホームにブラウザで遷移します。
特に「ワイヤーフレーム」のキットは入手しておいて損はないでしょう。以下のような豊富なフレームアイテムが手に入ります。
AdobeXDの使い方【ワイヤーフレーム】

カラーは左下の「アセット」パネルから「カラーを編集(右クリック)」することで一括変更が可能です。アセットの中に入っているカラーはIllustratorでいうところのグローバルカラーになっています。ゆるゆるドラッグしながら色を変えると、その色ごとに認識して色が変わっていくので、たくさんのデータを一括で扱う場合はちょっと動作が鈍って今ビビりました。ビビりました。

 

AdobeXDの使い方【色変え】

「リソース」カテゴリには、新着情報やリリースなどの更新コンテンツが並びます。チュートリアルはその左側に常に存在していますので、とりあえず触ってみよう! と思う人はここから始めてもよいのではないでしょうか。

 

画面の見方

AdobeXDの使い方【基本画面】

iPhone6/7/8をクリックすると、上記のような画面になります。青い部分が動作しているツールになります。
よく見ていただくと、そうなんですよ、上部にいつものメニューがないのです。
ハンバーガーメニューを開くとこんな感じ。

AdobeXDの使い方【ハンバーガーメニュー】
だいたいこのことをショートカットでやれ、というこの暗黙の!
いや、ショートカット使えない人のために、右クリックが用意されています。
AdobeXDの使い方【右クリック】
一番左がツール、ツール下部のアセット・アートボードパネルのアイコンで、その隣のスペースが切り替わります。その隣のスペース、ハンバーガーメニューの隣が「デザイン」モードと「プロトタイプ」モードの切り替えを。いずれもクリック、選択すれば能動的に画面が切り替わります。それぞれのツールに従って、一番右のパネルがさまざまに変化します。
書き出しなどを行うのは右上。プレビューもすぐに見れるのでわかりやすいですね。

AdobeXDの使い方【画面の見方】

 

アートボードの生成

AdobeXDの使い方【アートボードの生成】

アートボードは、ファイルを選択するとその名前で自動的に1枚、生成されます。
タイトルをクリックするとアートボード名の変更ができます。(変更はパネルで確認することができます。)

アートボードを上下に広げると、点線が現れます。この点線はスマートフォンなどモバイルデバイスの画面の目安で、プレビューの際は下のほうにスクロールすることで見えるようになる限界ラインを示しています。

アートボード名をクリックして、アートボードがブルーで選択された状態で右クリックを押すと、以下のような画面が出てきます。

 

AdobeXDの使い方【アートボードプロパティ】

AdobeXDの使い方【アートボードの複製】

「コピー」してから灰色のペーストボードをクリックして選択を解除、右クリックして「ペースト」を選ぶと、アートボード2つめが生成されます。もちろん「Ctrl+C or ⌘+C」からの「Ctrl+V or ⌘+V」でもオーケー。Alt系のショートカットも使えます。

AdobeXDの使い方【アートボードの設定】
右側のパネルの変化を見てみると、アートボードの設定には、整列ツールのほか、変形パネル、スクロールといったものが利用できることがわかります。これらの項目のチェックボックスにチェックを入れることで、パネルのオンオフができます。
整列ツールの場合、アートボードの中の要素も同時に変更されます。アートボードの前面、後面は左側のアートボード名をドラッグして順番を入れ替えることでコントロールできます。(上にあるものほど上にある)
スクロールには垂直なしが選べるので、そのうち「横」も出てくるのではないかなぁ……と期待しています。スクロール下にある「表示領域の高さ」はファーストビューの高さとイコールです。変更すると、さっきアートボードを上下に拡張したときにあらわれた点線が動きます。

 

 

「グリッド」の項目では、「レイアウト」と「マス目」のいずれかが選べます。画面は「レイアウト」で、縦列の数や段の感覚、列幅などに数値を入れることができます。
その下のアイコンは「左右のみに余白を入れる」か「周りに余白を入れる」かどちらかの選択肢になります。
ひとまずアートボードが作成できたところで本日はここまで。
次のターンで各ツールの使い方と、レイヤーパネルなどについてご説明できればと思います。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る