Learn Adobe XD

Adobe XD プロトタイピング実践ガイド

〜ユーザーの要求に応えるUI/UXデザイン

Microinteractions

マイクロインタラクション

インタラクション(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

Adobe XD をこれから習得したい人にお奨めの書籍

書籍「Adobe XD UIデザインとプロトタイプ制作の教科書」のカバーデザイン

世界一わかりやすい

Adobe XD UIデザインと

プロトタイプ制作の教科書

2018年6月13日発売

北村崇 著

B5判/240ページ

定価(本体2,480円+税)

ISBN 978-4-7741-9838-5

詳細ページを見る

書籍「Illustrator&Photoshop&XD Webデザインの教科書」のカバーデザイン

世界一わかりやすい

Illustrator&Photoshop&XD Webデザインの教科書

2018年10月5日発売

黒野明子,庄崎大祐,角田綾佳,森和恵 著

B5判/272ページ

定価(本体2,480円+税)

ISBN 978-4-297-10032-2

詳細ページを見る

更新日:2018年11月28日(水)

Soy activo en la posición de Adobe Community Evangelist. Está principalmente a cargo de "Adobe Sensei" y "Adobe XD".

난은 Adobe Community Evangelist의 입장에서 활동하고 있습니다. 주로 "Adobe Sensei」과 「Adobe XD」를 담당하고 있습니다.

我是Adobe的“社区布道者”。它主要负责“Adobe Sensei”和“Adobe XD”。

Mr.Creative.Edge

Creative Edge School Books

@commonstyle | ebookcast@gmail.com