Adobe XD ユーザーフェス 2019 Final
2019/08/17参加
session1：XDで魅せる 〜デザインを楽しむためのテクニック〜
佐藤 修（さとう おさむ）
株式会社フラッグ ／ アートディレクター・デザイナー
XDでVJができる！
実装できないから…と表現の幅を狭めていないか、アイデアがソフトありきの動きになっていないか
session2：地方で使うXD
中井 誠也（なかい せいや）
株式会社リコネクト Webクリエイター
Adobe XD ユーザーグループ広島 代表
使ってみる→導入してみる→チームで使う
▼使うきっかけ
DIR側…制作のツールじゃないの？
制作側…シンプルなデザインしかできなさそう、ツール覚えるの面倒そう
・LTに登壇して、XDさくさく！リピートグリッドすごい！の話をした
・プレゼン用のスライドとして使ってみた
同一ファイル内で動作させるので、切り替えの間がない
>>勉強会登壇してるの？じゃ使ってみようか<<
▼webデザインで
・目次を最初につけて提案資料チックに
・コーディングの際の指示
必要最低限の操作だけ伝えて、開発者用に共有
各工程の親和性の高い作業から使ってもらうことで、受け入れやすくなる
▼XDを使って難しかった例
アニメーションをなめらかに、とかクリック後に自動スクロールしてほしいとか。設計に関係ない部分を指摘されてしまった。
XDを利用する場面がなにをする工程なのかはっきりさせておく
▼フローチャート
デザインを補足する簡易的な資料であれば、ツールを変えずに制作できる
▼構成図
マインドマップ＋αみたいなもの。XDでも作れるのでは？
>>つくってみた<<
見せるための成果物にこだわらなくても使い所はある
▼ワイヤーをXDで
XDをそのままデザインに流用！
・別ツールの資料から情報を抜き出す必要がないことが思った以上に快適
・文字スタイルやコンポーネントを活用、チームで共有すればより効率的に使えそう
まずは役割によって親和性の高い機能や使い方を探る
作業効率だけではなく、思考効率やチームの連携効率を考えてみる
session3：キーボード操作のデザイン
伊原 力也（いはら りきや）
freee株式会社 UXデザイナー
5月のアプデで、キーボード入力をトリガーにものを動かせるようになった
けっこーいろんなサイトにショートカットキーがついている（twitter/FB/Trello/gitなど）
▼マウス
画面上の任意の座標をポイント→非連続的なアクションを実行できる
GUIの象徴
▼キーボード
直線的に対象を選択していく→連続的にアクションを実行できる
オンとオフの２値で操作でき、座標の情報が不要。アクセシブル
キーボード操作のデザインの段階
１．キーボードで全て操作可能にする
・マウスが壊れても、腕を怪我しても、運動障害でマウスが使いにくくても対応できる。全盲でもキーボード＋スクリーンリーダーで使える
・健常者でもキーボードの方が早いケースは多い
webでは簡単に実現できる（a要素でリンクする＆標準のフォームコントロールで実装するだけ）が、まがい物を作ると使えなくなる
>>outlineは消してはいけない<<
例えるなら、マウスカーソルが見えないのと同じこと
outlineが次の要素にフォーカスするときに、アニメーションさせることができる（focus transition）
フォーカス順通りにコーディングするのが吉。
２．特定ウィジェット内で最適化する
サジェスト、メニューバー、タブ、モーダルダイアログなど、特定のウィジェットはOSの振る舞いに合わせる。
ウェブページ上のウィジェットを頑張って対応する必要があるかは微妙
重要なのは一貫性！アプリ内で同じものが同じように扱えるのが大事
XDのシミュレーションは有効。実際の使用感を確かめられる。
・指の位置を考えながら、実際の反復作業を行ってみる
・無理があるキー配置だと指が攣るかも…！
３．特定タスクの高速化を可能にする
そもそもショートカットキーいるの？？というところから
session4：XDで設計するコミュニケーションデバイス体験
渡部 知香(わたなべ ちか)
株式会社ヘッドウォータース
ヒューマンインタラクションデザイナー
コミュニケーションデバイスとモバイル・WEBのちがい
・次元数（スマホは2次元/Pepperは3次元）
・距離感（スマホは手に持つ/Pepperは立ってるしスピーカーは置いてある）
・前提が違う（webは画面だけで成立する/VUI＋フィジカルで画面がなくても成立する）
なににXDつかってる？
企画書・提案書、フロー
アプリアイコンとかポップとか作るときに
★Alexaスキルプロトタイプ（UI Kit出てる！）
音声トリガー/スピーチ再生
Echo端末でプレビューできる（英語のみ対応。まだ日本では使えない）
session5：XDって胸キュン？～コンポーネントとゲームパッドトリガーで進化するプロトタイピング～
池原 健治（いけはら けんじ）
株式会社ソニー・インタラクティブエンタテインメント
Webデザイナー
ガイドライン≠最終チェック
ガイドラインを常に意識しながら企画/制作することが望ましい
が、なかなか難しい！
▼ので、こんな工夫をしてみよう
ざっくりしたパーツをコンポーネントとしておく。
レギュレーションを反映したロゴをアイソレーションゾーンこみのコンポーネントとしておいておくと、らくちん！
▼XDでつくってみた
https://xd.adobe.com/view/29f66f1f-543e-4cc1-6f01-e9355e169bde-5fc7/?fullscreen
https://xd.adobe.com/view/d37df8cc-15e2-4ea2-648f-9d7c7ae2507d-a54c/screen/9e8b1a01-dabe-43cf-bf5e-a32ef63161a4/2-1?fullscreen&hints=off
おまけ：かわいいのもらった
この記事が気に入ったらサポートをしてみませんか？