Adobe XD ユーザーフェス 2019 Final
見出し画像

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の象徴
▼キーボード
直線的に対象を選択していく→連続的にアクションを実行できる
オンとオフの2値で操作でき、座標の情報が不要。アクセシブル

キーボード操作のデザインの段階
1.キーボードで全て操作可能にする
・マウスが壊れても、腕を怪我しても、運動障害でマウスが使いにくくても対応できる。全盲でもキーボード+スクリーンリーダーで使える
・健常者でもキーボードの方が早いケースは多い
webでは簡単に実現できる(a要素でリンクする&標準のフォームコントロールで実装するだけ)が、まがい物を作ると使えなくなる

>>outlineは消してはいけない<<
例えるなら、マウスカーソルが見えないのと同じこと
outlineが次の要素にフォーカスするときに、アニメーションさせることができる(focus transition

フォーカス順通りにコーディングするのが吉。

2.特定ウィジェット内で最適化する
サジェスト、メニューバー、タブ、モーダルダイアログなど、特定のウィジェットはOSの振る舞いに合わせる。
ウェブページ上のウィジェットを頑張って対応する必要があるかは微妙
重要なのは一貫性!アプリ内で同じものが同じように扱えるのが大事

XDのシミュレーションは有効。実際の使用感を確かめられる。
・指の位置を考えながら、実際の反復作業を行ってみる
・無理があるキー配置だと指が攣るかも…!

3.特定タスクの高速化を可能にする
そもそもショートカットキーいるの??というところから

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

おまけ:かわいいのもらった


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
うろこ
勉強会参加時の、私的なメモ design, ui, ux, management, framework, accessibility etc.