目的のあるデザインとは

（音楽）

（拍手） こんにちは ダグ･ラモインです インタラクションデザインが 専門です Appleでは皆さんのような デベロッパと仕事をしています 私が注目しているのはUIと― すばらしいユーザ体験を 提供するアイデアです 今日はIntentについて お話しします 優れたアプリケーションには 一貫した特徴があります それは 人々が心から望むものに 意識的に焦点を当てることと 関係しています

どのように 焦点を当てればよいのか

そしてIntentについて お話しします 今日 私がお話しする内容は 具体的な設計ビジョンや 成果についてではありません

考え方についてです どうすれば ユーザに鋭く焦点を当て シンプルなアプリケーションを 作れるのか シンプルさは― 既に知っているもののように 受け入れられます 使った経験があるかのように 自然に操作できるのです

シンプルさと自然さは デザイナーがよく使う言葉です 実際は 何を 意味しているのでしょう？ それは ユーザが快適に迷いなく 使えることを意味しています 理解している機能は 安心して使えて 学んだり考えたりせずに 先に進めます

Intentを定義するのは 難しいので アプリケーションを いくつか紹介します 人々に真の価値を もたらすものです

そこから “意図的なデザイン”の ５つの要素を学びましょう では始めます

以前は 紙の地図を持って 海外を旅していました 地図を手に 現地の人に近づけば すぐに用件を 分かってもらえました

モバイルマップを 手にしてからは 現地の人に話しかける機会が 減りましたね

しかし 以前と同じ要領で 交流をもたらすのが iTranslate Converseです iPhoneを手に 現地の人に声をかけ 質問したり 道を聞いたりします Apple Design Awardsで 見た人もいますね これからデモを行い どのあたりが― “意図的”なのか紹介します まずはUIですが 大きなボタンが１つだけです タップ＆ホールドで 話すだけです 後で見せますね

iTranslate Converseの 目的は楽に会話することです “一緒に使うこと”が デベロッパのIntentです ユーザの２人に１人は アプリケーションを 知らないと想定しています

私は実際にこれを ナポリの駅で使いました ローマ行きの特急に 乗る時でした プラットホームで迷い― アプリケーションを起動して 車掌に尋ねました “これはローマ行きの 特急ですか？”

（イタリア語） 翻訳されたイタリア語を 車掌に聞かせました

そして 車掌に電話を向けます 恐らく車掌は― このアプリケーションを 見たことがありません

アプリケーションは 車掌の話す言葉が 英語かイタリア語かを 聞き分けます 車掌が話すと…

９番線です 翻訳してくれます 実際には― 車掌は英語が話せました （笑い声） （拍手） でも興味があると言うので 見せました

こうして交流が持てるのは すばらしいことです 乗る電車を確かめる過程で 人とつながることが できるのです

デベロッパのIntentは 画面に触れて話すだけで 会話を可能にすることです 意図的なデザインの １つ目の要素は “極端な単純化”です

どうやったのでしょう？ 恐らくデベロッパは シミュレーションを重ねました いつ どこで アプリケーションが 起動されるか考えたのです

あなたは外国にいます

彼のように 時差ボケで 道に迷い― 疲れていて 髪はボサボサ 服もしわくちゃ

持っているのは 地図でしょうか？ 本にも見えます まず UIをなくすことで ユーザを質問や位置確認などの 目的に集中させます

UIからアクションを削除すると 驚くべき変化が生まれます もう１つ紹介します 歌の練習アプリケーション Vanidoです あなたが歌を練習する時― このアプリケーションが 歌声を聞いて評価してくれます

このUIは とてもシンプルです アプリケーションは 歌声を聞き 音が外れていないか 知らせてくれます

お見せします

（笑い声） 歌を披露したりしませんよ （笑い声） でも実演します （ハーモニカ音）

練習しましたし―

動作を見せたいのでね

（音楽） （歌声）

（拍手） 感想をお待ちしています （笑い声） Vanidoの良い点は 音楽教育らしく見えるものを 取り除いた点です 楽譜や音符は無く カラフルで 動きがあって楽しい 私が練習を始める前に比べると 効果も抜群です 画面上の インタラクティブな要素は 左上の１つだけです

マイクみたいに持って 思い切り歌えます 誤操作の心配は要りません

これが“極端な単純化” 意図的なデザインの １つ目のマニフェストです

極端さはリスクも伴い― 適切に行わないと 不快感を生むかもしれません しかし 人々に注目すれば リスクは軽減できます デザインを望まれるものに 適応させるのです ユーザの望みとは？ あいまいなだけに 考察のしがいがあります

サービスの対象となる 人たちに目を向けて まず始めに見えるもの それは表面的なものに すぎません その人は あなたが最優先に 考えたい人かもしれませんが 掘り下げましょう 深い問題が 隠されているかもしれない それに気が付かないと その人の問題は 解決できません 意図的なデザインの ２つ目の要素は “深い理解”です その人が抱える問題を 理解することです 深く掘り下げれば 要求を満たす機会を 見つけやすくなります 良い例を紹介しましょう Streaks Workoutです 開発の経緯を紹介しましょう ご覧のとおりトレーニング アプリケーションです 基本画面はシンプルです 時間を設定するだけです

実を言うと 私は 運動が好きではありません どのアプリケーションも 長続きしませんでした でも それらの アプリケーションの― デベロッパの努力には 敬意を表します 健康志向になれましたからね 問題はモチベーションの 維持です 人は簡単に退屈したり 飽きたりしてしまいます よくあることですよね 運動を面倒だと感じる人は 多いのではないでしょうか

“面倒”とは 気が進まないことです まさに私がそうです トレーニングは 気が進みません Streaks Workoutは どう助けてくれるのでしょう まず アプリケーションを立ち上げ メニューを選択します こんな風にです 豊富なメニューから 好きなだけ選べます

開始はタップするだけです 時間を設定して開始 後はアプリケーションが メニューをつなげるので 従うだけです （心臓の鼓動音） 準備はいい？

早送りして 今度は10秒間の腹筋です 腹筋 10秒

やりませんよ ご覧のとおり 次のメニューは不明です ランダムに表示されるのです

バーピー 10秒 これもやりません

良くできている点は ランダム性と操作の削減により 面倒さが 軽減されるところです デベロッパは トレーニングの各段階で 様々な選択が必要なことに 気が付きました 時間や種類など やりたくない 選択ばかりです ここでは １つだけ選択して 後はお任せ

順序や回数を 設定する必要はなくなり 面倒の半分がなくなりました Streaks Workoutが 面倒な運動をしてくれます （笑い声） 代わりにね （拍手） 下手な冗談ですね

おかげで面倒が減ります

このように メニューを 提示されることで 新鮮さを感じますね

もちろん 大事なことが欠けていると 感じる人もいるでしょう “自分で設定したい” “面倒だと思わない” そう思う人向けの アプリケーションは たくさんあります 私が興味を引かれるのは このユニークなアイデアが 生まれた背景です うまく実装されているので デベロッパに尋ねました

回答はよく聞く話でした 刑務所の習慣が ヒントになったと言うのです

受刑者が興味を失わずに 運動を続けるコツを まねたのです 詳しく説明していきましょう 刑務所では １組のトランプを使い 各マークに運動メニューを 割り当てます ここではダイヤが腹筋です そして数が そのメニューをやる回数です カードを裏にして積み １枚ずつ引くと― 運動の種類と回数が 決まります 腹筋 ８回です

元々は これの 正確な再現でした カードをシャッフルしたり めくったりする試作品も 作られました 刑務所で運動を習慣化した方法を 摸倣しようとしたのです そして摸倣のアプローチは 終わり― 制約が多いトランプに こだわるのをやめました マークでは メニューの数が制限され それに“ダイヤが腹筋”などと 結び付きを覚えるのは 面倒ですよね

代わりに“価値”に フォーカスしました

それは“トレーニングの 習慣化”です そこで 運動を 開始する前に感じる― 面倒さに着目 できるだけ その原因を取り除きながら 刑務所の運動習慣に 注視を続けました それが “ランダム性と驚き”です

そして“深い理解”とは その人が抱える問題を 理解することです 表面的なアプローチなら 標準的なことしかできません 健康にはなりたい しかし それよりもまず― 退屈さと面倒さを 乗り越えたいのです

ユーザを知るのは 当たり前のことですね 皆さんもペルソナを作成したり 市場を細分化したり 定性調査なども 実施したりするでしょう エクスペリエンスマップ なども使いますね どれも有益だと思います しかし ユーザが 人間性を感じることも必要です

それによりチームが ビジョンを共有しやすくなります 理解を共有し― 本当の意味で ユーザと心を通わせること それが不可欠です

ニーズや目標 スキルばかりだと 人工的に感じます 誰ともつながれず 複雑で 冷たく つまらなく感じます

そこで 使う人のことを 心から思えば 作ることが 簡単になるという話をします

これを私は本で読みました 著者はアラン･クーパー かつてのソフトウェア デベロッパです 彼が名声を得たのは Visual Basicのプロトタイプを 開発したためです これは実際の解像度で Visual Basic 1.0を映したものです 画面は4Kです すごいですね

開発中にアランは 望まれるものに焦点を当て続ける 難しさを経験します そして彼はある発明について 著書に書いています その話が私たちに 教えてくれるのは ユーザを知ることが いかに 力になるかということです Visual Basicの話を 期待させたらすみません 彼の著書の物語から 話を進めていきます 語られているのは Rollaboardのスーツケースです これは特許出願書です 今やこれは 珍しい形ではありません 私たちにとっては ただのスーツケースですね

しかし特許出願は つい最近の1989年です 旅はずっと昔からあるのに なぜ出願されるのに 時間がかかったのでしょう

発明者はロバート･プラス 彼については 後ほど詳しくお話しします

斬新な点はどこでしょう？ わずかな変化です 車輪ではありません 車輪はそれ以前に 特許申請されています 1970年代のデザインは 車輪が下に付き ひもで引っ張る形です

各メーカーが車輪を付けようと したのは1940年代です これにも何か引っ張る物― 取っ手のような物が 付いていますね

重たい物を 何とか楽に運ぶ方法を 模索していたのです

もしあなたが1989年に カバン業界にいたら？ 行き着くところまで来たと 満足していたのでは ないですか？ しかし その後― スーツケースの定型が 生まれました 振り返ると 改善点は明らかですね ハンドルが上に付き 直立になりました 簡単に引っ張れて旋回します これが ひもの進化形です

そして車輪は縁に付けられ 傾けた時だけ車輪が動きます

サイズも小さくなり 飛行機の荷物棚にも入ります

この小さな改善を 発明者ロバート･プラスは 特定の人を想定して 設計したのです

仕事で旅をする人です パイロットだったロバートは 荷物を持ち歩く苦労を 痛感していたのです 求められているものを 知っていました 楽に運べて 航空業界人らしい― スーツケースを考えたのです

私が興味を引かれたのは 1989年のデータです 当時 パイロットや乗務員 そして旅行業界の人々は たった10万人ほど だったそうです 多いようにも思えます しかし 年に数回 旅をした人の数と 比較すれば分かります 米国の国勢調査によると その数は１億人以上

ロバートが対象とした ユーザは 市場のわずか0.1％に相当する 人たちだったのです 典型的な市場調査に 頼っていては ここまで焦点を絞ることは できなかったでしょう 彼は常に旅をしている人に 焦点を当てました

“極端”だと言えますよね エッジケースにフォーカスを 当てたのですから 市場規模は小さく 彼のソリューションは 奇抜で他とは違っていました 私たちと荷物の新しい関係性を 暗示していました

ロバートは身近な人のニーズに 特化しました そしてそれが多くの人のニーズを 引き出したのです 彼は焦点を絞ることで 自由な発想を得たのです そこで３つ目の要素は “極端な焦点”です エッジケースが デザインの方向転換や 焦点の再設定を 促す場合があります シンプルにすることで より多くの人に伝わるのです

ではデベロッパの私たちは どのように 極端さを取り入れたら いいのでしょう もちろん方法はありますが 核心を突く必要があります

例えば 極端さと 天気アプリケーションは 結び付きにくいですよね しかし このCARROT Weatherは 説得力がありますよ では 天気予報を 見てみましょう

何回なめれば 頭蓋骨に到達するだろう

普通の予報ではありませんね 今 聞いたCARROTの 機械音声は 人格と個性があり アクの強さも持っています

“太陽が出てるから―” “いいことがあるなんて 思うなよ” これは予報なのでしょうか？ （笑い声）

時々 意地悪されているかと 思ってしまいます

個性的ですよね しかし 情報は読みやすく 画面は整然としています

時刻によって色が変わり 遊び心がありますね 下部に描かれるイラストは 一風変わっていて 時々 笑ってしまいます ユニークな要素は 予報の他にもあります そこでデベロッパの ブライアン･ミュラーに 発想の源は何か尋ねました

面白いことに 彼は CARROTの声を書き込む時― 近親者の人格に チャネリングしてるそうです 妻や 姉妹やお母さんです これらの予報は― 彼らの会話の一部なのです

学ぶべきは ブライアンはこの予報で ある特定の人と会話を しているということです

アプリケーションのアクの強さで 人々はつながりました App Storeでの成功も 当然でしょう 彼の個人的な接触が 私たちをも つなげたのです

もちろん このアプリケーションだけが 個性を持つのではありません 他のアプリケーションも 手作り感のある 特別なものになります それが４つ目の要素です 意図的に デザインされたものには “私的なつながり”が あります

文章にひねりを利かせる ことではなく どんな文脈で書くかが 印象を変えるのです

恐らく CARROTの個性を 受け入れられない人もいますね ブライアンも認めていました メールやツイートが あったそうです これをダウンロードした ユーザの中には 気分を害した人もいたのです “よくも気象学者を 侮辱したな”とかね

そこで“オリーブの枝”です （笑い声） 不満な魂たちには 設定の変更を促します 殺人者風の初期設定から― アクを弱めたり 強めたりすることができます

しかし 明らかにしておきましょう アクの強い文章も― アプリケーション自体が 失敗なら面白くありません 良いナビゲーションと UIがあってこそです

極端な人格設定は 魂を宿しています そのため CARROTから 通知を受けると思い出します なじみの店を訪れる時の 感覚です みんなが知り合いで 楽しくて 居心地がいいのです

これで 意図的なデザインの ４つの要素が出そろいました 少し視点を変えましょう “意図的でない”ことを お話しします 良くないUIになる原因とは？ 意図的な設計には 最良の友と最大の敵がいます それらは 経験によって 積み上げてきた― システムやパターンです そのおかげで― 迅速に意思決定を行い 効率も上げられます

しかし 見慣れたパターンは 問題に気付くことへの 障害にも成り得ます 新たな問題に 気付かなくさせるのです 新しいものを生み出そうとすれば 誰もが陥ることです かつてスーツケースは 長方形で 長辺を下にした形でした その後 形は変化しても 基本的な要素は変わっていません 車輪は引っ込んでも 大きな変化ではないのです 何十年もの間― 賢明な人たちもが この形で 停止したままでした そして 極端な焦点の 当て方をする人物が現れ この形から抜け出したのです 頭の向きを 変えただけですがね （笑い声） どうも

（拍手） 私たちにはパターンを 自動的にはめる 思考回路があります それにより効率は上がり 一貫性も保てます しかし それは明白なことを 見落とす原因にもなります “なぜこうなのか”という 問いを妨げます UIデザイナーとしては 慣れているUI上で 問題を解決したくなります おなじみの ホームアイコンですね デスクトップでは 機能していました ブラウザは インターネット世界のフレームです ホームボタンを使えば すぐに戻れます たとえウェブの片隅に 迷い込んでしまってもです ホームの概念は iPhoneでも使われています 言わばショートカットです ホームは出発地点であり 現実とは異なり― 簡単にいつでも 戻ることができます いつでも 好きな時に戻れます

ホームはファインダー上でも 概念は同じですが― 川の源流をたどるような 感じです Macのホームはコンテナです 他を探す必要はありません 既にソースを手にしてします

ホームが提供するのは 信頼性と安全性― そして外から戻る能力です

分かりやすい ユーティリティでもあります 一見 タブバーにも 使えそうですよね？

しかし 大きな違いを 見逃してはいけません

アプリケーションは― 何が入っているか分からない フレームです 典型的なアプリケーションは 特定のコンテンツや アクションを提供します タブバーは 全体的なユーティリティを 簡潔に表します 地図のようなものですね ではWWDCアプリケーションの タブバーを見てみましょう

私たちはタブバーを ざっと見るだけで 何が利用可能なのか 情報を得ることができます タブの内容が 推測できるのです 従って アイコンやラベルは “直接的”である 必要があります 直接的であることが タブの中身を限定します いいことですね 直接的なので できないことも予測可能です 全能のアプリケーションは ありません ただ 中身を探らせる必要も ありません

ホームも メタファーの１つです 祖国や本拠地ですね

なぜホームは 生かされないのでしょう まず 範囲が広すぎて 汎用的です “ホーム”と呼んで 核心を突くのを避けています ホームを設けると 安心感が生まれます それが 直接的であることを妨げ アプリケーションの範囲を 明確にしません 例えば瞑想の アプリケーションなら 瞑想に関連するコンテンツを 提供しますね

想像してください 直接的なタブバーが ユーザに与える印象を さらに コンテンツの シンプルさと秩序が 強化されるとしたら？ そして コンテンツが 予測可能になったら？

間接的なラベルは ユーティリティを隠します 例えば倉庫に 持ち主不明の貴重品を 詰め込む感じです それこそが “意図的でないデザイン”です 誰も目指さないところです

意図的であることは 明確な伝達を可能にします それが意図的なデザインの 最後の要素― “直接的な コミュニケーション”です 意図的なデザインやユーザへの 明確な伝達を実現するために 仮想と現実で学んだことを 利用するのです 最後に２つほど インタラクションに― 親しみのある物を使った例を 紹介します

このTinycardsの コンセプトは フラッシュカードです これを使うと 例えば― 言葉や花や葉など 何でも覚えられます

人はカードには 面があると分かっているので 規則的なリズムに従って 操作ができます タップして カードの片面をめくります カードのメタファーが 生かされていますね

Tinycardsの基本は 暗記をしながら素早く カードをめくることです 例えば これはカナダの州旗 分かりますか？

オンタリオ？ どうでしょう…

当たりです やったことありますね？

TinycardsのUIは とても簡単です 自然に操作し 学ぶことに集中できます

Tinycardsはメタファーの使い方を 実証しています 人は没頭すると UIとの インタラクションを忘れます そうなれば さらに メタファーを拡張していき 人を喜ばせることができます 次に紹介するのは Gorogoaです カードのメタファーを 拡張した― 本当にユニークな アプリケーションです Gorogoaはパズルゲームです グリッドに沿って カードを動かして進み 物語を作っていきます 実際のカードでは できないこともやります 例えば 破ったり カード同士をくっつけて １つのシーンを 作ったりもします

すばらしいですね （拍手） 想定よりも さらにメタファーを拡張し 良い結果を出した例です 今 画面では カードのメタファーが消えています 楽しい現象です カードのメタファーを― どれほどうまく 実装したかを証明しています

しかしこれは ユーティリティや 価値が拡張されない限り 機能しません タブバーのホームが 機能しないのは アプリケーションの 付加価値を生まないからです

最後にもう１つ紹介します 現実とデジタル世界の メタファーを 融合したRosariumです

（拍手） デベロッパたちが来てますね 手首につけるロザリオです ラテン語でしょうか フォントを見る限り ラテン語だと思います 円が表しているのは ビーズです Digital Crownを回すと 軽くたたかれる感触を得ます デベロッパに話を聞くと 発想のきっかけは Digital Crownを 回す感覚だそうです それがロザリオのビーズと 似ていた

そこで 実物のビーズを 仮想世界で表現したのです とても自然に 感じるようにです ロザリオの代わりになるとは 言いません 実物には個人の思い入れが ありますからね 私が好きなのは現実の経験を 思慮深くデジタル化した点です 手法も徹底的にシンプルです それと前に述べたポイントも 押さえていますね シンプルで人を理解すること 極端に焦点を絞ること そして 直接的なコミュニケーション

これが“意図的”の意味です 脳が自動的に判断する部分を オフにすること 減速し 明らかなことに 挑戦すること

そのために必要なのは 意識的な決断をすること 思考の妨げになるパターンや 慣れに気付くこと 人にフォーカスすることです 手を差し伸べたい人や 勇気をくれる人 ベストな自分にしてくれる 家族のメンバー 一緒に より良いものを 作ろうとする同僚たち

その人たちから着想を得て 人とつながれる新しい方法を 見つけるのです

そして良いものを 作りましょう

私のセッションの詳細は こちらから それと ぜひ―

次のセッションも 聞いていってください

テーマは Fluid Interfacesです 興味深い話ですよ WWDCで 今年のトップ７に入る セッションです ありがとうございました （拍手）