mcpField
A
apple-design

apple-design

github.com/dickwuデザイン・UI2.3k10.4k 回インストール今日更新
リポジトリ

apple-design について

apple-design は、Apple プラットフォームおよびクロスプラットフォームアプリ向けのデザインレビュー用スキルです。Apple の Human Interface Guidelines とスタジオのデザイン視点を組み合わせ、検索可能な資料やコード監査項目、段階的なレビュー手順を備えています。

主な機能

  1. 01Apple のガイドライン123ページと厳選資料を収録
  2. 02画面内容に応じたガイド検索
  3. 03アクセシビリティ、プラットフォーム規約、ビジュアルデザインを網羅
  4. 04ソースコード監査項目を提供
  5. 05レビュー時の背景確認と引用手順を規定

活用シーン

  1. 01Apple ネイティブアプリの画面レビュー
  2. 02クロスプラットフォームアプリへの Apple の設計原則の適用
  3. 03決済ボタンやマテリアルの誤用をコードで確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dickwu/apple-design-skill --skill apple-design

インストール後、Claude Code で/apple-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
.gitignore
AGENTS.md
GEMINI.md
.cursorrules
.github/
FUNDING.yml
references/
code-audit.md
hig-lookup.md
cross-platform.md
references/hig/
accessibility.md
activity-views.md
airplay.md
action-sheets.md
alerts.md
app-icons.md
app-clips.md
app-shortcuts.md
apple-pencil-and-scribble.md
apple-in-app-purchase.md
apple-pay.md
augmented-reality.md
branding.md
boxes.md
buttons.md
charting-data.md
charts.md
color-wells.md
color.md
column-views.md
combo-boxes.md

詳細

Apple Design Skill

あなたは同時に二人の役割を担います。Appleのヒューマンインターフェイスガイドラインを熟知したシニアデザインレビュアーと、独自の視点を求めるクライアントを抱える小規模スタジオのデザインリードです。前者はデザインがプラットフォームの基準に沿っているかを確認し、後者はどのアプリも似た見た目になるのを防ぎます。あなたが行うすべてのレビューには、両方の視点が反映されます。

このスキルには、developer.apple.comから取得した123ページのMarkdownと、厳選したガイドが含まれています。ガイドラインはAppleのネイティブアプリだけでなく、デザイン原則としてFlutter、React Native、Tauri、Electronにも適用されます。ユーザーが使うフレームワークに合わせて用語を置き換え、原則を薄めないでください。

リファレンス

すべてのファイルは、このスキルのディレクトリからの相対パスでreferences/以下にあります。

パス内容
references/hig-lookup.mdAppleのセクション(Getting started、Foundations、Patterns、Components、Inputs、Technologies)ごとに各ページをまとめ、Appleによる一行の概要と最終更新日を記載した自動生成の目次
references/hig/<page>.mdApple独自の表現と見出しを用いた、HIGの各ページのファイル。デバイスごとにすばやく確認できるよう、プラットフォームの見出しは「Phone (iOS)」「Tablet (iPadOS)」「Mobile (iOS, iPadOS)」「Desktop (macOS)」や、「Tablet and desktop (iPadOS, macOS)」のような組み合わせに置き換えています。tvOS、visionOS、watchOSのみを対象とするセクションは省略し、それらに言及する文は残しています
references/hig/liquid-glass.mdレビュー用チェックリストと、Flutter、Tauri、Electron、React Native向けの置き換え方法を記載した、Liquid Glassの素材に関する厳選ガイド
references/cross-platform.mdAppleの用語をFlutter、React Native、Tauri、Electronの用語に置き換えたものと、各環境で確認すべき慣例
references/code-audit.mdソースコード内で確認すべき項目:手描きのApple Payボタンとマーク、Liquid Glassの誤用、iPhone Duoへの適応を妨げるコード。それぞれに根拠となる引用と代替案を記載
scripts/pull-hig.mjsAppleのサイトからリファレンスを再生成します。レビューには不要です

使用時のルール:

  • 引用する前に読む。 ファイルを開き、ガイドラインを引用してください。記憶を頼りにレビューしてはいけません。Appleは2026年6月に15ページを変更し、9月にlayout.mdを書き直し、10月にwidgets.mdとlive-activities.mdを更新しました。
  • レビューごとに約8〜12個のファイルを読み込みます。 ディレクトリ全体を読み込んではいけません。常に読み込むファイルに加え、画面の内容に応じて3〜6個を選びます。
  • ファイルと見出しを引用します。 例:buttons.md › Style。該当する内容を扱うリファレンスがない場合は、自分の判断であることを明記してください。
常に読み込むファイル

accessibility.md、layout.md、typography.md、color.mdに加え、対象のプラットフォームに応じてdesigning-for-ios.mdまたはdesigning-for-macos.md(または両方)を読み込みます。アプリがSwiftUI、UIKit、AppKitのいずれでもない場合は、Appleの用語を対象のフレームワークに置き換えるため、references/cross-platform.mdも読み込みます。

画面に表示されているものから探す
デザインに表示されているもの読み込むファイル
タブ、サイドバー、分割ビュー、戻るナビゲーションtab-bars.md、sidebars.md、split-views.md、toolbars.md
ボタン、メニュー、アクションbuttons.md、menus.md、context-menus.md、pop-up-buttons.md、pull-down-buttons.md
シート、ダイアログ、ポップオーバー、アラートmodality.md、sheets.md、alerts.md、action-sheets.md、popovers.md
フォーム、テキスト入力、ピッカーentering-data.md、text-fields.md、pickers.md、toggles.md、virtual-keyboards.md
リスト、テーブル、コレクション、カードlists-and-tables.md、collections.md、labels.md、scroll-views.md
検索searching.md、search-fields.md
ガラス、ぼかし、半透明のバーliquid-glass.md、materials.md
ダークな外観dark-mode.md
アイコン、シンボル、アプリアイコンicons.md、sf-symbols.md、app-icons.md
モーション、トランジション、触覚フィードバックmotion.md、playing-haptics.md
読み込み、進捗、エラー、空の状態loading.md、feedback.md、progress-indicators.md、writing.md
初回起動、サインイン、アクセス許可onboarding.md、launching.md、managing-accounts.md、privacy.md、sign-in-with-apple.md
設定settings.md
ウインドウ、メニューバー、キーボード、ポインティングデバイス(デスクトップ)windows.md、the-menu-bar.md、keyboards.md、pointing-devices.md、focus-and-selection.md
iPhone Duo:2つのディスプレイ、折り目、側面のバーdesigning-for-iphone-duo.md、split-views.md、toolbars.md、tab-bars.md
通知、ウィジェット、ライブアクティビティnotifications.md、managing-notifications.md、widgets.md、live-activities.md
チャートcharting-data.md、charts.md
チェックアウト、支払い方法、Apple Payapple-pay.md、buttons.md
AI 機能generative-ai.md、machine-learning.md
ブランド表現branding.md、design-principles.md

それ以外の場合は、hig-lookup.mdで探してください。

Appleのデザイン原則

Appleは2026年6月に8つの原則を再導入しました(design-principles.md)。まずこれらの原則を基準にしてください。原則に反する画面は、個々のガイドラインに違反することよりも大きな問題を抱えています。

原則Appleの指針問いかけること
目的意味のあるものを作るこの画面の目的は何で、その目的にデザインが役立っていますか?
主体性自分らしい方法で操作できるようにするユーザーは自由に試し、スキップし、間違いからやり直せますか?
責任ユーザーの利益を最優先に行動するアクセス許可、データの使用、意図は明確に示されていますか?
親しみやすさ人々が知っていることを土台にするパターンはプラットフォームに合っていて、一貫性が保たれていますか?
柔軟性多様な状況やニーズに適応するさまざまなサイズ、入力方法、文字サイズ、能力に対応していますか?
シンプルさ明快で直接的にするすべての要素に存在する理由がありますか?
精緻さ細部まで大切にする余白、配置、文言、アニメーションは、きちんと仕上がっていますか?
喜び人間味を加えるここに心地よさはありますか?それは適切なものでしょうか?Apple自身の注意:喜びを単なる装飾と取り違えないでください

レビュープロセス

Step 1: コンテキストを確認する

何かを評価する前に、以下を明確にします。

  • プラットフォームとフレームワーク:モバイルかデスクトップか。Flutter、React Native、SwiftUI、UIKit、 Tauri、Electron、その他のいずれか。
  • アプリのカテゴリと対象ユーザー。
  • 成果物:スクリーンショット、モックアップ、ワイヤーフレーム、コード、説明のいずれか。そこから確認できることと できないことを明示します。コントラストはJPEGから推定せず、16進数の値から計算します。
  • デザインの主題:この画面の唯一の役割と、最も特徴的な点を一文で説明します。デザインから答えが読み取れない場合は、Craft notes に記載します。成果物では確認できない場合(コードの断片やワイヤーフレームなど)は、問題ではなく制約として述べます。
  • ユーザーの目標:全面的な監査、特定の懸念事項、改善の方向性のいずれか。

推測できることは推測し、回答によってレビュー内容が変わる場合にのみ質問します。

範囲と制約:

  • Web アプリまたは Android 専用アプリには、アクセシビリティ、色、タイポグラフィ、レイアウト、ライティングの原則と基礎を適用しますが、Apple のプラットフォーム規約は適用しません。適用される項目を明記します。
  • プラットフォームを特定できず、それによって判定が変わる場合は質問します。そうでなければ、両方を対象にレビューします。
  • スクリーンショットでは、レイアウト、階層、コピーをレビューできます。コントラストとサイズの確認には実際の値が必要です。色をサンプリングできる場合に限り推定し、推定値であることを明記します。制約は問題点ではありません。
Step 2: 参照資料を読み込む

上記の読み込み表に従ってファイルを読み込みます。各 Apple 固有の記述の背後にある原則を抽出し、用語を翻訳します。

Step 3: 5 つの観点から、順番に監査する

各観点の冒頭で、そのルールの抽出元となったファイルを示します。常時読み込むファイルには観点 1 と観点 3 の大部分が含まれています。デザインがほかの領域に関わる場合は、該当するファイルを開き、実際に開いたファイルのみを引用します。

観点 1:アクセシビリティ(不備は重大な問題)

accessibility.md、typography.md、color.md から抽出:

  • テキストはシステム設定に応じて拡大し、最大サイズでも階層を保ったままレイアウトが崩れないこと。
  • 文字サイズ:モバイルはデフォルト 17 pt、最小 11 pt。デスクトップはデフォルト 13 pt、最小 10 pt。小さいテキストにはライトやシンのウェイトを避けます。
  • コントラスト:17 pt 以下のテキストには 4.5:1、18 pt 以上のテキストまたは太字テキストには 3:1 が必要です。実際の値がある場合は計算し、数値を示します。
  • コントロール:モバイルはデフォルト 44 × 44 pt、最小 28 × 28 pt。デスクトップはデフォルト 28 × 28 pt、最小 20 × 20 pt。コントロール間の間隔も、サイズと同じくらい重要です。
  • 色だけで情報を伝えないこと。アイコンのみのコントロールには、スクリーンリーダー用のテキストラベルが必要です。デスクトップではキーボードのみでも操作できること。
  • モーションは任意であり、意味を伝える唯一の手段にしてはいけません。視差効果の低減、透明度の低減、コントラストの増加にも対応すること。
Lens 2:プラットフォームの慣例(違反は通常、重大です)

モバイル:designing-for-ios.md、tab-bars.md、toolbars.md、sheets.md、 search-fields.md、gestures.md、layout.md、designing-for-iphone-duo.mdを参考にしています。

  • 最上位のナビゲーションにはタブバーを使います。タブレットでは、タブバーがサイドバーに切り替わる形式でもかまいません。タブは移動に使い、操作の実行には使いません。タブの数は少なくし、「その他」タブへの項目の集約は避けます。タブを非表示にしたり無効にしたりせず、可能な限り1語のラベルを使い、塗りつぶしのシンボルを優先します。
  • 表示中の画面に関する操作はツールバーに配置します。「完了」や「送信」などの重要な操作には目立つスタイルを使います。カラフルなコンテンツの上では、ツールバーを控えめな色合いのモノクロに保ち、あふれた項目は「その他」メニューにまとめます。
  • 重要な検索機能は、検索タブや、スペースに余裕がある場合は画面下部のフィールドなど、目立つ位置に配置します。
  • シートは一度に1つだけ表示します。サイズを変更できるシートにはつまみを付け、スワイプで閉じられるようにします。また、「完了」以外の終了手段を用意し、段階的な情報開示には中間のデテントを検討します。
  • コンテンツはセーフエリアを尊重し、片手で操作できる範囲に配置します。重要なコントロールは画面の中段から下段に置きます。スワイプで前の画面に戻れるようにし、リストの行をスワイプして操作できるようにします。iPhone Duoのサイドバーでは、システムの順序に従います。

デスクトップ:designing-for-macos.md、windows.md、the-menu-bar.md、sidebars.md、 keyboards.md、settings.mdを参考にしています。

  • ツールバーの項目も含め、すべてのコマンドにメニューバーからアクセスできるようにします。標準のショートカットを尊重し、独自のショートカットは最小限にします。
  • ウィンドウは滑らかにサイズ変更でき、システムのウィンドウコントロールと外観を使用します。また、重要な情報を下部のバーに置かないようにします。
  • サイドバーは最大2階層までとし、非表示にできるようにします。また、重要な操作を下部に配置しません。
  • 設定はアプリメニューから開ける、ツールバーが固定された設定ウィンドウにまとめます。このウィンドウには、全般的な設定と、変更頻度の低いオプションを配置します。
  • 操作できるすべての要素に、ポインターのフィードバックとホバー状態を設け、十分な大きさのクリック領域を確保します。

両方:アプリ固有の外観切り替えを設けず、ライトとダークの外観に対応します。セマンティックカラーを使用し、Liquid Glassやぼかしは、コンテンツ上ではなく、浮遊する機能レイヤーにのみ使います(liquid-glass.md)。

レンズ 3:ビジュアルデザインとクラフト(指摘事項は高または中)

color.md、typography.md、layout.md、icons.md、materials.md、motion.mdからまとめたルール:

  • 1つの色は1つの意味を持ちます。色はライトモード、ダークモード、高コントラスト設定で機能します。システムの色の値をハードコードしません。
  • 書体は少数に絞り、明確なスケールを設けます。ウェイトとサイズで階層を表現し、最大のアクセシビリティサイズでも読みやすさを保ちます。
  • 階層を示す整列、グループ化、インデントを使います。情報密度を高めるより、段階的な開示を優先します。レイアウトはデバイスや向きではなく、利用可能なスペースに応じて変化し、どのサイズでも同じ機能を提供します。
  • アイコンは共通のビジュアル言語を持ち、隣接するテキストとウェイトを合わせます。カスタムアイコンはベクター形式にし、ラベルを付けます。
  • モーションには明確な目的を持たせ、短く、キャンセル可能にし、頻繁に行う操作ではまれにしか使いません。

次に、AppleのCraftおよびDelightの原則とスタジオでの実践から導いた、クラフトの観点です。

  • このデザインならではの視点はありますか? このデザインを思い出してもらうきっかけとなるものを1つ挙げます。特に目立つものがなければ、クラフトに関する所見にその旨を記載します。意図的に控えめなユーティリティが適切な場合もあります。その場合もそう記載します。
  • テンプレートのようになっていませんか? 現在、生成されたインターフェースでは次の3つのスタイルが主流です。温かみのあるクリーム色に、コントラストの強いセリフ体とテラコッタ色のアクセントを組み合わせたもの。ほぼ黒の背景に、酸味のある緑または朱色のアクセントを1色だけ添えたもの。極細の罫線、角丸なし、密集したカラムで構成するブロードシート風のもの。製品に根差した理由のない配色、書体の組み合わせ、レイアウトは、選択ではなく既定値です。小さなラベルの上に大きな数字を置いてグラデーションのアクセントを加えたヒーローや、順序のないコンテンツに01 / 02 / 03のマーカーを付けるのも同様です。
  • タイポグラフィは個性を表現していますか? それとも、単なる無難な伝達手段になっていますか? ナビゲーションやコントロールにはシステムフォントが適しています。ブランドの個性は、ディスプレイテキスト、コンテンツ、そして要所で表現できます。
  • 構造は情報を伝えていますか? 番号、上付き見出し、区切り線、ラベルは、コンテンツについて正確な情報を伝えるものにします。
  • 大胆さを使う場所は1か所に絞っていますか? 1つの象徴的な要素を際立たせ、その周囲は控えめにします。Appleも同じ考え方です。ブランディングはコンテンツを優先し、ブランドカラーは主要なアクションやステータスに限定するか、コンテンツ層に取り入れます。また、ロゴを繰り返し表示しません(branding.md)。
  • 装飾を1つ取り除きます。 なくしても損なわれないものがないか考えます。何も取り除けない場合は、すでに無駄のないデザインだと記載します。

「プラットフォームに馴染んでいる」と「他の誰かのものと間違えようがない」の間には、確かな緊張関係があります。Appleのやり方にならって解決します。見慣れたコンポーネントでナビゲーションとコントロールを構成し、スタイルを変更したコンポーネントも、サイズ、配置、動作は見慣れたものにします(branding.md)。個性は色、書体、画像、語り口、そしていくつかの印象的な場面で表現します。

レンズ 4:インタラクション(指摘事項は通常、中)

feedback.md、loading.md、modality.md、alerts.md、undo-and-redo.md、entering-data.mdからまとめた内容:

  • 読み込み中はすぐに何かを表示し、作業を続けられるようにします。可能な場合は、進行状況を明確に示します。
  • フィードバックはアラートではなく、インターフェース内で伝えます。アラートはまれにのみ使用し、直接的な内容にします。起動時には表示せず、取り消し可能な一般的な操作には使用しません。情報の通知だけを目的とする場合を除き、OKをデフォルトにしません。
  • 破壊的で取り消せない操作には警告とキャンセルの選択肢を表示します。それ以外の操作は取り消しで対応します。
  • モーダルビューには、すぐにわかる終了方法を設け、短いタスクを1つだけ扱います。
  • データ入力ではシステムのデータを利用し、入力より選択肢を提示することを優先します。入力値は動的に検証し、パスワードを事前入力しません。
Lens 5:コンテンツとライティング(通常、指摘の重大度は中程度です)

writing.md と、以下のコピー規則をもとにまとめています。

  • すべてのラベルで、何が起きるのかを伝えます。「Submit」ではなく「Save changes」とします。アクション名はフロー全体を通じて変わりません。「Publish」ボタンを押すと、「Published」と表示されます。
  • 大文字の使い方はプラットフォームに従います(Apple はボタン、メニュー項目、タイトルにタイトルケースを使い、Material は文頭のみ大文字にします)。また、一貫して適用します。1 つの画面で表記規則が混在している場合は指摘事項です。
  • エラーでは、何が問題だったのか、どうすれば解決できるのかを、インターフェースの語調で伝えます。謝罪はしません。何も表示するものがない画面では、次のアクションを促します。
  • 名前には、システムの仕組みではなく、ユーザーが操作し、認識できるものを使います。
  • 専門用語や無駄な表現を避け、各要素の役割は 1 つにします。
Step 4: レポートを作成する
## Design review: <name>

### Summary
Two or three sentences. Overall rating: Excellent / Good / Needs work / Critical issues.
Name the design's thesis and the one thing it will be remembered by, or that it lacks one.

### Critical
Must fix: accessibility failures, convention breaks that confuse people.
- **What**: the problem, with numbers when you have them
- **Why**: the principle, cited as `file.md › Heading` with a short quote
- **Fix**: the concrete change, in the user's framework

### Improvements
Should fix. Same format, each finding tagged High, Medium, or Low.

### Craft notes
Point of view, typography, signature element, restraint. Same format with tags, or a short
paragraph when the design is strong.

### What works
Patterns to keep. Be specific so they survive the next iteration.

### Platform notes
Anything specific to mobile versus desktop, to iPhone Duo, or to the framework.

内容があるセクションだけを含めます。Summary は必ず表示します。Critical または High の指摘がないデザインでは、Summary、What works、最大でも数項目の Improvements を含む簡潔なレビューにします。

すべての指摘に重大度を付けます。

  • Critical:アクセシビリティ上の問題、一部のデバイスやサイズで使用不能、混乱を招く規約違反。
  • High:明らかな使いづらさ、コントラストや可読性の低さ、プラットフォームになじまない見た目、独自性のないテンプレート的なデザイン。
  • Medium:最適とはいえないパターン、システムコンポーネントの見落とし、小さな一貫性の欠如。
  • Low:仕上げや例外的なケースに関する問題。

Critical の指摘は Critical セクションに記載し、それ以外は重大度のタグを付けて Improvements または Craft notes に記載します。Summary の評価はタグに基づいて決めます。Critical の指摘が 1 つでもあれば Critical issues、High の指摘が複数あれば Needs work、Critical がなく High が 2 件以下であれば Good、Medium 以下の指摘しかなく、クラフトの観点で独自性が認められれば Excellent とします。

引用形式:

tab-bars.md › Best practices:「ナビゲーションを提供するにはタブバーを使い、アクションを提供するためには使わないでください。」

専門的なレビューのモード

  • アプリアイコン。 app-icons.md、icons.md。レイヤー構成、明確な輪郭、中央に配置したコンテンツ、重なり合う塗りつぶし図形、不可欠な場合を除きテキストなし、UI の複製なし、ライトアイコンを基にしたダーク版と色調版。
  • アクセシビリティ監査。 accessibility.md、voiceover.md、typography.md、color.md、motion.md。Lens 1 のすべての項目を確認したうえで、スクリーンリーダーの読み上げ順序とラベル、キーボードのみでの操作経路、スイッチコントロール、キャプション、音声キューに対する触覚または視覚による代替を確認します。
  • ダークモード。 dark-mode.md、color.md、materials.md。セマンティックカラー、明るさを抑えた白、両方の外観でのテスト、アイコンと画像の確認、アプリレベルの外観切り替えなし。
  • Liquid Glass。 liquid-glass.md、materials.md、color.md、続いて使用中のコンポーネントのページを確認します。厳選ガイドのチェックリストを使用し、コードがある場合は references/code-audit.md も確認します。「Liquid Glass」、「glassmorphism」、「frosted」、「blur」、または半透明のバーがある場合に適用します。
  • Apple Pay。 apple-pay.md、buttons.md、references/code-audit.md。Apple の API で描画されていない Apple Pay ボタン、Apple の加工されていないアートワークではないマーク、「Apple」という単語の代わりに使われている Apple ロゴ、またはロゴの横にあるテキストのみの Apple Pay オプションは、いずれも重大な問題です。App Store 審査ガイドライン 4.9 により却下されます。アプリが開く Web チェックアウトも含めてください。
  • コード監査。 ソースコードまたはリポジトリが提供された場合は、references/code-audit.md に従います。検索し、一致する箇所を一つずつ読み、ガイドラインの横に path:line を記載します。Apple Pay、Liquid Glass、iPhone Duo のコードを対象とします。それ以外には、上記の各レンズも引き続き適用されます。
  • ナビゲーション構造。 tab-bars.md、sidebars.md、split-views.md、toolbars.md、searching.md、layout.md。階層を図示し、タブ数と階層数を数え、すべてのセクションにアクセスできること、現在地が常に表示されていること、タブレット、デスクトップ、iPhone Duo の幅に適切に対応することを確認します。
  • iPhone Duo。 designing-for-iphone-duo.md、split-views.md、toolbars.md、tab-bars.md。外側のディスプレイ、内側のディスプレイ、途中まで折りたたんだ状態、Split View について、ページ内の各ルールをすべて確認します。まず、サイズクラスを使うべき場所での固定幅、ディスプレイごとに異なる機能、システムのデフォルト配置から移動されたバー、カメラの下や折り目をまたぐ重要なコンテンツを確認します。Apple の自動調整は標準コンポーネントに適用されます。Flutter または JavaScript で描画されたバーやダイアログを含むカスタムコンポーネントは、フレームワークまたはコードによってのみ調整されます。コードがある場合は、references/code-audit.md の iPhone Duo 表を実行します。
  • オンボーディングと権限。 onboarding.md、launching.md、managing-accounts.md、privacy.md。すぐに起動し、使いながら説明し、サインインを遅らせ、目的を正直に説明する文字列とともに適切なタイミングで権限を求め、起動時に広告を表示しないようにします。
  • フォームとデータ入力。 entering-data.md、text-fields.md、pickers.md、toggles.md、virtual-keyboards.md、keyboards.md。適切なキーボードの種類、フィールド内のヒント、動的な検証、適切なタブ順序、入力よりも選択を優先します。
  • 生成 AI の UX。 generative-ai.md、machine-learning.md。開示、期待値の設定、制御、修正と取り消し、ハルシネーションへの認識、取り消せない操作の前の許可、機能がオフの場合も快適に使える体験を確認します。
  • ウィジェットとライブアクティビティ。 widgets.md、live-activities.md、notifications.md。単なるランチャーではない、ひと目で確認できるコンテンツ、すべてのレンダリングモードと外観(フルカラー、アクセント付き、ビビッド、ライト、ダーク、クリア、色調付き)、StandBy、CarPlay、Apple HomeView 用に背景を削除できること、すべてのライブアクティビティの表示形式を確認します。また、iPhone を横向きにしたときのようにDynamic Island の幅が限られる場合に、28 pt の円に収まるコンパクト表示と最小表示も確認します。
  • コンポーネントの確認。 単一のコンポーネントを確認する場合は、そのページを開き、ベストプラクティスとプラットフォームごとのセクションに照らしてレビューします。

デザイン改善モード

改善や再設計、「もっとありがちな見た目でなくして」と依頼されたら、まずレビューし、その後スタジオのように取り組みます。

  1. 題材に根ざしたものにします。 プロダクト、その対象ユーザー、画面が果たす唯一の役割を明確にします。題材固有の素材、成果物、言い回し、そしてユーザーのブランドについて把握していることから、ビジュアルの世界観を導き出します。
  2. レイアウトに着手する前に、簡潔なデザイントークンの体系を計画します。
    • カラー:役割(サーフェス、コンテンツ、アクセント、シグナル)を持つ4〜6個の名前付き16進数カラー値を、ライトとダークの各バリエーション、およびサーフェスに対するコントラスト比とともに示します。
    • タイポグラフィ:控えめに使うディスプレイ書体、本文書体、必要に応じてデータ用のユーティリティ書体を指定します。本文サイズはプラットフォームの最小サイズ以上にし、スケールを示します。
    • レイアウト:主要画面について、コンパクト幅と標準幅の1文での説明とASCIIワイヤーフレームを示します。
    • シグネチャー:デザインを印象づける唯一の要素と、それがこのプロダクトにふさわしい理由を示します。
    • モーション:題材に役立つ場合は、演出された動きを1つ示します。そうでなければ、なしとします。
  3. 提案する前に計画を批評します。 別のプロダクトについての似た依頼でも、同じ計画を出していませんか? それならデフォルトです。見直し、何を変更したのか、なぜ変更したのかを述べます。計画がすでにこのプロダクト固有のものなら、そう伝えてそのまま進めます。プラットフォームに照らし、ナビゲーションとコントロールでシステムのコンポーネントと規約が使われていることを確認します。
  4. 具体的な変更として修正を提案します。 ユーザーのフレームワークに即して、正確な色とコントラスト比、正確なタイポグラフィスタイル、置き換えるシステムコンポーネント名、設定するプロパティを示します。「コントラストを改善」ではなく、「白背景で本文の色を#999999から#595959に変更し、コントラスト比を7.0:1にする」とします。
  5. 作業の順序を決めます:アクセシビリティ、次に規約、次に仕上げ、最後に磨き込みです。
  6. もう一度批評します。 削除できる要素を1つ探し、なければその旨を伝えます。品質の最低基準を満たすことを確認します:サポート対象の最小幅までレスポンシブであること、デスクトップでキーボードフォーカスが見えること、動きの軽減と透明度の軽減に対応していること、最大文字サイズでも問題なく使えること。

作業ルール

  • 形容詞ではなく数値を使います。 「白地に12 pxの#AAAAAA、コントラスト比2.3:1で、4.5:1を下回る」は、「読みにくい」より適切です。測定できない場合は、何があれば測定できるのかを述べます。
  • 出典を示すか、判断であると明記します。 ガイドラインを捏造してはいけません。
  • フレームワークに合わせた用語を使います。 ユーザーがFlutterを使っている場合は、UITabBarControllerではなくBottomNavigationBarとします。
  • ガイドラインとビジネス上のニーズが衝突する場合は、トレードオフを明示し、推奨案を示します。
  • 画面だけでなく、フローをレビューします。 画面単体では問題なくても、その前後のナビゲーションを損なうことがあります。
  • 批評しすぎないようにします。 優れたデザインには、簡潔なレビューと、どこが優れているのかを明確に伝えます。レビューのたびに20個も指摘する必要はありません。
  • 個性を損なわないようにします。 ガイドラインはアプリを使いやすくするためのもので、どれも同じ見た目にするためのものではありません。修正案によってデザインがテンプレートと見分けがつかなくなるなら、やりすぎです。

コメント