Adobe XD Meeting #05 ワイヤーフレーム特集で発表した、ワイヤーフレームをAdobe Experience Design(XD) で作るときのチップスを紹介しています。 勉強会URL https://xd-study.connpass.com/event/56779/

1. ワイヤーフレームを
高速にXDらしく作る
ネットパイロティング株式会社
UIデザイナー
湯口りさ

2. 自己紹介
普段は業務系サービスのUIデザイナー Fla
ほぼ毎月Adobe XD 勉強会(仮) 主催 Fla
ビールが好きです。HoloLensが好きです。 Fla
Fireworksとか
ActionScript/TypeScriptなフロントエンドも
Fla
Fireworksとか Fla

3. こんなソフト使ってます

4. 私のデザイン・開発環境
WindowsとMacで同じ環境を作りたい
Adobe
XD
Brackets JetBrains
IntelliJ IDEA
Microsoft
Excel

5. 私のデザイン・開発環境
デザイン中心
画像メモ
テキスト
管理
TypeScript
Git
バグ報告書
など
WindowsとMacで同じ環境を作りたい

6. WindowsとMacで同じ環境を作りたい
私のデザイン・開発環境
デザイン中心
画像メモ
テキスト
管理
TypeScript
Git
バグ報告書
など
ワイヤーフレームでは？

7. ワイヤーフレームでの役割
ワイヤー
ガシガシ
汎用データ
コピペ用
テキスト
管理
WindowsとMacで同じ環境を作りたい

8. リピートグリッド？

9. XDらしいといえば…
リピートグリッドを
使うんでしょ？

10. XDらしいといえば…
  
#03でリピートグリッドの活用を8種類紹介しました

11. XDらしいといえば…
「Adobe XDのリピートグリッドを活用する8つのレシピ」
creative station

12. XDらしいといえば…
今日はそれ以外の話を

13. 高速で作るために

14. XDでカバーできる様々な段階のワイヤーフレーム
アイデアスケッチをざっくり清書 Fla
項目があたっているだけのワイヤーフレーム Fla
ワイヤーフレームを利用して他のサイズを検討 Fla
忠実度の高いワイヤーフレーム Fla

15. 高速で作るための3つのポイント
データを利用 グループを利用ザツに作る
ただし…

16. ザツに作る

17. ザツに作る
ただし、後工程は考える
XDの機能把握が大事

18. あああああああ
文字ツール
文字ツールは一つで二役
1行テキスト 複数行テキスト
あああああああ
あああああああ

19. こんなに違う1行テキストと複数行テキスト
クリック
フォントサイズ
横に伸びる あふれは非表示
表示エリア
ドラッグ
1行テキスト 複数行テキスト
追加
マウスで 操作
文字あふれ

20. あああああああ
こんなに違う1行テキストと複数行テキスト
2017年5月現在では
1行テキスト 複数行テキスト
あああああああ
あああああああ
切り替え
できない

21. その他チップス(1)
Cmd/Ctrl＋Dでアートボードを複製するといい感じに配置
線のスタイルをつけたままboolean合成しない
合成でスタイルをコピー(バッドノウハウ)
画像は何もないところにD&Dでもってくると
10pxずつずれて配置されて見栄えが良い
画像はドラッグでもってくると10pxずつ
ずれて配置される
これに
注目！

22. その他チップス(1) デモ
長方形・円形ツールで描いたものはboolean合成でサイズ変わる
w:200
h:200
境界線:30
線の位置:内側
w:170
h:170
境界線:30
線の位置:中央
合体
幅・高さを変えることで
線の位置の差を埋めている
w:170
h:170
境界線:10
線の位置:中央
サイズが
合わなくなる

23. その他チップス
Cmd/Ctrl+A→Cmd/Ctrl+G は心臓に悪い Fla
アートボードの選択方法は5種類 Fla
合成でスタイルをコピー(バッドノウハウ) Flaアートボード名をクリック
レイヤーパネルでアートボードをクリック
アートボードの何もないところをCmd/Ctrl＋クリック
アートボードの何もないところをダブルクリック
ワークスペースで選択する これに
注目！
よくオブジェクトを
つかもうとして誤爆する

24. ドラッグでアートボード選択の条件は2つ
ドラッグで作るエリアの中に1つのアートボード全体が入る Fla
2つ以上のアートボードの一部が入る Fla
合成でスタイルをコピー(バッドノウハウ) Fla
選択できる選択できない選択できない

25. データを利用

26. データ(txtファイル)
改行区切りのデータを準備 Fla
空にしたいときは半角空白を Fla
拡張子は明示的につける(Macの人) Fla

27. データ(txtファイル)
メールアドレス
電話番号
氏名
インデックス
01～99
メイン
メニュー
本文
生年月日
発表日 見出し
曜日
必要になるものは割りと共通している

28. Webサービスが使えます
Sample .txt for AdobeXD Repeat Grid
https://www.repeatgrid.com/
定形なら
クリックするだけ

29. 日本語のテキストが落とせるサービスはないが…
なんちゃって個人情報
http://kazina.com/dummy/
残念ながら
AdobeXD向きでない

30. HTMLの表からAdobeXD向けデータファイルにする
間にExcel(表計算ソフト)を挟めば簡単

31. グループを利用

32. グループの特徴は？
1
3
1 3
グループはまとめて拡大縮小できる

33. 1
3
グループの特徴は？
1 3
比率だけが
等しい
グループはまとめて拡大縮小できるが…

34. グループの特徴は？
こういうときに発揮されるテキストの種類の違い
1
3
1 3
複数行
テキスト 一行
テキスト

35. iOSのようなフッターメニューを考えると…
リピート
グリッド
グループ ＋ シェイプ
グループ ＋ シンボル
数が増える 中まで伸びた いい感じ？

36. iOSのようなフッターメニューを考えると…
中央
ズレてる
グループ ＋ シンボル

37. FontAwesome＋複数行テキストで丸く収まる
  
データを入れる
  
FontAwesome＋複数行テキスト ＋ リピートグリッド
  
  
  
  
リピートグリッド
解除してグループ化
完全な
中央！

38. 餅は餅屋に

39. XDが苦手なこともある
写真の処理 Fla
詳細なイラストの作成 Fla
縦書き Fla
リピートグリッドで作らない場合の表・グラフ Fla
他の
アプリで！

40. XDが苦手なこともある
写真の処理 Fla
詳細なイラストの作成 Fla
縦書き Fla
リピートグリッドで作らない場合の表・グラフ Flaこれに
注目！
などなどなどなど・・・・

41. 表とグラフといえば表計算…
ただし、アプリは限定される
Microsoft
Excel
Google
spread sheet
Apple
Numbers

42. Excelは大活躍(1)
Excelで作ったグラフはXD上でベクターでペーストされる！
タ イ ト ル
UXデザイナー Web/UIデザイナー
Webエンジニア Webディレクター 企画・経営

43. Excelは大活躍(2)
Excelで作った表も持ち込めたり…
受付番号 出席 参加枠名
676125 通常枠
676127 通常枠
676134 通常枠
676216 通常枠
676279 通常枠
676324 通常枠
676372 通常枠

44. とは言うものの！
Excel/PowerPointのデータも怖くない…かも？
お客さん/他部署からデータをもらってもちょっと楽できる Fla
構造が超複雑なので大きく加工するには向きません Fla

45. ご清聴
ありがとうございました