酔いどれデザイン日誌 - Drunken Design Diary -

都内でデザインファームを営む酔っ払いが、UI/UX設計やデザイン思考論を書き殴ります。

都内でデザインファームを営む酔っ払いが、UI/UX設計やデザイン思考論を書き殴ります。

バッドデザイン賞を勝手にノミネートしてみた-2017年度版-

忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。

さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか?私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの?」というレベルのバッドデザインがあったりするんですよね。

良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。

本アワードで扱うバッドデザインの定義

  • 誤操作や誤認を誘発する意匠
  • 身体的な危険が伴う意匠
  • 精神的な不快感を誘発する意匠
  • 情報が全く伝わらない意匠
  • 課題とソリューションが大きく乖離した意匠

※なお「ダサい」「カッコ悪い」などの主観的なバッドデザインはノミネート対象外とする。

このアワードを通じて普段当たり前のように享受しているデザイン(DESIGN)の大切さと、プロジェクトにデザイナーを入れることの重要性を感じて頂ければ幸いです。

また、自分も渾身のバッドデザイン事例をお持ちだという方は是非「#バッドデザイン賞2017」でTwitterなりInstagramなりにノミネート(投稿)してみてください。あとでエゴサしてニヤニヤします。

バッドデザイン賞ノミネート作品一覧

今回は2017年に撮影したバッドデザイン事例の中でも、選りすぐりのレジェンド級バッドデザインたちを部門別にノミネートさせて頂きました。街中で撮影する都合上プロダクトの事例が多くなっていますが、特に他意はありません。それでは行ってみましょう!

No.1「危険そうなボタン」

f:id:information_architecture:20171206165121j:plain

【ノミネートコメント】

巨大な筐体に1つだけ搭載されたボタン。押したらヤバそうなカラーリング。ダメ押しで注意の表記。このいかにも危険そうなボタン、実は「エレベーターの呼び出しボタン」である。誰が押すんだこのデザイン・・・金沢の地下通路で発見。

良く見ると下の方に車椅子専用のボタンが付いているが、多分車椅子の人も赤色と注意書きしか目に入らないんじゃないかな。 どう見ても非常ベルが鳴りそうな、見事な誤認デザイン部門ノミネート作品である。

【追記】「注意」のところに何て書いてあるか読めねーよというご意見が多かったので追記します。「戸に触れないこと。けがをする恐れがあります。」と書かれています。なぜ戸に貼らなかった・・・

No.2「フェイクボタンonテプラ」

f:id:information_architecture:20171206165141j:plain

【ノミネートコメント】

エレベーターつながりでもう1事例。私はこの時生まれて初めてボタンに「ボタン」というテプラが貼られているのを見た。

どう見ても光っている部分の階数が書いてあるブロックがボタンにしか見えない。というか実際テプラがあってもそちらを押してしまった。

シグニファイア(可能性を示唆する意匠)が完全に逆に作用した錯視効果の極致であり、人間は本能的に一番出っ張っているところを押したくなるものなのだという事を再確認させてくれる悟りプロダクト。

何故ボタンと階数表記を並べなかったのか。というかボタンを光らせるのではダメだったのか。考え始めると疑問が尽きない、見事な誤操作デザイン部門ノミネート作品である。

No.3「デュアルテプラ」

f:id:information_architecture:20171206165201j:plain

【ノミネートコメント】

テプラと言えば貼られたらデザイナーの負けでおなじみだが、これは滅多にお目にかかれない1つのアイコンに2つのテプラが貼られてしまった事例だ。

アイコンだけでは意味が伝わりきらない問題は遥か昔から言われ続けているが、アイコンが何の絵なのかまで併記されたのはこれが歴史上初ではないだろうか。

恐らくスタイリッシュにしようと曲線を極力排除した結果、注射器にしか見えなくなって救護室と間違えて入ってくる人が多かったのだと推測される。

無駄にスタイリッシュにしてもロクなことにならないという教訓を我々に与えてくれる、見事な意味が伝わらない部門ノミネート作品である。

No.4「乱視案内板」

f:id:information_architecture:20171206165217j:plain

【ノミネートコメント】

もう、見たまんまである。新木場で発見。案内板としての意味を全く成していないので、都は今すぐ撤去して再施工すべきだと思う。

この案内板がどうなっているかというと、古い案内板の上に(前の案内板を剥がさずに)新しい案内板が張られているのでバックライトで透け透けになっているのだ。雑施工極まりない。

なおこの状態になるのは夜間のみであり、昼間は普通に読める。バックライトが付いてる事を確認して施工すればこんな面白いことにはならなかっただろうと思うと、ある意味公共工事の怠慢が生んだ奇跡の産物と言える。

仕様の確認とチェックフローは怠らないようにしようという戒めを我々に教えてくれる、見事な意味が伝わらない部門/イージーミス特別賞ノミネート作品である。

No.5「ふれあえない灯」

f:id:information_architecture:20171206165234j:plain

【ノミネートコメント】

「ふれあい灯」と称されたこの装置は、ボタン押すと上に搭載されたランプが光り、けたたましい音が鳴って周囲の人の視線を集めることで困った人を助けることができるのだそうだ。・・・え?

取り扱い説明には「(中略)外国人の方で、お手伝いを必要とされる方のための〜」とあるが、英語表記は一切無い。ゆえに外国人が困ってもこれを押すことは絶対に無い。

また下段には「このランプが点滅していたら、お手数ですが近くの社員をお呼び止め〜」とあるが、なぜ他の客にそれをやらせるのか理解が及ばない。ランプも音も無くして社員の持ってる端末に直接通知が飛ぶとかではダメだったのか・・・というか困ってる人が直接社員を呼び止めるではダメだったのか・・・

そもそも困っている時にわざわざボタンのところまで移動する人が居るのだろうか。人は大抵、困ったことが起こったその場所で人を呼び止めるものである。ソリューションとしても入り口で「要介助/need help」と書かれた名札を配った方がはるかに効果的で安上がりな気がする。

360°あらゆる方向にツッコミどころ満載な、見事なソリューション乖離部門ノミネート作品である。

No.6「孔明の罠」

f:id:information_architecture:20171206165254j:plain

【ノミネートコメント】

写真では分かりにくいと思うが、全く同じデザインの2枚の連続したドアがあり、手前側がスライド式の自動ドア、奥側が観音開きの手動ドアになっている。これは本当に危ない。

タチの悪いことに手前(1枚目)が自動なので、2枚目も自動と誤認させ高確率でガラスに衝突するような巧妙なトラップになっている。実際撮影中にサラリーマンが何人か激突していた。これはきっと諸葛孔明の仕業に違いない。もし手動と自動が逆の順番ならここまで危険にはなっていなかっただろう。

このビルを設計した人は、カッコよくて美しいエントランスの設計図を引くより先に、人間工学と認知心理学の基本をきっちり勉強してきた方が良いと思う。

同じ形=同じ振る舞いを期待するシグニファイア(可能性を示唆する意匠)の原則を逆手に取った、非常に狡猾かつ巧妙な身体危険部門ノミネート作品である。

生活者がフィードバックすることで住みやすい社会を作って行こう

如何だったでしょうか。人様のつくったものを気安くバッド呼ばわりするのは正直気がひけるのですが、誤操作や誤認は時に身体や資産に大きな損害を与える危険をも孕んでいることが理解できたかと思います。

たかがデザイン、されどデザイン。目先の格好良さや目新しいソリューションを採用しようとする前に一度立ち止まり、デザインの基本の一つである「正しく伝える」ことを意識することの重要性を改めて認識していただければ幸いです。

これからも引き続き街中のグッドデザインとバッドデザインを勝手に収集していくつもりなので、気が向いたら2018年版もやるかもしれません。

なお、今回はあくまで私のバッドデザイン事例ストックの中からのノミネートなので、世界全体に無数にあるバッドデザインのほんの一部にすぎません。

私は生活者全員がバッドデザインをフィードバックしていくことで、世の中が少しずつでも暮らしやすくなっていくことを望んでいます。

ユーザーが正しくフィードバックを行える習慣が根付けば、企業が高いお金と長い時間をかけてユーザー調査などする必要がなくなるのです。せっかくのインターネット社会なのですから、どんどん活用していきましょう。

皆さんも普段疑問に思っていたバッドデザインをどんどん発信してみてください。いつかそれが設計者の目に留まり、改善されていくかもしれませんよ。

Amazonプライムフォト(AmazonDrive)で写真を一括削除する時に見る記事

皆さんは写真を撮りますか?一眼ユーザーでもスマホフォトグラファーでも膨大な写真データの置き場所やバックアップ、困りますよね。そんなあなたには断然Amazonプライム・フォトをオススメします。なんたって無圧縮で容量無制限な上にRAWデータまで無制限に保存できて、Amazonプライムの年会費の中に含まれている基本サービスなのですから度肝を抜かれます。無圧縮かつRAWデータOKの時点で対抗馬のGoogleフォトが霞んで見えます。もうFlashAirとか使わなくても良いんだ!やったー!などとつい浮かれてしまいました。

しかしこのAmazonプライムフォト(AmazonDrive)、思わぬ落とし穴があります。スマホアプリの利用開始時に自動保存をさらりと促してくるのですが、ここで十分に注意しないと取り返しのつかない事になってしまうので、私のように1万枚の写真を手動削除して無駄な半日を使う人がこれ以上出ないようにここに警告文と正しい一括削除の手順を置いておきます。もしもう自動保存をオンにしてしまったよーという方もご安心ください。救いはあります。

目次

Amazonプライムフォト(AmazonDrive)のクソ仕様について

まず最初にAmazonプライムフォト(AmazonDrive)の挙動について確認しておきましょう。ぶっちゃけこの章の仕様さえ把握していれば1万枚の画像を手動削除するとかいう地獄をみなくて済みます。

フォルダで分けてもアプリ側では表示が混ざる

AmazonのPrime Photosをダウンロードした方は気付いたと思われますが、このアプリで表示されているのは「AmazonDriveに保存されているすべての写真」になります。AmazonDriveのwebアプリ側ではフォルダ分けができるのですが、アプリ側から見ると全部一緒くたに混ざってしまいます。スマホのバックアップだけをしている方なら気にならないかもしれませんが、私のようにデジタル一眼で撮った写真もバックアップしていると、スマホの写真および画像が一覧に混ざるのは非常に気持ちが悪いです。一眼で撮った写真だけがクラウドサーバを介していつでもスマホでプレビューできるのが最高だったのに・・・。という事でスマホのバックアップはGoogleフォトに移そうと思ってすべての写真を削除した時に悲劇は起こりました。

フォルダを消しても中身の写真は消えない

はい、これです。THE・クソ仕様。webアプリ版の「すべてのファイル」タブからスマホ自動保存をオンにしたとき自動で作られる「Pictures」フォルダを選択して削除してみましょう。一見消えたように見えますが、スマホアプリから見ると中身の写真がすべて消えずに残っています。どういうことかな?と思って再びwebアプリ版の「写真&ビデオ」のタブに移動してみました。すると写真データは全て残っていて、ダウンロードも可能ではないですか。つまりフォルダの削除操作で消えるのはフォルダの外側だけで中身は何故か全て取り残されます。普段WindowsやMacなどのOSに慣れた身からするとフォルダを削除するとその中身が消えることを期待するのは当然なので、これでは期待する挙動と違いすぎてトラップ以外の何物でもありません。ちなみにこの件についてカスタマーサポートに問い合わせたところ「フォルダのみが消えてしまうのは仕様」だそうです。なんじゃその仕様。

ファイルの全件一括削除はできない

はい、さらにクソにクソを重ねてくるスタイル。容量無制限だぜー!やったー!などと言って何万枚も写真をアップロードしているとあとで地獄を見ることになります。先ほどの操作でフォルダを削除しても意味がないと気付いたあなたは一度リセットして再度アップロードをやり直すため「写真&ビデオ」タブからファイルの全件削除を目論むでしょう。しかしそのような操作は現時点(2017年4月時点)ではサポートされていません。

f:id:information_architecture:20170418000503j:plain

唯一認められている一括操作は「すべてのファイル」タブから画像で示した部分をクリックして、ファイルを1,000件まで同時に選択しての一括操作です。なんだ、一括削除できるじゃないか。と思ったあなた、まさかゴミ箱に入れたフォルダを完全に削除してませんよね?まだ削除していない方はセーフです。次の章でスパッと解決します。もし消してしまったあなたは、残念ながら地獄確定です・・・

フォルダを消してしまった場合の対処法

ここからは実用的なTIPSです。うっかりスマホアプリで自動保存をオンにしてしまって、スマホからの写真を全部消したいと思ってwebアプリから「Pictures」フォルダをゴミ箱にぶち込んだ時点でこの記事にたどり着けていたのであれば、まだ間に合います。よかったですね。

f:id:information_architecture:20170418000732j:plain

この場合にやることは単純明解です。「すべてのファイル」タブ内メニューから「ゴミ箱」を選択し、先ほどぶち込んだフォルダを選択してから下部より「復元する」をクリックしてください。これで「すべて」メニューに先ほど消したフォルダが内包されたファイルとの親子関係を保ったまま復活します。あとは「Pictures > 端末の名前のフォルダ」と掘り進んで行き、最下層になった段階で1,000件ずつ一括選択して一括削除して行ってください。そして中身の写真を全部削除したあとに、親フォルダを削除します。これでAmazonDrive上からスマホの写真を確実に削除することができます。

ちなみにフォルダの中身のファイルを全て削除した後、そのフォルダを消してから復元しても中身のファイルは復元されません。あくまでフォルダはフォルダとして独立して削除や復元操作が行われます。

フォルダを消してからゴミ箱で完全に削除してしまった場合の対処法

おめでとうございます。私と同じ状況です。フォルダを削除したあと「ゴミ箱」メニューで完全に削除をしてしまった場合、そのフォルダに内包されたファイルを一括操作する機会を永久に失うことになります。なんという即死トラップ。どうしようもないです。仕様ですから。

ちなみにカスタマーサポートに「構わないからアカウントに紐づく全ファイルを消してしまってくれ」とお願いしてみましたが、セキュリティ上の理由で無理と断られました。無駄にしっかりしやがって・・・

1,000枚やそこらならまだしも、私のように1万枚以上も同期してしまった後ですと1万連続クリックという高橋名人もびっくりの指先トレーニングをする羽目になります。

諦めて名人になれというのも酷なので、1万クリックトレーニングを微妙に効率化するTIPSを伝授します。

f:id:information_architecture:20170418001227j:plain

まずAmazonPrimePhotosのスマホアプリ(確認したのはiPhone版のみ)を立ち上げます。次に左上のチェックマークアイコンをクリックします。これで複数選択ができるようになるのですが、この時日付単位でまとめて選択できるようになっていますので、あとはひたすら日付をタップしまくるだけです。私の場合1万枚を3年とちょっとで撮っていたようですので、タップ回数は最大でも1,000回くらいまで圧縮されました。やったね・・・

なお、この技が使えるのはPrimePhotosのアプリだけですので、AmazonDriveのスマホアプリでは出来ないです。ご注意ください。

正しい一括削除の方法をおさらい

これ以上野生の高橋名人が増えてしまわないように、AmazonDriveにおける正しいファイルの一括削除方法をあらためておさらいしておきましょう。

1、「すべてのファイル」タブを開く

2、フォルダを最下層まで掘り進む

3、画像で示した部分で1,000件ずつ選択して削除

流石にクソ仕様すぎるので、全ファイル一括削除かフォルダに内包されたファイルの削除のどちらかが今後実装されると思います。それまではうっかりいつもの癖でフォルダを削除してしまわないように十分注意しましょう。

というかせっかく無圧縮+RAWの無制限保存可能というデジタル一眼ユーザーのための夢のストレージなのに、何でスマホで保存したただの画像やスクショなんかと混ぜて表示するような設計にしたんだろう・・・普通に考えて一眼の写真とスマホの画像を同じ画面で見たいと思う人居ないと思うんだけどなぁ。

もっと効率よくファイルをまとめて削除する方法があれば誰か教えてください。

日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか

先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。

国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか?従来のUIデザインツールとは何が違うのか?ということを紹介してみたいと思います。

目次

これはプロトタイピングツールではない

まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場しました。何の事前情報もなしにSTUDIOを開いてみると、確かにそれらのプロトタイピングツールの派生系に見えるでしょう。しかし、すこし触ってみるとこれが従来のプロトタイピングツールと設計思想からして全く異なるということがすぐに体感できます。実際にSTUDIOのUIに触らないで理解するのはなかなか難しいのですが、できる限りどういうことか説明してみます。

まず、アプリやWebサービスにおけるUIデザインは大まかに分けて4つのステップに分かれています。

  1. ワイヤーフレーム
  2. プロトタイピング
  3. グラフィックデザイン
  4. プログラミング

このうちプロトタイピングとグラフィックデザインは順序が前後する可能性もありますが、主だったポイントはこんなかんじではないでしょうか。これまで世の中に登場してきた代表的なツールに当てはめると、Prottはワイヤーフレームとプロタイピング。Sketchはグラフィックデザインの領域を得意としており、互いのツールを連携することで優れたUIをデザインすることを補助しています。

ではSTUDIOはこれらのステップのうちどこを得意としているかというと、私が触った印象としては1〜4の全ての工程をSTUDIOひとつで完結させようとしていると感じました。馬鹿げていると思いますか?しかしこれが事実であることは、STUDIOのサービスコンセプトが物語っています。STUDIOが目指している世界は「コードを書かずにサービスが作れる世界」すなわち、GUIでプログラミングまで含めたアプリ制作が完結する世界なのです。

これに気付いたとき、ワクワクせずにはいられませんでした。かつてGUIによってOS操作を実現したように、画面上でグラフィカルかつ直感的に要素を配置するだけでアプリやサービスが出来上がる世界がもうすぐそこまで来ているのだと。

具体的にどのような部分でそれを感じるかというと、まずXcode(アップル公式の統合開発環境)ではおなじみAuto Layoutが、しれっとGUIで実装可能になっています。この時点で結構な驚きです。まだβ版なのにAuto Layoutを優先して実装してくる時点でSTUDIOがXcodeに頼らず開発する未来を目指していることがよく分かります。

f:id:information_architecture:20170323175646g:plain

そのほかにも、Sketch等グラフィックデザイン支援ツールではお馴染みのレイヤー表示順の概念とグループ化がSTUDIOでは(おそらく)意図的に実装されていません。これは、最終的にアプリとして出力(β版では出力機能はありませんが)される際にデータ構造を正常に保つためだと思われます。ちなみに、わざわざ自分でグループ化やレイヤー順変更しようと思わなくても見た目上でブロックの中に配置されたオブジェクトは自動的に正しい順序が保たれた入れ子のツリーのような状態になるため、コンポーネントの区切りを意識することなく想像以上に快適に操作することが可能になっています。

なにより決定的なのが、要素に対してGUI上でAPI接続させる機能が標準で備わっていることです。ここまでで紹介した特徴だけではちょっと変わったプロトタイピングツールという認識になってしまいますが、β版の時点でAPI接続までサポートしようとしている時点でSTUDIOが本気でアプリ制作の全工程をカバーする気だということがひしひしと伝わって来ます。とりあえず、サンプルでspotifyのAPIを叩いてビートルズの名盤のジャケット写真を表示してみました。すげえ。

f:id:information_architecture:20170323180207j:plain

f:id:information_architecture:20170323180222j:plain

ここまでの紹介を読んで皆さんに誤解して頂きたくないのは、コードを書かなくてもサービスが作れる=エンジニアが不要になるということではないということです。プログラミングはデザインと同じく非常にクリエイティブな作業であり、ツールがあるからといってエンジニアの思考無しには成り立ちません。あくまでコードベースではなくGUIベースで組めるようになる点が革命的ということです。

コードベースでなくなることの何が良いかというと、ビジネスメンバーやデザインメンバーがエンジニアと同じ目線でサービスを作ることができるということでしょう。ビジネスメンバーやデザインメンバーはエンジニアの書いたコードを理解することができませんので、デザイナーが形にしないといけないわけなのですが、デザイナーもエンジニアの実現したいことが100%理解できるかというと、そううまく行くことばかりではないと思います。

つまり、エンジニアが素晴らしいアイデアを持っていたとしても誰にでも理解できる形にする手段が無いため誰にも理解されないまま埋もれてしまっているのです。その点において、GUIで機能と見た目を同時に作れることは非常に有効であると言えるでしょう。従来のプロトタイピングツールは、サービスづくりの「デザイン」の領域についてビジネスチームやエンジニアチームを巻き込んだ開発を可能にしてきました。STUDIOは、それらの特徴に加えて世界で初めてサービスづくりの「プログラミング」の領域についてエンジニア以外のメンバーを巻きもうとしているのかもしれませんね。

特筆すべきはシームレスな操作感

ここまでSTUDIOのコンセプチュアルな部分を紹介してきましたが、ここからはSTUDIOのUI/UXにフォーカスして紹介していきたいと思います。STUDIOを開発するオハコプロダクツ社はUI/UXデザイン会社であるオハコからスピンオフしたということもあって、こちらのプロダクトもインターフェース、特にインタラクションの部分について非常に細部までこだわって使用感が作り込まれています。

まず最初に気付くのは、ブロックを配置しようとしたときの挙動の面白さでしょう。こればかりは文章で説明するのが難しいので、STUDIOの公式サイトの「やってみよう」から体験して頂きたいです。左右上下辺からの距離によって要素の座標と大きさを決定するこのUIはプレスリリースによると特許出願中のようで、これまでのどのツールにも無かった独自の操作感を提供しています。実際に触ってみると非常に直感的かつスピーディに要素の配置をすることが出来ることに驚きます。これからドラッグ&ドロップで要素を配置する系のツールのデファクトスタンダードUIになりそうな予感がしますね。

f:id:information_architecture:20170323175736g:plain

β版ではまだLPで紹介されているスマートフォン同期プレビューは実装されていませんでしたが、それでも通常プレビューのシームレスさには驚きます。画像の再読み込みなどが極力走らないように工夫されているのか、一切の途切れなくまさにシームレスにプレビュー状態に移行します。画面遷移を行なっても画像の読み込みはほとんど感じられません。というより通常編集モードですでにプレビューと同等の操作(横スクロールなど)ができるので、プレビューの概念が揺らぎます。

他にも、要素をグリグリ動かすとalignがよしなに調整されてくれたり、画面上で順序を入れ替えるとレイヤー(ツリー)側の順序も入れ替わったり、色んな操作がシームレスに繋がっている感覚が新鮮でした。操作しているというよりもデュエットしているような感覚に陥ります。なんだその恥ずかしい表現。

これだけ色々なことができるツールでありながら、テキストによる説明一切なしで直感的に使えるのはすごいと思いました。ユーザーに学習させてから使わせるのではなく、触りながら学習するというのはUIにおける理想の状態だと思っているので、もっとこういう説明に頼らないUIが増えると良いなぁと思ったのでした。各UIの操作感については、β版を終えて改善が進んだ製品版の方が出た段階で改めてレビューさせていただこうと思ってます。

全員がMVPまで作れる時代

STUDIOがプロトタイピングツールではないことと、誰でも直感的に扱えるツールであることを紹介してきましたが、ではSTUDIOによってアウトプットされるものは一体何なのか?というと、MVP(Minimum Viable Product)であると考えられます。MVPについて改めて説明はしませんが、ここではプロトタイプとMVPとの明確な違いは何かということについて考えてみたいと思います。

MVPもプロトタイプも本開発に入る前のテスト段階でユーザー検証のために用意するもの、という漠然とした認識だと思うのですが、私はこの2つで明確に違う点があると考えています。それは、MVPは「最小限の価値」を確認するための試作品であり、プロトタイプは最終形も含む「状態」を確認するための試作品であるという点です。MVPは最小限という制約があるため、作り込むことに重点を置いていません。一方、プロトタイプは複雑に入り組んだサービスの後期段階でも用いられることから分かるように、最小限にすることに重点を置いていません。両者は包括関係にあるといっても良いでしょう。というより、Prott等のトランジション再現型のプロトタイピングツールもプロトタイプという大きな枠の中のごく一部分(画面遷移)しか試作できないため、厳密にはプロトタイピングツールと呼ぶのは相応しくないのかもしれませんね。MVPにはプロダクトと名がつくくらいなので、基本的な画面遷移に加えて最小限の価値を得られる「機能」が必要であり、機能が入って初めてユーザーは画面から「価値」を体験することができます。『ここで音が出ます』とか書いてあっても、それは本来のユーザー体験ではないですよね?音が出ると決めたらちゃんと音を出すことが、MVPにおいては重要になってくるのです。そして、MVPを作ることはサービスのスタート地点に立つことと同義です。こう考えると、STUDIOは最速でサービス開発のスタートを切らせてくれるツールと言えるかもしれませんね。STUDIOによって、非エンジニアも含めてメンバー全員がMVPまでは爆速で作り上げられる世界が作られることを期待しています。

まとめ

以上、一通りβ版STUDIOを触り倒してみて感じた率直な感想ですが、画面遷移の整合性チェックなどを素早くチェックするのが目的なら私はProttを使うなという印象でした。なんと華麗な手の平返し!やはりプロトタイピングという目的に特化したツールにはそれなりに工夫が詰まっており、使いやすいです。また、ビジュアルデザインについてもSketchの方がやはり出来ることが多く使いやすいと感じます。しかし、これらのツールはUIデザインの特定ステップに限定した場合に使いやすいのが特徴であるため、最終的なMVPの出力まで一気にやるようなケースではSTUDIOで作った方が総合的には早く形になるのだろうなということを強く感じました。STUDIOはまだβ版なのでこれから改善を繰り返していく段階であり、これからの動向が非常に楽しみなツールだと思います。

ところでわざわざこんな長文レビューを書いている理由ですが、古巣のプロダクトということは実は全く関係なく「コードを書かずにサービスが作れる世界」というコンセプトに純粋に惚れ込んでいるためです。私自身が何度かプログラミングに挑戦しようとして言語を覚える段階で挫折を繰り返している身なので、GUIベースのアプリ統合開発環境を切望しているのです。

もしこの記事を読んでSTUDIOにすこしでも興味を持っていただけたのであれば、一度触ってみてください。触ればこのコンセプトとすごさが実感できます!そして、思ったことは良いことも悪いこともバシバシフィードバックしてあげてください!ユーザーとして一緒に作りましょう、コードが必要でなくなる世界を。

すべてのデザインの基本「ユーザーヒアリング」を極めるには?

せっかくブログをリニューアルしたのに全然更新できてませんでした・・・怠惰ですね。さて、最近よくユーザーヒアリングのテクニックとかあるの?コツとかあったら教えて!と言われることが多くなったので、私がユーザーヒアリングを行う際に意識している事を備忘録的に書き出してみたいと思います。スタートアップ企業や、大企業のCSやCX部門などユーザーと直接接する機会のある方はよろしければ見ていってくださいな。

目次

ヒアリングの3大落とし穴

勘所を知らぬまま長々と読んで頂くのもあれなので、先にアンチパターンをまとめます。気に留めながら自身のヒアリングを思い返して頂くと、かなりの確率で無意識にハマってしまっている方も多いのではないでしょうか。

  • 「やっぱりそうなんですね」と言ってしまうこと
  • 「それは○○ですか?」と聞いてしまうこと
  • このユーザーにはニーズが無かったと諦めてしまうこと

なにが悪いの?と言われそうなラインナップですが、これらはすべて確証バイアスをはじめとした様々な認知バイアスがかかっている時に無意識的に発言されるアンチパターンになっています。意識しながら話すとすぐにボロが出てることに気付けるので、ユーザーに会う前に社内でロールプレイングをしていくことを強くおすすめします。この中でも特に確証バイアスは厄介で、意図的に排除しながらヒアリングをするためには結構な回数の実践練習をしないと難しいと思います。

確証バイアスとは、平たく言うと仮説を裏付ける理由ばかりを優先して取り入れてしまい、反証する情報を無意識下で無視してしまう心理的な偏りのことです。あとで詳しく書きますが、バイアスがかかった状態でヒアリングを行ってしまうと、公平性を著しく損なう結果になってしまいます。

一応3大落とし穴の何が悪いか具体的に書くと、「やっぱりそうんですね」発言は、予め自分の中にあった仮説にフィットしたことに安堵している証拠(確証バイアスにハマっている)。「それは○○ですか?」は相手より先に思い込みで勝手に決めつけた具体例を言ってしまうことで回答の幅を狭める行為(相手にフレーミングを与えてアンカー効果を誘発している)。このユーザーにニーズが無かったと諦めることは、会話の一端をかいつまんで仮説にフィットしていないと判断している証拠(これまた確証バイアスにハマっている)です。

これを踏まえた上で『ヒアリングしてるときに何を考えてるの?』という冒頭のよくある質問についての回答ですが、何も考えてません。より正確には、意図的に何も考えないようにしています。何も知らない子供になったつもりで、すべての発言に対して「なんで?どうして?」という好奇心を持つことを心がけています。子供にはバイアスはありませんから、それに習って同じように一切の事前知識や雑念を取り払って当たり前だと感じる発言でも必ず理由を聞くようにすることが大切です。

ユーザーヒアリングの目的は仮説検証ではない

ユーザーヒアリングの目的は、仮説の検証ではありません。仮説を検証するために必要な情報を集めることが目的です。ここを勘違いして、ヒアリングの最中に仮説との付き合わせをしはじめる人が非常に多く居るように感じます。よくある勘違いの例として質問項目をまとめた『ヒアリングシート』をあらかじめ用意し、その仮説に基づいてYesかNoかを問うというヒアリング手法が横行していますが、これはアンケート調査のように対面が現実的に不可能なボリュームに対して有効な調査方法であり、対面調査で用いてしまうと自分も相手も確証バイアスにどっぷりハマって結果が偏ってしまうため、私はおすすめしていません。

もうひとつ、ヒアリング中に具体的な提案をしてしまうのもよくありません。これは、アンチパターンの「それは○○ですか?」と同じくヒアリングしている相手をアンカー効果の罠にハメてしまうことになるためです。例えば背が低い人の「ボタンが押しにくくて困っています」という発言に対して『じゃあ、この位置まで下げたらどうですか?』と提案してしまうと「いいと思う!」となってそこで会話が終了してしまいます。もっと課題を深掘りできるチャンスだったのに、これでは非常に勿体ないです。背が低い=位置が高いから押しづらいのだと決めつけず、こういう場合は『なんで押しづらいんですかね?』と一見アホっぽい質問を投げてみましょう。それによって相手は今自分がそれを嫌だと思った原因を考え始めます。すると、実は思いもよらない原因によって嫌だと感じていることに気付くこともあります。例えば、どのボタンが何の機能であるのか理解してなかっただけとか・・・。

といった具合で、せっかく対面でヒアリングを行うのですから、バイアスを全て取り払って「なんで○○なんですか?」「どうして○○だとダメなんですか?」と、仮説がすでにある部分であってもガンガン掘り下げていきましょう。仮説検証なんかオフィスに帰ってから議事録とにらめっこしてじっくりやればいいんです。

表面的課題と本質的課題を見極めよう

課題には表面的な課題と本質的な課題があります。ヒアリングで真に探らなければならないのは本質的な課題に至るヒントのほうです。

表面的な課題というのは、『複合的な悪条件によって現出した課題の最も目立つ一側面』だと私は定義しています。ユーザーが最初に口にする課題はこの表面的な課題であることが大半だと思います。この本質的な課題と表面的な課題の関係性は、ちょうど本音と建前の関係性と同じようなものだと思うのですが、建前をいくら集めても本音に至れないのと同様に、表面的な課題をいくら議事録にしたためてもなかなか本質的な課題に至ることはできません。だからこそ「なるほど。」とか言ってインテリぶって受け流さずに「それはなんでですか?」と掘りすすめる必要があるのです。掘れば掘るほど本質に近づいて行けるのです。

このように、ユーザーの回答の第一声が課題の核心をついていると考えるのはナンセンスだと言えるのですが、唯一例外があります。それは質問に対して断言の形で即答ができた課題です。即答かつ断言できるということはユーザーが何度もその課題に直面した結果解決策を自分なりに考えた証拠であり、本質的課題に極めて近い情報として扱うことができます。

ただし、ユーザーの発言が課題の本質を的確に表現しているとは限りませんので、即答された場合はチャンスと思って積極的に掘り下げて行きましょう。本質的な課題というのはユーザー自身も気付いていないことが多いので、一緒に掘り下げてあげる事で意外な事実に気付けたりするものですよ。

結果の分析とよくやりがちなミス

こうしてヒアリングから出てきたユーザーの発言の数々ですが、どの程度信用し、設計に反映したらいいのでしょうか。私なりの結論ですが、ユーザーが口にする「課題」や「解決策」は大抵ずれているので鵜呑みにしてはいけないというふうに考えています。ユーザーが言うことが正しくないということではなく、自分の直面している課題の原因を正しく言語化できないという方が正しいでしょうか。

ヒアリングの結果は分析しないと意味を成しませんが、その際にユーザーの言うことを鵜呑みにしてしまうのは危険であるという具体例をひとつ。例えば、自動販売機のユーザビリティ向上を目的としてヒアリング調査を行なったとします。そこで「お札が入りにくいです。」という意見が多かったとき、『じゃあ読み取りセンサーの感度を大幅に向上しよう!すると偽札が使われる可能性も増えるので、偽札判別機能を追加しよう!ついでに投入口の形状も変えよう!』といったように、ちょっとした改修のはずがいつのまにか巨額のプロジェクトになってしまうという事がよくよくあります。これがクソだという理由は説明しなくてもわかりますよね。

このミスを回避するには、ユーザーのペインを技術と根性で解消するよりも前にユーザーが自動販売機に求めている価値を解き明かす必要があります。私はこの例の場合「コンビニよりも時間をかけずに飲み物を手にいれることができる」ことだと解釈しました。ユーザーはお札が戻ってくると何秒かの時間を浪費するので、それが嫌だと言っているにすぎません。すると、そもそもユーザーは100円の飲み物のために(投入成功しても大量のお釣りが出る)1,000円札なんか使いたくないのだというシンプルな事実に気付くことができ、電子マネー決済の導入というソリューションに行き着くことができます。

たった一つ「なんでお札が入りにくいと困るんですか?」という掘り下げの質問ができて、ユーザーが口にする課題を鵜呑みにするのは危険であるという前提があるだけで、巨額のセンサー研究開発プロジェクトが既成の電子マネーモジュールを組み込むだけでよくなりましたね。

余談ですが、ユーザーが自動販売機に求めている価値は時間短縮であるという仮説は、実際に駅で電車がホームに入り始めてから飲み物を買ってみる体験をすればヒアリングなどしなくてもすぐに気付くことができます。自分が体験をする事の重要性はこのブログで何度も説いていますが、人間とは不思議なもので実際に体験しないとこの単純な事実になかなか気付く事ができない生き物なのです。

ユーザーヒアリングはとても大切ですが、ユーザーの意見をどのように分析し、どう活用するか?という部分はまた別の思考法やスキルが必要になります。直接的なヒアリングのテクニックではないですが、ユーザーの意見の使い方として非常に重要な項目なので、あえて備忘録として書き残してみました。機能改善やモデルチェンジのような革新性の無い開発プロジェクトが巨額の予算になる場合それはすべてクソソリューションです。大事なことなので2回言いましたが、どうぞお気を付けください。

まとめ

途中で脱線したのでテーマがよくわからなくなりましたが、我流のヒアリングの極意としては

  • 確証バイアスを取り払え!
  • 子供になったつもりで掘り下げろ!
  • ユーザーの発言は鵜呑みにはするな!

という感じでまとまるでしょうか。もう一度言いますが、ヒアリングの目的は仮説を検証するために必要な情報を集めることです。より効果的な仮説を立てるためには元にする課題が本質的なものでなくてはなりませんし、本質的な課題を探るためにはなるべく多角的なヒントが必要になります。より多くのヒントを引き出すために皆さんにお伝えしたい最終奥義は何かというと、相手と相手の領域に興味をもつことです。ヒアリングテクニックでもなんでもないですが、興味を持つことで自然に「なんで?」「どうして?」ができるようになります。聞きたい領域について自慢をさせてあげられればベストですね。体感的には、相手8割自分2割くらいの割合で相手にずっと喋らせ続けるのが理想のバランスだと思います。これだけ喋っていれば本音がボロボロ出てきてヒントもたくさん手に入りますので、より精度の高い仮説を持って改善に臨むことができるでしょう。

ヒアリングが上手になりたい皆さん、まずは冒頭で挙げた3大落とし穴を意識しながらテーマを決めて近くの同僚とロールプレイングしてみてはいかがでしょう。バイアスをうまくコントロールできるようになったら、ヒアリング以外でも強みを発揮できますので是非マスターしてみてください!

ブログリニューアルしました

皆さんお久しぶりです、おりです。いろいろありまして1年以上更新できていませんでした。元「とある企画屋の体験設計(ユーザーエクスペリエンスデザイン)」のこちらのブログですが、2度目のブログ名変更を経てリスタートさせたいと思います。ということでまずはこの1年の軽いご報告を。

会社立ち上げました

まず更新が止まった頃から今までで一番でかいイベントがこれです。勤めていたUI/UXデザイン会社のohakoを辞め、独立しました。独立した理由や会社についてのご紹介については別エントリーで書きますが簡潔にまとめると、すでにwebデザインやUIデザイン・情報アーキテクチャ(IA)といったデザインプロセスの一部分だけを担当するという事が少なくなってきた為、より広義な意味でのDESIGNを実行する為、UI/UX専業を謳う組織に在籍するのは不適切と判断したので独立したという流れです。このブログのURL(ドメイン)が地味に変わっていることに気付いた方は多分居ないと思いますが、ENTAKU(エンタク)という会社です。どうぞよろしくお願い致します。

ブログ名について

次にブログ名を変えた理由ですが、これは単純にネタが古くなったからです。とあるシリーズが流行ったのってもう8年前なんですね・・・で、今回のブログ名ですが、当ブログの記事を書くときはだいたい一杯引っ掛けてるので『酔いどれデザイン日誌』にしてみました。「企画屋」や「UX」を外した意図としては、実務を進めていく中ですでにUXデザインすらも狭義的な概念だなと感じるようになったため、より広義の意味で「デザイン」のみにしたかったというのが大きいです。「企画屋」については、実行に移せない(企画までしかしない)デザイナーはクソという想いが強くなってきた為外しました。略称についてはなんとなくDDDにしたかったので・・・深い意味はないです。

当ブログの立ち位置について

はてなブログproを利用している関係上、URLがENTAKUのサブドメインになっていますが、当ブログの立ち位置は名称変更前と変わらず私個人の思想や研究についての備忘録です。ENTAKUという組織全体としてのブログではないのでご留意下さい。

以上、ブログ名変更 & URL変更のご挨拶でした。どれくらい更新できるかわかりませんが、この1年書きたかった事は山ほどありますのでちょっとずつ書いていきたいと思います。今後ともどうぞよろしくお願い致します。