株式会社メドレーDeveloper Portal

2017-09-14

思考とデザインスキル 〜メドレー TechLunch〜

はじめまして!最近みるみる太りだしてはいるものの、まだ機は熟していないとダイエットの時期をぐっと堪えている開発本部イケメン担当のデザイナー・小山です。

メドレーでは TechLunch という社内勉強会を実施しているのですが、前田に引き続き私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「思考とデザインスキル」です。発表資料は記事の最後をご覧ください。

テーマに入るまえに…

みなさん『黄金比』ってご存知ですか?

f:id:medley_inc:20170913121842p:plain

黄金比は美しいとされる物の形に共通してみられる比率で、古くから絵画や彫刻、建築などに使われています。デザイナーであれば、一度以上は使ったことあるのではないでしょうか?私もデザイナーなので何度も使っています。

ただ使ってはいるものの、なぜ美しくなるのか上手く説明ができません。当たり前のように世の中に広まっていて『困ったときの黄金比!』といった安易な思考で使っています。三十路を軽く超えたのでそれではいけないと思い、すこし調べてみました。

そもそも黄金比はエウクレイデスというユーグリッド幾何学を体系化した数学者が見つけた比率なのですが、そのとき彼は『黄金比=美しい』とは明言していないそうです。自然物や人工物の形には一定の比率で成り立っていると考え、その比率に黄金比と名付けだけとのこと。

その後、その使いやすさから至るところで活用され、その比率に親しみが芽生え巷で受け入れられるようになりました。

認知心理学では、それを『単純接触効果』と呼びます。たくさん触れるうちに親しみが沸く機能が人にはもともと備わっていて、黄金比をつかったものが美しく見えるのもその影響ではないか?と言われています。この説を聞いた時、基礎的なのに原理が曖昧なデザイナーのスキルの輪郭がすこしだけハッキリしてきました。

今回の TechLunch では、曖昧だったデザインのスキルを人の思考や心理現象という視点から捉え直してみると、新しい発見があるのかも?と考え、『思考とデザインスキル』のテーマを選びました。

『早い思考』と『遅い思考』

まず最初に人の思考がどういう構造になっているか整理したいと思います。

*思考の捉え方には幅があるため、今回は Wikipedia で【思考】の狭義にあたる『情報処理』の内容になります。

ここで 3 つの質問を左から順に答えてください。

f:id:medley_inc:20170913122003p:plain

大抵の人であれば 2 問目までは瞬時に答えが出たと思います。3 問目はどうでしょうか?

3 問目は他よりも時間がかかったかと思います。情報を処理するときの思考には 1 問目と 2 問目のように瞬時に答えれるのは『早い思考』、3 問目のように少し時間は必要な『遅い思考』の 2 つがあります。

行動経済学では、この早い思考を『システム 1』、遅い思考を『システム 2』と呼んでいます。

システム 1 は、自動的に直感で動く

では次にこちらをご覧ください。

f:id:medley_inc:20170913122043p:plain

どちらの直線が長いでしょうか?答えはどちらも同じです。この問題をご存知の方でも見た瞬間は A が長く見えるのではないでしょうか?

ではこちらではどうでしょうか?

f:id:medley_inc:20170913122101p:plain

こちらの文字をみたときに、海水浴していて溺れている、もしくはそれに近いシーンを思い浮かべてないでしょうか? この二語のあいだには『りんご あまい』というような直接の相関はありません。それにもかかわらず出来れば避けたくなるようなことでも無意識に関連づけられ、シーンが思い浮かんだはずです。

システム 1 には、さきほどの直線の長さのように間違っていたとしても『見たまま』を認識する機能と 2 つの文字から『関連づけ』をおこないストーリーを組み立てる機能があります。そのどちらもが自分の意識とは関係なく自動で、しかも強力に働いています。

システム 2 は、手動で論理的に動く

最初の二桁の掛け算を思い出してください。日本で算数を学んだ人であれば、二桁の掛け算のとき『考える』段階に移ると思います。これがシステム 2 のスイッチです。システム 1 は常時スイッチが入っていてほぼ自動で答えを出しますが、システム 2 は意識的に『考える』というステップを踏まないと動きません。システム 1 は自動ですが、システム 2 は手動です。

手動のため手間かかりますが、システム 1 にはない用心深さと慎重さがあります。こちらの問題をご覧ください。

バットとボールで 110 円、バットはボールより 100 円高い、ボールの値段は?

即答で答えた人は 10 円と答える方が多いようです。こういう問題にはシステム 2 がうってつけで、論理的かつ正確に答えを出そうとします。答えは 5 円です。なかには頭の回転が早く即答できる人がいらっしゃることだと思います。そんな方にはこちらの問題を答えていだだきましょう。

3 日前から食べた夕飯の献立を口に出して発表しながら、『26x673』『245x287』『346x4546』の 3 問を 90 秒以内に解答してください。

いかがでしょうか?システム 2 は手動でうごき論理的で正確に答え出そうとしますが、複雑すぎる演算やマルチタスクにめっぽう弱くスタミナもありません。あきらめて電卓を叩いた方は、システム 2 がギブアップしたということかもしれません。

システム 1 と 2 の特徴は以下。どちらも良いところとそうでないところがあります。

f:id:medley_inc:20170913122233p:plain

デザインを再構築

これらシステム 1&2 の特性を踏まえた上で簡単なニュース記事のタイポグラフィを整理してみました。

発表資料の 58 ページからご覧ください。

speakerdeck.com

こと細かく情報をシステム 1&2 のフィルターを通すことで、タイトルやリード、本文の行間、文字サイズ、それらがシステム 2 が情報を理解しやすくするための1つ機能として捉えることができます。当たり前に使っていたスキルや機能を別の視点で捉えることで違った深い意味を見出せるようになり、大きな発見につながりました。

今回はタイポグラフィだったのでシステム 2 寄りのものでしたが、ビジュアルアイデンティティが強く抽象的なデザインは、意図的にシステム 2 を封じ込めシステム 1 の直感性を利用して内容を理解してもらうこともできます。

システム 1&2 の 2 つの特性を踏まえて使いこなすことで、スキルの深い理解はもちろんですが、感覚とは違うデザインの伝え方の新しいヒントにもなりそうです。

さいごに

YouTube や Instagram、LINE はどちらかというと直感性を促すシステム 1 が活躍するアプリです。それだけでなく身の回りにあるサービス全体がその傾向という印象をうけます。システム 1 は普段からスイッチが入っているため、比較的に簡易なステップで働きかけることができます。

一方でシステム 2 は複雑な演算には耐えれず、しっかりとケアしながらでないと十分な運用ができません。ただケアをしっかりすると恩恵も大きいといえます。

金融、教育、雇用、そして医療と、20 年前とは比較にならないほどインターネットは人生の節目に深く関わるようになったからです。人生に関わる選択をネットで行うとき、直感だけでなくシステム 2 を働かせて熟考し納得のいく決断を行うことが、よりユーザーの利益につながると私は考えています。

メドレーで提供しているサービスはユーザーの人生に少なからず関わる性質をもっています。すぐに結論づけしてもらうより、ユーザーにとって正しいと思える判断ができるように、システム 2 をうまく働かせることができる環境をデザイナーとしてつくっていきたいと思います。

おまけ

今回のテックランチで参考にさせていただいた書籍は以下のものになります。

ファスト&スロー(上・下)』ダニエル・カーネマン

予想通りに不合理』ダン・アリエリ

錯覚の科学』クリストファー・チャブルス&ダニエル・シモンズ

UI デザインの心理学』ジェフ・ジョンソン

今回のお話は、本当に本当に表面の部分になります。流し読みでも参考になるので手に取って見てください。またこういうことに興味がわいたデザイナーさん・エンジニアさん、是非是非メドレーに遊びに来てください!(絶賛募集中です!)

お知らせ

メドレーでは、ジョブメドレーだけでなく、医師たちがつくるオンライン医療事典「MEDLEY」やオンライン診療アプリ「CLINICS」、口コミで探せる介護施設の検索サイト「介護のほんね」などのプロダクトも提供しています。これらのサービスの拡大を受けて、その成長を支えるエンジニア・デザイナーを募集しています。

www.medley.jp

今後ともメドレーを、よろしくお願いいたします!

株式会社メドレーDeveloper Portal

© Medley Developer Portal