[iOS版]アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語

こんにちは。デザイナーの宮嶋です。
来年の手帳はいつもと違って可愛いものにしようと思ったけど、
あれこれ迷ううちに結局いつもと同じようなシンプルなものに落ち着きました。

はじめに

前回の用語集の続きです。今回は私が初めてiOSのUIに触れた時につまづいた名称について書いていきます。

画面全体

バー

コンテンツのステータスや今いる階層を示したり、
別の階層に移動したりツールを起動したりするコントロール部品が配置されていたりします。

コンテンツビュー

コンテンツが配置されている部分のことです。
WEBサイトから直接ページを読み込むWEBビューや、マップが画面の大部分を占めるマップビューなど
用途に合わせて様々な種類があります。

コントロール部品

ボタンやラベル、スクロールバーなど。触って操作したり情報を確認したりすることができます。

一時ビュー

必要に応じて一時的に表示されるビューのことです。
注意書きなど重要な情報を表示したり、行きたい階層に到達するために必要な操作を追加したりします。

バー

ステータスバー

時計や充電残量、電波状況など、iOS自体のステータスを表示するバーです。
ここは基本的に改変したりすることは出来ません。

ナビゲーションバー

ユーザーがどこにいるのか現在の階層を表示したり、階層を移動したりするためのバーです。
コンテンツの内容によっては後述のツールバーをナビゲーションバーのところに配置することもあります。

セグメント化コントロール

ビューを切り替えるためのボタン。
正確にはバーではなくコントロール部品の扱いです。

ツールバー

ファイルをダウンロードしたり、項目を追加したり、タブを追加したりなど、
現在見ているビュー内でユーザーが実行できるアクションを並べたバーです。

タブバー

検索バー

ユーザーが情報を検索する時にテキストを入力するバー。
ナビゲーションバーなどと同じようにプロンプトを配置することもあります。

プレースホルダーテキスト

検索バーの中に表示させることができるテキストのこと。
ユーザーに入力例を示したりすることができます。

プロンプト

バーやコンテンツの説明文。検索バーの上（場合に応じて下）に表示できます。
また、ナビゲーションバーにも必要に応じて使用できます。
FF15の金髪イケメンではありません。

スコープバー

検索バーとセットで使います。カテゴリを切り替えたり、条件を絞り込んだりして検索する時に必要なバーです。

コンテンツビュー

色々ありますがとりあえず初心者の時にいやというほど聞きそうな用語のみ載せておきます。

WEBビュー

WEBと同じように、自由にHTMLで記述できるビューです。
WEBから情報を読み込んでアプリ上で表示したものもWEBビューです。

マップビュー

マップが大部分を占めるビュー。
アプリで店舗検索したりチェックインしたりする時によくこのビューを組み込んで使います。

テーブルビュー

複数ある情報をリストにして並べたもの。

プレーン

グループ分けをしていないテーブル。
カテゴリ分けする必要のないリストや、カテゴリ内のコンテンツリストなどに使われています。

グループ

カテゴリや属性などで区切ってグループ分けしたテーブル。
設定画面などでよく見ますね。

コントロール部品

ボタン

ボタンです。文字だったりアイコンだったり角丸の矩形だったりと形状は様々です。
ここをタップしてアクションを実行します。

スイッチ

ON/OFFを切り替えるスイッチ。
よく設定画面で見ますね。

インジケータ

状況や進捗を示すゲージのようなものです。
ここで似たような目的・機能のものをまとめて説明しちゃいます。

アプリの読み込み中によく表示されるため、ユーザーを退屈にさせないようデザインを工夫しているアプリもあります。

アクティビティインジケータ

タスクが進行中であることを示します。進捗は見ることができません。

進捗ビュー

一番下の青いバーです。 持続時間がわかっているタスクの進捗を表示します。

アクティビティインジケータがいつまでも回っていたり、途中で進捗ビューが止まってしまったりすると
ユーザーにとってはかなりのストレスになるので、極力軽い動作ができるアプリを提供したいものです。

セグメント化コントロール

前述に記載したので割愛。

一時ビュー

アラート

アプリやデバイスやセキュリティに与える影響など、重要な情報を伝える時に使います。

モーダルビュー

ユーザー情報を入力する画面などに使います。
タスクを中止する「キャンセル」ボタン、タスクを完了した時に表示される「完了」ボタンを押すことで閉じることができます。

アクションシート

ユーザーの実行しようとしているアクションに選択肢を与える時に使います。
削除やリセットなど、ユーザーによっては後で困ることになりそうなアクションがある場合は赤文字で表示します。

おわりに

まだまだiOSの用語やUI設計の細かいルールはありますが、ひとまずこの辺りで。
私が現在仕事上で頻繁に使う用語を中心に、早めの段階で覚えておいたほうが良いと判断したものを紹介しました。
後述のiOS Human Interface Guidelinesにはより詳細な説明とルールが記載されているので、合わせて読んでおきましょう。

参考：iOS Human Interface Guidelines

Appleが開発者向けにまとめたUI設計ガイドライン。
iOS向けアプリのUIデザインを考える時に一度は目を通しておくことをおすすめします。

• 英語版（日本語版より更新早いです）
• 日本語

関連記事

• 基本：https://dev.classmethod.jp/beginners/ui_component_basic/
• iOS：当記事
• Android：執筆中