4/19(Fri)
こんにちは！スクー教務課の廣松です。
今回はスクーで開講された授業からデザイナーがUIについて考えるときのコツについてご紹介したいと思います。
UIとは？
ユーザインタフェース (User Interface) は、機械、特にコンピューターとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。(Wikipedia「ユーザーインターフェース」より引用）
…うーん、難しい！
本記事は、UIについての知識がない方から、UIデザインの具体的なコツが知りたい方まで一緒にUIデザインについて理解を深められる内容となっております。Webデザインの第一線でご活躍されているプロによる授業から学んでいきましょう。
目次
1. UIとは何か
2. アプリUIデザインについて
3. 優れたUIとは
4. 優れたUIを考えるコツ「UIをパターン化」してから選ぶ
5. UIデザインを考える上で意識すべきこと
6. UIについて学べるおすすめの授業
1. UIとは何か
資料 引用：デザイナー山本 麻美先生の授業、「魅力的なアプリUIデザインとは何か」より
UIとは、ユーザーがボタンを押すなどのアクションを起こし、それをコンピューターが処理をして画面に返すこと。つまり、ユーザーとコンピューターのやり取りを視覚的に翻訳してくれるのがUIです。UIは見た目だけのことと勘違いされやすいですが、実際はそれだけではありません。
2. アプリUIデザインについて
資料 引用：デザイナー山本 麻美先生の授業、「魅力的なアプリUIデザインとは何か」より
この問題の答えはCの「タイムラインをすぐに見られるようにする」でした。
アプリ起動時に気をつけるべきUIデザインのポイントは、
・起動時の処理をできるだけ避ける
・ログインしなくても一通りの機能が使えるようにする
・スプラッシュスクリーン(起動画像)はあくまでアプリ起動までの時間つなぎだと考える
・すぐに先頭画面に切り替え、起動が速く応答性が優れているという印象を与える
・スプラッシュスクリーンは芸術的表現をするところではないと認識する
などが挙げられます。
「魅力的なアプリUIデザインとは何か」の授業では、スプラッシュスクリーンの他にもバーアイコンやアプリアイコンについて解説されていますので、興味のある方は是非ご覧下さい。
3. 優れたUIとは
資料 引用：デザイナー山本 麻美先生の授業、「魅力的なアプリUIデザインとは何か」より
優れたUIとは機能と操作性と外観のバランスが良く、使い心地が良いものを指します。
例えば、一貫性を保つことが重要です。
上記の様に、同じ目的のボタンである場合はカタチ、色、文言を統一することが大事です。
4. 優れたUIを考えるコツ「UIをパターン化」してから選ぶ
優れたUIがどんな物か分かっても、なかなか優れたUIを実現するのは難しいですよね。
そこで、稲守 貴久先生の授業、「GMO流・早くて効果的なWebサービスのUI改善手法」より、UIをパターン化してから選ぶ方法をご紹介したいと思います。このコツを掴めば、優れたUIを作ることが出来るようになるでしょう。
例えば、メニューUIをパターン化してみると、4種類にパターン化出来ます。
(1)スタンダード並列
資料 引用：GMOインターネット株式会社 稲守 貴久先生の授業、
「GMO流・早くて効果的なWebサービスのUI改善手法」より
(2)カテゴリ表示
(3)バナー表示
(4)特殊型
このように4つにパターン化し、そこから一番合うUIを選ぶことで、
・使いやすいUI/UXを比較検討制作できる
・成功事例をもとに制作するので、コンセンサスをまとめやすい、意志決定をしやすい
・成功確度が高い
というメリットがあります。
4. UIデザインを考える上で意識すべきこと
資料 引用：クックパッド株式会社 池田 拓司先生の授業、
「分かりやすく、使いやすいデザインを生み出す工夫」より
UIデザインを考える時に「分かりやすい？」「伝わりやすい？」という視点を持つと、良いでしょう。
ユーザーのことを考えながら、上記の4つのことを意識してデザインするとワンランク上のデザインが仕上がるはずです。
5. UIが勉強できるおすすめの授業
今回の記事は以下の3つの授業と資料を基に作成させていただきました。
全編を見ることで、更に詳しくUI・デザインについて理解を深めることが出来ます。
デザイナーの山本 麻美先生による授業です。アプリUIを中心にUIとは何なのかということから魅力的なUIデザインのコツまで学ぶことができます。先生の解説がとてもわかりやすいので初心者の方にもおすすめの授業です。
GMOインターネット株式会社 シニアクリエイターの稲守 貴久先生による授業です。実際に稲守先生が改善してきたUIの事例がたくさん紹介されているのでUIデザインのパターンを知りたい方などは必見です。
クックパッド株式会社の池田 拓司先生による授業です。プラットフォームにあったデザイン設計、適切なメッセージ表現、フィードバックのための表現、実際のデザインの成果事例などについて、分かりやすい資料とともに説明されています。
その他UIに関する授業
Amebaスマホ100タイトルから分析したUI/UXノウハウ
【現役クリエイターから学ぶUIデザイン講座】UI Crunch #2 渋谷ヒカリエから生放送！
WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪
初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。学部登録すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります！
スクー教務課 廣松
