ワイヤーフレームを高速にXDらしく作る

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

Transcript

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. ご清聴 ありがとうございました