見出し画像
Photo by peishum

今更？いや今から！Appleデザインガイドラインを読み解く#4

潮汐(うしお)

今日も継続ガイドライン！引き続き頑張ります！

こんな人におすすめ

  • Appleのデザインガイドラインを読み直したい

  • デザインガイドラインの他の見解をしりたい

  • デザイナーの卵を応援したい(頑張ります！)

目次はこちら


アプリアイコン

アプリアイコン
アプリ内のボタンに使われるアイコンではなく、ホーム画面に表示されるアイコンのことです。
シンプルでわかりやすい

  • アイコンにテキストを入れない。

  • 写真ではなく、グラフィック画像を使う。

  • アイコンのサイズが小さくてもわかるように、シンプルでわかりやすいデザインにする。

各プラットフォームのガイドラインに沿った

  • iOS、iPadOS、watchOS、macOS、visionOSの各プラットフォームのガイドラインに沿ったデザインにする。

  • アイコンの形状、サイズ、色、コントラストなどを確認する。

代替アプリアイコンを用意する

  • ユーザーが好みや障害の状況に合わせて、代替アプリアイコンを選択できるようにする。

macOSアプリアイコンのアクセシビリティを向上させるためのポイント

  • 角丸四角形の形状、正面向きの視点、水平位置、統一されたドロップシャドウなどの視覚属性を守る。

  • アプリの機能を日常的なアイテムに例える方法を考える。

  • アプリアイコンでリアルな表現をする際は、物理的な素材感と重量感を出す。

  • アイコンデザインテンプレートのドロップシャドウを使う。

  • 角丸四角形以外の形状に見える輪郭を定義しない。

  • アイコンの主要なコンテンツがアイコングリッドのバウンディングボックス内に収まるようにする。

アイコンの仕様

  • どのプラットフォームでもアプリアイコンはPNG形式で、以下の色空間に対応しています。

    • sRGB（カラー）

    • グレイガンマ2.2（グレイスケール）

  • アイコンサイズ

  • iOSとiPad

    • 512×512ピクセル

  • macOS

    • 16×16ピクセル、32×32ピクセル、64×64ピクセル、128×128ピクセル、256×256ピクセル、512×512ピクセル

アイコン


今度はアプリ内のボタンなどで使われる方の「アイコン」です！

アイコンとは
アイコンは、ユーザーがすぐに理解できる形で特定の概念を表現するグラフィックアセットです。アプリやゲームでは、選択可能な項目やアクション、モードを理解しやすい形でユーザーに伝えるために、シンプルなアイコンが数多く使用されています。

ベストプラクティス

  • 認識しやすいシンプルなデザインにする。

    • コンテンツに直接関係する見慣れたものを視覚的に表現すると効果的なアイコンになります。

  • アプリのすべてのインターフェイスアイコンで視覚的な一貫性を維持する。

    • サイズ、太さ、色などの視覚的な特徴を統一することで、アプリ全体の見た目にまとまりを与えることができます。

  • インクルーシブなデザインにする。

    • 人物や文化を特定するようなアイコンは避け、誰にとってもすぐにわかりやすいアイコンを心がけましょう。

  • 意味を伝えるためにどうしても必要な場合を除いてに文字を含めない。

    • 文字を使用する場合は、ローカライズできるようにしましょう。

  • カスタムのインターフェイスアイコンを作成する場合は、PDF や SVG などの主観的なフォーマットを使用します。

    • PNG は拡大に対応していないため、複数のバージョンを用意する必要があります。

  • カスタムのインターフェイスアイコンに代替テキストラベルを指定する。代替テキストラベルは、画面に表示されない音声で説明するためのものです。障がいのあるユーザーがコンテンツを理解するのに役立ちます。

  • Apple ハードウェア製品のレプリカは使用しない。

    • ハードウェアのデザインは頻繁に変更されるため、古臭い印象を与える可能性があります。

ブランディング

アプリのブランディングの際には、以下の点に注意しましょう。

  • ブランドの独自性や一貫性を保つ。

    • ボイスアンドトーン、アクセントカラー、フォントなどの要素を一貫して使用することで、ブランドを印象づけることができます。

  • ユーザーの利便性を損なわない。

    • ブランドアセットの表示を控えめにし、ユーザーが関心を持っているコンテンツにスペースを割くようにしましょう。

  • 標準的なパターンを使用する。

    • 誰もが慣れた操作方法に沿ったインターフェイスを使用することで、ユーザーの操作性を向上させることができます。

  • ロゴの表示は控えめに。

    • 操作環境に必要な場合を除き、アプリやゲームの使用中ずっとロゴを表示しないでください。

  • 起動画面の利用を検討。

    • プラットフォームによっては、起動画面を表示してリソースを読み込むことができます。ただし、あまり長く表示しないようにしましょう。

  • Apple の商標ガイドラインに準拠。

    • Apple の商標をアプリの名前や画像内で使用することは禁止されています。

カラー

カラーは、アプリのデザインにおいて重要な役割を果たします。色の使い方によって、アプリの印象や使いやすさは大きく変わります。

ベストプラクティス

  • ゲーム以外のアプリではカラーの使用を控えめにする。

    • カラフルなアプリは目が疲れやすくなるため、ゲームやエンターテインメントアプリなど、カラフルさが必要な場合を除いて、控えめに使用しましょう。

  • インターフェイス全体でカラーの使い方を集中させる。

    • 色を使いすぎると、ユーザーの注意が散漫になってしまうため、重要な要素にのみ色を使うようにしましょう。

  • コンテキストがライトでもダークでもアプリのカラーが正しく表示されることを確認する。

    • ダークモードに対応したアプリを開発する場合は、ライトモードとダークモードの両方でカラーが正しく表示されるように注意しましょう。

  • さまざまな照明条件でアプリのカラースキームをテストする。

    • 屋内や屋外、明るい場所や暗い場所など、さまざまな照明条件でアプリのカラーが正しく表示されるようにテストしましょう。

  • さまざまなデバイスでアプリをテストする。

    • さまざまなサイズや解像度の画面でアプリのカラーが正しく表示されるようにテストしましょう。

  • アートワークや透明度が周辺のカラーに与える影響を検討する。

    • アートワークや透明度が周辺のカラーに影響を与える場合は、その影響を考慮してデザインしましょう。

  • アプリでユーザーがカラーを選ぶようにする場合、可能な限りシステムが提供するカラーコントロールを使用する。

    • ユーザーが自由にカラーを選べる場合、カラーの組み合わせに注意しましょう。

インクルーシブなカラー

色の使い方には注意が必要です。色によっては、色覚障害の人にわかりにくくなってしまったり、文化的な背景によって異なる意味合いを持ってしまったりする可能性があります。

  • オブジェクトの区別、操作可否の提案、重要な情報の伝達を色だけで行わない。

    • 色覚障害の人は、色の違いを認識できない場合があります。そのため、色だけで情報を伝達することは避けましょう。

  • アプリのコンテンツがわかりにくいような色を使わない。

    • 色覚障害の人は、色を認識するのが難しい場合があります。そのため、色の組み合わせには注意しましょう。

  • 文化的背景を考慮する。

    • 色には文化的な意味合いがある場合があります。そのため、アプリのターゲットとなる文化圏の色の意味合いを考慮しましょう。

システムカラー

アプリでシステムカラーの値をハードコードしないでください。システムカラーの値は、OSのアップデートによって変更される可能性があります。

  • ダイナミックシステムカラーをコピーしない。

    • ダイナミックシステムカラーは、周囲の明るさや色に合わせて変化します。そのため、ダイナミックシステムカラーをコピーして使用すると、アプリの見た目が不自然になる可能性があります。

    • ダイナミックシステムカラーを使用する場合は、システムが提供する API を使用してください。

  • ダイナミックシステムカラーの意味を再定義しない。

    • ダイナミックシステムカラーは、OSによって定義された意味を持っています。そのため、ダイナミックシステムカラーの意味を再定義すると、ユーザーの混乱を招く可能性があります。

カラーマネジメント

色マネジメントとは、色の表現方法を統一するための技術です。アプリのデザインにおいて、カラーマネジメントを正しく理解しておくことは重要です。

  • 色空間とカラープロファイルの理解を深める。

    • 色空間とは、色を表現する方法のことです。さまざまな色空間が存在するため、それぞれの特徴を理解しておきましょう。

    • カラープロファイルとは、色空間の情報をまとめたもののことです。カラープロファイルを使用することで、異なる色空間間で色を正確にやり取りすることができます。

  • 画像に色規定を適用する。

    • 画像をアプリに組み込む場合は、色空間やカラープロファイルを指定して、正しく表示されるようにしましょう。

  • ワイドカラー互換ディスプレイでの視覚体験を高める場合はワイドカラーを使用。

    • ワイドカラーは、従来のカラーよりも広い色域を表現することができます。ワイドカラー対応のディスプレイを使用している場合は、ワイドカラーを使用することで、より鮮やかな色彩を表現することができます。

  • 必要な場合は色空間に固有の画像とカラーバリエーションを提供する。

    • アプリがさまざまな色空間に対応している場合は、それぞれの色空間で正しく表示されるように、画像やカラーバリエーションを用意しておきましょう。

ダークモード

ダークモードは、暗い背景に明るいフォアグラウンドカラーを使用した、システム全体の外観設定です。低照度環境での使用に適しており、多くのユーザーが使用しています。

ベストプラクティス

  • アプリ固有の外観設定を作らない。

    • ダークモードはシステム全体の設定なので、アプリ固有の設定があると、ユーザーが意図した外観を実現するために複数の設定を調整しなければならなくなり、使いづらくなります。

  • 両方の外観モードでアプリが正しく動作することを確認する。

    • ユーザーは、片方のモードだけを使用するのではなく、自動設定を使用して切り替える場合があります。また、外観モードによって、アプリの見た目や使い勝手が異なる場合があります。

  • ダークモードのカラーパレットを理解する。

    • ダークモードのカラーパレットは、従来のライトモードのカラーパレットとは異なる場合があります。

  • 明るいフォアグラウンドカラーと暗い背景カラーのコントラスト比を高める。

    • コントラスト比が低いと、テキストや画像が読みにくくなったり、見づらくなったりします。

  • 白い背景の画像を暗くする。

    • 白い背景の画像をダークモードで表示すると、目がチカチカする可能性があります。

アイコンと画像

  • 可能な限りSFシンボルを使用する。

    • SFシンボルは、両方の外観モードで正しく表示されます。

  • 必要な場合は、ライトとダークの外観で別のアイコンや画像をデザインする。

  • ラベルにはシステムが提供するラベルカラーを使用する。

    • ラベルカラーは、両方の外観モードで正しく表示されます。

  • テキストは、システムのビューやコントロールを使用して表示する。これにより、バイブランスなどの外観モードの影響を自動的に処理できます。

テキスト

  • テキストのサイズとフォントサイズを調整する。

    • ダークモードでは、テキストのサイズとフォントサイズを大きくすることで、読みやすさを向上させることができます。

  • テキストの色を調整する。

    • 明るいフォアグラウンドカラーと暗い背景カラーのコントラスト比を高めるために、テキストの色を調整しましょう。

  • テキストの装飾を調整する。

    • テキストの装飾（太字、斜体、下線など）は、ダークモードでは読みにくくなる場合があります。必要に応じて、装飾を調整しましょう。

その他のポイント

  • アクセシビリティの考慮。

    • 視覚障害者や聴覚障害者、運動障害者など、すべてのユーザーがアプリを快適に使用できるように、アクセシビリティを考慮しましょう。

  • テストの実施。

    • アプリをリリースする前に、さまざまなデバイスや環境でテストを行って、正しく表示されていることを確認しましょう。

今日はこの辺で〜！！
４日目ということもあって慣れとまとめ方が統一されてきました！
#1~3の記事も統一していこうかなと思います！


この記事が気に入ったらサポートをしてみませんか？