モバイルアプリの基本-アイコンとページ遷移のいろは-

こんにちは。新しいコミュニケーションを届ける通話相談アプリ『Teleddy』のデザインチームです。

 Teleddyのデザインを通して、モバイルアプリのデザイン/UI・UXデザインの面白さをお伝えします。

モバイルアプリのデザインとはストーリーを考えること

モバイルアプリのデザインはいわゆるデザイン界の巨匠グラフィックデザインやプロダクトデザインとは別の分野であると考えることができます。グラフィックデザインといえば街を占有する広告デザインやオリンピックのロゴに宣伝ポスターなど、プロダクトデザインといえば手元のペンから憧れのカーデザインまで。

ここではモバイルアプリのデザインやWebサービスのデザインを含めて仮にデジタルデザインと呼びますが、このデジタルデザインの最も重要なことの一つは時系列を考慮することです。

時系列を考慮するとはどういうことか。具体的にアプリを操作する場面を想像してみましょう。

例えばあなたがあるアプリの"マイページ"にいるとして、
「さあプロフィール画像を変えよう！」
と思ったとします。（よくある風景ですね）

あなたはまずプロフィールを編集できるページを探すでしょう。
すぐに見つかることもあれば、いくらかボタンをタップしてようやくたどり着くこともあります。

編集ページにたどり着いて、いろんな編集項目の中から画像変更の手順を踏みます。
画像は今カメラで撮るのか、それとも写真ライブラリの中に保存しておいた画像にするのか、選択します。
無事好みの写真を選べたら、保存を押して、またマイページに戻り、見栄えを確認します。そして作業を完了します。

こうして、あなたはアプリの中でいくつもの画面を移動しながら、作業を行います。
チャットをする時も、何かを投稿する時も、友達の投稿を確認する時もとにかく画面上の移動、移動、移動を繰り返し作業をしています。

モバイルアプリのデザインは、ユーザーが画面を渡り歩く時に、どこに行けばいいのか途中で道に迷ってしまわないようにすることが大切です。
アプリの上を無駄に行ったり来たりするのはとてもイライラするので、できるだけスムーズに移動できるように心がけます。

スムーズな移動を実現するためにアイコンとページ遷移を考える

どうしたらスムーズに移動できるアプリになるのでしょうか？

答えはとてもシンプルで、いろんなアプリを触ってスムーズな移動についての知識を貯めておくことこれにつきます。とは言ってもいきなり何を考えたらいいのかわからないこともあるのでスムーズな移動を考えるヒントとして「アイコン」と「ページ遷移」をキーワードに考えてみましょう。

アイコンが適切か？

モバイルアプリは”アイコン”が多用されます。現実のものであれ、例えば自転車を見ると、ここに足を置く、ここに手を置くという判断を自転車の形から理解することができます。しかしデジタルデザインの世界では物の形状は常に２次元で自転車のように人間の身体に即した形にはできません。

その代わりに「アイコン」つまりマークや印やラベルを使って、ここを押せばこう動くと言うのを説明します。

このアイコンは移動した先のページを適切に表現しているか？ユーザーが想像する通りの操作に辿り着けるか？というのはとても重要です。あまりに当たり前のことですが、不適切な絵をおいてしまうと違和感も大きなものになります。

普段モバイルアプリを操作するとき、アイコンの形状に対してどんな操作結果を期待しているか注意深く観察してみましょう。観察できることはいくつもあります。アイコンの形・色・線の太さ・登場頻度・隣に置かれているアイコンとの兼ね合い・ラベルの適切さ・地の色とのコントラストなどなど、よくよく観察していくと、なぜその操作を期待したのか、何がトリガーになっているかが見えてきます。

ページ遷移は適切か？

よく使われる操作なのに階層奥深くのページにあって、ユーザーがなかなか辿りつけなかったり、かと思えばあまり使われない操作なのに、目立つページに置かれて誤った操作を誘導していたり。ページの遷移数が少なければ少ないほどこのアプリの特徴的なメインの操作が置かれ、ページ遷移数が多くなるに連れてあまり頻度の多くない操作ができるようにされているべきです。電話アプリであれば、発信の操作はアプリの中の目立つところに置かれ、アカウントの名前変更など滅多にされない操作はいくつかのページ移動の先に置かれます。

モバイルアプリに特徴的な下のバーにある3~5つほどのアイコン。これはアプリの主要なページを１タップで移動できるいわばメインの操作です。ここに置かれるページはどれもこのアプリを特徴と主要な操作を伝えるものであることをユーザーは期待します。ここのスペースは貴重なスペースです。どのアイコンを置くのかどのページに遷移させたいのかは適切に選ばなくてはなりません。

また１ページに多くの操作を配置したり、貴重なスペースに無闇にアイコンの数を増やすことは危険です。一度の選択肢を増やすとそれだけユーザーに選ぶ負荷をかけることになります。ユーザーにとって、何か目的へ向かって作業する時はできるだけ選択肢が少ない方がスムーズであると感じます。

以上のことからアプリの画面設計を考える時は、あまり使われないページを上手に整理・カテゴライズして階層の奥へしまい、必要最低限の重要なページを表に配置することが必要になります。

＊＊＊＊＊＊＊＊＊＊＊＊

アプリの操作のスムーズさというのは実は計測してみたら1秒にも満たないことです。

脳の判断はとても早いです。
皆さんも違和感があるかないかはそんなにじっくり考えずに、パッと感じとるものですよね。

ちょっとでも違和感を感じると、作業時間は1,2秒ほどしか変わらなくても、脳はますます疲れていき利用のモチベーションを下げることに繋がっていきます。
普段からアプリを利用して、こうしたちょっとした違和感を感じる瞬間を意識してみると、自分のアプリのデザインにもよく生かされるでしょう。

少しマニアックなIconographyの世界

アプリ独自のアイコンを作ることはブランディングにおいて重要です。

『Teleddy』のアイコンたちもオリジナルに作成されています。そのアイコンたちはスラっとした大人っぽい顔を意識した細いラインと緩急のある変化を特徴的としています。

Teleddyのアイコンでは奇を衒わず一般的な形に整えることを大切にして作られました。見慣れない・馴染みのない形を使ってしまうと惑わせる原因になります。一般的なモチーフの中で、随所随所のディテールに気を付けること、複数のアイコンの統一感を意識することで、アプリらしさが補われていきます。

アイコンの形の統一感の基本的な考え方はテキストのフォントと同じです。角の丸み、一番細い部分・一番太い部分の太さ、頭と胴体に喩えられる部分の比率などを考慮しています。iOSのアイコンとAndroidのアイコンにはよくよく見るとそれぞれの特徴があります。

上記のようにアイコンはデジタルデザインの中で重要な役割をはたしているので、その形についてもしつこく愛着をもって制作することでデザインに一貫性を生み、ユーザーにも理解しやすいデザインとなります。

スキ・フォロー・コメント・アプリのインストールよろしくお願いします！

HP： https://teleddy.com
Instagram：https://www.instagram.com/teleddy_official/
Twitter： https://twitter.com/teleddy_jp

アプリのインストールはこちら
AppStore: https://apps.apple.com/jp/app/teleddy/id1468250007
GooglePlay: https://play.google.com/store/apps/details?id=com.linoft.teleddy