はじめに
スマホアプリのエンジニアとして、UIデザインについて知っておきたいことをまとめておきます。
自分用のリンク集のような意味合いが強いですがお役に立てば幸いです。
公式資料
一度は目を通しておきたい基本的で重要なドキュメントです。
Apple
- Human Interface Guidelines
- 現在は英語版しかないようです
- Apple Design Resources
- デザインツール用のテンプレートファイルなどがあります
- Material Design
- こちらも現在は英語版しかなさそう
- Android のマテリアル デザイン
- デベロッパー向けのガイド
知っておきたい概念
エンジニアとしてここまで把握しておく必要はないかもしれませんが、デザイナーさんはこの辺りを踏まえてデザインを行っているはずです。
- UXの5段階モデル
- UXデザインにおける5段階モデルとは？
- UXの5段階モデルにおける各段階での具体的なデザイン手法とは？
- 情報設計
- Webデザインをする前に必要な情報設計とは
- 情報設計に欠かせない。ユーザーのメンタルモデルを理解する、要素整理のフレームワーク
- Webデザインの核を担う“情報設計”を、見落としていませんか？
- LATCH
- LATCHとは？ データや情報を分類・整理する５つの方法
- デザインシステム
- デザインシステムを正しく理解しよう。作り方・参考事例のまとめ
- デザインシステムの定義と作成方法、導入事例
- Airbnbのデザインシステムの構築
- UXエンジニアが知っておきたいデザインシステムの原則
- アトミックデザイン
- Atomic Design
- アトミックデザインとは？ コンポーネント単位で創るUIデザイン手法
- もっと効率的にデザインできる！「アトミックデザイン」を紹介します
UIデザイン要素
UIを実装するための要素について。デザイナーさんとも認識を合わせておく必要があります。
標準のUIコンポーネント
OSによって有無や呼び方の違いはあるものの、基本的なものは両OSに備わっています。
それぞれに用途についてのルールがあるのでそれを意識して使う必要があります。
| カテゴリ | コンポーネント | iOS | Android |
|---|---|---|---|
| ナビゲーション | ナビゲーションバー | Navigation bars | TopAppBar, BottomAppBar |
| タブバー | Tab bars | BottomNavigation | |
| タブ | Tabs | ||
| ドロワー | Navigation drawer | ||
| バー | サーチバー | Search bars | |
| ツールバー | Toolbars | AppBar | |
| 操作・入力 | ボタン | Buttons | FloatingActionButton, Buttons |
| テキストボタン | TextButton | ||
| テキストフィールド | Text Fields | Text fields | |
| チェックボックス | Checkboxes | ||
| スイッチ | Switches | Switches | |
| ラジオボタン | Radio buttons | ||
| ピッカー | Picker | ||
| スライダー | Slider | Sliders | |
| ステッパー | Steppers | ||
| リスト | リスト | Tables, Collections | Lists |
| テーブル | Data tables | ||
| カード | Cards | ||
| ページャー | Page Controls | ViewPager | |
| 表示補助 | インジケータ | Progress Bars | Progress indicators |
| スピナー | Activity Indicators | Progress indicators | |
| ダイアログ | Dialogs | ||
| アラート | Alerts | Dialogs | |
| アクションシート | Action sheets, Activity Views | BottomSheet | |
| トースト | Snackbars | ||
| ツールチップ | Tooltips | ||
| ポップオーバー | Popovers |
カラー
色は重要な要素です。暖色、寒色で大きくイメージが変わりますし、警告色としての赤のように汎用的に意味を持つものもあります。
ブランドカラーを設定して有効的に使うこと、あるいはプライマリ・セカンダリカラーを決めて使い分けるなどを考える必要があります。
また、多用せず目的を持って使うことが重要です。
フォント
システムフォントを使うかカスタムフォントを導入するか、大きさ、太さ、色などフォントについても考えることは多くあります。
イメージ
どのような画像をどこに置くか、というものはもちろんとして、用途やデバイスによってルールが色々決められておりこれを考慮する必要があります。
解像度
アイコン
- System Icons(iOS Human Interface Guidelines)
- App Icon(iOS Human Interface Guidelines)
- アイコン デザイン ガイドライン(Android Developers)
- Icons(Material Design)
- Font Awesome
ストア用
- App Store Connect ヘルプ
- Marketing Resources and Identity Guidelines(Apple Developer)
- Google Play アイコンのデザイン仕様(Android Developers)
デバイス
デバイスのサイズについてもUIデザインにとって重要な影響を与えます。
最近はアスペクト比にもいろいろなパターンがあり、複雑さを増しています。
- Adaptivity and Layout(iOS Human Interface Guidelines)
- iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
- Device Metrics(Material Design)
- 各種の画面サイズをサポートする(Android Developers)
ツール・サービス
デザインツール
バージョン管理
共有（ハンドオフ）
プロトタイプ作成
フロー図作成
参考
記事・サイト
書籍
- はじめてのUIデザイン
- モバイルデザインパターン 第2版
- UXと理論で作る Webデザイン: デザイナーでなくてもわかる
- UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計
- Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで
- デザイン入門教室［特別講義］ 確かな力を身に付けられる ～学び、考え、作る授業～ (Design ＆IDEA)
- ノンデザイナーズ・デザインブック［第4版］
- プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法
- みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド
- デザインの伝え方
- Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド