CSS Nite LP57「All About XD」に参加しました

先日6月30日、CSS Nite in KOFUの熱も冷めやらぬうちに東京で開催されたCSS Nite LP57「All About XD」に参加してきました！

勉強熱心！（笑）

今回は急成長を遂げている「Adobe XD」の基礎から導入、活用術まで、XDについてがっつり勉強した1日でした。
ベータ版が出てから、Windowsユーザーがやっと使えるようになり、
弊社でもワイヤーフレームの（サイト構成・レイアウト）の作成にXDを導入してきました。

制作側としては今までより段違いに早いアプリを快適に使用していたのですが、
まだまだ発展途上という部分もあったり、お客様との共有の面で壁があったり
「完璧に使いこなす」とまではいっていませんでした。

今回のCSS Niteでは、そんな使いこなし術のような部分や、
お客様とのコミュニケーションツールとしていかに活用できるかという部分が
聞くことができたので、とても勉強なりました。

▲CSS Nite Facebookページよりお借りしました

ということで、セッションが８つと多く、レポートが遅くなってしまったのですが、
関連ツイートをまとめながら感想をレポートしたいと思います。

1.XDが提案するこれからのデザイナーの働き方

講演者 ：長谷川 恭久

従来のツールは以下のことをツール上で考慮できなかったのが大きい。今は随分良くなってきている（もちろん XD も含めて）。 #cssnite 1️⃣情報共有不足2️⃣エッジケース3️⃣技術的制約— Yasuhisa (@yhassy) 2018年6月30日

デザインツールは「表現力を高める」と「連携力を高める」もので分けられる。PhotoshopとXDは異なる次元のツールであることを意識しなくてはならない。#CSSNite pic.twitter.com/PbcK4e5YFj— 池田 泰延／ICS (@clockmaker) 2018年6月30日

自動化・機械化の話を昨年からよくしているけど、デザイナーの仕事を奪うという文脈ではない。スケッチブックなどにアイデアを描くのと似たような行為がパソコン上で自由に模索ができるようになってきていることに気づいて欲しいから。 #cssnite— Yasuhisa (@yhassy) 2018年6月30日

【ワタナベのヒトコト】
コミュニケーションツールとしてのXDを使うということは
理解していたけれど、その意義について考えることができました。
デザイナーとしてはどのように使用していくか、とても共感できました。

2.今日から使えるようになる！Adobe XDの基本的な利用方法

講演者 ：濱野 将（IMAKE）

Xd はワイヤー、デザインカンプ、プロトタイプ、コミュニケーションツール、Ps は写真加工などの編集、Ai はロゴやアイコンなどの作成と、それぞれの分野で得意なツールを使い分けるのが効率が良い。 #cssnite— CSS Nite (@cssnite) 2018年6月30日

【ワタナベのヒトコト】
すでに業務（ワイヤーフレーム作成）で使用しているので、復習だったのですが、
追加機能の確認ができて良かったです。

3.Webサイト制作における「デザイナーの制作ツールとしてのXD」その活用方法

講演者 ：佐藤 修（フラッグ）

Xd の向き・不向きXd は Ps のレイヤースタイルや Ai のアピアランスといった細かい設定は不向き。Xd はフラットデザインは得意だが、リッチデザインは苦手と言える。CCライブラリと組み合わせて使うことでリッチデザインへの対応も大丈夫になる。 #cssnite— CSS Nite (@cssnite) 2018年6月30日

まとめ背景と課題：「作業スピードの向上」「修正に強いデータ」が必要解決法：「ワイヤーフレーム」からXDを使うこと。「アセット」「リピートグリッド」で効率的に作る活用：「CCライブラリ」で「Xdの苦手分野」を克服 #cssnite— CSS Nite (@cssnite) 2018年6月30日

【ワタナベのヒトコト】
アセットの機能はあまり使ったことが無かったのですが、とても便利！

すぐに使い始めます！可能性が広がる便利な機能だなと思いました。

4.コミュニケーションを可視化する！XDストーミング

講演者 ：池原　健治（ソニー・インタラクティブエンタテイメント）

XDストーミングで、ブレスト感覚でデザインする。#cssnite— Akiko Kurono (@crema) 2018年6月30日

XDストーミングで何が変わったか・早めの共有でコミュニケーションが加速・下流工程へのスムーズな受け渡し・独りよがりのデザインにならないXDストーミングでコミュニケーションを可視化してワークフローを最適化しよう！ #cssnite— CSS Nite (@cssnite) 2018年6月30日

【ワタナベのヒトコト】
埋め込みコードについてはどのようなシーンで使うのか気になっていたので、スッキリしました！
リアルタイムのコミュニケーションツールとして使う方法はクライアントさんのリテラシーは
関係ないので、打ち合わせなどでも比較的使いやすい方法だなと思いました。

5.あらゆるワークフローを改善！デザインツールを超えたXDの底力

講演者 ：田中　忍（LIFULL）

赤入れツールとしてのXD他のツールではやりにくい、XDならではの履歴管理が可能。自社のリクルートサイトPJにおいて、すでにリリースされているリクルートサイトについて、デザイン修正とコンテンツページ拡充を行い、２次リリースをする。このPJにおける「赤入れ」にXDを活用した。 #cssnite— CSS Nite (@cssnite) 2018年6月30日

ほほーん、なるほど。見やすい赤入れツールとして使えるのか。aunは無料だと30日で消えるし、基本的に公開されてるページじゃないと無理だけど、Xdのほうが「ローカルスクショでローカルで指示をまとめられる」から柔軟そう #cssnite— さとペン@PentaPROgram (@PentaPROgram) 2018年6月30日

【ワタナベのヒトコト】
赤入れツールとしてXDのプロトタイプが使えるというお話は目からうろこでした！
DTPでのコミュニケーションツールとして使えるなど、本当に使用シーンの
可能性は広がるなとワクワクしました。

6.Adobe XDアドバンスド～最先端のプロトタイピング手法の実践

講演者 ：境　佑司（Creative Edge School Books）

Photoshop の「コンテンツに応じた拡大・縮小」機能、「焦点領域」機能、「コンテンツに応じた塗りつぶし」機能、「コンテンツに応じたパッチ」機能などで、AI が活用されている。 #cssnite— CSS Nite (@cssnite) 2018年6月30日

【ワタナベのヒトコト】
AdobeのAIすごい！
photoshopのAI機能も知らないことがたくさんありました。
「焦点機能」は初耳だったので、よく調べて使ってみたいと思います。
AIを使用することで作業効率のアップにつながる！

7.ディレクターが考えるXDの導入・活用方法

講演者 ：栄前田 勝太郎（リズムタイプ）

クライアントから見た場合、クライアントのリテラシーの差や熱量の違いがある。クライアントの気持ちや姿勢を把握して、それらに見合った対応が必要。 #cssnite— CSS Nite (@cssnite) 2018年6月30日

パワポやエクセルで構成案を作れる人はXDを使える作業環境があれば1〜2時間で移行できる#cssnite— まんげつ (@kodamarathon) 2018年6月30日

One more things…で発表されたのが、「Wires jp」というUIキット。ディレクターにも嬉しい、ワイヤーフレームUIキット。https://t.co/7tEPTtPOkn#cssnite— 池田 泰延（勉強会用） (@clockmaker_bot) 2018年6月30日

【ワタナベのヒトコト】
導入はとても課題だなと感じていました。

実際にフィードバックは紙やpdfなどでと言われることが多いので、

そこであきらめずに、「負荷を超える価値」を伝えていくことが
大事なんだなと改めて感じました。

8.Adobe XDとともに進化するデザインの未来

講演者 ：北村　崇（TIMING DESIGN）、湯口　りさ（ネットパイロティング）、轟 啓介（アドビ システムズ）

XDはアップデートしていてもUIがそんなに変わっていないので、いつ初めても割と大丈夫らしい #cssnite— まんげつ (@kodamarathon) 2018年6月30日

スワップシンボル機能はシンボルの中に画像が１つ、テキスト１つなら、引き継いでくれる。 #cssnite— CSS Nite (@cssnite) 2018年6月30日

【ワタナベのヒトコト】
細かい機能などが分かってXDに対する理解が深まりました！

▲CSS Nite　Facebookページよりお借りしました

ということで、1日がっつりXD漬けの1日でしたが、理解がとても深まり、もっと活用していけるヒントになった気がします。
新しいツールを導入するときには、まずラーニングコストを意識してしまい面倒になってしまうことが多いと思いますが、XDは直感的に操作ができ、比較的簡単に使いこなすことができるということなので、お客様にも有意義なかたちでのご提案につなげられるよう、活用方法を幅広く考えていきたいと思います。