[Hack Design 勉強メモ] Week 1-4 “インタラクションデザイン ビギナーズガイド”

Hack Designでデザインについて勉強してみるシリーズ。 Week 1のテーマは「What is design? Why is it important?(デザインとは何か?なぜ重要なのか?)」です。

今回はWeek 1の4つ目のコンテンツ、「Complete Beginner’s Guide to Interaction Design」という記事を読んで勉強しました。タイトルを訳すと「インタラクションデザイン ビギナーズガイド」という感じ。そのまま。

Webデザインの勉強の道は、先に進むにつれてどんどん険しい道になるそう。その理由は、最近のWebサイトやアプリケーションの大半が、インタラクティブな要素を取り入れているから。

この記事では、インタラクションデザインについて学びたい人に、その取っ掛かりを提供してくれています。

では、いつもの通り、読んで勉強したことをまとめていきますね。

インタラクションデザインとは

インラクションデザインとは、役立つ・ちゃんと使えるプロダクトやサービスをデザインすることです。

この「役立つ・ちゃんと使える」というのが重要。インタラクションデザインでは、ユーザのゴールやタスク、体験、欲求を含めたユーザのすべてを理解した上で、モノをデザインします。これは「ユーザ中心設計」とも呼ばれる考え方みたい。

ユーザのニーズと、環境的・技術的制約のバランスを取りながら、何かしらの目標達成や課題解決に役立つプロダクトやサービスをデザインするのが、インタラクションデザイナーのお仕事です。

インタラクションデザインに必要なコンセプト

インタラクションデザインの実践に必要なコンセプトがいくつか紹介されていました。

  • ゴール駆動型デザイン: ユーザの目的をしっかり理解し、それが達成されるようにデザインすること
  • “Interface as magic”: 最高のデザインは「そこに存在していない」もの。ユーザを待たせたり、考えさせたり、イライラさせたりしない
  • ユーザビリティ: ユーザが目的を達成する上での「使いやすさ」を表す言葉
  • アフォーダンス: モノ自信がその機能を表現していること。はさみを初めて見た人は、どっち側を持つべきなのかすぐわかる。これははさみがアフォーダンスを持っているから。
  • 学習のしやすさ: 他のところでもよく使われている部品を使うことで、初めてそれを使うユーザでも簡単に使いはじめることができるようになる。

「アフォーダンス」ってよく聞く言葉。でもあんまり意味がわかってなかったのですが、この記事のはさみの例えはとてもわかりやすかったです。Webサイトでもアプリでも、ボタンやフォームといったコントロール・入力系のUIでは、このアフォーダンスがとても重要なってきますね。

「学習のしやすさ」は、AppleがAppStoreをオープンした時からすごく気を遣ってることですよね。きちんとしたUIガイドラインを設けて、アプリ開発者に徹底させているのは、どんな開発者が作ったアプリでも、ユーザが簡単に使いはじめられるようにする、つまり学習のしやすさを担保するためですね。

これらのコンセプトについてしっかり学ぶことで、インタラクションデザインに関する理解が深まりそうです。たくさん勉強することはありますが、どれもWebサービス、スマートフォンアプリのUI/UXに直接効果がありそうなものばかりなので、学習意欲が高まります。

インタラクションデザイナーのお仕事

日々の仕事において、インタラクションデザイナーがどんな活動をしているのかについて紹介されていました。

  • デザイン戦略作成: ユーザ像とそのゴールを明確にし、どのようなインタラクションが必要なのか検討する
  • ワイヤーフレーム作成: インタフェースの詳細すぎないワイヤフレームを作成する。ホワイトボード使ったり、専用なアプリを使ったり。
  • プロトタイプ作成: 実際に動くプロトタイプをつくる。最近はHTMLとCSSでつくることが多い。
  • 情報収集: 業界や技術の変化についていくこと。これが一番大変。

ワイヤーフレームは詳細に書きすぎてはダメとのこと。ここはトライアンドエラーを繰り返すフェーズなので、検証に必要な最小限のものにとどめておいて、検証のサイクルを高速に回すことを考えるべき、ということでしょうか。

エンジニアもそうですが、情報収集は本当に難しいですよね。技術の進歩や流行り廃りのスピードが本当にはやいので、気が抜いたらあっという間に化石のような人になってしまいそうです。デザイナーも同じような問題を抱えているものなんですね。

おわりに

インタラクションデザインを学び始めるための、本当にとっかかりとなる部分を紹介している記事でした。インタラクションデザインに必要ないくつかのコンセプトについては、「ぜひもっと勉強したい!いろいろ知りたい!」と思うきっかけになりました。

ここでは詳しく書きませんでしたが、著名なインタラクションデザイナーやよく使われているツール(Balsamiq Mockups, OmniGraffle, Moleskinなど)の紹介もされていたので、気になる人は元記事を読んでみてください。OmniGraffleには、何か図を作るときにいつもお世話になっております。

次のコンテンツにも期待です。また記事にまとめます。

それでは!