「地方で使うXD」から参加。
後ほど加筆修正などします〜！

地方で使うXD

最初の導入のハードル

使ってみる
導入してみる
チームで使う

小さな所から便利だよを伝える。

目次をつける。XDを提案資料の拡張させえてみる。

デザインは提案資料の一部という考え方。

UIデザイン、XDを使って難しかったこと。

プロトタイプを作る時、どの工程の確認なのかを明確しておくと良い。
不要な要望依頼を避けることができる。

仕様確認をしてもらう場面

画面とは別にフローを作成する。縦長のスクロール（フローチャート）
スライドで別ページではなく、

デザインを捕捉する簡易的な資料であればツールを変えずに作成できる。

構成図、XDで作れるのでは？
ページのオブジェクトとバーをコンポーネント化することで要素を最小限にして構成図を作成することができる。
コンポーネント化しているので、長さなども調整が可能。

作業効率だけでなく、思考効率を上げるためのツールとして使う。

キーボード操作のデザイン

freee 伊原さん

freeeにはキーボード作りたい欲の人がすごい。
freeeはキーボード作り放題！

XDでキーボード入力でのプロトタイプの操作が可能になったので、その話。
例えば上下キーでの移動の検証とかに非常に便利。
ゲームパッドもできる。

サイトにもキーボードショートカットは存在する。結構ある。

ショートカットキーの設定の仕方。
いきなり作って良いものなのか？

マウスって何なのか？
非連続的なアクションを実行できる。
GUIの象徴

キーボードって何のか？
連続的なアクションが実行できる。
オンとオフの2値が操作できる。マウスのように座標の表示を必要としない。

ジェスチャーとショートカットキーは記憶しなければいけない→上級者向け

基本的な動作の設定がベースがあるとしてジェスシャーは存在する。

1. キーボードでの操作を全て可能にする。

キーボードでの操作＝アクセシビリティ
全盲や弱視でもキーボードやスクリーンレーダーを使用する。

健常者でも多いケースはある。
操作対象に連続チェック、ECでの決済はCMSの管理画面など。
WEBでは簡単に実現が可能。

まがいものを作ってしまうのは良くない。
divは最後の手段！！！！！！

outlineは決してはいけない。
＝ マウスカーソルを消しているようなもの

フォーカス順を考える。
特定の行動のためtabを何回押せば良いのかも考える。
切り替えがたくさん出てしまわないか？
tabではなく上下キーも考える。

freeeではこうしている。
デザインガイドラインでキーボード操作も考慮している。

XDではしない。プロトタイプで行うのは骨が折れる。

2. 

OSごとに振る舞いに合わせていく。
操作対象をグルーピング
escで抜けるなどは通常のブラウザでは実装されていないので、別途作る必要がある。

本当に寄せるべきか？WEBアプリ上での重要度が高いなら踏襲しても良いかも
重要な一貫性。
議論の余地がある。

XDでどう使う？
シミュレーションは有効。実際の使用感を確かめることができる。

3. 特定タスクの高速化

高速化したい反復作業がある時に導入に検討する→めっちゃ修羅の道

ショートカットキー化への道。
ショートカットキーで解決しない。
優先度を厳選
オンオフを可能にする（バッティング対策。意図しない操作を防ぐ）
既存のOSベースなどのキーアサインとの衝突を避ける→無理でね？？？
上書きが可能→WEBサービスでそこまでできるのか？？？
存在の認知（ショートカットキーの一覧。チュートリアルなど）
覚えられるようにする。
アクセスキー（acccesskey属性）を使わない

オンオフ、キーアサイン、上書き可能はかなりむずゲー。
→1文字、2文字系を使う（フォーム入力中は避ける）
→ツイッター、Facebookも結構理にかなってる

XDでも実装して

4.  デスクトップ

googleのツールはガン無視してる。
→デスクトップツールがたまたまWEBにある説。
→かなりの気合が必要

自分も便利、相手も便利。
キーオードで操作する局面を多い。
思考と同じ速さでデザインするためにキーボード操作デザインしていこうぜ！

XDでデザインするコミュニケーションデバイス体験

XDとpepper、スマートスピーカー、スキル開発

ヒューマンインタラクションデザイナー。
pepperのアプリケーション開発をしている。

普段していること
企画提案
シナリオライティング
も0ションん作成
発話、対話フロー作成
VUIデザイナー etc

コミュニケーションデバイスとモバイル＆WEBの違い
次元数が違う（2Dか3Dか）
距離感が違う
┗ スマホは接近して見ている。
┗ ヒューマノイドロボット（人同士との距離感）
┗ スマートスピーカー（見るに縛られない）
前提が違う
┗ 画面があって成立する
┗ 画面がなくても成立する（スマートスピーカー、ロボット）

アプリ開発での活用
企画書や提案書の作成（図解作成などに使う）
フローやシナリオの作成（仕様整理などに使う）
  ┗ 時間軸や実際の喋る内容を可視化する
  ┗ 内部的な設計作業の時に使う。
ワイヤーの作成（サイズ感などの共有など）
  ┗ ロボットは画面ファーストではないけど、画面自体は存在する。
アイコンやポップなど細々したものの作成

Alexaスキルのプロトタイプも作れる。
┗ UI Kitもある。
┗ 音声トリガー
┗ スピーチ再生
┗ echoの端末でプレビューできる

日本でAlexaプレビューを使うには？
┗ 英語を身につける
┗ 既存とは別の英語圏のAmazonアカウントを作成
┗ Adobe XDのスキルを身につける。
┗ XDの言語を英語に変更
┗ Alexa Previewのプラグインをインストール

XDって胸キュン？

PS4のコントローラーでセッション開始。
全編XD&PS4コントローラーで操作。

コントローラーを使ってスライドを操作している

XDでつくるゆるいデザインシステム

ブランドガイドライン（本社ではプレステの呼称はNG）
スタイルガイドライン
アクセシビリティガイドライン

ガイドライン読まれてない問題
→ 詳しい人にチェックが集中してします。

ガイドラインを常にし意識しながら作成したい。
┗ 内容を理解する
┗ 理解したものを反映する

XD胸キュンポイント その1
┗ 導入の敷居が低い

ロゴアイコンなどのパーツとそれを組み合わせたコンポーネント。
→ ロゴによってもルールが違う
→ アイソレーションゾーンを含めたものをコンポーネント化する

Invisible Spaceというプラグインを作った

XD胸キュンポイント その2
┗ コンポーネントで一括管理ができる

モジュールユニットで作成されている。
XDでもコンポーネントとして管理している。

新規コンポーネント

思考の速さでデザインする

XDでゆるく使ってからコーディング
後からスタイルガイド文脈としてclass値などの修正をする

XD胸キュンポイント その3
┗ 自動アニメーションでインタラクション作成

PS4コントローラーの使えば24箇所の分岐をトリガーに設定できる。
→ ゲームパッド良いぞ！！

今日のスライドのXDアートボード数は200枚強。

BeerBashのスライドはたぶん書けないので割愛。