モバイルアプリデザインのエキサイティングな10のトレンド

Todd Siegel

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

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

10 Exciting Trends in Mobile App Design

UberからVineまで、私たちはこの5年間で、モバイルアプリのトレンドがどのように形成されているかという問いに対する良い見解を持ち始めたのではないかと思います。どんな時でも、シェアリングエコノミーなどの社会動向から、小さなウェアラブルと対になる大きな携帯電話の画面のように今年私たちが目の当たりにしているテクノロジーの変化まで、多くの要因がモバイルアプリの様相を決定づけているのです。

ユーザーがモバイルテクノロジーを日常生活により深く取り入れるほど、自分たちがアプリケーションのことを考える時間も増えることでしょう。仕事のメールをチェックしますか? ホテルの部屋を予約しますか? グルテンフリーのマルゲリータパイの配達を注文しますか? AirbnbやGrubHubのような、無数のアプリケーションの中でも傑出するアプリケーションは、それらを使用する際に思考する労力や時間を最小限に抑えているため、ユーザーは様々なタスクを行うためにより多くの時間を使うことができ、必要なオプションやスクリーンへ到達する方法を考える時間を減らすことができます。ユーザーが複数のタスクを行えば行うほど、ユーザーのニーズを予測し、何を求めているのか、そしていつそれを求めているのかを教えてくれるようなモバイルアプリのデザインが、ますます求められるようになります。

以上のことを念頭に置くと、以下のモバイルアプリデザインの傾向は、ユーザーが求めているものをすぐに提供することができます:

1. より大きな携帯電話の画面

image1-screenEvo-1024x514

賛否はありますが、急成長しているファブレットはますます人々の手に渡っています。これは、モバイルアプリのデザイナーやディベロッパーにとって何を意味するのでしょうか?

明らかに「大きなデザイン」以上に、ユーザーが使用する際にデバイスをどのように持つかを考えることが重要です。つまり、画面の反対側の一番上の隅には届かないかもしれないユーザーの親指でも、最も重要なナビゲーション要素が使いやすいようにすることを意味しています。簡単でしょう? 皆さんのインタラクティブ要素を、画面の右下の隅に設置するだけです。難しい場合を除いて、約10パーセントのユーザーが左利きであると仮定します。

左利きのユーザーに両手でデバイスを握ることを強制する (そしてモバイルデバイスが大きくなっている場合は、いずれにしても頻繁に利用される手の位置になるでしょう) か、(おそらくそう考えていると思いますが) 誰でも使用しやすいエクスペリエンスを本当に提供したい場合は、すべてのインタラクティブ要素が、デバイスのどちらの側からもアクセスできるだけの大きさになっていることを確認しましょう。結局のところ、操作を行う画面の大きさを広くするということです。もう1つのアイデアは、UIをフリップするオプションも含めて、シンプルにカスタマイズできるインターフェースを使用するということです。

しかし、ユーザーが右利きであれ左利きであれ、特定のデザインの選択が、使いやすさやインタフェースの直観性の低下をまねくだけでなく、手のけいれんや疲れを引き起こす恐れがあるということを理解した上で、モバイルアプリのデザインを行うことが大切です。これは、テストやQAで解決するべき重要な細部です。

もちろん、大きな画面を操作する場合、以下のことを覚えておくのに役立ちます:

2. スワイピングは新しいタッピング

Image2-swiping-1024x640

タッチスクリーン対応のモバイルアプリが最初に導入されたとき、デザイナーとディベロッパーは種類が全く異なった対象物に対してプログラミングを行うという現実と格闘しなければなりませんでした。拡大表示するためにピンチする動作は、2007年に私たちが最初にiPhoneを手にしたときには非常に素晴らしい機能でしたが、コンテンツを閲覧するために拡大することを強いられることは、それほど優れたモバイルアプリデザインとは言えません。このように、非常に小さい指とプロのピアニストのような指の動きのスキルという類まれなる組み合わせを持っていない限り、私たちは皆ボタンが小さすぎてタップできないという事態に遭遇することになります。

スワイピングは、特に片手しか空いていない時には、モバイルデバイスを使用するより自然な方法です。証拠が欲しいですか? 携帯電話を持つような感じで、自分の手を握ってみてください。そして、目に見えない携帯電話の画面をタップするように、親指を動かしてみてください。どのように感じたかメモをしてください。次に、画面上を親指でスライドしてみてください。どちらがより快適でしたか?

もちろん、アプリケーションのスワイピングの最も明らかな事例はTinderであり、複雑なデートの設定や人を選り出す動作の本質を、右か左にスワイプするという2つの簡単なオプションにしたのです。ロマンティックコメディの映画の予告編を見るよりも短い時間で、1つの親指だけでたくさんの恋人候補に、自分の意思を届けることができるのです。10億人以上のユーザーを抱えているという事実が証明しているように、Tinderは適切なアイデアを持っているようです。

3. ウェアラブルがモバイルアプリのデザインに及ぼす影響

image3wearables

ファブレットのような大きな画面の大流行の背景には、これらの画面が手首に装着できるほど小さい画面を身に付ける機会が増えてきていることがあります。International Data Corporationは、2015年にベンダーたちが手首 (4,000万という最大の割合を占めている) や衣服、メガネに装着するものを含む4,570万ものウェアラブルテックデバイスを出荷すると予測しています。

ウェアラブルフィットネスデバイスの流行として始まったことが、現在はApple WatchとAndroid Wearの発売によって、より大規模な市場へと動いています。ウェアラブルはもはや睡眠と脈拍を測る見せかけの歩数計ではありません。これらは、通勤時間や明日の天気を知らせたり、また叔母が訪ねてきた時にお茶を出すためのお湯を沸かすことを知らせてくれる能力を持つ、善良なスマートデバイスなのです。これが、モバイルアプリデザイナーの業務遂行の仕方にどのような影響を与えるのでしょうか?

私たちは依然としてこの流行の兆しの初期段階にあるため、AppleAndroidはそれぞれの製品に対して数多くの提案をしています。腕時計のようなデバイスのメーカーとして、両社は第一印象の重要性を強調しています。ユーザーがある程度の時間画面を見つめることを予期している携帯電話やタブレットとは異なり、ウェアラブルデバイス用にデザインされたアプリは本当に必要なコンテンツを、適切な速さでユーザーに届けることで、ユーザーが横目で見ながらでも素早く内容を理解することができる必要があるのです。つまり、タイポグラフィーやカラーコントラスト、そして (ユーザーはどこにいるのか? ユーザーが今必要としているデータは何か? という) コンテキストは、ウェアラブルのデザインや開発をする際には特に重要となります。

これは比較的新しいテクノロジーであるため、実用的なユーザーのフィードバックに特に注意を払い、そのフィードバックを今後のアップデートに取り入れることがより一層重要となります。AppleとAndroidは独自の主張があると思いますが、ウェアラブルのモバイルアプリのデザインの未来を形作るのは、ユーザーなのです。

4. 多層レイアウト

平面的なデザイン対スキューモーフィズムという延々と繰り返される議論において、中間の立場になれるものはあるのでしょうか?美学的なレベルでは、誹謗中傷する人たちにとってスキューモーフィズムとは、車のダッシュボードにある明らかに偽物の木製パネルと同じくらい悪趣味な、デジタルコンテキストで現実の質感を割り当てる陳腐な物のように感じられるでしょう。しかし平面的なデザインは、この時代のデジタルの美として傑出しているにもかかわらず、それ自体問題を抱えています。モバイルアプリのデザインからあらゆる質感が排除されているので、異なるデザイン要素間の境界線をはっきりと認識することができる場合は、どの要素がインタラクティブかどうかを見極めるのは難しいかもしれません。

image4-Google-Material

ここで生じる妥協案は多層平面のデザイン、またはGoogleが「マテリアルデザイン」と呼んでいるものです。このデザインは依然として平面的なデザインの側に傾いていますが、いくつかの原理をスキューモーフィズムから拝借しています。平面的なデザインと同様に、多層またはマテリアルデザインの要素は本質的に幾何学的であり、自然な質感や明らかな輝きの複製よりも、色の集合体を取り入れています。しかし、スキューモーフィズムのデザインと同様に多層平面デザインは、特に対象物が互いに動作を行いやりとりをする場合において自然の世界からメタファーを拝借しています。つまり、影や他の照明効果は後ろであるということです。

自然な物体と平面的なデザインが融合した結果、ユーザーは画面の要素がどのように機能するかについて、より直感的な理解を得ることができます。ユーザーがデバイス上で対象物を操作する時、その対象物には重さと慣性があります。スクリーン上でその対象物をスライドさせたり、その下の要素に影をつけるときに、重さがあるように感じられるかもしれません。これは、スキューモーフィズムのユーザビリティーと平面的なデザインの美を合わせて、素晴らしいUXを生み出しています。

5. より多くの動作

皆さんのスマートフォンは、人を月へと送り込むNASAのチームや、1997年のチェスの世界王者であるGarry Kasparov氏の役に立ったDeep Blueスーパーコンピューターよりも優れたコンピューティング能力を持っています (PhoneArena)。そしてスマートフォンは、ますます聡明になっています。モバイルデバイスはより優れたコンピューターとなっているだけでなく、3Gが3つのタイプの4Gに道を譲り、それぞれのタイプが速度と性能において互いに切磋琢磨し合っているため、モバイルアプリのデザインを活発にするためのより多くの自由があるのです。

image5-ui

動作はモバイルアプリのデザインに多くの利益をもたらします。ある特定のアイテムへの注意を喚起し、ユーザーを必要な動作へと導き、そしてより感激するような素晴らしいユーザーエクスペリエンスを構築することができます。スマートフォンは現在、皆さんがデスクトップのエクスペリエンスに既に使用しているようなHTML5アニメーションやパララックスデザインを利用するのに十分な進歩を遂げており、そしてそのネットワークもそれに対応できるだけの十分な性能を持っています。バンド幅との性能に対する制約がほとんどないため、私たちは今年モバイルアプリデザインにおいてたくさんの動きを目の当たりにし、それは私たちのスマートフォンが聡明になっていくにつれて発展の一途をたどっているのです。

6. シンプルで柔らかいカラースキーム

image6-colorPallete-1024x768

毎年選ばれたパレットがあり、そして今、私たちは柔らかなコントラストを強調する非常にシンプルなカラースキームに注目しています。これは平面的なモバイルアプリデザインの、総合的なミニマリズムの必然的な結果ですが、現在のトレンドである色も反映しています (Pantoneの2015年春のカラーパレットは、「繊細な暖色系のより洗練された、柔らかな色使い」を強調しています)。白色のタイポグラフィーとコントラストを織りなす要素とともに、1色の様々な濃さのニュアンスを伴うレイアウトを試してみてください。もしくは、2、3の洗練された、落ち着いた濃さの色合いを試してみてください。

モバイルアプリデザインのコンテキストにおけるこのシンプルさは結果として、まとまりのあるエクスペリエンスを提供し、はっきりとした色のコントラストがより目を惹きつけます。光を放つ画面を見つめることは厳しいですが、色調を落ち着かせて光沢感を抑えることで (繰り返しになりますが、これは平面的なデザインの強みです)、モバイルアプリデザインをより円滑かつ心地よいものにすることができます。

7. タイポグラフィーを発展させる

Webセーフフォントが低解像度で読み取ることができるものに、モバイルのタイポグラフィーが限定されていたのはそれほど昔のことではありません。過去2年の間に、iOSとAndroidはどちらも、操作システムをより流動的でスケーラブル、そして可読性が高いものへと最適化してきました。大きな画面とテクノロジーの発明 (TypeKitのおかげです) のもう1つの副作用は、モバイルアプリデザインに美しさと表現能力を与えるタイポグラフィーの利用です。流行の大きな背景画像であれ、ネガティブスペースであれ、書体が話しかけたり、ミニマリスト的な方法で強力なメッセージを伝えることを可能にすることができるのです。

image7-Typography

8. 埋め込まれたぼかし

明快なアプリに即時のユーザビリティーを与えてくれるデザインの傾向の1つは、背景のぼかしです。ユーザーの背景より優位になっているモバイルアプリは、ユーザーにわかりやすくエラーのないエクスペリエンスを提供しますが、ユーザビリティーに関する問題を引き起こす恐れもあります。

image8-blur

ユーザーがどの背景を自分のデバイスに選択しているか、そして背景にどれくらいのアイコン、またはウィジェットが稼働されているかによって、アプリの内容をぼかしなしで閲覧することが非常に難しくなる恐れがあります。ガウスぼかし効果をモバイルアプリデザインに埋め込むことで、アプリが読みやすく、目に留まりやすくなり、その一方でユーザーの背景にカスタマイズしたという感覚を維持することができます。

9. 利用しやすいモバイルアプリデザインにおける発明

思いがけないメリットとして、今日のデザインの傾向は事実上より利用しやすいものとなっています。大きな要素とフォントを伴うシンプルなレイアウトは、視覚的な処理の負担を減らしてくれる一方、(拡大のためのピンチやタッピングのような) より繊細な操作を必要とする動作とは対照的に、マクロな手の動作 (スワイピング) は動作に制約がある人にとってより容易に動作を行うことができます。Typekitによってタイポグラフィーの品質を犠牲にすることなく、モバイルアプリデザインでより頻繁にライブテキストを使用することができるようになり、読み取り装置が必要な視力障害のある人たちにとってもより利用しやすいものになっています。大きなデバイスやファブレットを利用する機会が拡大したこと自体も、モバイルアプリデザインをより多くの人たちにとって利用しやすいものにしています。

image9-Accessability

ユーザビリティーをモバイルアプリデザインに構築することは、製品がどれほど利用しやすいかどうかを批判的に考えることであるということを覚えておいてください。レイアウトはより大きな、可読性の高いテキストを必要としている人にとってカスタマイズ可能となっていますか? インタラクティブ要素からより多くのレスポンスが必要な人に対して、触覚的なフィードバックオプションを提供していますか? デザインの構築を行っている際に、アクセシビリティのチェックリストを利用すると良いでしょう。The Accessibility Projectは、幅広いオーディエンスに利用可能な製品を作るために、デザイナーやディベロッパーに向けた資料を数多く提供しています。

10. よりスマートなプロトタイピング

私たちが使用している全てのアプリは、かつてはプロトタイプでした。概念実証の多くがシンプルなワイヤーフレームから始まり、いくつかの報告書を印刷したり、静的なPDFファイルとして保存されていました。モバイルアプリデザインがより複雑になるにつれて、静的なフレームを提示してクライアントやディベロッパーにデザイナーが考えている動作を想像するように強要するだけでは不十分になってきています。アプリがユーザーに指示を出したり、視覚的な効果を提供するためにアニメーションに依存している場合、クライアントはアプリを興味深く、かつ利用しやすいものにする要素を見逃してしまいます。さらに、平面的なワイヤーフレームは純粋に、たくさんの「驚くべき」要素を提供しません。

image10-prototype

さらに、ディベロッパーが最終的なプロトタイプに必要ない可能性のある要素のコード化に時間を費やすため、概念実証のプログラミング自体にも問題があります。無駄な労力を減らすために、デザイナーがディベロッパーに対して自分たちの意図を非常に明確に伝えるか、デザイナーが自分の手でプロトタイプの作成を行うことによって、自分のビジョンを反映させるしかありません。

ありがたいことに、今日のプロトタイピングソリューションによって、デザイナーはこれらのことを行うことができます。コード化の知識が全くない、または必要最低限しかない状態で、デザイナーはユーザーがアプリとどのようにやり取りを行うつもりなのか、そしてモバイルアプリデザインに必要なアニメーション、または動作を示す概念実証を作成することができます。これは、潜在的なクライアントや顧客を驚かせるようなプロトタイプを生み出すだけでなく、アプリが開発されるプロセスを簡略化することができます。皆さんがアプリがユーザーとどのようにやり取りをするべきかについての打開案を出したので、ディベロッパーがしなければならないことは、終わりのないデザインの修正のコード化の作業なしに製品を作り上げることです。

今日の最も注目されているモバイルアプリデザインの傾向を実践する準備はできましたか? 皆さんの次のプロジェクトのプロトタイプを作成する際には、Proto.ioをぜひご利用ください。皆さんが経験豊富なデザイナーであれ、素晴らしいアイデアを持っている新米のデザイナーであれ、Proto.ioは利用しやすい機能やUIライブラリ、タッチおよびマウスイベント処理サポートなど、皆さんに実現可能なインスピレーションを提供することができます。iOSおよびAndroid対応のProto.ioのモバイルアプリを利用すると、複数のデバイス上のプロトタイプをテストして、複数の解析度や操作システム上で正常に機能しているかを確認することができます。


Welcome to UX MILK

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

このサイトについて