アプリデザイナーのように考える

モバイル製品の設計は見た目ほど単純ではありません。私たちはデバイスを非常に意識し、問題に対する考え方さえ変える必要があります。つまり、Web デザインから学んだことの多くを捨てることになります。

多くのデザイナーと同様に、私は出版物のデザインからキャリアをスタートしました。その後すぐに、私はオンラインの世界を発見し、それが私を魅了し、ある時点で私の主な関心事となりました。この過程で、私はそれまで全く知らなかったインタラクション デザインとユーザー エクスペリエンスの概念を学びました。

ある時点で、私は反復的な作業サイクルから抜け出せないように感じていました。私は、ほぼ完璧なデザインを作成するための公式、つまり方法を見つけ、新しいプロジェクトを以前のものよりも簡単かつ迅速に提供できるようになりましたが、何らかの形で、それらはすべて同じように見えました。その後、iOS および Android 向けの最初のバージョンがリリースされました。

それから私の人生は予期せぬ方向に進み、私は一見まったく違うこと、つまりモバイル アプリのデザインに注力し始めました。それが私にとって本当に必要な挑戦でした。新しいことを学ぶ必要があっただけでなく、それまで使っていたウェブデザインの秘密のいくつかを忘れる必要もありました。

数年後、実のところ数日前、Apple の新しいスマートウォッチ アプリがリリースされ、デザイン界では複雑な感情が広がりました。一方では、新しいデザインが生まれる可能性を開くデバイスを見る。一方、前例のないインタラクションとユースケースを備えたメディアを理解するのは困難な場合があります。

このようなデバイスが市場に登場したのは今回が初めてではありません。しかし、新しいテクノロジーには新しい設計アプローチがますます頻繁に必要になるため、私たちはこのますます速いペースに適応する必要があります。

もちろん、最初の大きな推進力となったのは、20 年前に最初のインターネット ポータルが普及したことでした。これまで、私のようなデザイナーのほとんどは出版業界で働いていましたが、インターネットの出現により、インタラクティブ メディアのデザイン方法を学ぶ必要が生じました。ユーザーは単なる観客以上の存在になりました。

こうした移行の中には、他の移行よりも難しいものもあったため、当時の多くの Web サイトは出版物の上にあるボタンのように見えました。デザイナーたちは、この新しいメディアの特性をすぐには理解できなかったのです。

今日、Appにも同じことが起こりました。小さな Web サイトのように見えるアプリに遭遇することはよくあります。スマートフォン向けに翻訳された Web ページのようなアプリが構築されており、コントラスト、フォント、タッチ ターゲット、ジェスチャの点で悲惨な失敗をしています。また、誰が、どこで、どのデバイスでアプリを使用するかを区別することもできません。

モバイル向けに設計する場合、サイト構造が不利に働く可能性があるため、サイト構造から離れる必要があります。モバイル デバイスの長所を最大限に活用し、快適な体験を生み出すためには、異なる考え方でプロジェクトに取り組み、モバイル デバイスを完全に理解する必要があります。

アプリ デザイナーとして何をする必要がありますか?知識とツールに加えて、問題に対する考え方も変える必要があります。アプリデザインの世界に適応するためのヒントをいくつか紹介します。

働き方を変える

今では何百ものアプリが毎瞬市場に登場しており、無駄にする時間はありません。

専門家として、プロジェクト開始前に斬新な設計の詳細に何週間も何ヶ月も費やして、他のアプリがすでにその問題を解決している（そしておそらく同じ方法で解決している）ことに気づく余裕はもうありません。

ここで、アジャイル開発サイクル、つまりリーン UX の概念が導入されました。このアプローチは、継続的な反復的な設計と開発に不可欠であり、ユーザーが試してみるまで何も確実ではないという単一の焦点を念頭に置いています。

したがって、アプリのデザインは、Potoshop や Illustrator を使用したインターフェースのデザインから始めることはできません。その前に、ワイヤーフレームのプロトタイプを描く必要があります。そうすれば、変更があった場合でも、数か月ではなく短期間で実装できます。

デザイナーは一般的にビジュアルデザインから始める傾向があります。それが私たちにとって最も興味深い段階です。ある程度、私たちはこれを行うことに慣れています。なぜなら、それが私たちにできる唯一のことだからです。

最近、多くのデザイナーと話をしていますが、プロジェクトの開始時にはコンピューターで作業せず、紙に描くようにアドバイスしています。とても原始的な話なので、この可能性については考えたこともありませんでした。このアプローチにより、他の形式の変数 (設計ドキュメントのサイズ、使用される色やフォントなど) によって気が散ることが効果的に防止されます。これらの変数や詳細は、プロジェクトの開始時に実際に創造性を制限します。

個人的には、紙にスケッチすることは、アイデアと問題の解決策に集中することができ、最初のステップで詳細について考えてしまうという罠に陥ることを防ぐことができるので、非常に便利だと思います。

「モバイルファースト」、つまり小さな画面から始めるのは良い戦略です。アプリをスマートフォンとタブレットの両方で実行する必要がある場合でも、小型のスマートフォンから始める方が効率的です。モバイルの観点から設計することで、最初に大画面のデスクトップ コンピューターから始めることに慣れている精神構造を優先順位付け、選択、変更することに集中できます。

初めてこの方法でプロジェクトを始めたとき、頭痛のせいでプロジェクトを中止しそうになりました。これは、初めてジムに行くときと似ているかもしれません。課題が難しいため、筋肉がまだ適応しておらず、怪我をしてしまうのです。完了しない場合は、別の日にもう一度お試しください。優先順位が変化し、アプリで何が本当に重要なのかをすぐに理解できるようになります。

スーツケースを持って旅行することに例えることもできます。小さなスーツケースを持っていたら、何を持っていきますか?もちろん、旅行中に必要になると確信している最も重要なものだけを持って行き、残りは捨てることになります。信じられないかもしれませんが、この一般的な例は、スマートフォン向けに設計したものと似ています。

大切な人から学ぶ

アプリの成功は、可能な限り最高の品質で作業を完了するために協力するデザイナーと開発者にかかっています。効率的に作業するには、並行して作業することで反復サイクルを短縮できます。したがって、設計と実装の複雑さを認識する必要があります。

これを実現する方法の 1 つは、開発ツールの使い方を学ぶことです。アプリを最初から最後まで開発する必要はありませんが、少なくとも設計意図を正直かつ迅速に伝える方法を確立できます。

バルセロナに到着してすぐに、テクノロジー系スタートアップ企業で働き始めました。そこにいたデザイナーが私だけだったことにとても驚きました。文字通り開発者たちに囲まれていて、最初のボトルネックとなったのは、全員が自分の仕事を続けられるように私のデザインが完成するのを待っていたことでした。

時間が経つにつれて、Xcode やその他の基本的なプログラミング言語の使い方を学びました。こうすることで、オフィスの全員が同じ言語を話しているように感じるでしょう。デザイナーと開発者は、同じことを言うのに異なる言葉を使うことが多く、理解が難しくなります。

チームワークの価値を認識する

少し遡ると、チームワークとは単にオフィススペースを共有することだけではありません。チームメンバー間のコラボレーションと継続的なコミュニケーションが含まれます。 Lean App Design は、1 人の作業者が作業を完了したところから他の作業者が始まるというシリアル プロセスを廃止します。

しかし、現実には、ほとんどのチームは、開発者がアジャイル アプローチ (特定の期限までに目標を達成する) に従い、設計者がリーン アプローチ (通常は特定の期限なしで迅速な反復) に従う、より効率的なアジャイル プロセスの組み合わせに慣れています。

しかし、ここではウォーターフォール開発の名残がまだ残っており、デザイナーは通常チームの他のメンバーよりも少し先に作業し、開発者はすべての設計が準備される前に確実に作業を開始できます。

そのため、アプリ デザイナーは、協力者、特にプログラマーは敵ではなく味方であることを認識する必要があります。より良い、より調整された結果は、お互いを理解し、協力して働く習慣を身につけることです。

私たちは自分の仕事を共有することに不安を感じることがよくあります。私たちは、特に引き継ぐデザイナーからのコメントに対して、いくぶん防御的になる傾向があります。実際、デザインのバックグラウンドを持たないプログラマーなどの人々からのフィードバックを含め、他の人の意見の多くは、私たちの提案を改善する上で非常に重要でした。彼らの視点は私たちの視点よりも実用的であることが多く、より良いバランスを保つことができます。

先日訪問した会社の人から、デザイナーと開発者は別のフロアで働いており、異なるバージョンのインスタント メッセージングを使用してコミュニケーションを取っていると聞きました。私は彼らに別のアプローチを試すことを提案しました。つまり、プロジェクトのデザイナーと開発者を一緒に配置すべきだということです。数か月後、製品の品質やチームメンバー間の関係までもが劇的に改善されたと聞きました。

さまざまなオペレーティングシステムを使用する

モバイル アプリを設計するときは、自分の携帯電話だけを参考にしないでください。グローバルなモバイル市場をターゲットにする場合は、少なくとも Android、iOS、Windows Phone デバイスを含め、各プラットフォームのさまざまな使用シナリオを完全に理解するために、常にそれらの使用に慣れておく必要があります。

現実には、世界のデザインは iPhone で始まり、iPhone で終わるわけではありません。多くのデザイナーは iOS に限定して、Android 向けにデザインする際には、元のアプリを（多くの場合はほぼ一語一句）単純に翻訳します。

インタラクション パターン (つまり、設計で確立された問題解決方法) は、オペレーティング システムごとに異なります。同様に、設計者はシステムを正しく理解して使用するために、システムを頻繁に切り替える必要があります。

たとえば、タブの位置、メニューの表示方法、プライマリアクションとセカンダリアクションを表示するタイミングと方法はすべて、各オペレーティング システムによって異なります。

ここでいくつかの実践的な演習を行うことで、各システムのパターンを学習できます。同じアプリをさまざまな携帯電話にダウンロードしてインストールし、それらの類似点と相違点を注意深く分析します。パターンはそれぞれ異なります。したがって、iOS と Android で見た目も動作もほぼ同じアプリを見つけた場合、どちらかに問題がある可能性があります。

さらに、他の人のアプリを常に見て、試してみることは、自分のインターフェースの問題を解決するのに最適な方法です。たとえば、創造的に行き詰まったり、問題を解決する方法がわからないと感じたりするときは、多くの場合、携帯電話を操作して、直面している問題をどのように解決できるかを確認します。

携帯電話をお持ちでない場合は、PttrnsAndroid App Patterns や Windows Phone UI Design Patterns などの豊富な事例が掲載されている Web サイトをクリックすると役立つ場合があります。

すべてを標準化する

アジャイル開発手法では、機能が実装される前に、何かがどのように見えるか、またそれがどのように見えるかを理解する必要があります。同様に、プロトタイプは、（ユーザーテストを通じて）製品のユーザビリティを評価するのに役立ちます。理想的には、最初のプロトタイプを構築するのにそれほど時間はかからないでしょう。

Palm Pilot を覚えている人はほとんどいないでしょう。最初のプロトタイプの 1 つは、インターフェイスのデザインが描かれた紙を貼った木の板でした。従業員は実際のデバイスと同じように荷物に入れて持ち運ぶことができます。

その目的はサイズと使い心地をテストすることであり、このプロトタイプは十分すぎるほどでした。問題は、設計を開始して作業に取り掛かる前に、構想の面でどの程度進んでいるかをテストすることです。

最近では、スマートフォン上でもプロトタイプを完成品のように見せることができるプロトタイピング ツールが数多くあります。つまり、プロトタイプは静的なデザインを示すだけでなく、画像、トランジション、ジェスチャーも含まれます。

最も適切なツールの選択は、ワークフロー、達成したい目標、および望ましい結果によって決まります。たとえば、紙の上にシンプルなワイヤーフレームしかない場合は、POP をよく使用します。このアプリを使えば、デザインの写真を撮ったり、ジェスチャーやトランジションを追加したりできるので、手早く簡単にできます。

しかし、コンセプトがより高度な場合は、Sketch、Marvel、Flinto、InVision などのデザイン専用のソフトウェアを使用して、より美しいプロトタイプを作成する方が便利だと思います。 (必ずしも他のものより優れているわけではないことに注意してください。どれを選ぶかは、どれがより使いやすいかによって決まります。)

前にも述べたように、世の中にはプロトタイプ アプリが山ほどあるので、数か月前に、私が知っているすべてのプロトタイプ アプリをリストした小さな Web サイトを構築することにしました。ウェブサイトでは、選択に役立つ各ツールの機能の概要が提供されています。

一方、Android の「マテリアル デザイン」のようなアプローチでは、より微妙なインタラクションに重点が置かれます。微妙なインタラクションのプロトタイプを作成することは、今日多くのデザイナーの仕事です。 (Keynote のようなツールを使用すると、このような詳細を簡単に作成できます。Keynote のマジックアクション オプションが便利です。)

見たものを信じてはいけない

Web 用の製品を設計する場合、作業中に実際の動作を確認できます。ただし、インターフェースがどのように見えるか (機能性) を確認するには、モバイル デバイスでアプリをテストする必要があります。まず、コントラストとサイズを決定するためにこのテストが必要です。

デザイナーがさまざまな解像度のモバイル画面で自分の作品を表示できるようにする Android および iOS 用のツール。iOS では、LiveView が最も有名です。私が最もよく使うもう 1 つのツールは Skala です。これには Mac 用のデスクトップ バージョンがあります (Android および iOS でも利用可能)。また、Sketch を使用している場合は Sketch Mirror を試してみてください。

残念ながら、Windows および Windows Phone 向けのそのようなツールは存在しません (少なくとも私が知る限りでは)。

私のワークフローでは、各ステップを開始する前に携帯電話でデザインをプレビューして、希望どおりになっているかどうかを確認することがよくあります。同様に、私は通常、一度に 1 つのシステムの設計から始め、ほとんどの場合、携帯電話を身近に置いています。こうすることで、自分の作品が画面上でどのように表示されるかを常に確認でき、ワイヤーフレームの最初のバッチを完成させるときに、サイズ（グラフィック、テキスト、コントロール）、コントラスト、色が期待どおりであることを確認できます。これを行わないと、後で問題を発見したときに修正にさらに時間が必要になる可能性があります。

また、作業をプレビューする携帯電話と同じサイズ (長さと幅) のデザイン ドキュメントを使用して作業を開始することも重要です。 (注: さまざまな画面サイズ向けにデザインする場合、ピクセルはプラットフォームによって異なるため、サイズを測定するのに適した方法ではないことに注意してください。たとえば、iOS のポイントは、Android の密度に依存しないピクセルとは異なります。モバイル アプリの分野で画像をデザインおよび作成する方法の違いをある程度完全に理解する必要があります。)

開発者がデザインを実装したら、お持ちの最高の携帯電話だけでなく、さまざまな携帯電話やさまざまなバージョンのシステムでアプリがどのように表示され、実行されるかを確認します。

謙虚なデザイン

アプリデザイナーは、最終製品を作成するという考えを放棄する必要があります。アプリは時間の経過とともに進化するデジタル製品であるため、決して完成することはありません。そのため、絶対的な観点からインターフェース設計に取り組むことはできません。代わりに、ユーザビリティ テストを実施し、ユーザーが遭遇する問題を解読することで決定する必要があります。

私たちデザイナーは、ユーザーがアプリの使用中に間違いを犯したり混乱したりしたときに、責任を免れてしまう傾向があります。しかし、実際には、私たちが間違っている可能性が非常に高いのです。

問題を検出すること（そして間違いを発見すること）は悪いことではありません。もちろん、これは自分の作品を学習し、修正する機会であり、それによって作品を改善し、より有用なものにすることができます。デザインをするときは謙虚な姿勢を保たなければなりません。

私が働いていた会社では、デザインが完成したことを上司に伝えるたびに、「ユーザーによるテストはしましたか？」と聞かれました。私はたいていテストしていませんでしたが、そのうちにそれが習慣になり、テストするたびに、心を開いて、見つかった問題を受け入れる用意をしていました。

自分の間違いを受け入れ、そこから学べるほど成熟している場合にのみ、これを行うことができます。難しいですが、成功する価値はあります。

最先端を行く

明日に向けて設計する場合、情報量が多いため、物事を同じまま維持することはほぼ不可能です。しかし、アプリデザイナーとして、私たちは何が新しく、何が起こるのかについて好奇心を持ち続けなければなりません。

これには、アプリのデザイントレンドや新しいシステムバージョンが含まれます。好むと好まざるとにかかわらず、時代の先端を進み、最新のアプリ デザインを確認するには、新しいシステムをインストールする必要があります。

システムの新バージョンの公式設計ガイドラインを読むことは、さまざまな設計情報を得る良い方法です。また、Josh Clark や Luke Wroblewski のような業界の先駆者から学ぶこともできます。

最先端を維持するということは、設計を簡素化し、作業をより効率的にできる、市場に登場するツールを活用することも意味します。私たちは、快適な環境を離れることや、これまでの仕事やデザインのやり方を捨てることを恐れてはいけません。

これらの原則に従って、つい最近、ついに Sketch を使用することにしました。最初は、ゼロから新しいことを学んでいたので少し大変でしたが、実際に使用する頃には、すでに知っているツールに慣れていました。

数か月経った今、このソフトウェアは簡単に習得できることがわかりました。時間の節約になり、仕事中に頭をすっきりと保つことができ、新しいことを学ぼうとする意欲に対するご褒美になります。

まとめ

最後に、アプリのデザインに心の底から適応してください。誰もあなたにこれを強制するわけではありませんし、もしあなたがこれに慣れていないなら、あなたはおそらく、より大きなデザイン プロセスのほんの一部に過ぎないアイコン デザイナーに過ぎなくなるでしょう。

まず第一に、アプリの設計には新しい考え方が必要です。ウェブサイトのデザインという檻から抜け出し、スマートフォンがタブレットや時計とはまったく異なるものであることを理解する時が来ました。これは、完全で複雑なモバイル製品を設計する唯一の方法です。