Adobe XDとは？使い方から基本操作、プロトタイプモードや共有モードを解説。

主なデザインツールとしてadobeのPhotoshopやIllustratorを使ってきたのですが、2018年ぐらいからちょこちょこXDを触り始めました。
最初はもっぱらワイヤーフレームを作るツールという感じでしたが、2019年の秋頃にそろそろ本格的にXDメインでデザインしようかなと考えるようになりました。
その理由として軽さ、直感的に操作できる簡単さ、デザイン公開の楽さなどがあります。中でも軽さには、長年photoshopを使っている身としては驚き！！！でした。

今回はこの便利なXDを多くのWEB従事者の方にぜひ知ってもらいたく初心者にもわかるように解説いたします。ぜひ最後まで読んでください！

Adobe XDとは？

そもそもXDとはどういう物なのか、何ができるのかをまとめていきます。
「Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。」公式サイトより

ざっくり分けると…
・ワイヤーフレームやデザインの作成
・プロトタイプ作成
・共有（公開）
になります。

XDを開いてみても「デザイン」「プロトタイプ」「共有」のタブがあって、もう本当にストレート。そのまんまですよね。
これは作業順でもあるので、まずは「デザイン」画面（初期設定ですでに開いています）での操作から始めてみましょう。

Adobe XDでできること

基本操作

取説をじっくり読むタイプ、すぐに使ってみるタイプという分類なら迷わず後者の私。特にXDは直感的な操作性に優れているので、取説なんて必要ないかもしれません。
とはいえ、基本操作の知識は必要ですよね。adobe製品を初めて使う人におすすめなのは、無料のスターターキットを使うこと。
これを見るとXDの操作や何が出来るのかが何となくわかります。

PhotoshopなどのAdobe製品を触ったことがある人なら、ここは飛ばしてもらって大丈夫です。

あとは、チュートリアルビデオを見るのもおすすめです。

XDは、何となくわかった程度で始めることができます。そして作っていくうちに慣れていきます。
そこがXDの最大の魅力だと思います。簡単で使いやすい物しか、結局は残りませんよね。

Adobe XDを、まずは始めてみましょう

今回はPC用の短いランディングページを作成します。

XDを開くと最初にiPhone、iPad、Webなどアートボードを選ぶことができます。今回はWeb1920を選びます。

写真のマスクと文字入力

まずはメインビジュアルを作りたいので、左上から長方形を作ります。サイズは横1920px×縦1000pxにします。この時そのまま図形を広げてもいいですが、右側のプロパティインスペクターでも数値入力ができます。
この長方形に入れたい写真をドラッグして挿入します。

作った長方形の形に写真が切り抜かれます（マスクされる）。これは写真を切った訳ではなくマスク状態なので、写真をダブルクリックすると写真を移動したり、縦横比率を合わせたままサイズを変えたりもできます。

 

次はこの画像に文字を載せたいと思います。
左側のテキストツール「T」をクリックして、写真の上で「MY JOURNEY」と入力してみましょう。
文字サイズなどプロパティインスペクタで整えたあと、写真に合わせて縦横を中央揃えにします。
写真と文字を同時選択した後、右上に、IllustratorやPhotoshopでおなじみの中央揃えマークがあるのでどちらもクリック。
これで写真サイズに合わせた中央揃えになりました。

テキスト入力にはテキストボックスも使えます。左側のテキストツール「T」の状態で四角を作るようにマウスを動かし、その枠内にテキストを入力します。
メインカラム内に収めたい時や、中央揃えの時に便利です。

リピートグリッドとガイド

次はXDの便利ツールNO.1「リピートグリッド」を使います。

その前にガイドを引いておきましょう。今回はレイアウトグリッドを使います。
右側のプロパティインスペクターに「グリッド」という項目があるのでそこをチェック。
幅や間隔などはその下の数値で変更できます。
レイアウトグリッドの表示・非表示のショートカットキーはMac の場合 – ⇧ ⌘ ‘
Windows の場合 – Shift + Ctrl + :です。

ガイドはこのレイアウトグリッドと、Photoshopなどでおなじみのガイド（XDでの呼び名はカスタムアートボードガイド）が使用できます。
方眼グリッドもあるのでうまく使い分けてください。

 

さて、リピートグリッドは名前通り、繰り返せるものの作成に便利です。1つのパターン（今回は画像と下のテキスト）を作って右上の「リピートグリッド」をクリック。すると枠線が緑色に変わって、右と下にハンドルが表示されます。そこを伸ばすと1つのパターンが繰り返されます。

解除したい場合は右上の「グリッドのグループ解除」を押します。
画像の挿入はファイルからドラッグします。便利なのは複数の場合。順番通りに勝手に枠内に入ります（画像は自動調整してくれます）
テキストも同じように挿入できます。メモ帳など拡張子が .txt のテキストファイルを用意してデータを入れ、改行で区切ります。そして同じようにドラッグ。
（注意点：エンコード方式は UTF-8にすること）

グラデーションボタン

デザインを仕上げていきます。リピートグリッドの下にお問い合わせフォームへ飛ぶリンクボタンを作成しましょう。
左側□ツールをクリックし、任意の場所にざっくり長方形を作ります。今回はw400px×h80pxにします。
角丸はIllustratarと同様で、長方形の中の丸を内側に移動させると簡単にできます。

使ってみた感想ですが、XDとIllustratarは互換性が高いです。ショートカットも同じ物が多いので、イラレ使用者にはとっつきやすいでしょう。

さてグラデーションですが、右側のプロパティインスペクターに塗りという項目があります。
こちらをクリックすると小窓が開きます。初期状態は「べた塗り」なのですがこちらのプルダウンには「線形グラデーション」と「円形グラデーション」があります。
今回は線形グラデーションにして、任意の色で作成します。今回は#01C18Dから#0083B4に。
ちなみにグラデーションの方向は長方形内のハンドルで変更できます。
長方形の上に「CONTACT」とテキスト入力すればボタンの完成です。

デザイン完成

手順の関係で最後になってしまいましたが、まずはヘッダーを作ります。
ロゴを右上に置き、その横にお問い合わせフォームに飛ぶリンク用のアイコンを置きます。
そのまま駆け足ですがフッターを作ります。背景色#0089B1の長方形を作り、その上にコピーライトをテキスト入力してデザインが完成しました。

アセットとレイヤー

ところでXDの画面には左下に3つのボタンがあります。上から「アセット」「レイヤー」「プラグイン」ボタンです。
ブラグイン以外は再度ボタンを押すと内容が折りたためるようになっています。

まずはアセットから。こちら、見たまんまです。
よく使う色や文字スタイルを追加できます。アートボードをたくさん作る場合に便利な機能です。
一番下のコンポーネントについては一旦置いておいて、次にレイヤーの説明に移ります。

コンポーネントと固定ヘッダー

今までレイヤーについては気にせずざっくり作っていました。
photoshopで作成する際はレイヤー管理が大変でしたが、XDでは逆にレイヤーを触ると階層がどんどん下に潜る感じで少し扱いづらいです。
このあたりもイラレと似ていますね。

今回はヘッダーを固定したいのと、こちらはメールフォームとの共通部分になりますのでコンポーネント(共通コンテンツ）にしたいと思います。

ヘッダーはロゴとメールアイコンのみですのでこれらを選択してグループ化します。レイヤーに「header」とリネームした後、右側のコンポーネントの＋を押します。
※これは先程のアセット内にあったコンポーネントと同じ。ちなみにwindowsでは右クリック内のメニューにもコンポーネントが出てきます。ショートカットキーはCtrl+K（macはcommand + K）。
するとコンポーネントの右側にマスターという文字が追加されます。コンポーネントの修正はこのマスターで変更すると、他ページで使用しているコンポーネントも一気に変更します。

そしてこのヘッダーを固定にしたいと思います。これは一瞬です。右側の「スクロール時に位置を固定」にチェックするだけ。
右上の再生ボタンのような▶マークを押してください。これはデスクトッププレビューといって、どのような表示になるかがプレビューできます。

Adobe XDはデザイン作成だけでなく動きまで見ることができるので、コーダーへの指示やクライアントのプレゼンに最適なソフトです。

Adobe XDでメールフォームをデザイン

新規アートボード

ページ遷移の作業をしたいのでメールフォーム画面をデザインします。
左側のメモっぽいアイコンを押すと右側にサイズがずらっと出てきます。今回も1920pxで作りたいので、Web 1920をクリック。右隣に新規アートボードが作成されます。

左側をアセット表示にすると、コンポーネントにさっき作ったheaderが入っています。
それを新規アートボードにドラッグしてみましょう。位置を合わせて右側を見ると、コンポーネント（インスタンス）となっています。これはマスターのコピー的な意味合いがあります。
このインスタンスとマスターとの違いは、こちらを編集してもマスターに影響がないことです。
仮にインスタンスの背景色をグレーからブルーに変更してみます。その後、マスターの方で色を変更してもインスタンスには反映しません。
次にマスターの背景色の横幅を広げてみると、インスタンスの方も横幅が伸びます。つまりインスタンスの方は背景色の情報のみがマスターと違うということです。

Adobe XDのプロトタイプ作成

デザインモードでメールフォームをざっくり作りました。

左上のタブ、プロトタイプをクリックします。
プロトタイプモードは、右側のプロパティインスペクターがデザインモードと違いますね。

さっそくアートボード間のリンクを繋げたいと思います。
まずはどのページがHOMEなのか（一番最初に表示するか）を設定します。
アートボードを選択（左上のアートボード名をクリック）すると薄いグレーの家アイコンが表示するので、それをクリック。
ブルーになってこのページがHOMEに設定されました。

それが終わるとリンクを設定します。
グローバルナビ（この場合はグレーの四角形）をクリックすると、右向き矢印が出てきます。それをドラッグするとコネクタという線が出てくるので、隣のアートボードまで一気に伸ばします。

そしてメールフォームのアートボードに移り、ロゴ（この場合は黒の長方形）をクリックして、同じように左のアートボードまでコネクタを伸ばします。
これでグローバルナビのリンクは完成です。

HOMEのアートボードにはメインカラム内にもリンクボタンがあるので、こちらも同様に右のアートボードまでコネクタを伸ばします。
終わったら右上のプレビューボタンを押して、リンクが正常に効いているのを確認します。

今回はよくあるリンクでしたので、右側のプロパティインスペクターを使用せずに作業が終わりました。
このようにデフォルトである程度の事ができるのがXDの良さだと思います。
右側プロパティインスペクターについては1ページ割けるほどの分量なので、次回以降に詳しくご紹介しますね。

Adobe XDで共有

左上の共有を押すと、アートボードが青枠で囲まれていることに気づくかと思います。
この青枠は公開するものという認識です。もし仮に他にもアートボードがあって、それが青枠で囲まれていない場合はそのアートボードは非公開になります。
基本的には全て公開するために作成するかと思いますが、たとえばクライアントにはスマホ用のデザインが不要など出てくるかと思います。あえて非公開にしたい場合の方法は簡単です。プロトタイプモードで、公開になっているアートボードとリンクを繋がなければいいだけです。

Adobe XDで公開

さて、いよいよ公開作業です。
XDには公開リンクを作成してくれる機能があるので、いちいちFTPソフトを使ってサーバーと繋ぐ必要がありません。

右側プロパティインスペクターを設定していきます。

まずはタイトルの下の入力欄にページ名を入力します。これはメタタグ内のtitleと同じで、ブラウザタブに表示される部分です。
次に表示設定ですが、プルダウンには、
・デザインレビュー
・開発
・プレゼンテーション
・ユーザーテスト
・カスタム
とあります。

デザインレビューは、デザインの右側にコメントを書く欄があります。閲覧した人がコメントしたり、そのコメントに返信したりできるので便利です。

今回はこちらを使用します。他の表示設定については、後でご紹介しますね。

パスワード設定は、下の入力欄にパスワードを入れるとパスワードを知っている人しか閲覧できないという機能です。
今回は使用せずに、右下の「リンクを作成」ボタンをクリックします。
すると一番上のリンクを共有のところにURLが発行されます。それをクリックするとブラウザで閲覧できます。

先程付けたリンクでページを送ることも可能ですが、一番下にページ数が表示されているのでそこからページを送ることもできます。ちなみに家アイコンはトップページへ戻るリンクになります。

いずれも直感的にわかりやすいので、特に説明がなくても操作できるのがXDの長所ですね。

それでは先程、すっ飛ばした表示設定のご紹介に移ります。

・デザインレビュー ・・・ 右側にコメントが書ける
・開発 ・・・ 使用しているカラーやフォント、アセット書き出しなどができます。コーディングする際にとても便利ですね。

・プレゼンテーション・・・右側のコメント欄が無くなったことで、デザインに集中できます。クライアント用にはこれが一番良いですね。
（前は一番下のナビゲーションリンクが付いてなかったんですが、アップデートしたのかリンクが付くようになってました）
・ユーザーテスト・・・上のプレゼンテーションと何が違うのかと思ったら、下のナビゲーションリンクがありませんでした。
・カスタム・・・これはコメントだったり、フルスクリーンだったりの機能を自分なりにカスタマイズできるようです。

以上プロトタイプ、共有モードのご紹介でした。
次回はhover表示やスライドショーなどをご紹介したいです。
あと気になるのがプラグイン、それからコーディングする際の良さなどをおいおい記事にできればと思っています。