魔法のようなアプリを作る! アプリデザインの6つの秘密

Todd Siegel

Todd Siegel氏はデザイナーであり、さらに起業家で多作な作家でもあります。彼はインタラクティブアニメーションを搭載したネイティブiOSアプリのプロトタイピングを専門としており、Proto.ioの製品エバンジェリストとして講演、デモ、そしてプロトタイピングのライブウェビナーを行っています。

この記事はProto.ioからの翻訳転載です。配信元または著者の許可を得て配信しています。

6 Secrets to Designing a Mobile App That Feels Like Magic

Arthur C. Clarke氏の三法則は、テクノロジーやデザインの分野で頻繁に活用されているため、特に第三の法則は陳腐になりつつあります。

「十分に発達したテクノロジーは、魔法と見分けがつかない。」

— Arthur C. Clarke

Foap-Looking_for_directions-sm

テクノロジーやアプリのデザインにおいて「魔法」という言葉は、2010年に Steve Jobs氏がiPadを「魔法のような」と表現して以来、業界用語の一つとなっています。しかし、モバイルアプリをデザインする文脈において、「魔法」は何を意味するのでしょうか? いくつかのモバイルエクスペリエンスはずば抜けて素晴らしいです。そういったモバイルアプリでは、美しいデザインと機能的なデザインが組み合わせることで魔法のようなデザインが生まれ、ユーザーを圧倒させています。もし、モバイルアプリのデザインプロセスにこのような「魔法」を取り入れたければ、以下の6つのポイントを押さえましょう。

1. 「不可能」に挑戦することで、Clarke氏の第二の法則を心がける

有名なSF作家がClarke氏の三法則を真似しているかもしれませんが、彼の第二の法則は私たちに「魔法と見分けがつかない」ようなテクノロジー開発をやり遂げるためのアイデアを提供してくれます。

「可能性の限界を知る唯一の方法は、不可能な事をやってみることである。」

— Arthur C. Clarke

魔法のようなモバイルアプリをデザインしたければ、現在不可能と思われていることは何なのか考えることから始めて、自分の目的を決定しましょう。そして、業界に革命をもたらしてきた、あらゆる優れたデザインの躍進について考えてみましょう。例えばフォード・モデルTは、中流階級の人が馬無しで動く乗用車を持つことを可能にしました。また、初期のMacのコンピューターは、(Xeroxがこの発明に対する名声を得るべきですが) 自社のGUIを用いてパーソナルコンピューティングを使いやすく直感的なものにしました。Atariは、アーケードゲームをお茶の間に浸透させ、数多くのテレビをゲームプレイのためのインタラクティブな媒体に変えた時、当時の可能性の限界を突破したのです。 

Foap-Retro_Atari_800_Game_Console-sm-1024x768

グラフィックやWeb、モバイルアプリのデザインにおいて、限界が突破された瞬間は幾度となくありました。例えば、@font-faceやWOFFが登場する前は、デザイナーはライブテキストでの「Webセーフ」フォントの使用を制限されていました。モバイルアプリやWebサイトをデザインしている時に美しいタイポグラフィーを利用したい場合は、画像に埋め込んで表示しなければなりませんでした。タイポグラフィーをWebデザインのメイン要素として使用することは、 ArialやTrebuchet、Comic Sansといったフォントの時代には不可能だったのです。現在、私たちは美しいフォントのコレクションを自由に使うことができます。おそらく、モバイルアプリのデザインにおいて不可能が可能になった最大の出来事は、タッチスクリーンの導入でしょう。画面から画面へ、要素から要素へと移動するために携帯電話のスクリーンに触れるという操作方法が生まれる前は、私たちは矢印キーとでたらめなコントロールを使わなければなりませんでした。BlackBerryが登場したことはとても大きな転換期であり、 QWERTYキーボードとトラックボールを備えた、生産性の高いアプリの市場を独占しているようでした。2007以前は、アプリのタッチ可能で巨大なエコシステムをスマートフォン上で使えるようにするというアイデアは不可能だと考えられていました。 

Foap-Skype-sm-1024x680

ぜひ、皆さんがモバイルアプリをデザインする時にもClarke氏の第二の法則を取り入れてみてください。そして最も革新的かつユビキタスなアプリを考案し、不可能を可能にしてください。Instagramを使えば、誰もが写真家になることができます。Google Mapsを利用すれば、目的地を検索エンジンに入力するだけで、行きたい場所の所在を見つけられます。Skypeは (どこからでも) 通話相手の顔を見ることができるだけでなく、それを無料で行うことができます。人々の記憶に残る魔法のようなモバイルアプリは、不可能なことを可能にするだけでなく、それ無しでは人々が生活できないようなものになるのです。

2. ユーザーが意識しないほど自然なUXを作る

Foap-Young_Boy_Playing_On_A_Smartphone-sm-1024x768

ユーザーから見て、魔法とテクノロジーの違いは何でしょうか? シンデレラは、フェアリーゴッドマザーを呼ぶのにボタンを押したり、複数のコマンドを打ち込む必要はありませんでした。指輪物語に出てくる魔法使いのガンダルフも、大ゴブリンを倒すためにミサイルを誘導するターミナルにシーケンスを入力したりはしませんよね。ユーザーがアプリを使う場合も、こういったテクノロジーを意識する必要がなければないほど、アプリはより魔法のように感じられるのです。テクノロジーは皆さんを助けるだけでなく、ユーザーが思わず感動してしまうようなことをごく自然にやる必要があります。これが上手くいくかどうかは、UI/UXデザイン、そしてユーザーがアプリとやり取りをするために必要な動作にかかっています。やはり、タッチスクリーンはマウスのよりも魔法っぽさを演出することができるようです。さらに、SiriやGoogle Now、またはCortanaのように音声で指示を出し、それに対する返答や呼び出しを聞くということは、スクリーンをタッチするよりもさらに魔法のように感じられるでしょう。 

「それは筋が通った瞬間であり、皆さんはなぜ私たちが初めからこれをやらなかったのかと疑問に思うことでしょう。」

— James Carolan

Windows 8の配信事業をサポートしている、オーディオビジュアル製品企業であるMetroMultiMediaのデジタルメディアマネージャーのCarolan氏は、こう話し始めました。「最初のGUI、皆さんが初めてマウスやマウスで動くカーソルを使ったとき。または、 Steve Jobsが最初期のiPhoneで画面を拡大するために、スクリーン上で2本の指を広げたとき。皆さんが初めてデバイスをテレビに接続し、正しい解像度を調べる必要がなかったとき。コントローラーを使うことなく、声だけでNetflixへ移動するようXboxに指示することができたとき。」彼はこう続けました。

「テクノロジーが期待されている役割を果たした時、素晴らしいUXが生まれます。テクノロジーがあれば、皆さんは一瞬で『マイノリティ・リポート』のTom Cruiseになることもできるのです。」

この言葉を念頭に置いて、Tinderについて少し考えてみましょう。現在、ミレニアル世代向けのこの出会い系アプリの基本操作は左スワイプ、右スワイプの2つです。ユーザー登録に必要なのは最小限の労力のみで、それが完了すれば、スワイプで自分の出会いの場に他のユーザーを追加することができます。反対に、ややこしい動作(自分の地域に住んでいる人を見つけたり、魅力的な人かどうかを見極めたり、自分の選択候補リストの中から人を保存・削除したり、自分の興味分野を人に教えたりすること) も、ほんの短時間で完了します。まさに魔法といえるでしょう。しかし、次のこともまた大事なポイントです。

3. シンプルなものにする

VentureBeatの、2014年度最も美しいデザインのアプリ14選を見てみてください。ここに挙げられているアプリに共通の傾向があると思いませんか? それは、「シンプルだ」ということです。このサイトでは、Evernoteの「集中力を妨げない」機能性を称えています。また、Acornsを使えば、「投資を簡略化」することができ、Overcastは「スマートかつシンプルなポッドキャストプレーヤー」だと紹介されています。アメリカ合衆国の思想家であるHenry David Thoreauはこのように言っていました。

「私たちの生活は詳細なものによって浪費されています...できる限りシンプルにしましょう。」

しかし、シンプルさがより良い使用体験を生み出すとしても、アプリを魔法のようなものにしてくれるのでしょうか? 繰り返しになりますが、ユーザーがアプリのことを意識しなければしないほど、その使用体験はより魔法のように感じられます。これはユーザーによる入力や動作だけでなく、レイアウトやグラフィックデザインにも言えることです。ユーザーが閲覧しなければならない要素が少ないほど、ユーザーがアプリのことを考える時間が少なくなり、どのボタンをタップ、またはスワイプするのか迷うことも少なくなります。ユーザーを迷わせてしまう要素はなくしてしまいましょう。そしてあらゆる説明書きやコピーをできるだけ短くし、余計な画像は削除するようにしましょう。Meerkatは、良いUXを提供する、シンプルなデザインのUIの素晴らしい例です。1つのボタンをタップするだけで、自分のTwitterのフォロワーが閲覧できる動画の配信を始めることができます。ユーザーの入力(配信に名前を付けるための2つのボタンと1つのテキストフィールド) は、アプリのロゴでもある、可愛らしく控えめなミーアキャットと画面を共有します。これだけで良いのです。ユーザーの混乱を招く要素がなく、そして注意を逸らすような余計な画像やコピーもありません。

4. 一貫性のある、引き込まれるような使用体験を作り出す

 このポイントの例として、最も成功したファンタジーの世界を考えてみましょう。『ハリー・ポッター』の本を読んだことがある人は誰でも、即時にホグワーツのイメージを思い浮かべることができると思います。同じことが『ロード・オブ・ザ・リング』の中つ国にも言えるでしょう。ウェスタロスはどうでしょうか? これらの物語を成功に導いた要因は何なのでしょう?

SplitShire_5678-sm-1024x683

最も大きな要因は想像力ですが、もう一つの要因はストーリーの一貫性です。ハリー・ポッターのようにリーベンデールへ歩いていき、そして喧嘩っぱやいたくさんの高校生たちがクィディッチをしているところを現実世界で見ることはできません。しかし、これらのファンタジーの世界は精巧に作られており、そして細部においても一貫性があるので、私たちはこれらの世界から何が期待できるかが察知できるのです。90年代の子どもたちでも、『ハリー・ポッター』の本の章の名前に使われているフォントをイメージすることができるでしょう。魔法のようなモバイルアプリをデザインしたければ、この法則を使いましょう。アプリを操作する動作は、どの画面でも一貫している必要があります。タイポグラフィやカラースキームも同じです。Instagramを思い浮かべてください。アウトプットは同じようなビジュアルデザインに従っており、ノスタルジックな雰囲気を写真に加えるためにカラーフィルターを取り入れた正方形になるよう作られています。ホグワーツの食堂をイメージするのと同じくらい簡単に、目を閉じて「Instagramの写真」がどんなものかを想像することができますよね。モバイルアプリをデザインする時、これと同じレベルでユーザーが没頭でき、認識できる要素を生み出すことができれば、皆さんはモバイルアプリ界の魔法使いだと言えるでしょう。

5. 品質保証に手を抜かない

アプリが持つ魔法の効果を台無しにしてしまう一番の原因は、QA(品質保証)をいいかげんに扱うことです。魔法のような体験をするために電源を何度も切ったり入れたりする必要がなく、デザインも引き込まれるような優れたものであれば、たとえクラッシュやエラーメッセージに遭遇したとしてもユーザーは混乱することなくアプリを使えるでしょう。アプリを作る最終行程であるQAは、締切が迫っているのでとても苛酷なタイムラインで進めなければいけないことが多々あります。時には、実際にアプリのプログラミングを始める前にデザインやコピーの変更、そして法的なQAが連続して何度も起こり、それらに注力しなければいけないということもあるでしょう。あなたはひょっとして、「クライアントはそれほど賢くないし、後のアップデートでバグを修正できるだろう」と思っていませんか? 現実はそう上手くはいきません。実際には、以前魔法のようだと思われていた機能はもはや当然のものになりかけており、ユーザーはMeerkatのようなアプリのワンタッチ機能や、Evernoteの強固な信頼性を当たり前のものだと思い始めているのです。世界で最も素晴らしいインターフェースは、アプリがクラッシュした時や上手く機能しなかった際に損害からUXを守るものではありません。QAに手を抜いてしまうと、 iTunes App StoreやGoogle Playで星1つの評価を受けて潜在的なユーザーを失い、もしユーザーにアプリがダウンロードされたとしても、UXを悪くするバグがあればすぐに別のアプリに乗り換えられてしまうでしょう。そしてもちろん、プラットフォームも忘れてはいけません。皆さんのアプリのUXを破壊する要因は、モバイルアプリをコーディング、またはデザインする方法ではなく、むしろそれが稼働されるプラットフォームに関係があることもあるのです。人々がAndroid 5.0 (Lollipop) のバグや問題について批判する時、彼らはそれらの問題がいかに個々のアプリのUXに大きな影響を及ぼしているかについて批判をしているのです。アプリを配信するそれぞれのプラットフォームで起こりうる問題を乗り越えられる状態をQAチームがキープし、そしてテスト版を作ってそれらの問題を検証することが大切です。モバイルアプリをデザインする場合、そのアプリを複数のデバイスでテストすることが重要です。アプリが様々な画面サイズでどのように表示されるかをシミュレーションできるプログラムもありますが、異なる種類の実際のデバイス上でテストできると良いでしょう。これは特にAndroidに当てはまります。というのも、OSが複数のメーカーによって製造されたデバイス上で稼働しているからです。QAは、テクノロジーが十分に発達したことによる魔法のような体験を確かなものにするサポートをしてくれます。1つ覚えておいてほしいのは、魔法はおとぎ話とテクノロジーを「素晴らしい」ものにするということです。「素晴らしい」という言葉は、皆さんがダウンロードしたいアプリがクラッシュし続ける時に思い浮かぶものではありません。

6. デザインと開発は同時に行わない

おそらく、このポイントを聞いたことがある人もいるのではないでしょうか。皆さんはクライアントのためにモバイルアプリをデザインし、そして締め切りに間に合う程度のデザインやコピーのちょっとした調整を数多く行っているかと思います。合法なコピーやアクセシビリティのガイドライン、そしてブランドの一貫性をチェックするコンプライアンスチームを複数抱えているクライアントでは特にそうです。なぜなら、こういったクライアントの案件の場合、時間を節約するためにデザイナーやコピーチームがまだモックアップのアップデート作業を行っているうちにプログラミング作業を開始しようとしてしまい、それが最終的に組織の混乱を招くことになるからです。さらに、クライアントによるフィードバックをデザインやアプリのテスト版に反映させなければならず、最終的に膨大な数の修正箇所を確認するはめになります。こうなってしまうと必ず、移行する過程で何かが紛失しQAは混乱状態になります。そしてそれが5で説明した問題を引き起こすのです。つまり、QAがいいかげんなアプリは魔法のようなアプリにはなれないということです。まずデザインを行い、次に開発を行い、QAを徹底するといったように、段階的に行っていきましょう。もし締め切りを延ばす必要があるのであれば、延ばすのが理想です。クライアントに納品した時にアプリが正常に機能しなければ、締め切りに間に合っても意味がありません。マネジメントを引き締めれば、モバイルアプリのデザインの全体のプロセスがよりスムーズに進み、より良い 、そしてより魔法のような製品を生み出すことができます。

魔法のアプリは魔法のプロトタイプから

魔法のようなモバイルアプリを作りたければ、多くの要素を一つにまとめる必要があります。デザインは厳密に行わなければなりません。シンプルで誰にとっても使いやすく、そしてタフなアプリである必要があります。そのために、コンセプトの作成からQAまで、全行程に十分な時間を当てましょう。適切なツールを使うことも結果を大きく左右します。全体的なUXを構築する力を、デザイナーの手に授けることができたなら、実際のアプリのテスト版に限りなく近い動作とアニメーションが備えられたプロトタイプを、クライアントや潜在的なユーザーに提示することができるということです。デザインプロセスでは、あらゆるフィードバックを無視することができ、デベロッパーは終わりのないデザインの修正作業に協力する必要はありません。Proto.ioを利用すれば、このようなことを行うことができます。何年ものエージェンシー経験があるベテランのデザイナーであれ、初めてモバイルアプリをデザインするデザイナーであれ、Proto.ioの直感的なドラッグ&ドロップインターフェースは、皆さんの静的デザインを活き活きとしたプロトタイプへと簡単に変身させることができます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて