
【最速レポート】CSS Nite LP67 「All About XD (update 2020)」に参加してきました!
皆さんこんにちは。松本市の制作会社イー・オフィスのwebディレクター本山です。
今日はCSS Nite LP67 「All About XD (update 2020)」に参加するために朝早くからあずさに乗って松本から東京まで行って来ました。
普段東京のセミナーや研修は1人で参加することが多いのですが、今日はパートナーでいつもお世話になっているベテランデザイナーさんと、いつも僕の仕事をサポートしてくれているディレクターと3人で出席。
お昼前に大崎について、会場の大崎ブライトコアの1Fの『ニクバルダカラ』で3人仲良く仕事の不満をぶちまけながらザブトンステーキを食しました。
レアな感じで、塩とワサビで食べるステーキは肉の味が楽しめて美味しかったです。
では例によってツイートのまとめで今日の全てのセッションを振り返りたいと思います。
そして多分このレポートは参加された方の中で多分最速(投稿時間が2/8 18:40 まだセミナーは終わっていない)なはず。なので速報的に楽しんで下さい!
セッション1『ワークフロー全体から考えるAdobe XDの役割と活かし方』
益子 貴寛さん(株式会社まぼろし 取締役CMO)
セッション1 益子貴寛さん
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
「ワークフロー全体から考えるAdobe XDの役割と活かし方」
従来のツール、Word,Excel,PowerPoint,Ai,Psなどだと画面設計に向かなかったり、学習コストが高いなどの欠点がある。#cssnite
『思考の速度でデザインする』がXDの開発コンセプト。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
【XDでできる成果物】
・デザイン
・プロトタイプ
・企画書
・ペルソナ、CMJ
・スライド
それを共有できるのがXDの強み。#cssnite
(クリエイティブにおける)エネルギーを注ぐとはどうゆうことか?
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
『抽象(思考)と具象(手作業)を何度も行ったり来たりする。』こと。#cssnite
【figmaの特徴】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・Chromeだとめっちゃ重い
・デスクトップアプリの方が軽い
・メンテナンス中は作業不可
・フレームやグループの構造が複雑
・UI Kitが豊富
・バージョン管理が素晴らしい
・共同編集が素晴らしい
・リアルタイム実機プレビューがしやすい
なぜXDでこのツイートを...#cssnite
セッション2『大規模プロジェクトの制作プロセスを変えたAdobe XDの導入事例』
江辺 和彰さん(株式会社コンセント ディレクター/プロジェクトマネージャー)
セッション2 大規模プロジェクトの制作プロセスを変えたAdobe XDの導入事例
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
コンセントの江辺さん!#cssnite pic.twitter.com/Kzpv7Nh5R3
【大規模プロジェクトの特徴】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・情報量が多い
・ステークホルダーが多い
・検討範囲が広い
→計画的に進めていかないと、プロジェクトが破綻してしまう。したがってプロジェクトの進め方がウォーターフォール型になることが多い。#cssnite
大規模プロジェクトにXDを導入したことで、計画性と柔軟性を手に入れることできた。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
つまり、
・XDの導入後はMTGの場が提案の場から報告の場になった。
・サイトマップをインデックス化するととても便利。
・プロジェクト関係者に進捗状況をプラットフォームとして活用。#cssnite
UIやコンポーネントの色や形を1つ変えることで、全体の設計に影響が出る。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
それをマスターコンポーネントで変更することですぐに確認ができて、一箇所だけ変更するのか、ページ全体を変更するのか、詰めることが可能。#cssnite
セッション3『Adobe XDで「読む」ガイドラインから「使う」ガイドラインへ』
池原 健治さん(株式会社ソニー・インタラクティブエンタテインメント)
Adobe XDで「読む」ガイドラインから「使う」ガイドラインへ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
ソニー・インタラクティブエンタテインメント 池原さん!#cssnite pic.twitter.com/7IWPpkVBu3
時を戻せる池原さんマジイケメン。#cssnite
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
ガイドラインとは?
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・製品やサービスの正しい表記
・ブランドカラー、ロゴの定期技
・見た目の動きの統一感
等々のガイドラインが守られないと、ブランドイメージを損ねる可能性がある。#cssnite
Playstationのブランドカラーは?
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・赤
・緑
・青
正解は「青」
みんな知ってました?#cssnite
『ガイドライン=最終チェック』ではない。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
最後にチェックをするとたいていの場合失敗する。#cssnite
【アイソレーションゾーン】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
ロゴの視認性を保つために、アイソレーションゾーンには他の要素を入れない。
XD上では、アイソレーションゾーンの四角形とロゴをグループ化してコンポーネントとして作っている。
→いちいちガイドラインを確認する必要がない。#cssnite
【XDの新機能 パディング機能】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
パディング機能の応用として、文字の数に応じて大きさが可変するボタンなどを作れることができる。
※Invisible spaceのプラグインは黒歴史になってしまった模様。
【アピアランスをペースト】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
カラーバリエーションなど画角が一緒の画像などを一気に変更する際に便利。#cssnite
『Adobe XDで「読む」ガイドラインから「使う」ガイドラインへ』のまとめ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・ライブラリを使いながら、ガイドラインを自然に認識
・コンポーネントを組み合わせてテンプレート化
・新しいUIのプロトタイピング
→使うガイドラインへ#cssnite
池原さんスライドのXDのプロトタイプモードは狂気...
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
良い子は真似しないで案件。#cssnite
セッション4『プロトタイピングを制するためのAdobe XDテクニック』
佐藤 修さん(株式会社ヤプリ アートディレクター)
プロトタイピングを制するためのAdobe XDテクニック
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
佐藤さん!#cssnite pic.twitter.com/f6SBdDMsdr
プロトタイピングのクオリティ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
→サイクルを早く回して検証と改善を繰り返す。#cssnite
プロトタイプのクオリティを上げるための便利なプラグイン
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・Trimit(テキストエリアのサイズを自動調整)
・Resize Artboard to Fit Content(アートボードをコンテンツに自動調整)
・PhotoSplash2(素材選定)
・Photoshopで直接編集
リピートグリットのグルーピングも便利テクニック#cssnite
ブランクオブジェクトとは?
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
丸や四角などのオブジェクトを使って、透明度を0にする。
そのオブジェクトの大きさや形を利用してアニメーションを実装すると、豊な表現が可能。
→アニメーションはブランドの個性を表す重要な要素。#cssnite
【ドキュメントヒストリー】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
クラウドドキュメントに保存しておけば、めちゃくちゃ作り込んだアニメーションに修正が入ったとしても、作業の分岐点に後戻りできる。
なんかgitっぽい機能。#cssnite
【プロトタイピングを制するためのAdobe XDテクニックまとめ】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
「思考すること」
「手を動かすこと」
を諦めないことが大切。#cssnite
セッション5『デザイナーとコーダーがお届けする、Adobe XDを用いたモダンなウェブ制作』
松下 絵梨さん(ツキアカリ)
鹿野 壮(株式会社ICS インタラクションデザイナー)
デザイナーとコーダーがお届けする、Adobe XDを用いたモダンなウェブ制作
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
松下さん、鹿野さん!#cssnite pic.twitter.com/fQLb4uYMiE
相変わらず松下さんと鹿野さんは小芝居上手。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
ホバーステート機能はコーダーが気付きづらいため、ひと工夫必要。
・ボタン右上に注意書きを書いてあげる。
・コンポーネントのファイル名にステート状態を書いてあげる。#cssnite
【レスポンシブデザインのデモ】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
グループ化されたものにはパディング機能を使える。
あとはレスポンシブモードで左右などを手動調整して調整すると、モバイル、タブレット、PCと幅の違うカードデザインなどをさくっと作れる。
あとCSS girdが超便利。#cssnite
【レスポンシブデザインのデモ】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
グループ化されたものにはパディング機能を使える。
あとはレスポンシブモードで左右などを手動調整して調整すると、モバイル、タブレット、PCと幅の違うカードデザインなどをさくっと作れる。
あとCSS girdが超便利。#cssnite
【デザインシステムやガイドラインを共有するサービス】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
■ zeroheighthttps://t.co/mMEChEBita
プラグインもあるので、xdと連携するのが吉。
またDesign tokensの機能を使うと、カラーコードにbasecolorやprimarycolorなどの意味づけをしてくれるのでコーダーはコーディングしやすい。#cssnite
デザイナーとコーダーがお届けする、Adobe XDを用いたモダンなウェブ制作 まとめ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
①ホバーステート
②レスポンシブデザイン
③デザインシステム
取り上げるテーマがモダンでした。
zeroheightというサービスを知れて良かった。#cssnite
セッション6『プラグインとカスタマイズで作ろう!自分だけの最速XD』
中野 成(したたか企画)
プラグインとカスタマイズで作ろう!自分だけの最速XD
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
したたか企画の中野さん!#cssnite pic.twitter.com/gn0IQIbPUx
プラグイン:Split Rows
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
長いテキストを改行ごとにテキストデータを分けられる。#cssnite
XDプラグインフォルダ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・manifest.json
・main.js
・その他画像など
以上の3つの構成になっている。#cssnite
【プラグインにショートカットキーを設定する方法】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
manifest.jsonのファイルにショートカットキーを設定をすれば自分なりの好きなキーでプラグインを呼び出すことができる。#cssnite
Keybord Maestroを使った作業の自動化。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
僕はKeybord Maestroの存在は『DTP Transit』のブログを見て知りました。https://t.co/bMnacBFJ3C
XDに限らず、記号を呼び出す時などマクロを作っておくと便利。
僕の場合
→を shift+option+右矢印
で打てるようにしています。#cssnite
【Keybord Maestro】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
トライアルもできます。https://t.co/M4Y3u8O3i1
有料版を買う価値はあると思いますので気になった方はぜひ。
そして中野さんのKeybord Maestroのマクロの数がやべえ。#cssnite
プラグインとカスタマイズで作ろう!自分だけの最速XD のまとめ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
1つ1つの作業の自動化の効果は小さいかも知れないけど、チリも積もれば山となる。
そして作業の判断に時間がかからないと思考のスピードをあげることができる。#cssnite
セッション7『VRプロトタイピング:実践的なアプローチと今後の展開』
河西 紀明(合同会社 DMM.com UI/UXデザイナー)
VRプロトタイピング:実践的なアプローチと今後の展開
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
合同会社 https://t.co/95IGR9Evaoの河西さん!#cssnite pic.twitter.com/Qiz5FcDeaS
【DMM VR Labの取り組み】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・VRプロダクト開発のナレッジ蓄積
・それによって市場を広げる
・VRM(3Dアバターの統一規格)の活用#cssnite
【AdobeXDの使い所】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・デザインアセットの一元管理
・プロジェクトのドキュメント管理
・VR内の2D UIのプロトタイピング / UXテスト#cssnite
【AdobeXDの使い所】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・デザインアセットの一元管理
・プロジェクトのドキュメント管理
・VR内の2D UIのプロトタイピング / UXテスト#cssnite
プロジェクトのドキュメント管理で大事なのは、ただのパーツ集やUIの羅列だけでなく、その"文脈"を共有すること。#cssnite
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
1つのツールでできることにこだわりすぎないように。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・より強く力強く
・時間にとらわれない
・未踏のフロンティアへの挑戦
AdobeのCCを使うことによってXD以外の製品との連携もできるし、その前段階の検証も可能になる。(After Effectなど)#cssnite
エンジニアサイドからのXDを使うデザイナーへにサポートしてほしいこと
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・VRならではの独自の表現/動作はこだわらなくてOK
・既存体験に根ざした拡張体験の良し悪しを思考する
・Interface Guidelineの背景を読み解く#cssnite
セッション8『Adobe XDと連携できる優れたWebサービスの選び方と活用方法』
境 祐司(Creative Edge School Books)
Adobe XDと連携できる優れたWebサービスの選び方と活用方法
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
Creative Edge School Booksの境さん!#cssnite pic.twitter.com/nbNyL6EuRU
PhotoshopのExtensionhttps://t.co/BGGLpHccZj
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
背景の切り抜きサービス(AIで学習しているので精度がどんどん上がっている)
クラウド上で画像を共有しておくとPsからXDにすぐ反映できる。#cssnite
【プラグインの一例】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・Trimlt
・Split Rows
・FreeStockSearch
の3つの組み合わせで使い込むと、めちゃくちゃ早くデザインをレイアウトできるし、効率化できる。#cssnite
【情報の共有漏れ問題】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
重複するデータの生合成が取れない
更新作業が特定の人に依存してしまう。
↓↓↓
XDをうまく活用すると、アセットや情報などを一元管理できる。#cssnite
XDとプロジェクト管理との連携
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
JIRAなどのプロジェクト管理ツールとXDを連携することによって、ドキュメントやアセットの管理がバラバラにならずに済み、最新版がどのデータなのかもわかる。#cssnite
全て無料で使えるXDと連携できるツール
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・ZIRA
・Sympli
・Zeplin
・quest#cssnite
Adobe XDと連携できる優れたWebサービスの選び方と活用方法 のまとめ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・XDを拡張して作業効率化
・プラグインを積極的に活用
・クラウドサービスとの連携
・プロジェクト管理の重要性
特にクラウドサービスは無料で使えるものがあるので試してみることが大事。#cssnite
セッション9『アドビが提供するAdobe XDお役立ちツールやコンテンツの棚卸し』
轟 啓介(アドビ システムズ 株式会社 マーケティングマネージャー)
アドビが提供するAdobe XDお役立ちツールやコンテンツの棚卸し
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
アドビ システムズ 株式会社 轟 啓介さん!#cssnite pic.twitter.com/oqT3of1Gcb
Adobeのサービスの全てのボタンの数は1100以上ある。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
その整合性が破綻しないように、「Spectrum」というデザインシステムを導入している。https://t.co/VaAcHhxXGw#cssnite
【XDを学ぶためのコンテンツ】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・Adobe XD スターターキット(超初心者)
・Adobe XD チュートリアル(初心者)
・Adobe XD Creative Challenge(中級者)
・Adobe XD 検定(初級〜上級者)※未リリース
・Adobe XD TRAIL(初級/中級者)※未リリース#cssnite
【デザインシステム、UIキット】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・Spectrum(リードデザイナー)
・Wires jp(ディレクター)#cssnite
【非デザイナー向けXDコンテンツ】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・Quick Mockup ※未リリース
・プレゼンテーション テンプレート ※未リリース#cssnite
【デザインシステム】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
・コンポーネント
・オーバーライド
・リンクされたアセット
・コンポーネントバインド強化
・ステート
【コラボレーション】
・リアルタイム共同編集
・ドキュメント履歴
・プレゼンス
・共有モード#cssnite
今後のXDのデザインシステムの追加機能
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
■ アノテーション:説明書きの機能
今まではXDのアートボードの欄外などに記載していたが、機能として実装をする予定とのこと。#cssnite
アドビが提供するAdobe XDお役立ちツールやコンテンツの棚卸し のまとめ
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 8, 2020
最新のXDの開発状況→"音声でXDを制御"
実用化されるかどうかわからないが、I原さんやS藤さんのような変態芸人が増える可能性がある。
XDチームは19人のプロダクトマネージャーがいる。(スゴイ!)#cssnite
以上自分の実況ツイートのまとめでした。
個人的に思ったのはXDは使う人、使う職種、使っている方の仕事のやり方によって千差万別の使い方があるなと思いました。
特にドキュメント管理やデザインシステム管理など制作とは違う文脈で使っていらっしゃる方も多くいるのだなと感じたことが今回の1番の気づきです。
僕はweb制作会社の人間なので、こうゆうセミナーではどうしても制作する上での使い方や機能などを知りたいと思ってしまいがちですが、もう少し視野を広げて使い道を模索していくことも、全体的な生産性のアップ、クオリティのアップに繋がるんじゃないかなぁと感じました。
Twitterで絡んでくれた方、いいね、リツイートしてくれた方、どうもありがとうございました。
また登壇者、司会、スタッフの方々、7時間弱の長いイベントどうもお疲れ様でした。