エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

Apple Watchでよく使われるアプリをUI面から先読み~グッドパッチに聞くデザインの本質

タグ : Apple Watch, Prott, グッドパッチ, プロトタイピング 公開

 
goodpatch_ui_02

(写真左から)グッドパッチのUIデザイナーの小林幸弘氏、チーフUIデザイナー/CCOの貫井伸隆氏、インタラクションデザイナーの笹山健志氏、ビジネスディベロップメントのボリス・ミルコヴスキー氏

2014年12月10日、グッドパッチは自社が提供するプロトタイピングツール『Prott』にApple Watchアプリのプロトタイプ作成機能を実装したと発表した。

グッドパッチはUI専門のデザイン会社として、ニュースアプリの『グノシー』や、2014年グッドデザイン賞を受賞した家計簿サービス『マネーフォワード』などのUIを手掛けたことでも注目を浴びている企業だ。

goodpatch_ui_08

2014年10月にリリースされたプロトタイピングツール『Prott』

日本国内のApple Watch発売日が2015年4月24日に決定し、世界中の注目がAppleに集まる中、業界に先がけApple Watchアプリのプロトタイプ作成機能を開発・導入していたグッドパッチに、改めてApple WatchアプリのUIについての考え方を聞いてみた。

そこで知ることができたのは、「UIを考える上で、デバイスを意識しすぎる必要はない」ということ。グッドパッチが考えるデザインの本質について紐解く。

2014年の時点でApple Watchアプリに対応した理由

そもそも、Apple Watchの発売に先駆けて『Prott』にプロトタイプ作成機能を実装させた理由について、ビジネスディベロップメントを務めるボリス・ミルコヴスキー氏はこう答えた。

「Apple Watchが普及することは確実と言っていいと思うよ。Apple Watchは販売後、Apple Storeで直接触れることができるよね?その場で多くの人々が気付くと思う、これは新しい価値を与えてくれるデバイスだということを。だから、僕たちはいち早く『Prott』にApple Watchアプリのプロトタイピング機能を実装させたんだ」(ボリス氏)

『Prott』のデザイナーを務める小林幸弘氏はこう付け加える。

「2015年1月に『Prott』のWeb版が実装されたのですが、それよりも先にApple Watchアプリのプロトタイピング機能を実装を行ったのは、ベンチャーから大手企業まで、規模を問わず多くの企業がいち早くウエアラブルデバイスのUIをデザインできるようにするためです。そんな環境を作ることも我々のようなデザイン会社が取り組むべきことだと考えました。まぁ、グッドパッチもApple Watchアプリケーションを作りたいから実装したというのが正直なところですが(笑)」(小林氏)

先日のUI Crunch#3で同社CEOの土屋尚史氏が語った通り、プロトタイピングはグッドパッチの文化。まず、作ってみるという考えのもと、デザインが生み出されている。

では、Apple WatchアプリのUIをデザインする際、プロトタイピングツールが存在しなければ、どんなデメリットがあるのか。インタラクションデザイナー笹山健志氏はこう答える。

goodpatch_ui_06

Apple WatchアプリのUIをデザインする際、『Prott』は心強い味方になるはずと語る笹山氏

「デザインを作った後に紙芝居のようなプロトタイプを作る、ということになったと思います。時には紙に印刷して切り抜いたダンボールに貼り付けて対応するかもしれません。考えてみただけでも、『Prott』と比べると不便ですよね。『Prott』ではApple Watch用のプロトタイプを制作し、Watchの画面の中でどのように画面遷移が行われるのか、より実物に近い見た目で検証することができる。実際のデザインフェーズに入ってからも、常に動きの検証をしながら進めていけるのが強いですね 」(笹山氏)

ジョナサン・アイブにも影響を与えた「デザインの本質」

世の中には優れたUIと悪いUIが存在している。悪いUIについて、小林氏はユーザーがインターフェースを触る際、UIに意識が向いてしまうことが特徴であると語る。

そして、その特徴はデバイスに問わず不変のものだと付け加えた。

goodpatch_ui_03

UIデザインを行う上で、「主張しすぎない」ことが大切だという

「僕が考える優れたUIは『主張しすぎない』ということ。良いサービスやプロダクトを使う時に、『使いやすさ』は認識されないと思うんです。悪いデザインに触れた時に『使いにくい』と感じる。だから僕は、『ユーザーに意識されないデザイン』を目指しています」(小林氏)

そして、「優れたデザインには定義がある」と、ボリス氏が付け加える。

「ディーター・ラムスというドイツ人のデザイナーを知っているかい?Appleのジョナサン・アイブにも大きな影響を与えた人物だ。彼は『良いデザイン』の十か条としてこう提唱しているんだ」(ボリス氏)

【1】良いデザインは革新的である。
【2】良いデザインは製品を便利にする。
【3】良いデザインは美しい。
【4】良いデザインは製品を分かりやすくする。
【5】良いデザインは慎み深い。
【6】良いデザインは正直だ。
【7】良いデザインは恒久的だ。
【8】良いデザインは首尾一貫している。
【9】良いデザインは環境に配慮する。
【10】良いデザインは可能な限りデザインをしない。

この「良いデザイン」の十か条にジョナサン・アイブはインスパイアされ、iMacやiPod、iPhoneをデザインしていると、チーフUIデザイナー/CCOの貫井伸隆氏は語る。

goodpatch_ui_05

デザインの本質について語る貫井氏

「これは、ハードウエア、ソフトウエアを問わないデザインの本質なんです。シンプルさを追求することで、『良いデザイン』は生まれるという発想ですね。

例えば、iPhoneについて。極端な話をしてしまえば、“角の丸い板”ですよね?これはハードではなくソフトを見て、使ってほしいというデザイン意図なんです。私と全く同じ壁紙を使って、同じアプリをインストールして、同じ配置にしている人って、世の中に誰もいませんよね?当たり前ですが(笑)。

シンプルで『良いデザイン』を追い求めると、主張もしないし、デザインをしているようには見えないものになる。だから、ユーザーに意識させないような、主張しないデザインの発想が大切なんです」(貫井氏)

Apple Watchアプリで多く使われそうなUIとは

シンプルさを追求することで、優れたUIは生まれる。それでは、今後Apple Watchアプリを開発するアプリベンダーは、UIについてどのような考え方を持てばいいのだろうか。

「0.5秒で情報を認識できるということが大事かと。カーナビのUIをよく見てみたことありますか?ビビットな色調で作られていて、どぎついんですよ。でも、運転中に『チラっと見る』と考えると、目に入りやすいので配色にも納得ができます。一瞬で情報を理解できますからね。

ただ、Apple Watchアプリを同様の考えでデザインしようと思うことはダメなんですね。例えば、Watchを付けた営業マンが取引先に行った時、強い配色で時間が強調されていると、相手に良い印象を与えませんよね?0.5秒で情報を伝えることはApple Watchもカーナビも一緒ですが、意図的に見ないような、控えめでシンプルなデザインを考える必要があると思います」(貫井氏)

それでは入力についてはどうだろうか?笹山氏はこう考えている。

「私はLINEスタンプのような、1クリックで感情を伝える機能が伸びていくのでは、と考えています」(笹山氏)

また、ボリス氏は“指を使って情報を入力しない”道を歩む可能性もある、と言う。

goodpatch_ui_04

Apple WatchアプリのUIにはシンプルさを追求する必要があるとボリス氏は語る

「僕はショートボイスのメッセージチャットが主流になると思うね。そのために、AppleはSiriを中心に多くのシステムを改善してきた。腕を口に近付けて、少ししゃべる。この行動で情報を伝えていく、そんな世の中になるかもね。だから、UIはシンプルさが大切になると思うよ」(ボリス氏)

Apple Watchはインターフェイスが小さいこともあり、ユーザーのアクションに制限を付ける必要があるという。これは、既存のWebアプリやスマホアプリとは逆の発想でデザインすることを意味している。UIも機能も、シンプルさがより大切になるそうだ。

遊びゴコロを忘れないのがデザイナー

余談にはなるが、『Prott』には裏技があるという。詳細は、Apple Watchのプロトタイピング画面で、コナミコマンド(上上下下左右左右BA)を試してみてほしい。

「優れたデザイナーは遊びゴコロも忘れない」ということが同社の考え方だ。

彼らが良いデザインについて紐解くと、「シンプルである」ことに行き着く。直感的で分かりやすく、初めて触ったとしても、決して迷わない。この本質を理解し、デザインを考えることが重要とのことだ。

取材・文/川野優希(編集部) 撮影/赤松洋太




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング Android 起業 えふしん スマートフォン アプリ開発 SIer 技術者 UI btrax Webサービス クラウド Apple スペシャリスト CTO Twitter Brandon K. Hill ギーク 英語 村上福之 Facebook Google デザイン IoT SNS ツイキャス 世良耕太 モイめし IT 30代 採用 赤松洋介 コーディング 20代 UX 勉強会 プロジェクトマネジメント Ruby ITイベント Webエンジニア 中島聡 ビッグデータ 法林浩之 ウエアラブル iOS 五十嵐悠紀 LINE ドワンゴ ひがやすを ロボット 受託開発 モノづくり IT業界 コミュニケーション イノベーション ハードウエア MAKERS tips ゲーム 女性 ソーシャルゲーム Webアプリ SI インフラ iPhone 女性技術者 高須正和 マイクロソフト 研究者 UI/UX トヨタ 自動車 ノウハウ チームラボ 息抜き システム ソニー プラットフォーム Java メイカームーブメント オープンソース 和田卓人 エンジン グローバル 開発者 教育 イベント サイバーエージェント ソフトウェア 女子会 コミュニティ メーカー 家入一真 スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 40代 日産 テスト駆動開発 ソフトウエア 音楽 TDD ニュース モバイル PHP TechLION

タグ一覧を見る