こんにちは！Maki (@deseno_m) です。
「スマホでのコンポーネントの使い方が知りたい！」
「主要なコンポーネントのまとめを見ておきたい！」
「Androidアプリ、iOSアプリでのコンポーネントの違いを確認したい！」
そもそもコンポーネントって？
コンポーネントとは、画面上に表示されているUIパーツのことです。
どのようなコンポーネントがあり、それらをどう組み合わせると画面をレイアウトできるのか認識しておきましょう！
- Human Interface Guidelines=iPhone/iPadに使われているAppleのiOS
- Material Design=Pixel3/Galaxy/Xperiaなどで使われているgoogle社のAndroid
大きくわけて上記の2つのプラットフォームがあり、それぞれにアプリのデザインに関するドキュメントが存在します。
コンポーネントの主要5種類
ナビゲーション – Navigation
ナビゲーションとは画面と画面を行き来（画面遷移）するためのコンポーネントのことです。
タブバーを使って他のコンテキストの画面に移動する場合や、リストやバックボタンを使って異なる階層の画面に移動する場合に使います。
ここからはナビゲーションの中の主な4つの要素について紹介していきます。
ナビゲーションバー – navigation bar
スマホアプリの場合、ヘッダーで利用する代表的なコンポーネントを
- ナビゲーションバー（iOSアプリ）≒ TopAppBar(Androidアプリ）
と呼びます。
Androidでナビゲーションバーというと、基本操作をするための共通ナビゲーションのことを指すので、コミュニケーションの際は注意が必要です！
iOSアプリではナビゲーションバーに
- 中央：画面のタイトル
- 左上：バックボタン/クローズボタン/ドロワー表示ボタン
- 右上：別の画面への導線/サーチバーなどに切り替えるアイコン
をよく配置します。
Androidで使用されるTopAppBarはナビゲーションとしてだけでなく、画面でのアクションを表示する役割（ContextalActionBar）もあります。
AppBarは画面下部でも利用でき、その際はBottomAppBarと呼ばれます。
タブバー – tab bar
画面下部に固定して配置し、別の画面へ横断するために使うナビゲーションバーのことで、
下部に配置することでユーザーが素早く操作できるようになっています。
iOSではタブバー、AndroidではBottom navigationと呼びます。
ナビゲーション以外にも、カメラ起動など、重要なアクションが配置され、常にどこか１つが選択された状態になっています。
タブ – Tab
タブはAndroidでTopAppBarの直下によく利用されるコンポーネントです。
タブバーと異なり、画面をスワイプすることで画面移動でき項目が多くなっても使用できるのが特徴です。
iOSではタブバーとタブを併用し、
- タブバー：一番上層のナビゲーション
- タブ：タブバーの下層ナビゲーション（画面上部に配置）
として利用することがあります。
また、タブに近い役割として、iOSではSegmented Controlsと呼ばれるナビゲーションがあります。
項目数に限りがありアイコンの使用できないのですが、タブバーの下界層の画面の切り替えとして利用することができます。
ドロワー Drawer
ハンバーガーメニューをタップする、または画面を右にスワイプすると、横からメニュー項目が表示されるナビゲーションの一部です。
- メリット：元の画面を広く利用でき、たくさんの項目を配置できる
- デメリット：画面を隠してしまい、別の画面に遷移するのに一手間かかる
として利用することがあります。
主要なナビゲーションにするには使い勝手があまりよくないがメイン画面を広く活用したい場合や、ナビゲーションの重要性が低い場合に検討するのが良さそうです。
バー – Bar
ナビケーションバー、タブバー、スマホの電池残量や時刻、通信状態などを表すステータスバーなどがあります。
主要な２つを紹介していきます！
サーチバー – Search Bar
サーチバーはその名の通り、検索のためのコンポーネントです。
ブラウザで使われているアドレスバーが最も身近で、URLのほか、ユーザーが直接入力もできます。
ツールバー – Tool Bar
画面に表示されている操作ボタンが並んでいるコンポーネントです。
タブバーとの違いは以下です。
- タブバー：画面の移動で使用するコンポーネント
- ツールバー 画面のコンテンツを操作、アクションするためのコンポーネント
ボタン
みんなもよく知っているボタンはアクションや入力完了の場面で使用します。
主なボタンの種類は以下の３つです。
- プライマリボタン：画面においてもっとも重要なアクションをするためのボタン
- セカンダリボタン：同一画面内で２番目以降に重要なアクションをするためのボタン
- テキストボタン：枠や背景をつけない文字だけのボタン
上記の差をつけるために、
プライマリボタンでは、他の要素と認識しやすいようブランドカラーやコンセプトカラーを使用するのも良さそうです。
セカンダリボタンでは、配置しているバックグラウンドカラーとコントラストを抑えることで、プライマリボタンとの差をつけることができます。
他にも、右下部に浮遊させ、サービスのメインのアクションの引き金として使用したりもします。
AndroidではFloating Action Buttonとよばれています。
補助要素
ここでは、単体で使用せず別の要素と組み合わせたり、ボタンをタップした際のアクションのフィードバックを知らせるために使用したりする、補助の要素をまとめていきます。
ユーザビリティを上げていくために、補助要素を適切に使用することが大事になっていきます。
インジゲータ
ユーザーがアクションをした際、実行の進捗を伝えるためのコンポーネントです。インジゲータは、ユーザやシステムが行なっている操作の進捗を、曲線や直線のバーによって表します。
スピナー
インジゲータと同様、スピナーもユーザーがアクションをした際に。実行の進捗を伝えるためのコンポーネントです。
主にシステムが読み込み中や表示中の状態であることを表し、色の濃い部分が繰り返し動くようになっています。
インジゲータとスピナーは下記のような使い分けができます。
- インジゲータ：読み込み時間が長い時に使
呼び方：iOS→Progress Bars
Android：Progress indicators/Determinate - スピナー：読み込み時間が短い時、または読み込み時間が想定できない時に使用
呼び方：iOS→Actuvity idicators
Android：Progress indicators/inditerminate
一般的にユーザーがスピナー状態を待てる時間は４秒未満と言われています。それ以上かかる場合はインジゲータを使うのが良さそうです。
また、スピナーの表示時にユーザーが他の操作ができない場合は、キャンセルボタンを用意したり、操作が完了しない場合はタイムアウトするようにするとよりユーザーが使いやすいUI設計ができます。
ダイアログ
ダイアログはユーザーに必ずしてほしいアクションがある場合に使用するコンポーネントです。そのため、ダイアログが表示されている間は元の画面の操作ができなくなります。画面遷移するナビゲーションと異なり、元の画面が残った状態にかぶせて一時的に確認や操作をさせます。
操作が完了すると以下の２パターンの動きになります。
- ダイアログが閉じて元の画面に戻る
- ダイアログ上で行なった操作に基づいて元の画面から移動し、ダイアログは消える
ダイアログを多用し、画面を重ねすぎると操作が煩わしくなることがある、ダイアログを使った後に別のダイアログを表示していかない、など、利用頻度に気をつけて使う必要がある
アラート
ダイアログの中でも注意・警告を表すコンポーネントです。
に、操作が完了する前にこのコンポーネントを使うようにしましょう。
ちなみに…
・モーダル：応答しない限り元の画面の操作に戻れないという「制御」にフォーカスした単語
・ポップアップ：突然現れるという「表示の仕方」にフォーカスした単語
・ダイアログ：ユーザーに情報を伝えて、それに対して応答を得るという「やりとり」にフォーカスした単語
(参考：【初心者向け】モーダル・ポップアップ・ダイアログの意味の違い)
アクションシート
iOSアプリ上で、コンテンツに対して、確認・警告以外の目的のアクションを提示する際に使用します。
アラートは単一のアクションを表示するのに対し、アクションシートは複数のアクションを提示します。Androidでは、BottomSheetというコンポーネントでアクションシートと似た使い方ができます。
トースト
トーストは主に画面下部に表示され、操作や状態変更が完了した後に使用するコンポーネントです。元の画面は操作できるため、ユーザーの行動を防ぐことはできません。
Androidではフィードバックに対して１つのアクションをつけることもできるSnackbarと呼ばれるコンポーネントで似たような使い方ができます。完了した操作をもとに戻したい時や、操作を再度実行する時に使えます。iOSでは標準コンポーネントはありません。
ツールチップ
機能の説明や言葉の意味など、画面上に常に配置する必要はなくても、詳細情報を伝えたいケースで使用するコンポーネントです。ユーザーが特定の要素にマウスカーソルを合わせた時に表示させたり、小さな吹き出しを使って情報を表示します。
マウスオーバーやの際表示したり、アイコンなどの小さな要素を使用して情報があることを示したりするため、細かなカーソル操作やタップがしやすいPCやタブレットで利用することが多いコンポーネントです。
ポップオーバー
元の画面に対しての操作をおこなったり、状況変化や補助機能などを表示するコンポーネントです。
ツールチップ同様、iPadやPCなど画面が広いデバイスで利用することが多いです。
繰り返す要素
サービスで必ず一度は使用される基本的なコンポーネントの一つです。複数の連続する要素を配置する際に使用します。ここでは主に使い分けについてまとめていきます。
リスト
一覧やホーム画面などで、同じ要素を繰り返し表示するシンプルなコンポーネントです。
主に次のようなタイプがあります。
- テキストなどを縦方向に向かって要素を並べていくタイプ
- 写真などを格子状に配置するグリッドタイプ
- 写真などを横に表示していくカルーセルタイプ
iOSではテキストを横に並べていくコンポーネントをTable View、写真などをグリッド表示するコンポーネントをCollection Viewと呼びます。
またアプリでは、写真や画像などをコンパクトに表示したい場合に、画面外の横方向に配置するカルーセルタイプもよく使用されます。ただ、隠れている部分がユーザーから見えにくいというデメリットもあるため、メリットデメリットを吟味してから使用するのが良いですね。
テーブル
Excelのように行と列で情報が構成されていて、複雑な情報を扱いやすいコンポーネントです。テーブルは要素が増えたり、入れる中身に応じて横幅が長くなりがちになるため、横幅い制限のあるスマートフォンなどとの相性があまりよくないため注意が必要です。
カード
関連するコンテンツを一つにまとめ並べるコンポーネントです。
Material Designでは「紙」をメタファーとして考えられているため、カードをよく利用します。またカードは多くの情報を表示する場面で使うことで、切れ目が明確になりわかりやすくなるメリットがあります。
ページネーション
繰り返す要素が１画面に収まりきらない場合に続きを表示するコンポーネントです。
「次のページ」「前のページ」など前後のページに移動するナビゲーションや、「1.2.3…」と直接別のページに移動するナビのような形で使用します。
最後に
今回はUIの主要コンポーネントを「初めてのUIデザイン」の中から選んでまとめてみました。今回まとめたコンポーネント以外にも、UIデザインの基礎がたっぷり学べます！まだ読んでいない方がいたら是非読んでみてください！
