ユーザーを惹きこむUI/UXを実現するアプリデザインのコツ

幅広い世代にスマホが浸透し、現在多くのアプリが世の中に送り出されています。その中で人々に愛用されるヒットアプリは一握り。人気のアプリのほとんどは、見た目が美しく、使いやすく、楽しさやメリットをわかりやすく提供してくれるもの、つまり UI（ユーザーインターフェース＝操作画面）とUX（ユーザーエクスペリエンス=ユーザー体験）に優れたアプリです。そこで今回は、ぜひデザイナーの方に参考にしてほしい、人々に愛されるかっこいいアプリをデザインするポイントを紹介します。   シンプルで緻密な美しいデザイン アプリに限らずどんなメディアでも「オシャレでかっこいい」デザインは、多くの場合要素が少なめでスタイリッシュな印象です。要素が多くごちゃごちゃしたデザインは「親しみやすい、にぎやか」という印象は与えますが「オシャレ、かっこいい」というイメージには繋がりにくいかもしれません。中でもアプリデザインは、限られた大きさの中で最低限の要素を取り入れることが必要なポイントとなります。 そして、シンプルかつ美しいデザインをする上で大切なのは「コミュニケーションデザイン力」。これはプロダクトデザインでは必須な「フォルムを見ただけで操作方法が伝わる」という要素です。例えばゲームのコントローラーは、取扱説明書を読めない幼児でも操作できるデザインを緻密に考えられている、というようなことです。 これはアプリのデザインにも通じています。「シンプルだがポタンであると認識できる」「タップすると何が起こるかわかる」などのような緻密な設計をすることで、美しいデザインが生まれるでしょう。   アプリ動作時の「重さ」も考慮する アプリユーザーが最もストレスを感じるのは「起動や操作が重い」状態です。どんなにデザインが美しく、機能が素晴らしくても、動きが遅すぎるアプリはすぐにアンインストールされてしまいます。アプリデザイナーは常に「軽量化」を意識することも大切なポイントです。 容量に負荷がかかる要素と言えば、やはり「画像」です。オシャレでかっこいいデザインを保ちながら軽量化するためには、画像の劣化を最小限にしながら圧縮率の高い形式を模索する必要があります。それぞれの画像形式にメリットとデメリットがあるので、アプリとプログラムに合わせてよりふさわしい形式を採用しましょう。   忘れてはいけないUXデザインの基本とは？ アプリデザインの用語として、UI（ユーザーインターフェース＝操作画面）とともにUX（ユーザーエクスペリエンス=ユーザー体験）が意識されています。優れたUXデザインがなされているなら、アプリユーザーが「うれしい、楽しい、みんなと共有したい」といったポジティブな印象を持ち、満足度が高くなります。 また、ビジュアルやユーザビリティが影響するUIデザインに対して、UXデザインの評価はよりユーザーの気持ちや使用感にゆだねられる特徴があります。そのため、ターゲットのペルソナは属性だけでなく、「アプリのヘビーユーザーかライトユーザーか」、「スマートフォンのリテラシーの高さはどのくらいか」なども意識することが大切です。 オシャレなデザインは抽象的なものになりがちですが、UXを高めるには親しみやすさを導入した方が効果的な場合もあります。「かっこいい」と「使うと楽しい」を両立させることが、UI/UXデザインの前提です。   片手で操作するスマホならではのデザインを アプリならではのユーザビリティとして意識したいポイントは「片手での操作」を想定するということです。スマホアプリでは、ほぼ「親指タッチ」だけでもストレスなく操作できるデザインが求められます。例えば「スマホを片手で持った時に親指が届く範囲にメニューボタンを配置する」「視覚的な要素は、親指で隠れない上部に配置する」などです。 オシャレでかっこいいビジュアルだけを重視したばかりに、片手で操作しづらくなっていたり、肝心なボタンに親指が届かなかったりということがないように、スマホ向きのデザインを念頭に置きましょう。 限られた画面でシンプルに魅力を表現することが前提のアプリデザインですが、より「オシャレでかっこいい」デザインを目指すには、想像以上に少ない要素で表現しなくてはなりません。 かっこいい写真を多用してアプリ動作が遅くなることを避けるためにも、わかりやすいイラストやロゴのアイコンをデザインする練習をしておきたいですね。普段からオシャレでかっこいいアイコンのデザインアイデアをストックしておくのも、オシャレなアプリデザインをする上でのポイントです。ぜひUIデザインの参考にしてみてください。

Webデザイナーは、ユーザインターフェースのデザイナーでもあります。そして、近い将来、Webデザイナーにとってその役割はますます重要になるでしょう。 今のWebデザインのユーザインターフェースはナビゲーションと連絡先フォーム程度のシンプルなものですが、新しい技術と標準の台頭によって、より動的でカスタマイズされた体験が求められるようになっていきます。 これは必然的に、ユーザインターフェースのデザインの仕事が増えるということを意味します。そのために覚えておくべき「掟」を紹介しましょう。 1. 明確性の掟 意味が曖昧なインターフェース要素はユーザに避けられる。 Gmailを使っていますか？　最新アップデートの前には、Gmailのページのトップにはテキストによる非常に分かりやすいナビゲーションがありました。カレンダー、ドライブ、シートなどのGoogleサービスを、ボタンのクリック1つで利用できました。 その後、Googleは「シンプル化」を目指し、なにもかもを抽象的なアイコンの裏に隠してしまいました。結果として、ほとんどの人はそのアイコンに気付かず、Gmailにはサポートリクエストが殺到するようになりました。 人は、自分に理解できないものを避けがちだし、ときには無視したりします。人間の本来の性質です。人を戸惑わせるようなインターフェース要素をデザインするのは避けましょう。それが何なのか知るために悩みたい人などいません。 2. 推奨操作の掟 何をすべきか分かれば、ユーザは安心する。 このTwitterの画面を見て何をすべきか、新規ユーザに分かると思いますか？ 当然、ユーザはツイートを始めるでしょう。でも、画面右上の「ツイート」ボタンは意味が曖昧だし（明確性の掟）、左のサイドバーの入力ボックスは周囲にまぎれ込んでいます。これはデザインの立場から見れば、Twitterがユーザに何かを検索させようとしているか、一番目立つインターフェース要素である左のナビゲーションメニューからオプションを選ばせようとしているように見えます。 ユーザに次に何をすべきか考えさせてはならないのです。推奨される操作が明確に示されるべきです。 3. コンテクストの掟 ユーザは、自分が使いたいオブジェクトの近くにインターフェースコントロールがあるだろうと考える。 Facebookで名前を編集するにはどうするでしょうか？　右端の「設定」に進んで、「アカウント設定」をクリックし、「名前」を探してから、「編集」をクリックします。LinkedInで同じことをするにはどうするでしょう？　名前の右側の鉛筆マークをクリックします。 ユーザはいつでも、使いたいオブジェクトの近くにインターフェース要素があるだろうと期待します。実生活でも同じことです。ポップコーンを作りたいときは、電子レンジの前に行って、レンジに付いているスイッチを回します。 電子レンジが、「階段を降りて地下室のドアを開けて電気回路ボックスを探し、スイッチG35を引いてポップコーンのプログラムを起動しなさい」と命令するなんてあり得ません（でも、Facebookの名前変更の例はそんな感じです）。 ユーザにとっての使いやすさを考えましょう。編集、変更などが可能なもののコントロールは、その近くに配置しましょう。 4. デフォルトの掟 ユーザは滅多にデフォルト設定を変えない。 Video: danielgill6 (via YouTube) この着信音に聞き覚えがありますか？　もちろんですね。かつて世界で最も人気のあった着信音です。なぜなら、これがデフォルトの着信音であり、人々がデフォルト設定を変えなかったからです。 デフォルトはパワフルです。 ほとんどの人は携帯電話の背景画像と着信音をデフォルトにしています。 ほとんどの人（あなたも含めて）は、テレビの購入時の設定を変えません。 ほとんどの人は、冷蔵庫の温度をデフォルト設定のまま変えません。 人々はデフォルトに気付きませんが、デフォルトが世界を支配しているのです。ですから、デフォルト値は、できる限り有用で実用的になるようにしましょう。人は決してデフォルトを変更しない、と仮定するのが安全策です。 5. ガイド付き操作の掟 ユーザは、頼まれれば、おそらくそのとおりにする。 ユーザが自力で何かをすることを期待するのと、具体的に指示してやってもらうのとでは、雲泥の差があります。 例えば、LinkedInは推薦機能を導入したとき、その使い方をユーザに考えさせるのではなく、プロフィールページの真上にとても目立つ行動誘引バナーを表示しました。このバナーが「人は推薦という行為を好む」という事実と結びついて、推薦機能は大成功しました。 教訓：ユーザに何かをしてもらいたかったら、迷わずお願いすること。 6. フィードバックの掟 明確で誠実なフィードバックがあれば、ユーザは自信をもつ。 簡単な論理です。インターフェースが操作を通知してくれていると感じれば、ユーザは自信をもちます。 良い例がGmailです。ユーザが何かの操作を行うたびに、Learn more（詳細）やUndo（取り消し）のリンクなど、明確な通知がフィードバックされます。人は自分の行動を掌握しているという気持ちになり、次も自信を持って、この製品を使おうと思います。 7. 緩和の掟 複雑な操作も、細かいステップに分かれていれば、やる気になる。 左のフォームと右のフォームを比べてみてください。どちらも入力フィールドの数は同じぐらいですが、右の方がずっと使いやすいのです。 長ったらしくて複雑なフォームに入力するのは退屈で面倒だし、見直すのも大変なので、誰でも嫌なものです。でも、フォームをいくつかのステップに分けて進捗状況バーを表示すれば、かなり操作しやすくなります。 これが緩和の掟です。大きな仕事を1つやり通せなくても、小さな仕事を10個ならできるのです。小さな仕事なら気後れせずにできるし、それができれば達成感が得られます。 掟かガイドラインか？ 私がこの記事で「掟」という言葉を使ったのには理由があります。この掟を破って好ましい結果を得られたケースを見たことがないからです。…

デザイン技術の中で、最も軽視されている要素が何か考えたことはありますか？　その答えは、他でもないユーザインターフェースです。良くも悪くも、ユーザインターフェースは至る所にあります。例えばウェブサイトや携帯電話、テレビ、腕時計、飛行機や洗濯機にも存在しています。 Photograph: zastavki ユーザがいれば、そこには必ずインターフェースがあります。つまり、イライラしているユーザがいれば、そこには大抵ひどいユーザインターフェースがあるということです。 グラフィックデザイナーやウェブデザイナーの仕事は、見栄えの良いものを作ることだけではありません。実際に使いやすく、ユーザインターフェースから受けるストレスを最小限に抑えたデザインを考案する仕事です。言い換えれば、ユーザがウェブサイトやアプリをどのように使うかを考え、人々の暮らしを快適にするために最善を尽くす必要があるのです。 ユーザインターフェースは適切に数個のボタンやリンクを並べたものだと、いまだに思っているのなら、考えを改めましょう。99designsでトップレベルの収益を上げているプロジェクトの中には、ウェブやモバイルアプリ向けのユーザインターフェースデザインだけで成り立っているものもあります。ユーザインターフェースは芸術であり科学でもあり、この分野で成功を収めている企業はごくわずかです（Appleは、そのうちの1社です）。 では、ユーザインターフェースデザインの最新トレンドを紹介していきましょう。 1. ミニマリズム ユーザインターフェースは何年もの間、ゴテゴテしたデザインでしたが、ここにきて原点に戻る傾向があります。少なくともGoogleやMicrosoftといった一部の有名企業はそうです。光沢のあるアイコンは1色またはテキストベースのボタンに変わり、凝ったグラデーションはシンプルなソリッドカラーの配色に置き換えられています。 Websites: Windows 8 (top), Pinterest (bottom) 大半のユーザは、このようなスッキリとしたデザインを大歓迎しています。こうすることでインターフェースは分かりやすく、ユーザの意図する操作の妨げになりません。 使用時のポイント： ミニマルデザインが最も効果的なのは、ユーザが作成したコンテンツがメインになるウェブアプリです。うまくデザインすれば、ユーザクレームが来ることはまずないでしょう。ただし、「この手法はシンプル過ぎる」と感じるクライアントも多くいることを知っておいてください。プロジェクトの開始前には、クライアントの好みを確認しておくと良いでしょう。 2. スキュアモーフィズム スキュアモーフィックデザインのユーザインターフェースを最初に世に広めたのはAppleです。そして、その後を追うように他の企業も次々とこのスタイルを採用しました。このデザインの手法では基本的に、昔ながらの慣れ親しんだ物の外観や機能を再現し、インターフェースをより直感的に理解できるものにしています。デジタルコンテンツを木製の本棚やブックカバーで表現したデザインは、スキューモーフィズムの典型的な使用例です。 Website: iBooks このようなスキュアモーフィック性の高いデザインを良しとするか否かについては、ユーザインターフェースのコミュニティ内で意見が割れています。中には、「現実世界の物を再現すれば、それに伴う限界も必然的に再現されるので、ユーザエクスペリエンスに悪影響を及ぼす」と言う人もいます。一方、「スキュアモーフィックデザインには短所もあるが、親しみやすさや親近感などの長所もある」という意見もあります。 使用時のポイント： モバイルアプリのデザインにおいて、スキュアモーフィックデザインは人気が高く、コミュニティでも広く受け入れられています。タッチスクリーンというデバイスの性質上、現実世界の物に触れているような感覚を得られることが理由の1つでしょう。一方、ウェブ上のアプリやプロジェクトにおいては、一般的にスキュアモーフィックデザインはあまり良い選択肢とは言えません。ただし、インターフェースを部分的に改良するために、このタイプの要素を使うことはあります。 3. レーザーフォーカス レーザーフォーカスタイプのユーザインターフェースでは、ウェブアプリを起動すると、必ず1つのタスクに視線がいきます。重要度が同じくらいのタスクが、複数表示されることはありません。この手法の一番の利点はシンプルさで、ユーザは瞬時にアプリの目的と、何をすべきかを理解できます。 Websites: Google homepage (top), Air B’n’B (bottom) 使用時のポイント： レーザーフォーカスの手法は、前面に出したい主要機能が1つあるウェブアプリやウェブプロジェクトにおいて特に有効です。この手法は、主に検索機能やブラウズ機能に使われますが、使用する際はクライアントに相談しておいた方が良いでしょう。 4. コンテクスト・センシティブ・ナビゲーション コンテクスト・センシティブ・ナビゲーションは、動的なユーザインターフェースと共に人気が出たもので、スッキリとしたデザインを実現するには最適の手法です。基本的に考慮すべき点は、画面に常時表示するナビゲーション要素と、特定の状態（アクション）時だけ表示する要素をどれにするか決めることだけです。 Website: Pinterest 例えばPinterestでは、ピンにカーソルを当てた時のみ、画像の上にアクションボタンが表示されます。Gmailでも同様に、ユーザがメッセージを選択した時のみ、アクションボタンが表示されます。こうすることで、アプリを実際よりもずっとシンプルに見せています。 使用時のポイント： コンテクスト・センシティブ・ナビゲーションは、ほぼすべてのプロジェクトに使用できます。ただし、リンクにマウスをかざしたり、アイテムを選択したり、ユーザが特定のアクションをするまで隠しておくボタンやガジェットは慎重に選びましょう。 5. 折りたたみ式コンテンツ こちらもユーザインターフェースをスッキリ見せるには最適な方法です。優先度の低いオプションやウィジェットを非表示にして、ユーザがあるリンクを選択した際に、それらを展開表示するようにします。 Websites: Google plus (top), 99designs…