Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

こんなソフト使ってます

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

リピートグリッド？

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

高速で作るために

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ザツに作る

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

データを利用

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

グループを利用

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

餅は餅屋に

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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