モバイルUIとは

最近聞くことの増えてきた「UI」という言葉をご存知でしょうか。

UIとはユーザーインターフェイスの略です。

インターフェイスは直訳すると「境界面」や「接点」という意味があります。

異なる2種類以上のものをつなぐ、共用部分のことをインターフェイスと呼びます。

わかりやすい例で言うと、PCとモニターをつなぐケーブルのことなどのことを指します。

そして、「UI」（ユーザーインターフェース）は、モノとその利用者であるヒトを結びつける役割のあるもののことを指します。

サイト上のデザインや文字、ボタンなどは全て「UI」ということになります。

昨今ではiPhoneのようなスマートフォンの利用者が激増し、ネット検索をする際にPCを使わずスマートフォンを使用することが主流となりました。

本記事のタイトルであるモバイルUIとは、正しくは「モバイル端末（スマートフォン）の利用者向けのUI」のことを指しています。

具体的にはOSやアプリの表示画面や操作方法のことを指します。

モバイルUIの意味を理解していただいたところで本題の「見やすくて使いやすいモバイルUI設計のポイント」を解説していきます。

UIと一緒に覚えておきたいUXという言葉

UIという言葉と同じくらいよく聞くようになってきた「UX」という言葉にも触れておきましょう。

UXとはユーザーエクスペリエンスの略です。「利用体験」と直訳することができます。

製品やサービスを利用し、得ることができる体験のことを指します。

使いやすさや使い勝手、使い心地などのことも含めた総称として使われます。

モバイルUIの設計をする際には、折角ならユーザーに快適に使っていただきたいと思います。UXも意識しながらUI設計をしましょう！

モバイルUI設計のポイント

モバイルUIの設計をするにあたり大前提となるのが、スマートフォン利用者が心地よく使用できる設計をしなければならないということです。

・基本的にマウスではなく指で操作をするという点

・PCと比較して端末のサイズが小さく画面が小さいという点

・タップやスワイプ、スクロールなどの様々な操作があるという点

以上のような制限があることをしっかりと理解していただき、見やすくて使いやすいデザインを創りましょう。

1.まずはペルソナの作成をしよう！

ペルソナ（サービス・商品の典型的なユーザー像のこと）を作成せずにサービスを設計することはできません！

モバイルUIの設計だけでなく、どんな業種・職種でもペルソナの作成はとても重要視されています。

今からあなたがデザインするサービスを利用する方は一体どんな人でしょうか。

性別・年齢・職業・趣味・家族構成・収入など、事細かにペルソナを定めることで、より正確なターゲティングをすることができます。

正確にペルソナを定めると、サービスの内容が適しているかどうかを再度確認することもできますし、色の使い方やボタンの形を丸みを帯びたものにするか角張った形にするかなど、デザインの大枠も決めることができます。

2.機能を絞り込もう！

サービスの内容が定まったら、次に機能を絞り込みます。

ユーザーの使用するデバイスはスマートフォンです。

限られたスペースのなかで、より良い使用感を追求するためには、重要度の高い機能だけを抜粋して使う必要があります。

3.指での操作に適した構成で設計しよう！

指でのタッチ操作がメインとなりますので、指のサイズ感をしっかりと想像した上でUI設計をする必要があります。

・小さいボタンは押し辛い

ボタンサイズは、メインボタンが縦幅44px～、サブボタンは縦幅36px～目安に作成しましょう。

AppleやGoogleからAPPをデザインする際の指針として、UIガイドラインが作成・公開されていますので、気になる方は参考にしてください。

別の観点からボタンのサイズを考えるとするならば、人間の指の腹のサイズに合わせてボタンを作成するという方法もあります。

指の腹の平均サイズは直径約10mmですので、そのくらいのサイズ感でボタンを作成すれば使用感を損なうことは避けられるでしょう。

しかし、全てのボタンを同じ大きさにしてはいけません。

　高優先度ボタンは直径72px

　中優先ボタンは直径60px

　低優先度ボタンは直径44px

このようにボタンのサイズに変化をつけることで、押しやすいボタンを作ることができます。

・タップできる箇所をわかりやすく表現すべし

スマートフォンでの操作はマウスを使って正確にクリックをできるPCとは違い、指でのタップが基本となるため、どうしてもアバウトになってしまいます。

そのため、押し間違いが起きないように、タップすべき箇所を大きくすることが必要になります。

また、文字列だけではタップできる場所なのかどうかを判断し辛いため、枠線や塗りつぶしを使うことでボタンとして認識されやすい表現をしましょう。

・余白をうまく使おう

スワイプやスクロールをする際には画面を指で触って動かしますので、画面全体がボタンなどで埋め尽くされていると、誤ってタップしてしまい意図しない画面に飛んでしまう可能性があります。

画面端全体やボタン、画像の周辺に余白を残しておくことは、良い使用感を生み出すことにつながります。

ボタンの間隔にも目安があります。

　大ボタンの場合は12~24px

　中ボタンの場合は24~36px

　小ボタンの場合は36~48px

小ボタンの間隔を広くするのには理由があります。

大きなボタンの場合は指がボタンのセンターからずれていた場合でもタップする事ができますが、小さいボタンの場合はそうは行きません。隣のボタンを誤ってタップしてしまう可能性を下げるため、間隔を広くとる必要があります。

余白をうまく使うことはデザインの基本でもありますが、UI設計においては更に重要な項目になってきますので、必ず意識して使うようにしてください！

4.画面の小ささを考慮した設計をしよう！

スマートフォンの画面はPCのモニターと比較して小さいです。

PCだったら横に何列も並べて表示できる画像も、スマートフォンではサイズを大きくして横には並べず縦に1枚ずつ表示するなどの対処が必要です。

最近はスマートフォンWEBデザイン用のアートボードサイズを375pxに設定するすることが主流となっています。

また最近の最新スマートフォンにはRetinaディスプレイという高解像度でハイコントラストな色彩表現を可能としたディスプレイが使用されています。

このRetinaディスプレイに適したデザインをするためには、png形式やjpg形式などのビットマップ画像を2倍のサイズで準備しなければならないという特徴があります。

これは簡単にいうと、Retinaディスプレイは以前のディスプレイと比較して解像度が2倍になっているので、その分画像側を大きくしなければ荒くなってしまうからということ。

次の項目と少し重複しますが、流行りの機種の仕様に合わせたデザインをし続けることが最も大切だと言えるでしょう。

5.流行に乗る！これにつきる！

技術の進歩のスピードが激化している今の世の中。

オンラインの世界では教育、ショッピング、リモートワーク、娯楽など様々な分野で、急速な変化が生まれています。

WEBデザインの流行の移り変わりはとても早いです。

世の中の変化に敏感になり、よいサービスを発見したときには徹底的に真似をすることが必要になります。

大手ブランドの作成したデザインの構成を真似してサービス作りをすることは決して悪いことではありません。

好きな俳優の髪型や服装を真似るように、技術を盗んで成長しましょう。

まとめ

モバイルUI/UXの解説、そして実際にモバイルUIを設計する際のポイントを解説してきました！

モバイルUI設計をする中で、やはり一番大切にすることは、ユーザーの気持ちになってデザインするということです。

使用者が心地よく快適に利用できるサービスを作ることができればそれが一番です。

そしてそのサービスを、トレンドにあわせて進化させることができればより良いですね！