高校生のためのUXデザイン入門〜Adobe XDを活用しよう!

過去の記事:

第1回:
XDはUXツールの「いいとこ取り」だけど、必要最低限の機能からスタートしてるんだ!

第2回:
えっ、こんなデザインだったんだ。なんか、イメージと違うなぁ。悪いけど作り直してくれる?



第3回「動くプロトタイプをつくるときには、まずフィッツの法則を理解しましょう!」


Adobe Experience Design(アドビ・エクスペリエンスデザイン)通称、Adobe XD(エックスディー)を活用したUXデザイン入門、第3回目です。

第2回では、プロトタイピングという作業についてイメージできたと思います。
XDには「デザイン」と「プロトタイプ」の2つのモードがあり、画面をつくるだけではなく、実際に画面をタップしたり、スクロールしながら試すことができるツールだということも理解できましたね。

なぜ、実際に動くプロトタイプが必要なのかわかりますか?


ポール・フィッツ(Paul Fitts)という心理学者が、1954年にこんなことを論文の中で主張しています。


ポインタで指そうとする領域が大きければ大きいほど、その作業にかかる時間が短くなる


これは「フィッツの法則(Fitts's law)」と呼ばれているんだ。
スマホのような小さな画面で、ボタンも小さかったら、タップしにくいですよね。指の大きさは変わらないんですから。

みなさんもアプリを使っていて感じたことありませんか?

スマホは片手で持って使うことが多いから、小さいボタンをズームで大きくするなんて面倒ですよね。冬には手袋をしたまま使うときだってあるでしょう。

お奨めの参考書:
Designing with the Mind in Mind, Second Edition
UIデザインの心理学
わかりやすさ・使いやすさの法則 第2版
著者:ジェフ・ジョンソン(Jeff Johnson)



「じゃ、ファッション系のアプリのように文字やボタンが小さくデザインされているものはどうするの?」って言う人もいます。
たしかに、ボタンだけ大きいとダサくなっちゃうから、ブランドイメージにこだわっている会社などは嫌うんです。

でも、そういう場合でも、感知可能領域って言うんだけど、指に反応する領域を大きくしておくんだ。見た目のボタンは小さいんだけど、ちゃんとタップできる。



使いにくいかどうかって、絵だけみてもわからないことが多いでしょ。
だから、実際にプロトタイプを触りながら、意見を出し合うんです。

完成品の絵をみて、そのときは「これで問題ない」と思っても、いざ出来上がったアプリを使ったら、「全体的にはいいんだけど、ボタンはタップしにくいね」とか「前の画面に戻る方法がわかりにくいよ」なんて言われたりする。


XDは、実際にボタンをタップして画面を切り替えたりすることができて、ブラウザーで試すこともできるから、XDを持っていない人でもすぐに触って確認ができます。

完成品のイメージを描けて、動くプロトタイプが作成できて、ブラウザーで触ることもできる。必要な機能が全部そろっているので、オールインワンのツールって言われているんですね。
オールインワンというのは、必要な機能とか要素をひとつにまとめたものですよ。


前回の繰り返しになりますが、特定の人しか使えないツールだと、どうしても後回しになってしまうんです。

「じゃ、動くプロトタイプは次回までに作っておいて」ってことになっちゃう。

でも、ペーパープロトタイピング並みの手軽さを目指しているXDは、オールインワンだから、みんなで意見を出し合っている場所で、実際に触るところまで進められる。

デザイナーさんじゃなくても、使えるってところが重要なんですね。
みんなが参加してスムーズに進めば、そのあとが楽ですよ。しっかりデザインしなければいけないときに時間の余裕がでてくるでしょう。


だから、XDはこういう人が使うべきって決めないで、ペーパープロトタイピングみたいに「みんなで考えようよ」ってとらえてくださいね。


今回学習したことを振り返りながら、スマホのアプリを触ってみて。
いろいろ発見があると思うよ。
それでは!



※このテキストキャストは、以下のコンテンツには含まれない主に概論パートを中心に構成しています。

Adobe Experience Design(XD)
プロトタイピング[基礎編]


シンクゼロマガジンとは?

筆者:
Creative Edge School Books