アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語（基本編）

こんにちは。2016年もあと3週間を切り、迫る年の瀬にしんみりとしている宮嶋です。
クリスマス？知らない子ですね……。

はじめに

私がUIデザイナーになって5ヶ月、iOSとAndroidどちらの作業をしていてもよく出てきた用語の中でも
覚えておくと周りとの認識の共有がスムーズになるかな？と思うことについて書いていきます。

用語集

UI

ユーザーインターフェース（User Interface）
機器やシステムと利用者間で情報をやり取りするための仕組み。
ここではよくアプリやWEBの画面構成として使われている……ような気がします。

UX

ユーザーエクスペリエンス（User Experience）
ユーザー体験とも言います。システムやサービスを利用したことにより、利用者が受ける影響を
動作や感情、知覚など様々な面から予期したものであったり、実際に利用者が体験したことであったり、定義が広いです。
後記の「インタラクション」とよく混同されがちです。

インタラクション

「相互作用」のこと。操作や入力に対し返ってくる反応。
ボタンを押した時にボタンが弾けるようなエフェクトが表示される などという演出はインタラクションに分類されます。
UXとよく間違えられますが、UXはインタラクションを受けたユーザーの体験のことを指します。

コンテキスト

大体の意味として「状況」もしくは「状況に応じて異なる動作を示すもの」だと思います。

ワイヤーフレーム

大まかなコンテンツのレイアウトを配置したもの。
絵を描く時のアタリをつける・下書きするという作業に近いです。

モックアップ

「模型」という意味。お客様にデザインを提案する時にイメージを掴んでもらいやすくするために作ります。
ビジュアルデザインより粒度は粗いです。

ビジュアルデザイン

デザインの最終決定稿。1ピクセルレベルの詳細で作ります。

段階の粒度は ワイヤーフレーム→モックアップ→ビジュアルデザイン の順で細かくなります。

プロトタイプ

起こしたデザインが実際どんな感じに動くのか　など、UXやインタラクションの大体のイメージを掴むためのもの。
ワイヤーフレーム・モックアップ・ビジュアルデザインの各段階で作成して、その都度動作を見直しています。
作成にはプロトタイピングツールを使います。

プロトタイピングツールの例

• Prott
• Origami Studio

コンポーネント

部品。ここでは画面を構成している要素のこと。

モジュール

いくつかの部品（コンポーネント）を集め、まとまりのある機能を持ったひとつの部品のこと。

コンポーネントとモジュールの例

青で色付けしたところがコンポーネント、オレンジで色付けしてあるところがモジュールです。
この要素で画面は構成されています。

作業する時はとりあえずモジュールごとにグループ化しておくと編集がやりやすいです。

モーダル

操作を完了するまで閉じられないウィンドウ。

モーダルの例

ハンバーガーメニュー（アイコン）

アプリの左上によくある（右上にあることもありますが）3本線のアイコン。

ドロワーメニュー

ドロワーとは「引き出し」という意味です。
ハンバーガーとセットで使われることが多いです。

ハンバーガー・ドロワーを使う時の注意点

画面をすっきり見せられて便利なハンバーガーメニューですが、最近は

• ハンバーガーのアイコンが何を示すものなのかがわかりにくい
• ドロワーメニューを開くこと自体がユーザーの余計な動作になっている
• 沢山情報を入れてしまうと目的の情報を見つけにくくなる
• 深く階層化してしまうと、ドロワーメニューを開く階層まで戻るのが大変

などという観点から、ハンバーガーやドロワーは本当に必要か？と再考する必要があると言われています。

カルーセル

左右にスライドするパネル。
自動的にスライドするものと、手動でスライドするものがあります。

レスポンシブデザイン

同じコードでありながら、PC・タブレット・スマートフォンなど、
そのデバイスで見る時に最適なレイアウトを組んで表示してくれるデザイン。

リキッドレイアウト

ブラウザの表示領域に応じて、幅や位置などを変えることが出来るレイアウト。

ポートレート／ランドスケープ

ポートレート

短辺を水平、長辺を垂直にした画面の置き方。いわゆる縦位置・縦置きのことです。
アプリのUIデザインはほどんどがこの置き方で作られています。

ランドスケープ

短辺を垂直、長辺を水平にした画面の置き方。横位置・横置きのことです。

ランドスケープのアプリ……真っ先にこれが浮かびました。 Fate/Grand Order（Android版）

スプラッシュ

アプリを起動した時に一番最初に表示される画面。ロゴが表示されるものが多い。
起動時の読み込み画面がユーザーに与える煩わしさを軽減したり、アプリのブランド性を高めたりする効果があります。

ウォークスルー

導入画面の1つ。
スライドでアプリの特徴や使い方をユーザーに伝える画面のこと。
インストール後、初回起動時に表示することが多いです。

ガールズちゃんねる：iOS／Android

おわりに

まだまだ沢山ありますが、ひとまず今回はこのくらいで。
UIデザインの仕事を始めて一番最初に困ったことが、業務上で日常的に話している言葉やWEBで調べた時に出てくる言葉が
自分にとって初めて聞くものばかりでついていけなかったことです。
これからUIデザインの仕事に就く学生の皆さんや、私のように別の分野からUIデザインの世界に飛び込んだ方向けに
書かせていただきました。
次回はiOSのアプリを作る上で予め知っておくと便利だと思う用語について書きたいと思います。
（ここで宣言して何としても書かなきゃいけない状況に自分を追い込むスタイル）