【現場学校02レポ】XDでできること、その活用方法｜Adobe XD活用の現場（松下 絵梨さん）

こんにちは！
ライブ配信セミナー『現場学校02』レポート班のSカオリです。

2019年4月21日に開催された、松下 絵梨さんのセッション「Adobe XD活用の現場」のセミナーレポートをお届けします。

Adobe XD ユーザーグループ大阪を主宰されている松下さんが、今回講義でXDのTipsを30個！紹介してくださいました。大ボリュームですね！

Adobe XDでは何ができる？？

現在、ウェブ制作の現場では、設計からデザイン、コーダーへの共有までXDで一本化しているところが増えてきているのではと思います。

わたしもXDにたいへんお世話になってまして、ワイヤーフレーム→デザインをXDで行っています。そのままコーディングも自分でしてます。

XDでは
・デザイン（ここでいうデザインは設計も含みますね）
・プロトタイプ（アートボードを繋いでページ遷移ができる）
・共有（URLを発行してプロトタイプをシェアできる）
が一つのソフトで行うことができます。

UIキットを使って時短ワイヤー＆デザインを作ろう

無料でダウンロードできる、UIキットからワイヤーフレーム、プロトタイプを作るのがおすすめ。UIキットはいろんなものが公開されていますが、XDのメニューの「ファイル＞ワイヤーフレーム」から「Wires」というキットをダウンロードできますので、こちらをぜひ入手しておきましょう！

ダウンロードはここ。
https://www.behance.net/gallery/55462459/Wires-wireframe-kits-for-Adobe-XD?locale=ja

UIキットにはたくさんの要素があらかじめ用意されており、その中から使えそうなものを抜き出して使い、ワイヤーフレームを作っていくと非常にスピーディーですね！
Web.xd（PCデザイン）とMobile.xd（SPデザイン・アプリUI）の2種類のXDファイルが入っているのでとてもありがたいですね。
わたしはUIキットとかあまり使ってなかったので、これからはこのWiresを実務で試しに使ってみようかな？と思います。

もちろんキットだけを使ってワイヤーを作るのではなく、使えるパーツをはめこんでいって、出来上がったワイヤーに写真やカラーを追加してデザインに仕上げていく、という形で作っていけばOK。

キットにあるパーツは最初から写真エリアとテキストの配置などもすでにいいバランスでされているので、そこに悩まなくてもいい点が時短になりそうですね。

デザインはXDだけでなく、他のAdobeと併用して

XDでかなりデザインもできるようになりましたが、ロゴを作ったり画像を編集・加工したりとなると、XDでは十分に対応できません。そういったところはPhotoshopやIllustratorで作ってXDに持ってくる、という方法をとれば、今までそれらのソフトで作っていたようなデザインもXDで可能になります。

時代はXDでデザインだ！といってXDだけに固執せず、作業の得意分野のソフトに任せるところは任せることで、XDだとあんまり作り込んだデザインできないんだよな〜という悩みも解消されますね（LPのようなビジュアル重視なページだとXDよりPhotoshopのほうがいいのですが）。

ここから30個のTipsを紹介していただきましたが、すべてを紹介するのは長くなってしまうので、個人的に気になったところをピックアップします。

スワップシンボルを活用すること

XDの便利な機能の一つ、シンボル（2019年5月のアップデートで「コンポーネント」に刷新されました）。シンボル（コンポーネント）はなんども繰り返し使え、一度に複数箇所の変更ができるので、リンクボタンやヘッダー等の共通パーツによく用いられますね。

このシンボル・コンポーネントをうまく使わないとXDの便利さが半減すると言えるとわたしは思います。

ワイヤーフレームを作るディレクターは、あらかじめ共通パーツなどをコンポーネント化しておくなどしてからデザイナーにバトンタッチすると、デザイナーがとってもデザインしやすくなるので、単純なコピーで配置するのでなくコンポーネントを活用して作っていただけたら本当に助かる…と思います！

プロトタイプの共通パーツは別のアートボードに作る

アートボード＝1ページと捉えるのではなく、共通パーツをページデザインではないアートボードに作るという方法も教えていただきました。

たとえばグローバルナビ。
XDでは、自分自身のアートボードにリンクを繋げないという特徴がありますので、トップページデザインのアートボードに作ったナビをプロトタイプでリンク遷移させようとすると、トップに戻るリンクなどができないんですね。そこで、別のアートボードに作ればトップへのリンクも可能になるので、すべてのリンクを繋いだ状態のナビを、各ページデザインに配置していけばOK。これちょっと盲点でした！いつもトップページに作ったのを他のページに貼り付けてからトップにリンクしてたので…

同様に、スマホ版のメニューでオーバーレイで画面全面に重なるようなメニューも、各ページデザインとは別のアートボードに作り、メニューボタンのリンク先をオーバーレイメニューのアートボードにすれば、メニューボタンを押したらふわっとオーバーレイメニューが実現します。

この、共通パーツを別アートボードで作って遷移する、という手段は幅広く使えるようなので、アートボードをページの分だけしか作らない今までの自分のやり方はもったいなかったですね。

ページ内リンクをXDで実装する！

機能としてXDではページ内スクロールのリンク（縦長ページなど）ができないとされていましたが、これもテクニックにより可能だということを教えていただき驚きました！

ページデザインしたアートボードを複製し、それぞれのアートボードの中でデザインをずらして、スクロールした時の頭の位置に合わせておきます。

そして、別のアートボードに作ったナビから各アートボードにリンクをつなぎ、「自動アニメーション」にすると…
ナビをクリックするとスルスルッとスクロールされてページ内リンクになりました！これはすごいですね。「自分自身のアートボードにリンクができない」からできないと思っていたことが、「共通パーツは外のアートボードに作る」というテクニックとアニメーションを組み合わせることによって実現できちゃうんですね。

音声コントロール機能が超すごかった！

普段音声コントロールが必要な案件などはほぼなかったのでそんな機能があったことすらちゃんと知らなかったんですが！
音声をトリガーにして（声に反応して）アクションが起きる（次アートボードに遷移する）ということもXDでできるようになってたんですね。音声読み上げもできるとは。。

アプリの設計などでも活用が広がりそうです。
自分の場合はコーポレートサイトなどのウェブサイト案件が多いのでなかなか使う機会があるかわからないのですが…

その他、クリックでなくドラッグで操作する場合のプロトタイプなどの紹介もありました。こちらもアプリの操作ではよくあるものなので表現が広がりますね。残念ながら自分では使う機会があるかどうか…なのですが、面白いなと思いました。

便利プラグインの紹介

XDでは公開されてるプラグインが色々あって…わたしはまだどんなものがあるかもあまり見てなかったりするんですが…。

「Google Sheets」という、Googleのスプレッドシートからテキストを反映できるプラグインはとても便利そうです。
用途は、リピートグリッドで繰り返しになっている部分のテキストを変更するさいに、今まで箇所ごとにテキストファイルを用意しなければならなかったのをGoogleスプレッドシートで管理して入れ込むことができるようになります。これは結構便利なんじゃないでしょうか！実用度が高そうです。

「テキスト校正くん」というプラグインは、XDで入力したテキストの校正をしてくれる便利なプラグインです。結構、クライアントからいただいたテキストそのまま入れると誤字や誤変換ありますしね…こういったものを使ってコーディング後に誤字ってるの気づかなかった！とかは防げそうです。

最後に質問コーナー

A. 松下さんの場合、
・デザインスペックのURL、プロトタイプのURLを書いたテキスト
・画像も自分で書き出して渡してる（パララックス風など、デザインで見えてる範囲以外の部分まで必要な画像があるケースもあるので）
・アイコンフォントなどfontawesomeでの番号指定、などなど…

XDだから特別やるってことでなく、デザイナーからコーダーへの気遣いはXDでも同じ、っていうことですね。

A. プロトタイピングを見せる前の段階で「SEOや文書構造などの話をしておく」「制作は見栄えだけじゃない」ということをまず知らせておく。プロトタイピングはあくまでも見栄えです！ということ、完成後に後戻りがないように作っているものだということを認識してもらう。

サイトの完成形を目指してプロトタイピングを作るのではなく、クライアントとコミュニケーションエラーが起きないために作るのだ、ということを忘れずにしたいですね。

色んなことができるようになったけど、どこまでやるの？

30個もTipsを紹介していただき、中にはアニメーション機能をうまく使うことでプロトタイプでcssアニメーションやトランジションを使ったようなアニメーションをXDで実現する方法もいくつかありました。

質問にもありましたが、XDでどこまで作り込んでいくの？というのはちょっと考えてしまいました。

例えばですが、わたしが普段やっている案件では、動きまで共有しないとコミュニケーションロスが起きる…といったことは実はほとんど発生しません（基本的に動きはコーディング後に確認してもらう程度で十分な案件が多いため）。
トップのスライダーも、コーディング実装時に確認してもらうことが多いので、XDでそこまでやってないんですよね。
案件によりけりだと思うんですが、アニメーションの演出等含めてコーディングに入る前にきっちりクライアントと決めておかなくてはならないというケースの案件でなければ、そこまでしなくても…？という感じもしました（やりすぎると時間もかかりますしね）。

色んなことがXDでできるようになったからと全てのアニメーション、演出をXDで完全に作る必要があるかどうか、は案件の性質、自分とクライアント・担当作業との関係で決めるでいいのかな…と自分では考えてます。

なので、今回のレポでは、自分の普段の案件でも必須で活用できるTipsを中心にピックアップいたしました！

『現場学校02』を体験しましょう！

ライブ配信セミナー『現場学校02』は、生放送のライブ配信を見逃した場合でも、期間中「アーカイブ視聴」ができます！

参加チケットはこちらから
https://gbgk.jp/