こちらは、CSS Nite LP57再演版のフォローアップページです。表記揺れなどは原文ママで編集はしていません。
すべてのコンテンツが出揃いました。
告知ページへの追記事項などはFacebookイベントページにて随時お知らせしていきます。
なお、ビデオ参加の方には、コンテンツが出揃った後にメールにてもお知らせします。
公開ポリシー
このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。
- このページのID/パスワードの情報はツイートなどされないようにお願いします。
- CSS Niteのコンテンツの再利用について
ツイート
ツイートは下記にまとめました。
XDが提案するこれからのデザイナーの働き方
長谷川恭久
セッション1「XDが提案するこれからのデザイナーの働き方」で登壇した長谷川です。休日に時間をつくって来場していただき、ありがとうございました。基調講演ということもあり具体性が低めの内容でしたが、何かしら価値提供できていれば幸いです。
XDのようなコミュニケーションツールを使うことで方向性の共有はしやすくなると思います。しかしそれは、デザインを知らない人へのコミュニケーションも増えていくことも意味しています。ただそのときに考えておきたいのが、「デザインを知らない」で言う「デザイン」とは何を指しているのかという点です。
もし見た目のバランスや印象を語っているのであれば、それは「デザイナーだけが気にしていれば良いデザイン」です。デザイナーとして伝えなければいけないのは、「課題の共有」と「課題に対する解決の提案」です。 Web サイトを作ることは手段であり、課題でもなければ目的でもありません。ユーザーに何をしてほしいのか。ビジネスへどのように貢献するのか。それらに対して、あなたが作っているデザインがどのような役割を果たしているのかを伝えることが、デザインを知らない人に対してできることだと思います。
しかし、語るだけでは伝わらないですし誤解も招きます。だからこそ、XD のようなツールを用いて視覚化して伝えるような練習を始めていただけたらと思います。
アンケートでいただいた質問は Twitter で答えました。ディレクターがいない海外の話や他のデザインツールについて答えています。
https://bit.ly/2z0IxCn
ソーシャルメディアでフォローしていれば、デザイン関連の最新情報や、私が作っているコンテンツをいち早く入手できるので、興味ある方はぜひ。
Facebook https://www.facebook.com/yhassy/
Twitter https://twitter.com/yhassy
Instagram https://www.instagram.com/yhassy/
今日から使えるようになる！Adobe XDの基本的な利用方法
濱野 将（IMAKE）
皆様、先日はご足労いただきありがとうございました。
「今日から使えるようになる！Adobe XDの基本的な利用方法。」でXDの使い方を開設させていただきました濱野です。
貴重な休日にもかかわらず、お話を聞いてくださり大変感謝しております。
参加いただいた皆様からのアンケートをすべて拝見させていただきました。
「勉強になった」「役に立った」「使ったことがあるけど知らなかった機能もあってためになった」などのお声も頂戴し、熱心かつ真剣に聞いていただけていたことが感じられ、登壇者として冥利に尽きる思いです。
実演で行ったXDのサンプルファイルと、素材として使用した画像とテキストは「sample.zip」に格納いたしましたので一度ご覧ください。
また、多くのご質問もいただいておりましたので、下記に記載させていただきました。
質問
クラウドで共有できないときどうするのか？
PhotoshopやIllustratorで作成した画像やパーツなどを、クラウド間で共有できない場合は、作成したそれぞれのツールでpngなどに書き出して、素材フォルダなどに格納してそれをドラッグ＆ドロップで配置しています。
プロトタイプはXDを持っていない人でも共有可能ですか？
ワークスペース画面右上の共有ボタンから「プロトタイプを公開」や「デザインスペックを公開」で共有可能です。なお、Adobeのアカウントを持っていない方でも、ゲストとして閲覧することができます。
Photoshopとの便利な連携法
Photoshopと同じくらい複雑なデザインができるのか気になりました。また、Photoshopで作って、XDに互換性があるのかが気になりました。
Photoshopと同じ複雑なデザインができるかというと、XDは操作性の軽さや起動時の速さを重視しておりますので、多角的にいろいろできる機能は備わっておりません。
ですので、得意な分野は得意なツールに任せて補完し、CCライブラリで共有したり、Photoshop連携をするとより効率的に作業が進みます。
以前、CC道場という番組に出演させていただいた際にPhotoshop連携について解説させていただいた動画がございますのでこちらをご覧ください。
XDからコーディングの時同じ動作になるようなcss/jsの設定が簡単になる方法はありませんか？
XDからのCSSやHTMLの書き出し機能はまだ備わっておりません。
現在の対応策としては、Macのみの機能ですが、サードパーティ製のZeplin・Avocode・Sympli・ProtoPie・Kite Compositorなど、デザイン処理ツールと連携してデータ転送をすることで制作したものを活かすようにすることも可能です。
使用される機会がございましたら、是非お試しください。
UIキット、コピペ以外の使い方ってあります？
本来であれば、他ツールとからパーツを持ってくるときと同じように、CCライブラリでパーツ共有ができるの理想なのですが、XDからCCライブラリへ登録できる機能がXDでは備わっていません。
ただコピー&ペーストに問題あり、コピーしたものがシンボル化されていると、複数回に分けてコピー&ペーストをすると同じシンボルも複製され、アセット内に同じシンボルがいくつもできてしまうという問題があります。
現在はUserVoiceでも指摘があるので、バージョンアップで今後使いやすくなるようになるといいですね。
カーニングでいつも困るのですがよい方法は？
たしかにそうですね。カーニングができる機能は備わっておりませんので、Illustratorで持ってきたsvgやpngファイルをCCライブラリやドラッグ＆ドロップで持ってくる方法しかありませんね。
余談ですが、縦書きにする機能もないので、その場合は上記の方法で補完して行うこともありました。
「ここが使いずらいのよ～」というのがあれば知りたい
質疑応答であったリピートグリッドのマージンを数値入力できない点もそうですが、使用したいフォントが一覧でサンプル表示できないのが使いづらさを感じますね。
XDのプロトタイプ共有が安全性（情報漏洩）の問題でまだ社内で許可されていません。業務でどのようにクリアしていますか？
幸い弊社クライアント様との取引ではまだそのような事例が発生していないのですが、もしそのようになった場合には共有にある「プロトタイプを公開」の「パスワードを設定」でベーシック認証を設けるか、ベータ版ですが「プロトタイプを公開」内の下部にある「非公開プロトタイプ」を一度進めてみるのはいかがでしょうか？
最新バージョンで追加された機能になりますので、詳しくはこちらを参照ください。
他ユーザー（個人アカウント）との共有は可能か？
個人アカウント間でのやり取りは、こちらも上記の「非公開プロトタイプ」内にある「招待」からメールアドレスで招待することで共有可能になります。よりセキュアな形で共有ができるかと思います。
プレビュー時の文字テキストのデバイス化と、リンク（外部）の埋め込みはできないのでしょうか？
プレビュー時は表示されているパーツがすべて画像になってしまうので、リンクの埋め込みはできません。
テキストに関しては、文面をクリップボードにコピーすることは可能です。共有内にある「デザインスペックを公開」から該当の文面があるアートボードに進み、その文面をクリックすると右側にスペック一覧が表示されるので、そこにあるテキストをクリックするだけで一括でコピーすることが可能です。
ご質問は以上となります。ありがとうございました！
誰でもかんたんに学べるAdobe XD入門講座
配布させていただいておりましたUdemy講座の「誰でもかんたんに学べるAdobe XD入門講座」はこちらのリンクよりアクセスいただけると、チラシと同じく特別割引（1,200円）で受講できますので、もっと詳しく自分のペースで学びたい方はこちらもご覧ください。
他にも何かわからないことなどがありましたら、遠慮なくメッセージなどでご連絡いただけたらと思っております。
濱野 将のFacebook
https://www.facebook.com/2yanko
また皆様とお会いできることを楽しみにしております！
CSS Nite LP57「All About XD」にご参加いただき、誠にありがとうございました！
Webサイト制作における「デザイナーの制作ツールとしてのXD」その活用方法
佐藤 修（フラッグ）
コメント
休日の貴重な時間を使ってご来場いただき、誠にありがとうございました。
今回はこれからXDに触れる方が多かったので、説明の仕方もこれまでPhotoshopやIllustratorを使っていた方、また初めてXDを使う方にもわかりやすくなるよう、できるだけ比較をしたり、噛み砕きながら説明したつもりでしたが、いかがだったでしょうか。少しでもXDへの理解が深まっていただけたら幸いです。
ご紹介した操作方法の中でも、アセットについてはデザイナーだけでなく、ディレクターがワイヤーフレームを作るときにも大変便利な機能なので、ぜひ活用していただければと思います。
また、XDとは関係ないですが、セッションで使用した音源（SE、BGM）は自作したもので、今回のために書き下ろした曲になります。全て授業のチャイム（キンコンカンコーン）をベースに作曲していますので、気づかなかった方は、下記リンクからチェックしてみてください。
以下、質問への回答になります。
質問「デザインが全体で時短化されるのが想像しにくい。直すのはやはくなるけど、ライブラリを使って時短化できるのか疑問」
XDで作業の時短化もできるですが、その時短化した分を「クライアントに納得してもらうための時間にあてる」などで、結果、出し戻しが減らせたりすることで、トータルの時短化に繋がったりします。レイアウトしたり、フォントを選んだりするだけがデザインの時間ではない（それだけが時短化ではない）ということだと思います。
また、CCライブラリについては、時短化の材料ではなく、XDの表現力を補うための技術だと思っていただければと思います。
質問「Photoshopで管理していた素材全てをXDに移行する事は可能か」
Photoshopのデータの作り方や、更新頻度などの案件の性質によってさまざまですね。
なので、一概に「移行可能」とはいえませんが、条件次第では移行できると思います。
質問「プレゼンテーションのスライドは、何のアプリケーションを使っていたか」
Keynoteになります。このイベントで、初めて使いました。
スライドの作り方についても、多くの方にご好評いただき苦労した甲斐がありました（笑）
質問「すでに個別に作ってしまったパーツを、あとからアセットにまとめることはできるか」
「カラー」や「文字スタイル」については、あとから登録しても支障ないと思いますが、「シンボル」に関しては、後からの登録が向いていないのが現状です。
ですので、ある程度テンプレート化したものを最初に用意し、そこからプロジェクトを始めるのが良いと思います。
質問「パターンのPs/Aiへの展開方法が知りたい。/コーディングへの書き出し方法は」
リピートグリッドを解除すると個別のパーツとして選択できるので、こちらから展開するのが良いと思います。
質問「パターンをリピートグリッドで作ると重くなるが、解決方法は」
私の環境で重さを経験したことがないのでよくわからないでのすが、もしかしたら、リピートグリッドの内容（複雑さや画像数など）や、アートボードの数、もしくは、他の要因があるかもしれません。
質問「アセットの一括編集のとき、一部だけ編集対象から外したい場合はどうすればよいか」
この場合は、その「編集対象から外したいもの」を、予めパラメーターを変えておく必要があります。アセットはアセットと同じパラメーターに対して編集を行いますので、アセットと異なるパラメーター状態にすることで、回避できると思います。
質問「スマホからPCへの展開のときは、データはどうしているのか」
デモでお見せしたやり方の場合、デバイス毎にファイルを分けて制作するとよいでしょう。先に1デバイス分のデザインを仕上げ、そのファイルを複製して他デバイスへと展開することになるので、ページ数が出揃っていない時などは、この方法を取り入れるのが難しいかもしれません。
質問「「早さ」ではなく「速さ」ではないのですか？」
XDが軽いことで実感できるのは、動作としての「速さ」だと思います。ですが、ゴールはそこではなく、その恩恵を受けた結果としてコミュニケーションが加速し、時間的に「仕事が早く終わる」ことですので、本セッションの場合は「早さ」という表記としています。
soundcloud https://soundcloud.com/samuato/sets/chime
コミュニケーションを可視化する！XDストーミング
池原 健治（ソニー・インタラクティブエンタテインメント）
コメント
Adobe XD漬けの半日という長時間に渡ってご参加いただき、ありがとうございました。
Adobe XDの機能的な説明などは他のセッションの方々におまかせして、私からはコミュニケーションツールとして情報伝達を最適化したり、自由な発想で様々な使い方ができるXDの懐の深さをお伝えできるように心がけました。
自分の中では初めての試みとして、ステージ上スタンディングでのプレゼンにてお話をさせていただきましたが、スライド送りのミスなどで一部お見苦しいところもあり、申し訳ありません（もっと練習します！）。
まずは皆さまに「Adobe XDは楽しい！使ってみよう！」と感じてもらえたら幸いです。
セッションでもお伝えした弊社リクルートサイト制作にAdobe XDを活用した事例については、過去のインタビュー記事もご参考までに共有させていただきます。
参考リンク
セッション中にお見せしたデモ
ご意見、ご質問に関して
（質問）XDストーミングは、修正・確認がスピーディーで簡単になるよ、と受け取ればよいでしょうか？
集まった関係者が頭の中で考えていることを、ラフでよいのでその場でイメージや動きを作成・修正して共有することで、「認識のずれを無くす」ということが最大の目的と考えています。
もちろん他のツールでもやろうと思えば同じことはできるのですが、Adobe XDのレスポンスの速さと修正に強い機能が、特にこの手法に適していると思っています。
（感想）デザイナーがXDに慣れていないとスピード感が落ちると感じました
もちろん操作に慣れているに越したことはありませんが、XDはデザインツールとしてはとてもシンプルな操作体系で、初めて触るユーザーでも比較的短時間で主要な操作を直感的に行えるようになります。
まずはご自分でいくつかプロトタイプまで作ってみて、慣れてきたところでブレストでも使用してみると良いかもしれません。
（感想）デザイナーとエンジニアのコミュニケーションが大事
弊社ではエンジニア（として動くこともある）の私からデザイナー側にAdobe XDを広めたという経緯から、比較的導入は楽でしたが、 学習コストの低さにより、その逆（デザイナーからエンジニアへ）も有りだと思っています。
（質問）エンジニア的に実装のつなぎこみでどうやってるのか気になる
弊社の場合デザインスペックが（物理的に）使えないので、基本XDファイルをデザイナーとエンジニアで直接やり取りしています。位置情報や色やフォントなどを取得するのもPhotoshopなどと比べてもやり易いと感じています。作り込んだイラストなどは一部Illustratorファイルから直接書き出したり、写真素材などは別途まとめて手配してもらうこともあります。
私自身がXDでデザインしたり、XDからコーディングしたりすることがあるため、デザイナーとエンジニアでお互いに見易いXDファイルを作るように心がけています（マークアップを意識したレイヤー・グループ構成など）。
（キーワード）イケてない要望はイケてないデザインを作って見せたほうが説得力がある
いかに最小限のパワーでイケてなさを見せるかがポイントです。・・が、イケてないと思われる中にキラリと光るものがあるときもあるので、生かすか殺すかはあなた次第です！
（感想）XDストーミングは時間がとれないクライアントとの会議の時に使えそう
田中さんのセッションでもおっしゃっていましたが、まさに「井戸端会議」感覚でイメージや動きの共有と、その場でちょっとした修正までできるのは短時間のミーティングでも効果がありそうです。
（感想）XDストーミングは使いどころは選びそう。クライアントのリテラシーが低いと、かえってUIのディテールばかりの話になってしまう気がしました
「なんとなく頭には浮かんでるんだけど、やりたいことをうまく伝えられない」という場面にも「例えばこんな感じにしたらどうでしょう」とラフなイメージを作りながら提案することができるのは、「考える速度でデザインできる」XDならではのミーティングスタイルです。クライアントとのレビューではディテールよりも、どちらかというと全体のストーリーや画面構成、デザインの方向性などの認識を合わせることを重視し、その分内部確認でUI設計などのディテールを詰めるようにしています。
（感想）複数の人間をアサインして時間と場を共有するのはいろいろ難しいのでは？
確かにクライアントまで巻き込んだXDストーミングを行うのは、まずセッティングするのが一番大変かもしれませんが、作り込んだ状態でレビューしてちゃぶ台返しがあるよりは、短い時間でも途中の段階で見せながらその場で修正していくほうが、結果的には近道になる場合もあります。
（質問）リアルタイムブレストはどの程度の時間をとっているのでしょうか？
デザイナー同士やエンジニアなど、実作業する人間の場合は2時間程度長く行うこともありますが、マネージャーやクライアント、仮想ユーザーなどの場合は予定を確保できる現実的な時間として1時間程度で行うことが多いです。
（質問）ブレストしてもしゃべらない人はどうすればよいですか？
日本人はシャイな方が多いので、そこは議長が適度に話題を振るなど、欧米式が良いかと思います。
（感想）同じくセキュリティの関係でクラウド機能が使えないため、参考になりました（他同意見）
クラウドを使えないことで、かなり機能的な制限を受けるAdobe XDですが、リアルタイムなコミュニケーションならではのメリットと、（デザインスペックではなく）XDファイルそのものを下流工程にやり取りするワークフローを突き詰めていきたいと考えています。
（もちろんクラウドが使えるに越したことはないですが！）
（感想）社内サーバーのみで（セキュアに）クラウドが使えるようにAdobeにリクエストしたいです
是非！
（質問）クラウド機能を使えないところも多いと思います。何か外部とのやりとりでできる方法があれば知りたいです
上記ご意見のように、社内サーバーのみでのクラウド利用などができれば望ましいですが、Adobe XDは無料で利用できるスタータープランがあるため、XDファイルを開ける環境を導入することは可能です。ブラウザを介した共有はできませんが、XDファイルをやり取りして、直接プロトタイプを実行することである程度は代用できるかもしれません。
（質問）できるだけアートボードは増やさないほうが管理は楽？
確かにアートボードが少ないほうが管理しやすいですが、優れたUI/UXの模索にはどうしてもアートボードは煩雑化しがちです。無理に増やさないように考えるよりも、シンボルやアセット機能をうまく使って、アートボードが増えてもまとめて修正できる構造にしたり、過去のバージョンと住み分けて、複数のパターンを常に把握できるようにするなど、地味ですが整理整頓も大事です。
（感想）カルーセルのプロトタイピングのヒントになる情報が入手できてとてもよかった
実は今回お見せしたデモは、前回のCSS Niteのときにアンケートで頂いたご意見
「メインビジュアルのスライドを見せるときなどに（埋め込みコードが）使えそうだと思いました！」
を参考に制作しております（笑）
誰もがアイデア次第で面白い使い方ができる可能性を秘めているのもXDの魅力です。
（質問）埋め込みコードを利用したスライダー部分などはそのままHTMLに配置、本番運用できるのでしょうか？
見た目だけでいうとコーディングで実装したものに近いイメージ・動きはできるかもしれませんが、実態はAdobeのサーバーに置かれたプロトタイプのため、急な仕様変更なども起こり得ます。また、アクセシビリティ、SEOの観点からも、あくまでコンポーネントベースでのプロトタイプとして利用するのがよいかと思われます。
（感想）埋め込み機能の利用方法がわかったのが嬉しい
本来は例えばブログ記事などで、作成したプロトタイプを埋め込んで紹介する、といった使い方が想定されます（笑）
Webページそのものに違和感なく埋め込みプロトタイプを同化できるので、より実装に近い状態でのプレビューも可能です。
（キーワード）シュウゴ（他同意見）
シュウゴはあなたの心の中に・・・
（感想）どこいつキャラたちに会えたのも嬉しかったです！
ありがとうございます！（最近ゲームのほうが出ていませんが…）弊社どこいつ担当プロデューサーも喜ぶと思います！
あらゆるワークフローを改善！デザインツールを越えたXDの底力
田中 忍（LIFULL）
ご参加いただいた皆様、ありがとうございました。
私からは「汎用性」をテーマに、実例を交えつつXDの利用例をご紹介させていただきました。
XDは、挙動の軽快性、共有機能の利便性、イージーな操作性といった特徴により、さまざまな用途に耐えうるツールに仕上がっています。
今回多くの反響をいただいた履歴を記録／管理するという使い方も、ハッと閃いた訳ではなく「使っているうちに自然とそうなった」という感覚です。XDは利用者の感性に呼応して多彩な可能性を示してくれます。
今回のセッションが、皆様の制作活動の一助となれることを願っています。
ご質問と回答
（感想）ワークフロー上で、どの立場の人が、どのように、どれくらいXDに触っていたかが分かりにくかった。
おっしゃる通り、今回は「誰が」という点はあえて深く触れずにおりました。XDが持つ、誰にでも様々な場面で活用できる汎用性をお伝えしたかったためです。
XDの利用に関わらず、どんな立場の人がどんな関わり方をするかは、現場ごとに全く違う場合もあります。
皆様のお立場で、用途を見出す上でのご参考にしていただければ幸いです。
（質問）関わる人にXDのリテラシーが無くては難しいのでは？
プロトタイプの共有画面がわかりやすいので、リンク1本渡して見てもらえれば順応いただける事がほとんどです。
（「気になった点は共有画面のコメント欄に」といった一言は添えたりします）
作業者として仕様書を書いたりするには多少慣れる必要はありますが、XDは直感的な操作性で誰でもすぐに扱える強みもあり、ハードルはそう高くありません。
なお、XD導入におけるハードルをどう超えるか、については、私より栄前田さんのセッションの方がご参考になるかもしれません。
（質問）履歴管理の方法を詳しく知りたい。
大変恐縮ながら、事例における実際のXDデータの共有は出来ないのですが、代わりにサンプルのXDデータを用意しました。下部のダウンロードリストにございます。
あくまで1つの例ではございますが、よろしければご覧になってください。
（質問）仕様書とあるが、実際、中間成果物の意義が強いので、契約（請負の納品）としてどこまで耐えるのか？
最終成果物を最高品質で提供するためには、成功要件を確実に押さえながら進行し続けることが何より重要です。
私が3つ目にご紹介した地方創生の事例がまさにそうですが、ワークフロー上の経過地点で都度生まれるアウトプットに「コレジャナイ感」があった場合、（要件定義で躓いていない前提で）何かしらの要件を満たせていなかったと考えられます。
※地方創生事例でいうと、「期待感を醸成する」という要件があったのに、ターゲット視点でワクワクするものに仕上がりそうにない仕様書が渡されたので、精度が低い、と表現していました。
逆に言えば、構成段階で要件をこぼしているだけなのでコミュニケーションによって解消することが出来ます。その点でXDは、密なコミュニケーションを取りながら画面構成のプレビューを高速で回す事ができるため、優れた適性を発揮します。
こうした経過地点における要件達成の品質を厳しく見ていければ、最終成果物もよりよいものになると考えております。
（質問）XDをデザインデータとしてエンジニアに受渡した際、エンジニアはこのXDデータをどうコーディングに落とし込んでいるか？
コーポレートサイトの時は、XDファイルをそのまま渡していました（2017年当時）。エンジニアの手元は当時見ていませんが、IllustratorやPhotoshopからデータ抽出する際と同じ方法で対応していたはずです。
ただし、その後XDに「デザインスペック」という機能が実装されました。これは、デザイン画面の色、要素のサイズ、要素と要素の幅、といった実装に必要なさまざまな情報を、ブラウザ上で簡単に取得できる機能です。リンク1本で共有できます。
これが実に便利なので、現在ではXDファイルそのもの＋デザインスペックのリンクを渡す、という対応になりました。
（質問）XDを導入するとき反対意見は出なかったか？
現場レベルでは特に反対はありませんでした。むしろ井戸端会議で「良いツールだ」と感じてくれる人が多かった印象です。
ただセキュリティ・ポリシーの関係で、プロトタイプ共有に関して情報システム部門との折衷が必要でした。
しかし最近ついに、共有リンクにパスワードが掛けられるようになったので、今は特に問題なく利用できています。
（質問）デザイナー以外でXDを使う人は社内にいるか？
います。マークアップエンジニアは、デザインデータをXDで渡される場面で必然的に使いますし、デザイナーの出身ではないディレクターが、ワイヤーフレームの制作でXDを使っているケースもあります。
Adobe XDアドバンスド〜最先端プロトタイピング手法の実践
境 祐司（Creative Edge School Books）
ご参加された皆さん、お疲れ様でした。
このセッションで、Adobeのクリエイティブツールが「AI（人工知能）の技術で少しづつ進化し始めている」ことを知っていただけたら幸いです。
Adobe XDのツールバーには、長方形ツールや楕円形ツール、ペンツールなど、ごく基本的な機能しか搭載されていませんよね。このツール構成は、2016年3月に登場したプレビュー版から変わっていません。XDの開発チームは、アプリケーションソフトのパフォーマンスを最も重視しており、今年の1月アップデートでもズームパフォーマンスが大幅に強化されました。
プロトタイピングツールの開発で死守すべきは「軽快に動く」こと。多少古いマシンでも、もたつくことなく速く動くことがとても重要です。紙とペンだけの「ペーパープロトタイピング」が現在でも多くの企業で実践されているのは、アイデアを具現化しやすく、誰でも参加できることが大きなメリットとして評価されているからです。プロトタイプ制作は「作品」づくりではありません。コミュニケーションを促進するためのツールであることを理解しておく必要があります。
AIに処理をさせて時間を短縮できれば、もっとアイデアを出して、意見を聞くことができます。「キレイに作り込む」より「速くカタチにして対話する」ことがプロトタイピングでは価値になります。
今回は、Photoshopとの連携に絞りましたが、（2018年4月現在）50のAI機能がAdobe製品・サービスに搭載されており、まだまだ有効な手法があります。XDにAI機能がなくても、CCライブラリを介して作業すれば間接的にAIの恩恵を得られます。
Adobe Senseiの情報はまだ少なく、ネット検索しても出てきませんので現段階で「AI機能を使いこなす」のは難しいと思いますが、ゆっくりと時間をかけて、少しづつ試してみてください。
（ご質問）ミーティングしながらプロトタイプも作っているそうですが、具体的にはどのようにやっているのですか？
XDをメモ帳やスケッチブックのように使っています。私の場合は、タブレットPCでXDを使っていますので、アイデアを出しながら「落書きをするように」高速プロトタイピングをしています。こちらの動画をご覧いただければ作業の様子がわかると思います。
タブレットPCでXDを使用（Twitterの動画投稿）
（ご質問）Adobe Senseiというのは今使えるのでしょうか？
Adobe Senseiは、Adobeが開発しているAI（人工知能）技術群の総称です。AIの機能は10年以上前からPhotoshopやAfter Effectsなどに搭載されていますので、私たちはCSの時代からAIの機能を使っていることになります。今回ご紹介したAI機能もかなり古い機能です。
ただし、現在のAI技術で上書きされている機能も多く、処理能力は向上しています。最新のAIは常に「学習」しており、リリース時に「使い物にならない」レベルでも日々改善されていますので、今回のように「多くのユーザーが忘れてしまった古いAI機能」を紹介しています。
（ご質問）Adobe Senseiが使われている機能のリストはありますか？
50以上のAdobe製品（およびサービス）にAI技術が使われていると公式発表されていますが、その詳細については公開されていません。PhotoshopやLightroom、Adobe Stock、Premiere Pro、After Effectsなどのリリースノートには、搭載されているAI機能について簡単な情報が掲載されています。また、PhotoshopやLightroomの環境設定の中には最先端技術の機能を試すことができる「テクノロジープレビュー」の項目があります。
（ご質問）XD（とPhotoshopの連携）とInVision Studioではどちらが優れていますか？
プロトタイピングの作業内容や「何を求めるか」によって評価が異なります。
外観のデザインならグラフィックスに特化したPhotoshopを使いXDとデータを共有した方が効率的で表現の自由度も高いと思います。
アニメーションを含むインタラクションを手軽に設定したい場合は、InVision Studioが便利です。ただ、今回ご紹介したProtoPieとXDを組み合わせて使用すれば、もっと高度なインタラクションが可能になります。
まずは、試用版（期間限定で使用できるバージョン）をインストールして実際に試してみることをお奨めします。
XDやAdobe Sensei、AI活用などの情報は、Twitter（@commonstyle）で発信しています。
クライアント視点から考えるXDの導入・活用方法
栄前田 勝太郎（リズムタイプ）
「ディレクターが考えるXDの導入・活用方法」で登壇した栄前田です。ご参加ありがとうございました。
他のセッションでXDの様々な可能性が見えたところで、実際のクライアントワークにおける導入や実務における活用方法を紹介させていただきました。
XDはデザイン、プロトタイプ作成、コミュニケーションと多岐に渡って活用できるツールではありますが、新しいツールはそれをいかに導入し、実務においてどのように活用していくかという点が課題になりますので、それについて何かしらの参考になれば幸いです。
アンケートで頂いた貴重なご意見、ご質問に関して
「ディレクターが考える」といったテーマのセッションでしたが、導入・活用の参考になったというご意見を多数いただけました。また、制作側の視点ではありましたが、発注側となる皆さまも発注される際の参考になればと思います。
幅広くXDを利用したケースを紹介しましたが、もちろん何でもXDを使えばいいということではなく、クライアントやプロジェクトの性質に合わせて適宜判断する必要はあります。今回は幅広く紹介することで、皆さんの参考になるケースがあればと考えていました。
（質問）仕様書をXdでとありましたが、グーグルシートに移す時はキャプチャしてはりつけたのでしょうか？アートボード買いのオブジェクトは書き出せないと思いますので
キャプチャでも書き出すのでもなく、XDから該当部分を選択・コピーして、Googleスライドにペーストしていました。
XDからGoogleスライドへのコピー&ペーストは見た目はほぼそのまま持って行くことが可能です。（ただし、テキストも画像化されてしまうので、その後の編集は行えません）
（質問）クライアントとの成果物はどうしているのか知りたかった
クライアントと事前に相談・調整していますが、共有したXDのURLでOKとしてもらうことが多く、それ以外では書き出したPDFファイル。または先方にXDの環境があればXDファイルを成果物としています。
（質問）クライアントがXDを導入しない場合、どこまでの活用が可能か知りたいです。
ほとんどの場合はクライアント側でXDを導入する必要はなく、共有リンク+α（補足ドキュメント等）でプロジェクトに導入・活用できるのではないかと考えています。
クライアント側でXDの導入が必要かどうかは、クライアント側にXDファイルを編集したいというモチベーションとその時間が取れるかどうか(その体制が作れるか)で判断されるのがよいかと思います。
（感想）ただ簡単にできることをクライアントに見せることで、簡単だから安くしてよ・・・的にならないかとても不安
弊社の場合ですが、XDを利用する部分については、どのようなフローとなり、どれくらいの稼働工数がかかるかを伝えています。
簡単に見えるけど、実は工数はきちんとかかっているということを伝えることで回避できるかなと思われます。
（クライアントの関係の問題もあるかと思われますので、一概には言えないと思いますがご参考までに）
（感想）最初に紙やPPTでほしいと言われるので、導入するスキがない（2重で作ったりする）
2つ対応パターンがあると思います。
1つは、なぜ紙やPPTで作る必要があるのか、本当に紙やPPTでなければならないのか、という話をするきっかけにしてしまうパターンです。
この場合、XDを導入したパターンでどのように変わり、どのようなメリットがあるのかを合わせて伝えます。
スタータープランができたことで導入のハードルは下がりましたので、クライアントにもXDの環境を作っていただく提案を行ってもよいかと考えます。
もう1つは、紙やPPTで作りつつ、部分的にXDを利用してみて、比較してもらうパターン。手間はかかってしまうのですが、比較してもらい、XD利用に誘導するように提案します。
（感想）今までのお話はデザイナー向けの話が多かったので、ディレクターとしての活用事例、とてもタメになりました。
（感想）ディレクションの立場としていかに利用すればよいのか？ということがよくわかりました
（感想）ディレクションの自分にとって一番ささるセッションでした。（他同意見）
そう思っていただいてよかったです。
XDはディレクターにこそ使ってほしいツールです。クライアント、デザイナーやエンジニアとのコミュニケーションや、プロジェクト全体の成長のきっかけになるツールですので、ぜひ活用してもらえればと思います。
（感想）クライアントによって熱量がちがうことが、制作側にもその熱量がわかるしくみができるとうれしいなと思います。
体制や状況によるところはあると思いますが、クライアントとの打ち合わせの場に制作側のメンバーも参加してもらうのが一番伝わるかなとは思います。
ディレクターや仕組み的なもので伝えることも可能と思いますが、熱量という点については、実際に対面して体感してもらえると、納得感が得られると考えています。
（感想）XDで良いかはわかりませんね。失敗談は回避できなかったもんですかね？
XDが適しているかどうかはクライアントやプロジェクトの性質によりますので、もちろんケースバイケースですが、トライしてみる価値はあるかと思います。
弊社はクライアントとのコミュニケーションにかなり時間をかけますが、やはり初めてのお取引のクライアントの場合は読み切れない場合があり、失敗談のケースに至ってしまうこともあります。
回避できるのがベストですが、失敗となってしまったケースもそれを次回以降への改善への学びとするようにしてします。
（感想）失敗例はリアルでした。クライアントにも使ってもらうといのは挑戦してみたい。
ぜひ挑戦していただきたいです。それによって、いままでクライアントからは出てこなかった意見やお互いのコミュニケーションの変化を得られると考えています。
（感想）Wires jp ステキです、使います
ありがとうございます！思っていた以上の反響をいただいてとても嬉しいです。
汎用的で実戦で使えるキットとして作りましたが、皆さんに使っていただいて、ご意見・ご感想いただければ幸いです。
Wires jpについてのご意見・ご感想は、
Adobe XD JapanのFacebookページ 、または私のTwitter @katsutaro 宛てにいただければと思います。
Adobe XDとともに進化するデザインの未来
北村 崇（TIMING DESIGN）、湯口りさ（ネットパイロティング）、轟 啓介（アドビ システムズ）
コメント北村
ご参加ありがとうございました！
最後のセッションということで、他のセッションでカバーしきれなかった細かなポイントや、これからのお話をさせていただきましたが、他にもまだまだ伝えたいことや伝えきれなかったこともあります！
XDは今後もどんどん進化をしていくと思いますので、皆さんも色々な使い方をためしてみてください。またデザイナーやディレクター、プロジェクトをつなぐ架け橋としても、ぜひ活用してみてください。
コメント湯口
ご参加ありがとうございました。
XDは、「できないかも？」が「できちゃう！しかも簡単に」に変わっていく毎月の更新が楽しみなデザインツールです。その楽しさを少しでもお伝えできたならとても嬉しいです。
今回のイベントをきっかけに、社内での情報シェア、グループ活動・SNSでのちょっとした投稿といった小さなところからXDそのものを利用してみたり、周りの方におすすめしたりしてみてください。
XDからはじめるデザインコミュニケーションでどんどん周りを巻き込んでいきましょう！
コメント轟
ご参加ありがとうございました。
XDチームは「Design at the Speed of Thought」という開発ポリシーに基づき、世界中のユーザーさんからもフィードバックをいただきながら開発を進めています。日本からのフィードバックにも注目しているので、ぜひみなさんのご要望やアイデアをUserVoiceから教えてください！
質問と回答
JPGは結局自分で2倍を作らなければいけない？
いいえ。次の手順で1倍と2倍サイズのJPGファイルを一度に書き出せます。
- XDで予め用意されているアートボードを作成します
- 書き出したい画像を配置しサイズ調整や型抜きなどの加工をします
- 書き出す画像を選択して書き出しの設定をする画面まで操作を進めます
- フォーマットを「JPG」に指定します
- 書き出し先を「Web」に指定します
- 設定サイズは「1x」に指定します
- 書き出します
注意点は、2倍程度のサイズの画像を用意しておくこと。そうしないと2倍で書き出した画像が荒くなってしまいます。
もし、デザインは実寸の二倍サイズで作ることが決まっている場合には、アートボードのサイズに注意し、設定サイズに「2x」を設定します。
※設定サイズについては、配布している「スライド中の書き出し設定一覧表部分」を参考にしてください。
オーバーレイ スクロールやり方がわかりません
- どの領域でスクロールさせたいかを親のアートボード上でデザインします
- アートボード外に作ったデザインを移動します
- アートボードツールで移動したデザインに沿ってアートボードを作成します
- 背景になるシェイプを固定位置にします
- アートボードを選択してスクロールの項目を「垂直方向」に設定します
- アートボードの高さを広げます
- プロトタイプモードでオーバーレイを設定します
配布しているデモファイルで、ちょっと工夫が必要なオーバーレイサンプルを確認できます。オーバーレイ スクロールも設定済みですので合わせてどうぞ。
URL
お問い合わせ
ご不明点やお気づきの点がありましたら、フォームからご連絡ください。
協賛、協力
年間を通して、次の企業/団体に協賛いただいています。
