UIの基礎

1. 概要

現在、フロントエンジニアとして、意図したUI設計ができるようにデザイン部分の基礎を学んでいます。

お次
UIの基礎(2)
UIの基礎(3)
UIの基礎(4)

2. デザインとユーザー体験の基礎

2.1. デザインの本質

デザインは単なる装飾ではなく、「目的に応じた設計」と定義できる。これは問題解決や価値創造のプロセスを含む。

• デザインパターン：効果的な設計手法の集積
• アートとの違い：
  • アート：個人の表現と感情喚起が主目的
  • デザイン：機能性と問題解決が中心

2.2. UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）

• UI：人間とシステムの接点。操作性と視覚的要素の最適化が目標。
• UX：サービス利用全体を通じてのユーザー体験。主観的評価が重要。

UIの改善はUXの向上に寄与しうるが、必ずしも直結しません。例えば、認証方式の変更（パスワードから生体認証へ）など、UIの枠を超えた改善が必要な場合もあります。

3. デバイス特性とデザイン

3.1. 入力方法の影響

各デバイスの特性：

1. PC（マウス/キーボード）

   • 精密な操作が可能
   • ホバー機能を活用できる

2. スマートフォン（タッチスクリーン）

   • 多様なジェスチャー入力
   • ホバー機能なし
   • タッチ操作に適したサイズ設計が必要

3. テレビ（リモコン）

   • 直接選択できない
   • フォーカス表示が重要
   • 操作の連続性を考慮したレイアウトが必要

フォーカス表現の工夫：

• 複数の視覚的要素（枠線、色変更、サイズ変更、アニメーション）の組み合わせが効果的

出典：Amazon デザインとユーザーエクスペリエンス（UX）に関するガイドライン

4. プラットフォームの特性

4.1. Webサイトとネイティブアプリの比較

Webサイトの特徴：

• 利点：
  • 開発の容易さ
  • クロスプラットフォーム互換性
  • インストール不要の手軽さ
• 課題：
  • 高度なインタラクションの制限
  • パフォーマンスの制約

ネイティブアプリの特徴：

• 利点：
  • 高いパフォーマンス
  • デバイス機能の完全活用
  • オフライン機能
• 課題：
  • プラットフォーム別開発の必要性
  • インストールの手間

プラットフォーム間のUI差異：

出典：AndroidとiOSにおけるUIの違いを知ろう!!

各プラットフォームのデザインガイドラインに従うことで、ユーザーにとって馴染みやすいインターフェースを提供できます。

5. まとめ

今回はUIデザインの教科書の1~3章の途中を掻い摘んで、アウトプットしてみました。
インプットしたことを意識しながら、UIに反映できるように、記憶しておこうと思います。
また、続編も書いていきます！！

シリーズ

今：UIの基礎
UIの基礎(2)
UIの基礎(3)
UIの基礎(4)