members

members

1日あればできるようになるXDのプロトタイプ

Tweet

XDのアップデートが加速して、
最近では縦横のスクロールや、3Dの動きなど、
デザイナーが開発へ渡す際のインタラクションを詳細に伝えられるようになってきました。

本コラムでは、実際にアシスタントデザイナーに協力してもらい、1日でXDのプロトタイプを作れるようになるまでのステップを紹介します。
(XDの基本操作は知ってる前提でお話しします)

目次
ステップ1:XDでどんな機能があるのかを覚える
ステップ2:XDでどんな動きを作ることができるのかを覚える
さいごに・・

ステップ1:XDでどんな機能があるのかを覚える

まず、XDの機能として
コンポーネント
ステート
スクロールグループ
あたりがあるので、それぞれの機能を覚えてもらいました。

コンポーネント

コンポーネントを覚えることで作業の効率化に繋がるので、
コピペでたくさん同じ要素を作らないように覚えてもらうといいと思います。

ステート

ステートを覚えるとスイッチや、アコーディオン、マウスオーバーなどボタン系が作れるようになります。これにより、Webサイトの大体の動きをとり入れることができるかなと思います。

スクロールグループ

スクロールグループを覚えるとほとんどのサイトで使われてるスライダーやマップの動きなどが作れるようになります。

機能としてはこの辺が使えるようになると大体のプロトタイプが作れるようになると思います。

ステップ2:XDでどんな動きを作ることができるのかを覚える

アンカーリンク

ボトムナビあたりに必ずと言っていいほど入ってる「上へ戻る」ボタンに使えます

トランジション

横からメニューが出てきたりするときの動きに使えます

オーバーレイ

ダイアログや、モーダル、アプリだとキーボードが出たりするところの動きで使えます

自動アニメーション

スライダーとかで表現するヌルッとした動きに使えます

このあたりを覚えると大体のプロトタイプが作れるようになるんじゃないかなと思います。
AdobeXDでこれらの機能を紹介してるのと、動かすトレーニング用のXDを配っているので、
素材はここから取ってくるとサクッと覚えられますよ。

さいごに・・・

これ以外のアイコンのアニメーションだったり、
パララックスの動きなどを見せたい人は、
AfterEffectsで作るとよりプロトタイプの精度やUIUXの動きを詳細に伝えられるようになると思います。

参考サイトはこちら

あとは前回紹介したように日々のインプットでどれだけいろんなUIをみているかで
タイミングや動かし方のアイディアが生まれてくると思います。

関連記事

新人WEBデザイナー・WEBディレクター向け!インプットの精度をあげるという話

コラム執筆者

松谷 浩平(まつや こうへい)

2012年5月入社 WMC1ユニット アカウントサービス第13ユニット所属

カテゴリ: Webサイト, Webデザイン
2021年02月26日