WWDC26:Communicate your brand identity on iOS

iOSアプリにおけるブランディングデザインについて。

Communicate your brand identity on iOS


0:00 – Intro

  • ブランドの表現と iOS の馴染みあるパターンの活用のバランスの取り方
  • コンポーネント・コンテンツ・カラー・タイポグラフィ・アイコノグラフィの 5 領域にわたって 5 つの優れたアプリの事例を紹介

2:24 – Components

  • iOS 26 の Liquid Glass により、アプリは UI レイヤーとコンテンツレイヤーの 2 つの層で構成される
  • コンテンツレイヤーがブランドアイデンティティを表現する最適な場所
  • UI レイヤー (ナビゲーションとアクション) はユーザーが既に馴染んでいる標準コンポーネントを使うべき(車輪の再発明を避ける)
    • 独自のコントロールで既知のパターンを置き換えない
    • 標準コンポーネントを維持することで認知コストを下げる
    • e.g. コンテクストメニューの使用(カスタムでシート実装をしない)

6:41 – Content

  • コンテンツレイヤーをキャンバスとみなし、画像・動画・テキスト・アニメーションでブランドを表現する
  • 動画の使用、edge-to-edgeのグラデーション
  • トランジションとアニメーション

11:49 – Color

  • iOS 26 ではブランドカラーの使用をアプリのコンテンツ領域(スクロールビュー)に移行することを推奨(それ以前はトップバーやタブバーに使用されていた)
  • カラーの役割を明確な目的に限定する(プライマリカラー、ティントカラー)
    • アクションの示唆
    • 状態とフィードバック
    • アプリでカラーを使うことを恐れず、コミュニケーションの強化とブランドの喚起に活用する
  • ユーザーのカスタマイズへの配慮
    • ダークモードへの対応
    • アクセシビリティへの考慮

11:50 – Typography

  • タイポグラフィはアプリにブランドアイデンティティを注入する優れた方法
  • カスタムフォント使用時は Dynamic Type 設定に対応する
  • Gentler Streak の事例:デフォルトのシステムフォント(San Fransisco)を使いながらもブランドを表現
    • フォントそのものより、使い方とレイアウトでブランドを表現できる

14:17 – Iconography

  • カスタムアイコノグラフィは推奨され、タブバーやツールバーのコンポーネントで映える
  • プラットフォーム間(Web とモバイル)でのアクションのアイコン慣習の違いに注意
    • シェアアイコンはiOS/Android/Webで異なる(New York Times)
  • SF Symbols は 7,000 以上のシンボルを無料で利用可能
    • カスタムアイコンを使わない場合の有力な選択肢

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です