見出し画像

Adobe XD User Fes 2019@Tokyo まとめ

Session 1:「あなたはどんなデザイナーになりたいですか」 by **長谷川恭久**さん

▼概要
・あなたはデザイナーとしてどの方向に進みたいと考えているのか?
・作りたいものと評価はマッチしているか?
・ツールは適したものを選べているか?

▼求められるデザインの方向性は2つに分かれる
1. 視覚重視
ユニークであるとか、ぱっと見の印象がおしゃれだとかが求められる。
UIはビジュアル重視となる。
2. 業務貢献
使いやすさ、コンバージョンへの誘導、UIの一貫性などが求められる。

あなたはどちらになりたいのか…?

1. 表現豊かないろんな案件やりたい
2. ユーザーの満足度を上げていきたい・中長期的な改善に携わりたい

『やりたいデザインと期待されているデザインがマッチしていることで、価値(評価)とされる』

ツールは適したものを選べているか…?

▼XDに合うタイプ
1. 決裁者との距離が近い → XDのスピード感を生かせる
2. デザインの共有頻度が多い → XDだと共有やレビューがしやすい
3. チームで協力して進める (Not 分担)→ コンポ―ネントやシンボル管理機能が便利
4. 「1→10」 (Not 「0→1」)→ UIの組合せやバリエーションの作りやすさが活かせる

つまり、以下4点に当てはまる人はXDがええで。

1. コミュニケーションに積極的
2. プロセスを見せながらデザイン
3. チームプレーヤー
4. 設計力を磨いていきたい

▼PsとXd
1. 表現豊かないろんな案件やりたい → Psの方が強力。
2. ユーザーの満足度を上げていきたい・中長期的な改善に携わりたい → Xdが本領発揮

Session2 :PhotoshopとIllustratorが手放せない人のためのXD by **角田 綾佳**さん

▼概要
Ps、Ai、XdをCCライブラリ経由で効率よく進める方法。そのメリットと注意点。

▼前置
理想はPs→Ai→Xdやけど、途中で修正は行ったりして、結局行き来するやん。コピペして修正してってめんどくさいやん?
そこで、CCライブラリの出番!

▼Ps→Xd
PsからXdへコピペすると、jpgなってPSD記憶できない。
編集も面倒だったのが、、、

メリット:
CCライブラリで登録しておくと、Psで編集したらXdに貼った画像にも反映できて手間が省ける。
注意:
CCライブラリでの入れ子情報は、元画像だと1画像扱いになるので、子要素を削除する際には注意が必要。

▼Ai→Xd
・Xd自体はベジェでコピペされても大丈夫やけど、サイズ変更した際に線の太さが変わらなくてぶちゃいくになる。
・テキスト、Xdやと縦書きとか文字間のカーニングとかできないことがある。
それがなんと、、、

メリット:
Psの時と同じく、Aiで編集してXdに反映が簡単。
Xdでできないテキストの調整が可能
注意:
アセットのサイズ
・テキスト書き出すときは、アウトラインを取る
・アイコンには同じサイズの外枠を付ける(アセットはオブジェクト本体のサイズなので)

※っていうか、実際の動画見た方が断然分かりやすいので、動画参照必須です!!!

Session3 :XDでデザインをデザインしよう。 by 小林 武蔵さん

▼概要
Xd使ったらこれまでの課題が解決されて、メンタル的な負荷も軽減されたぜ!という話。

▼導入までの経緯
▽当時の環境
仕様ツール:
Ps、Ai、+Ae(アプリ用にモーション作る)
データ管理:
プロジェクトごとに素材を保存(新規作成する際は、過去のプロジェクトをコピーしてくる)

▽課題
・イライラタイム
「ファイル開く+作業カクカクする+データの保存=9min
(9mmも精神的不可がかかっているだと?!)
・最新のファイル(デザイン)が把握できない

Xd入れると… 

・くっそ軽い
・1ファイル内で全画面管理できる(軽いからたくさん画像貼れる)
・共有楽ちん+開発者共有モードでスペック詳細記載の手間が省ける

▼まとめ
・画面を共通言語にしながら認識を取れる
・その場で編集して、 持ち帰りを減らせる

『軽いは正義』

Session4:5つの作例で学ぶ2019年5月更新(一部) by **湯口 りささん**

▼概要
2019年5月に追加された下記3機能の紹介と、リピートグリッドの活用法。
・多角形ツール
・コンポーネント
・ガイド

▼新3機能
1. 多角形ツール
イラレと同じ操作感で多角形が簡単に作れるようになった。

2. コンポーネント
・シンボルとの大きな違い
・マスターコンポーネントとインスタンス編集
・オーバーライドできる(=リピートグリッドしてからでも、子要素個別に編集できる。神!)

3. ガイド
【格子、レイアウト、ガイドの3つ、それぞれの使いどころは?】
・格子 → 作図
・レイアウト → 配置(グリッドレイアウトのためのもの)
・ガイド → グリッドの補助(異なるアートボード間の配置とか)

▼リピートグリッド
『リピート×コンポーネント』で簡単に日本語のカレンダーが作れちゃう!
※動画参照必須!
(筆者はまだまだリピートグリッドパダワンだった。。。くっ)

Session5:XDはBeautiful SVGの夢を見るか by 松田 直樹さん

株式会社まぼろし の松田さんのお話

▼概要
Xdからsvgのコード書き出すと、コードが汚ねぇ。。。
この問題を他のツールに一旦コピペしてから書き出すことで、解消できるよという話。

▼汚いと言われちゃうポイント
・pathにならない
・idが勝手に振られる
・CSSアニメーションがおかしな挙動をする可能性が…
※なんでこうなるかは動画を参照

▼解決方法2パターン
1. Aiに一旦コピペしてから、svgに書き出す
コード自体はきれいになる。
しかし、Xdから不要な情報も一部一緒にコピーされる。(おしい!)

2. Figmaに一旦コピペしてから、svgに書き出す
Pathになったぞぉぉぉぉぉ!
不要な情報も消えたぞぉぉぉぉ!
(うぉぉぉぉぉぉぉぉ!⇠)
余談:Pathになるとgzipの圧縮率が上がるんだぜっ (キラッ

▼まとめ
Xdのオブジェクトをsvgに書き出すときは、AiかFigmaに一旦コピペしてからするとよい。
※FigmaはXdのsvg変換ツールではありませんw

**Session6:AdobeXDが目指すこと by **

▼概要
Xd作成までの歴史とこれから目指すところ、そして現在開発中の機能のお話。

▼歴史的なところ
世の中はUXまで含めて作成できるものを求めていた。
そこで、2015年にSparklerをリリース。
その後、思考の速度で開発ができるようにと、Project Cometを発表。
Comet自体の開発プロセスもこれまでとは違い、小さい単位で機能を開発。
どんどんリリース&修正という手法に変えた。
今やXDチームは世界4拠点に渡る大規模に!

▼Xdが目指すこと
1. 思考の速度でデザインする
・軽さは正義
・Less is more(UXデザインに特化した最小限で巣、スマートなUI)
環境設定とかなくても使えるだ。エラーダイアログも出してない。
2. コミュニケーションを円滑にする
・共有機能
3. 大規模案件でもデザインの一貫性を保つ
・デザインシステムの共有、管理が簡単(デザインに関する情報がリンクして、一元管理できる)
→人力で完全にルールを守れればいいけど、ツールで制御できるとこえを強化すれば、効率あがるよね!

▼開発中の機能
・コンポーネントのステートとアニメーション
(ホバー状態、アクティブ状態でのデザインを定義できる)
・共同編集者のアクセス確認
・リアルタイム同時編集
・バージョン管理

以上、Adobe XD ユーザーフェスのまとめでした!


この記事が気に入ったらサポートをしてみませんか?