ダサいアプリをUI/UX改善して今風にしてみた

      2016/05/26

matorelではcannaviと言うローン管理用のスマホアプリをMonacaで作ってリリースしています。

旧cannavi画面

cannavi_old

2015年末にリリースしたのですが、なんだかデザインがダサいし使いづらい。。。
と言うわけで、UI/UXを学び直して改善しました。

改善する為に気を付けた事や、役に立ったページ・ツールをご紹介します。アプリ制作に関しては経験が浅いので、プロの方が見るには物足りないかもしれませんがご容赦下さい。

ちなみにmatorelではMonacaを使ってハイブリッドアプリ制作をしていますが、ネイティブアプリでも役に立つかと思います。

iOSとAndroidのUI/UXを知ろう

iOSとAndroidが提唱しているデザインガイドラインはスマホアプリデザインの基礎中の基礎なのですが、恥ずかしながら前回は不勉強のままアプリを制作していました。
まずはそこから洗い直していきたいと思います。

まずはそれぞれのアプリデザインのガイドラインを熟読します。

iOS Human Interface Guidelines

Google Material Design

熟読しましたか?していませんよねw
iOSの方ならまだしもGoogleに関しては英語でとてもじゃないですが読み切れません。。。
ただ、Google Material Designは翻訳を見ながら説明動画をチェックするだけでも大変役立ちます。

それでも分かりづらいと言う方は下記サイトが参考になります。

Webデザインに関わる人は必読!初心者でもわかるマテリアルデザインの基礎 | ferret

Google の新しいデザインガイドライン「Material Design」 | クラスメソッド

なるほど。
何となく分かってきましたが、細かい所でiOSとAndroidで違うのがややこしい!
と思っていた所、大変分かりやすくそれぞれのガイドラインの比較をしているスライドを見つけました。

Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~

カラーコンストラスト比やボタンの大きさ、アイコンなどの違いがまとめられていて大変分かりやすい!!

さらに、UIOHMYと言うサイトでは色んなアプリのiOS用・Android用の画面が掲載されていて比較しやすいです。

UIOHMYscreenshot-uiohmy.com 2016-05-25 21-33-35

 

アプリのスタイルガイドを作ろう

ある程度各OSのUI/UXを理解したところで、自分のアプリのスタイルガイドを作ってみます。

スタイルガイドを作成するツールは色々と出ていますが、今回使ったのはブラウザ上で簡単に作成できるFrontifyというサービス。

Frontifyscreenshot-app.frontify.com 2016-05-25 21-34-45

使い方の説明は下記のブログが大変詳しいです。

ブラウザー上でスタイルガイドが作れるFrontifyを試してみた | Webクリエイターボックス

少なくともここでロゴと配色(基本色・強調色)、フォントくらいは決めておきましょう。
アプリデザインの基準となる部分を熟考しておくと後々大変助かります。

もっと色々な項目をしっかりと決めたい!!と言う方は下記のブログが参考になります。

効率的なアプリ開発のためにデザインガイドラインを作成した話 | VASILY DEVELOPERS BLOG

ロゴ・アイコンを作ろう!!

アプリのロゴ・アイコンに関してもiOSとAndroidでデザインが変わって来ます。

iOSのアイコンガイド

Androidのアイコンガイド

使ったツールとしては下記サイトのテンプレートです。
そのOSらしいデザインが最初から用意されてたり、リリース時に必要となるサイズが一度に作れたりして大変便利です!!

App Icon TemplateApp Icon Template [5.0]

ただ、今回cannaviでは共通のアイコンを使用しております。(Monacaでは別々のアイコンを設定できますが)
"ローン管理アプリ"と言う事で折れ線グラフと棒グラフを組み合わせ、運営元の頭文字"M"の形にしたアイコンにしました。

iOSとAndroidの両方の要素を取り入れたデザインになったのではないかと自己満足しております。

アートボード 1

配色を決めよう!!

色に関しては、

  • アイコンやステータスバーなどに使う基本色(プライマリーカラー)
  • ボタンなどに使う強調色(アクセントカラー)
  • その他のバリエーション

を最低限、決めておきましょう。

下記のサイトが、マテリアルデザイン用・フラットデザイン用などの配色見本がまとめられていて便利です。

Material UIscreenshot-www.materialui.co 2016-05-25 22-01-22

プロトタイプツールでUI/UXを決めよう

次はアプリの動きの部分を決めていきます。特に画面遷移は、それが階層移動なのかカテゴリー移動なのかなどで相応しいアニメーションが変わってきます。
スライドなのかリフトなのかモダールなのか、もしくはアニメーション無しなのか。しっかりと意識しながら決めていきましょう。

ここで使ったツールはProttです。
プロトタイプツールは世の中に沢山ありますが、Prottに関しては複雑過ぎず直感的に操作が出来て大変気に入っております。

Prott

使い方は下記ブログが分かりやすかったです。

UIデザインが捗る!Prottでスマホサイトのプロトタイプを作成しよう | LIG

cannaviでは、まずは手書きで用意したラフをProttoアプリへ取り込みUXを決めていき、その後しっかりとしたデザインを用意して検証しました。

リニューアルしました!!

今回の記事はUI/UXに関してですので、デザインや実装に関しては割愛させていただきます。

ただcannaviのデザインに関しては、ワンソースのハイブリッドアプリの為iOSとAndroidで基本的には同じものです。せっかくそれぞれの違いを学んだのですがイマイチ発揮できず。ちょうど中間くらい感じで作りました。雰囲気としてはiOS版のGoogle系アプリのような。

newcannavi
なかなか使いやすくなって、見た目も今風になった気がします。満足満足!

ぜひダウンロードして使ってみてください。

App Storeでローン完済ナビゲーションcannaviをダウンロードする

The app was not found in the store. 🙁 #wpappbox

Links: → Visit Store → Search Google

Google Playでローン完済ナビゲーションcannaviをダウンロードする

 

今回紹介させていただいた各ブログ様、サービスには大変お世話になりました。

 - monaca, アプリ開発 ,