この記事を書いた人
- 君塚 伴子デザイナー（ビジネス・アーキテクツ）
ゲーム業界でのデザイナーを経て、2000年にウェブ制作会社に入社。運用から構築まで得意分野は幅広く、多くの大規模プロジェクトに関わる。インタラクティブコンテンツのアートディレクター。2018年よりビジネス・アーキテクツに入社し、UI/UXデザイナーとして奮闘中。
BAsixs参画企業、ビジネス・アーキテクツ（以下、BAと称する）でデザイナーをしている君塚です。
スマホが浸透して久しいですが、それと同時にWebサイトを閲覧するのも「わざわざパソコンの前に座って見る」という事が少なくなってきました。
スマホファーストになってくると、よりインタラクシ ョンが重要になってきます。画面が小さい分、機能的で効率的な画面の使い方が求められるからです。
押して欲しいボタンは、スクロールされる画面とは別に常に下の方に表示（FIX表示）されたり、片手で操作する事を想定して、右下の方にメニューを設置するなど、動きと共に使いやすさも工夫されています。
インタラクションは、そんな現代のユーザーの使い方を考えながら必要な場所に必要な動きを付ける事で、ユーザビリティを高める役割があります。
インタラクションデザインとは：「相互作用」という意味
インタラクションは、日本語で「相互作用」と訳されています。
ユーザーがなんらかのアクションを行なったとき、システムがそれに応じた反応を返すことを意味します。
例えば重要なコンテンツのボタンには大きな動きをつけたり、ページが読み込まれる速度をユーザーが読む速度に合わせるように表示するなど、視覚的にも感覚的にも伝わりやすくすることができます。
インタラクションデザインはUXデザインの一部
UXデザインは、ユーザーエクスペリエンスの略で「ユーザーが製品やサービスを通じて得る体験をデザインすること」を意味します。
インタラクションデザインはその一部で、ユーザーのアクション、またシステムの反応をデザインすることに限定されています。
インタラクションデザインの3つの代表的なルール
インタラクションを導入する時のルールについて明記していきます。
1.直感的であること
説明文を読まなくても、直感的に操作できるプロダクトやサービスはとても優れています。
特にWebサイトの場合、操作の説明を書くスペースがない為、決まった操作方法で素早くレスポンスを返すことが求められます。
2.簡単であること
Webサイト上では、ユーザーのアクション、デバイス、また使用場所などを考える必要性があります。
例えば外出先でのルート確認では「鞄を持っている可能性がある、片手で操作しているなどの場面を考慮する」などです。
3.一般的であること
マテリアルデザインなどのよく使われているデザインにあえて寄せていくのも大切です。
よく使われているデザインということは、それだけ皆が使いやすく、一般的に認められていると考えられるからです。
インタラクションデザインの5つの要素
インタラクションデザインに関係する要素は、下記の5つに分類することができます。
1.言語と分量：簡潔でわかりやすい言葉遣い
言葉の表現によって触る行為をどこで行うか、それによって何の情報が得られるのかを明確にする必要があります。
ボタンやラベルには簡潔で伝わりやすい言語を選ぶと同時に、ユーザーの負担にならない分量を考慮する必要があります。
2.視覚的表現：ユーザー体験を下げないようなデザインを
画像、タイポグラフィ、アイコンなどの文字以外のグラフィック要素もインタラクションデザインに大切な要素です。
視覚的要素は、ユーザーが操作する上でとても大切です。言語を補足し情報へと導く手助けをする役割です。
3.ユーザー接点：デバイスごとの物理的な接点を指す
ユーザーとサービス間にインタラクションが発生する時、ユーザーが使用するものを指します。
例えば、スマホやマウス、タブレットなどデザイスごとに異なりますが、ユーザー自身の指とスマホなどです。
4.フィードバック：何かの行動をしたときの反応
ユーザーが操作することによって、アニメーションや動画や音によってフィードバックします。
その変化によって進行状況を確認したり、途中から再開する事が出来るかを考慮してインタラクションのスピードを調整する事も必要です。
5.行動と感情：ユーザーテストの感情のデータをしっかり取る
ユーザーがどのような行動や操作を行うかに注目します。
上の4つが組み合わさってどのようにサービスのインタラクションが作用するかに注目するという事です。
また、その時のユーザーの感情的なフィードバックを分析して、より良いユーザー体験を得られるようブラッシュアップさせていきます。
前編まとめ：全てユーザーの快適な体験のためにデザインが貫かれていることが大切
今回は、インタラクションデザインの概要と要素の説明をお伝えいたしました。
ユーザーと良い「相互作用」を引き起こすためには、
- 直感的
- 簡単
- 一般的
であることを前提として、
- 言語
- 視覚的要素
- ユーザー接点
- 行動への反応
- ユーザーの感情
を最適化するデザインを実践することになります。
Webサイトのデザインは、あくまでも「ユーザー体験の向上に資するべきである」という原点に立って行うことが大切です。
Webサイト制作を行う制作者様も、Webサイトの制作依頼をするWeb担当者様も、「ユーザー体験に資するデザイン」という観点を持って、プロジェクトを進めていただければ幸いです。
BAsixsでは、豊富なWeb制作実績の中でUXデザインを追求してまいりました。Webサイトのプロジェクトを進めていく上でお困りのことがあれば、是非どんなことでもご相談ください。
後編では、「インタラクションがもたらすメリット」についてをご紹介します。