freshtrax

ビートラックスがサンフランシスコから最新情報を配信中

  • Brandon K. Hill

    Brandon K. Hill

    CEO of btrax, Inc

    CEO of btrax, Inc - Design Mentor to Startup Weekend - Contributor to TechCrunch Japan - Guest Speaker at UC Berkeley Asia Business Conference - Guest Speaker at Social Media Week Tokyo - Guest Speaker at 500Startups Japan Day

  • → 記事一覧

    • このエントリーをはてなブックマークに追加
    • follow us in feedly
main-pic

モバイル向けUI/UXデザイン10のポイント

日々めまぐるしく変化するモバイルマーケットにおいて、スマートフォンアプリやモバイルWebのUIやUXを最適にデザインする事は、そのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく、操作性が非常に高いモバイルサービスが次々とリリースされ、ユーザーが求めるクオリティレベルも上がっている。小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。

1. レイヤースタイルのUIで奥行きを出す

1

モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイルのUIを活用する事で,機能やコンテンツを立体的な感覚で効果的に整理する事が可能になる。表示スペースがかぎられているからこそ、平面以外の表現方法を有効活用したい。

2. 表示情報の整理にはスペースを上手に活用し、なるべく線の利用を避ける

2
画面の小さなモバイルデバイス向けのUIデザインの基本はなるべく表示要素を少なくし、必要最低限のインターフェイス要素にとどめる事。モバイルのUIをシンプルでクリーンに見せるには、なるべくUIに線を使わない。その代わりに上手にスペースを活用する事で、スタイリッシュなコンテンツ表現が可能になる。上手にレイアウトをデザインすれば、実際の線を使わずに、”目に見えない” 線を生み出す事が可能になる。

3. ページの行き来やメニュー動作にはスワイプを基本にする

3
マルチタッチパネルのモバイルデバイスは、タップするだけではなく、スワイプでページの行き来が可能である。ユーザに対してより使いやすいUXを提供するには、前に進むだけのタップよりも、前後の行き来や消去、シェアなどの複数のアクションが可能な、スワイプを採用するのが効果的。PCではほとんど使われていなかったスワイプアクションによるナビゲーションも、モバイルにおいてはスムーズなUXを実現する為に最適な方法である。どんなアプリでも、操作の基準は一つの指でサクサク動く事が重要。

4. アプリ操作は基本的に親指一本で可能にする

4
スマホなどのモバイルデバイスは通勤中、仕事中、食事中、徒歩での移動中など、実に様々なシーンで利用される事を想定する必要がある。その場合、両手でデバイスを利用出来るケースはすくなく、むしろ片手の親指だけでもほとんどの操作を行う事が出来れば、非常に使いやすいアプリとなる。逆に2本以上の指を使わなければならない機能の実施は極力避ける。最低でもコアな機能は必ず片手の親指一本だけで操作出来る様に設計する事。

5. モバイルUIに使われる色の数は極力少なくする

5
UIに多くの色を利用するとユーザーを混乱させる原因となる。特に太陽光の下や暗い場所で利用される事も多いモバイル向けのUIをデザインする場合は、UIに使う色は出来る限りベース2色+アクセント1色の3色以下、もしくは同じ色味の統一したカラースキームを利用したい。そうする事で、UI自体が必要以上に主張する事無く、ユーザーのフォーカスを機能やコンテンツに集める事が可能になる。

6. アイコンの基本スタイルは一色のアウトライン&べた塗りスタイル

6
よりユーザーにナチュラルな利用体験を提供する為に、選ばれているアイコンと、そうでないものを極限まで分かりやすく表現する必要がある。その為にはカラーを一色のみに抑え、スタイルも選ばれていないアイコンはアウトライン、選ばれた場合はべた塗りスタイルを採用する。こうする事で、ユーザーに対して直感的なUXを提供する事に近づけられる。PC向けに使われていた複雑なアイコンのデザインはモバイルUIには向いていないので注意。

7. アニメーションはかなりクオリティの高いものでなければ採用しない

a b

直感的なインターフェイスを実現する為に、アニメーションや動的エフェクトを効果的に採用しているアプリがある。例えば利用方法を説明するチュートリアルにちょっとしたアニメーションを活用したりする。人の目は動く物にフォーカスされる特性があり、画面に”動き”を持たせた瞬間に伝えられる情報量が格段に増える、その一方で、少しでも分かりにくいアニメーションあyエフェクトになると、間違ったメッセージが伝わり、ユーザーを混乱させる原因となるので、中途半端なクオリティーのものは安易に利用しない方が良い。

8. 1つのアプリに対して採用するフォントフェイスは1つが原則

8
シンプルで分かりやすいモバイルUIを実現する為に、利用するフォントの種類も1つに抑えたい。AppleがiOS7で極細のヘルベチカを採用したことで、UI全体の統一性がアップした。これにならい、アプリをデザインする際には1つのフォントスタイルを共通で利用し、それぞれのケースに応じてウェイトを変えるのが良い。

9. ブラー (ぼかし) エフェクトを効果的に利用する

9
UIに対して効果的なレイヤーやヒエラルキーを実現する為に、ブラーエフェクトを利用したい。例えばメニューやページの行き来に採用する。これによりUI全体に3D的な深み表現が実現でき、直感的なユーザービリティ実現をサポートする事が出来る。また、UIの背景に関連したコンテキストの表示する事で、ユーザーに対して直感的なUXを提供する事も可能。

10. ファブレットデバイスを視野に入れる

10
ファブレットとは、タブレットとスマホの中間のサイズのデバイス。2014年よりより大きな画面のスマホ、もしくはコンパクトなタブレットのニーズに対応する為にサムソンのGalaxy Note 3を代表とするAndroid系デバイスの一カテゴリーとして普及し始めている。これからより一般的に広がると思われているファブレット向けのUIやUXをデザインする際には、タブレットより小さく、スマホより大きな画面に最適な設計が必要になってくる。

 

筆者: Brandon K. Hill / CEO, btrax, Inc.

【CEOによる無料オンラインセミナー開催のお知らせ】

ビートラックスでは毎月定期的に無料オンラインセミナーを開催しております。「シリコンバレーのイノベーションメソッド」を大きなテーマに、鋭いデザインとビジネス、テクノロジーの感性を持つ同社CEO, ブランドン・ヒルが毎回1つのトピックについて話します。

>> btrax CEO 無料オンラインセミナー詳細はこちらから

photo by Juhan Sonin

■ btrax (ビートラックス) 社について■

btraxはサンフランシスコを拠点とし、世界の市場をターゲットにデザインソリューションで4つのサービスを提供しています。

  • Global Design Consulting
    世界市場に響くデザインソリューションでビジネスのグローバル展開をサポート
  • Innovation Program
    グローバル人材育成から新規事業開発までイノベーションに関するノウハウとメソッドを提供
  • D.Haus
    人と技術をデザインでつなぐコミュニティ型ワークスペース
  • VentureBeat Report
    最新のシリコンバレーのトレンド&分析レポートを企業向けに提供。プロフェッショナルライターによる深い洞察と定性的・定量的データに基づいた分析レポートをお届けします。

私たちはイノベーションを創造し社会に新たな変化をもたらすことを社会的使命とし、お客様に最良のパートナーとして選ばれることを目標にこれからも挑戦し続けます。

btraxホームページ
btraxブログ「freshtrax
tokyo@btrax.comまでお気軽にお問い合わせください!

 

【日本の企業に世界最高のメソッドを】イノベーションプログラム

サービスデザインを提供するbtraxでは、イノベーションの最先端を行く本場サンフランシスコ・シリコンバレーにて、海外展開のノウハウ、新プロダクト・サービス発案のメソッド、優れたデザイン、マーケティング手法、スタートアップ企業とのネットワーキング等を直接体験をするイノベーションプログラムを開始しました。詳しくはこちらから。資料請求はお気軽にtokyo@btrax.comまでご連絡下さい。
 

Like us on Facebook

Scroll to top

シリコンバレーから最新情報をゲット!

 

btrax-logo-100

サンフランシスコに本社を構えるクリエイティブエージェンシーbtraxのニュースレターに登録して最新の情報をいち早くゲットしませんか?

 

・オウンドメディアfreshtrax 今月の注目記事

・CEO Brandonの無料オンラインセミナー情報

・最新サービス・現地イベント情報

 

Subscribe!