〜ユーザーの要求に応えるUI/UXデザイン
Learn Adobe XD
インタラクション(Interaction)とは、相互作用という意味を持ちますが、具体的には「人間のアクションに対して機器なりシステムがリアクションする」ことです。私たちがアプリの中のあるボタンをタップしたとき、アプリのシステムはボタンを光らせて音を鳴らすなど、機器やシステムとのやり取りのことをインタラクションと理解してください。
マイクロインタラクション(Microinteraction)というのは、ひとつの作業だけを実行する「最小単位のインタラクション」のことです。例えば、携帯音楽プレーヤーに搭載されている音のボリューム調節機能は、製品に付随するひとつのマイクロインタラクションだといえます。
Google検索を使って期間を2000〜2008年に限定して「Microinteractions」を検索してみましょう。科学技術論文などが上位表示されますので10年以上前から使われていた「造語(Inter + Action)」だということがわかります。
ここで取り上げているマイクロインタラクションは、デザインコンサルティングファームSmart Design社のデザイナーであるダン・サファー(Dan Saffer)氏が2013年に書いた「Microinteractions」でまとめられた概念がベースになっています。ダン・サファー氏はこの本の中で、マイクロインタラクションの構造を「トリガー」「ルール」「フィードバック」「ループとモード」の4つのパートに分けています。
Adobe XDの「プロトタイプ」モードにおけるインタラクティブプロトタイプ作成では、ひとつのマイクロインタラクションの4つの要素を設定することができます。
マイクロインタラクションとは、アプリやサービスに含まれる「最小限のやり取り」の仕組みのこと。ボタンをクリックしたときの凹みや、処理を実行しているときに進捗を視覚的に表現するプログレスバーなど、さまざまなものがあります。
マイクロインタラクションは総じてモーションデザインと密接です。XDに搭載されている「トランジション」「自動アニメーション」「オーバーレイ」などのアクションはマイクロインタクションに適した機能です。
現在、XD用の50種類のマイクロインタラクションを作成しています。Adobe XDで、アプリやWebサイトの(インタラクティビティレベルの高い)プロトタイプを作成するときのテンプレートになります。公開スケジュールは以下のようになっています。
厳選した使用頻度の高い10種類のマイクロインタラクション
現在、マイクロインタラクションを「素早く作成する操作スキル」を身につけるためのAdobe XD講座を実施しています。10種類のマイクロインタラクションは講座終了後に再利用可能なテンプレートとして公開します。
講座のアーカイブはどなたでも視聴できます。
30種類の
マイクロインタラクション
「Adobe XD 基礎編」の学習者向けに先行公開
※実際にXDを学んでいる方々からのフィードバックを反映しながらテンプレートの完成度を高めます。学習者のみなさま、よろしくお願いいたします。
50種類の
マイクロインタラクション
本サイト「Learn Adobe XD」で2019年2月末に全て公開
※テンプレートとしての完成度が低いものは、引き続きフィードバックを頂きながらテストを継続しますので、公開が遅れる場合があります。
トップページに戻る
Information
更新日:2018年11月28日(水)