「直感的なUIとは」直感的なUIがいい。とはよく言うければ、そもそも「直感的」とは何を指すのか。今回は書籍「Intuitive Design」の内容を参考に自分なりの解釈を加えたものを書いてみたい。

僕自身もつい最近まで、UIを考えるときPerceptibility, Predictability,Feedback, Consistency, Learnabilityという5つの考え方を基準に考えていた。しかし「Intuitive Design」では次の8つの指標を推奨している。

1.Discoverability

ターゲットユーザーが目的を達成するためのUIを発見できるか

2.Affordance

ターゲットユーザーに操作可能なUIであり、どのように操作するかが伝わるか

3.Comprehensibility

ターゲットユーザーがそのUIの意味を理解できるか

Comprehensibilityは次のような点が判断指標となる。　　

• ユーザーの言葉で語っているか
• 期待通りの動作をしているか
• 的確なアイコンを表示しているか

4.Responsive Feedback

ターゲットユーザーの現在の状況や操作の結果を正確、
明確かつ即座に示せているか

5.Predictability

ターゲットユーザーが操作する前にその操作の結果を予測できるか

6.Efficiency

ターゲットユーザーが不要な動作や繰り返しをせずに最優先事項を完了できるか

7.Forgiveness

ターゲットユーザーの誤操作を防げるか、誤操作による打撃を最小限に抑えているか、誤操作から簡単に復旧できるか

マウスアップで動作させているか、タップエリアは十分大きいかなどがForgivenessの一例である。

8.Explorability

ターゲットユーザーがミスをすることや迷うことを恐れずに使えるか

次のような明らかなナビゲーションがあること

• タスクの完了方法、および次のステップへの移動方法が明らかである
• 前へ戻る方法が明らかである
• 現在のタスクのキャンセル方法が明らかである
• ホーム画面へ戻る方法が明らかである

保存方法が明確である

• 即時保存の場合、保存が実行されていることを示す
• 手動保存の場合、保存ボタンを明確にする（スクロールしないと見えないとかはだめ）

デザイナーとして仕事をしていくうえで、必要なのは「発想力」「デザイン力」「伝達力」などいろいろあるが、今回はそんな「発想力」について書いてみたい。「発想力」とはいわゆるアイデアを出すための能力である。いろんなアイデアを思いつくためにはどんなことをすればいいかというと、もちろん

たくさんのものに触れること

とはよくある答えで、それは常に心がけるべきである。英語のデザインのオンラインコースでは

The only thing you should know as a designer is everything.

（デザイナーとして知るべき唯一のことはすべて）

と語っており、この言葉は自分にとっても非常に印象に残っていて、本や映画、漫画、アニメ、音楽、スポーツ、格闘技あらゆるものに時間の許す限り手を伸ばすようにしている。とはいえ、そんな途方もない話をしてもなんのヒントにもならないので、もう少し具体的に、デザインのアイデアを出すために普段やっていることを一つ話したい。それは

「このアイデアは他でも応用できる」というものをできるかぎり保存しておくこと

である。

毎日少なくとも30分程度PinterestやDribbbleをさまようって「インプットの時間」を設けるようにしている。そして、「このアイデアは他でも応用できる」と思えるデザインを保存して、アイデアに困った時にすぐに参照できるようにしている。Pinterestではこちらののこちらのボードに保存している。

https://www.pinterest.jp/masatos7/design-idea/

例えばこちらの人間よりも大きなダックスフントを散歩している画像を見て欲しい。

これは結局、「人物やオブジェクトを異常な大きさにする」というアイデアで、ダックスフントに限らず同じ考えは様々な場所で応用できる。

また、こちらのシアトルの風景のなかに文字が埋め込まれている画像。

こちらも結局、「フォントを写真とオブジェクトの裏に配置する」というアイデアで、こちらもフォントを写真に載せる時に、少し個性を出したい時など応用できる場面はたくさんある。

このように、他でも応用可能なアイデアをひたすら集め、機会があれば使うようにしている。

アイデアとは「あるときふと頭に浮かぶもの」と考える人も多いかもしれないが、僕にとってはそれは、毎日のインプットの積み重ねによって成し遂げられることである。いいアイデアも一度見て感心するだけでなく、繰り返し眺めて、繰り返し使って、初めて自分のものになるのだ。

今回転職をするにあたって、20社ほどのIT企業やスタートアップの採用担当者と話を聞いた。そんななか驚いたのは、多くのスタートアップがデザイナーの探し方がわからないということ。探し方がわからないだけでなく評価の仕方、そして自分たちにフィットするのがどんなデザイナーなのかがほとんどイメージできていないということ。

まず、デザイナーを探している企業の担当者に知って欲しいのは、

高いデザイナーが、優れたビジュアルデザインをするわけではない

ということ。

また、

デザイナーはいくらもらえるかよりも何ができるか

にずっと興味があるということ。

簡単にデザイナーの種類を思いつく範囲で整理すると次ようになる。

30代後半から40代前半のデザイナーは、Webの黎明期で乱立する小さな制作会社で、デザイン、コーディング、プログラミングなどすべてをこなすことを強いられたWebクリエイター出身者か、DTP等の紙媒体を専門としてきてWebに転向したDTP&Webデザイナーのとちらかだろう。

Webクリエイター出身者は全体的に広くこなせるが、ビジュアルデザインの質はそれほど高くはない。一方でDTP出身はビジュアルデザインの質は高いがプログラムなどに対する苦手意識は強い。

Web業界が大きくなってから入ってきた30代前半までのデザイナーは、ビジュアルデザインを作る「デザイン部」、HTMLのコーディングやJavaScriptを組む「マークアップ部」、PHP等のコーディングを行う「開発部」というような、分業制のなかで経験を積むことが多いのでWebのビジュアルデザインで経験を積んでいることが多い。その過程ででHTML、CSSのコーディング程度は出来る人間もいるだろう。

UXという言葉が全盛の時代に業界に入ってきた20代のデザイナーは、ユーザー調査などの上流工程に関わるUXデザイナーか、アプリなどのデザインと比較的簡単なHTMLコーディングをこなするUIデザイナーのどちらかに別れる傾向があるようだ。

このようにIT業界に限って見ても世の中にはいろんな「デザイナー」がいるのである。自分たちの会社で求める人物像をはっきりさせないで採用を始めても、結局ミスマッチとなり、お互いに無駄な時間を費やすハメになるだろう。

もし、知り合いにデザイナーがいたり、知り合いの会社のデザイナーに話を聞けるなら、そのデザイナーに、どうやって自分たちの求めているデザイナーをさがせばいいか聞くのが一番いいだろう。

僕自身もデザイナーの採用をすることはあるが、ポートフォリオから採用すべきデザイナーを決めるのは至難の技である。小さな企業であれば、すぐれたデザインをするだけでなく、そのデザインを論理的に非デザイナーに説明する言語化能力を持ったデザイナーの存在は強力な力となる

というわけで結局は

近くのデザイナーに聞く

というなんとも参考にならない答えになってしまったが。間違いなく確実な方法である。なによりもデザイナーはデザイナー同士の繋がりを持っていることが多いし、デザイナーのコミュニティに属していることもある。

世の中には組織の中で唯一のデザイナーとして働く人は多いだろう。そんな人は、エンジニアや社長やプロダクトオーナーと毎日戦いながら、その組織が提供するサービスを優れたデザインにするために孤軍奮闘しているのだろう。そして、弱気になった時ついつい

優れたデザインができないのは
周囲が悪いからだ

と思ってしまったりするのだ。これは悪い傾向である。（笑）

そんな人にとって有益なのは、「他の企業のデザイナーはどのように困難を乗り越えているのか」を知ることではないだろうか。

今日オススメするYouTubチャンネルのHigh Resolutionはまさにそのためのチャンネルである。Pinterest, Uber, Airb&bなどの有名企業のデザイナーたちにインタビューをしており、そのデザインに対する考え方に触れることができる。

1本1時間近くあるので、気軽に見ることができないが、重要な部分だけ短く切ったバージョンもあるようで、気分に応じて使い分けてもいいだろう。自分の場合一人で仕事している時、流し続けていたりしている。

個人的にはSpotifyのデザイナーRochelle Kingのデータドリブンデザインの話が印象的でした。これを聞いてすぐに書籍を購入して、社内にデータドリブンデザインの文化を根付かせ始めた。

もし、英語が苦手で「英語が難しくて理解できない」という箇所があったら個別に質問いただければ説明するので、ぜひトライしてみて欲しい。

UIデザインの手順方法を言葉にするのは簡単ではない。きっと世の中の多くのUIデザイナー、デザイナー同士レビューをしあったりした中で得られるた知識を、無意識に実行しているのだろう。それでも、いくつか言葉にできる考え方はあり、知っているだけで行き詰まった時の助けになる。今回は紹介したいのが僕自身がアクションのための要素（ボタン、入力フィールド）をデザインする中で、意識している考え方である。

それは、ある画面をデザインするとき、その画面のアクションを

・ユーザーがしたいこと
・ユーザーにさせたいこと

のいずれかに分類することである。

例えばAmazonのようなオンラインショップであれば、「ユーザーがしたいこと」は「商品を閲覧する」や「商品の評価を見る」ということで、「ユーザーにさせたいこと」は、「レビューを書く」（コンテンツを増やす）「シェアする」（ユーザーを増やす）などである。

「ユーザーがしたいこと」のためのUIを考えるとき、それはユーザー自身がそもそもアプリを使う目的なので、UIが多少見つかりにくくても、多少使いにくくても成立するのである。（もちろん作る側としての理想は、使いやすく、わかりやすくであるが。）

ところが「ユーザーにさせたいこと」のためのUIは、見つかりにくければまず使ってもらえないし、使いづらければすぐに離脱してしまう。つまり、より目立たせなければいけないのは、後者の「ユーザーにさせたい」行動のためのUIである。ただし、ここで気をつけなければならないのは、「ユーザーがしたいこと」をするためのUIを、「ユーザにさせたいこと」のためのUIが邪魔してしまってはならないということである。なぜなら、それはアプリ全体の不信へと繋がりユーザーの離脱へとつながるからだ。

こうやってそれぞれを1つづつ考えるとひどく当たり前のことに聞こえるかもしれないが、実際には「ユーザーがしたいこと」も「ユーザーにさせたいこと」も複数あることが多い。そんなときも、そのアクションはどちらのアクションなのか、しっかり考えるとあるべき姿が見えてくるだろう。