Communitygithub.com

aswin-haridas/apple-guidelines-for-ui

プラットフォームに依存しないUI/UXデザインガイドライン(Appleのヒューマンインターフェースガイドラインを基にした翻案)。Web、Android、iOS、デスクトップ、TV、Watchなど、あらゆるプラットフォームに対応。

apple-guidelines-for-ui とは?

このスキルは、Appleのヒューマンインターフェースガイドライン(HIG)を基に、プラットフォームに依存しない形で再構成されたUI/UXデザインガイドラインの包括的なリファレンスです。ボタン、メニュー、ナビゲーション、フォーム、アラート、シート、リスト、タイポグラフィ、カラー、レイアウト、ダークモード、アクセシビリティ、モーション、オンボーディング、通知、プライバシー、UXライティングなど、あらゆるUIコンポーネントやパターンをカバーする119のリファレンスページが含まれています。Web、Android、iOS、デスクトップなど、実際に使用しているプラットフォームのネイティブな慣習に従いながらガイダンスを適用できるよう設計されており、各ページには元のApple HIGへの参照リンクが保持されています。デザインの原則やアクセシビリティを常に考慮しながら、UIの設計、構築、レビュー、批評に活用できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aswin-haridas/apple-guidelines-for-ui/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

UIデザインガイドライン(プラットフォーム非依存)

references/(このファイルの隣)に119のリファレンスページがあります。AppleのHIGを基に、あらゆるプラットフォームに適用できるように書き直されています。各ページには、オリジナルを指す「Source:」の行が保持されています。

使い方

  1. タスクに関連するトピック(コンポーネント、パターン、ファンデーション、入力)を特定します。以下のカタログから選択してください。
  2. 関連するページのみをReadツールで読みます。例:references/buttons.md。どのページがカバーしているか不明な場合は、references/内をキーワードでgrepします。
  3. 実際に使用しているプラットフォーム(Web、Android、iOS、デスクトップ...)にガイダンスを適用します。ページにクロスプラットフォームの同等機能(スクリーンリーダー、Cmd/Ctrl、Material vs システムの慣習)が記載されている場合は、ターゲットプラットフォームのものを選択し、競合する場合はそのプラットフォームのネイティブな慣習に従います。
  4. UIをレビューするときは、ページと特定のルールを引用し(例:「alerts.md: 破壊的なアクションにはキャンセルボタンを使用する」)、具体的に何を変更すべきかを述べます。

UIの作業では、常にdesign-principles.md(目的、主体性、責任、親しみやすさ、柔軟性、シンプルさ、職人技、喜び)とaccessibility.mdを考慮してください。

インデックスページ:index.md、foundations.md、patterns.md、components.md、inputs.md。

カタログ

  • accessibility.md — アクセシビリティ:アクセシブルなユーザーインターフェースは、すべての人があなたのアプリやゲームで素晴らしい体験を得られるようにします。
  • action-sheets.md — アクションシート:アクションシート(確認ダイアログやボトムシートメニューとも呼ばれる)は、アクションに関連する選択肢を提示するモーダルビューです。
  • activity-views.md — アクティビティビュー:アクティビティビュー(共有シートとも呼ばれる)は、現在のコンテキストで実行可能な一連のタスクを提示します。Webでは、
  • alerts.md — アラート:アラートは、ユーザーがすぐに必要とする重要な情報を提供します。
  • app-icons.md — アプリアイコン:ユニークで記憶に残るアイコンは、あなたのアプリやゲームの目的と個性を表現し、一目で認識できるようにします。
  • augmented-reality.md — 拡張現実:拡張現実(AR)を使用すると、バーチャルオブジェクトを現実世界にシームレスに融合させた、没入感のある魅力的な体験を提供できます。
  • boxes.md — ボックス:ボックスは、論理的に関連する情報やコンポーネントを視覚的に区別されたグループとして作成します。
  • branding.md — ブランディング:アプリやゲームは、独自のブランドアイデンティティを表現し、すぐに認識できるようにすると同時に、プラットフォーム上で自然に感じられるようにします。
  • buttons.md — ボタン:ボタンは、瞬時のアクションを開始します。
  • charting-data.md — データのグラフ化:グラフでデータを提示すると、情報を明確かつ魅力的に伝えることができます。
  • charts.md — グラフ:グラフにデータを整理して、情報を明確で視覚的な魅力をもって伝えます。
  • collaboration-and-sharing.md — コラボレーションと共有:優れたコラボレーションと共有のエクスペリエンスは、シンプルで応答性が高く、ユーザーが効果的にコミュニケーションを取りながらコンテンツを操作できるようにします。
  • collections.md — コレクション:コレクションは、順序付けられたコンテンツセットを管理し、カスタマイズ可能で視覚的に優れたレイアウトで表示します。
  • color-wells.md — カラーウェル:カラーウェルを使用すると、テキスト、図形、ガイド、およびその他の画面上の要素の色を調整できます。
  • color.md — カラー:色を適切に使用すると、コミュニケーションを強化し、ブランドを表現し、視覚的な連続性を提供し、ステータスやフィードバックを伝え、ユーザーを支援します。
  • column-views.md — カラムビュー:カラムビュー(ブラウザまたはミラーカラムとも呼ばれる)を使用すると、一連の縦のカラムを使用してデータ階層を表示およびナビゲートできます。
  • combo-boxes.md — コンボボックス:コンボボックスは、テキストフィールドとプルダウンボタンを1つのコントロールに結合したものです。
  • components.md — コンポーネント:システム定義のコンポーネントを使用およびカスタマイズして、ユーザーに使い慣れた一貫性のあるエクスペリエンスを提供する方法を学びます。
  • content.md — コンテンツ:- グラフ
  • context-menus.md — コンテキストメニュー:コンテキストメニューは、インターフェイスを乱雑にすることなく、アイテムに直接関連する機能へのアクセスを提供します。
  • controls.md — コントロール:コントロールは、クイック設定パネル、ロック画面、ハードウェアショートカットなどのシステムサーフェスから、アプリの機能にすばやくアクセスできるようにします。
  • dark-mode.md — ダークモード:ダークモードは、低照度環境に合わせた快適な表示体験を提供するために、暗いカラーパレットを使用するシステム全体の外観設定です。
  • design-principles.md — デザイン原則:Web、モバイル、デスクトップなど、プラットフォーム全体でデザインを導く基本的な原則を探求します。
  • designing-for-games.md — ゲームのデザイン:ユーザーがあらゆるデバイスでゲームをプレイするとき、あなたが設計した世界に飛び込みながら、彼らが愛するプラットフォームの機能に依存します。
  • disclosure-controls.md — ディスクロージャーコントロール:ディスクロージャーコントロールは、特定のコントロールやビューに関連する情報や機能を表示および非表示にします。
  • drag-and-drop.md — ドラッグ&ドロップ:ドラッグ&ドロップを使用すると、選択した写真、テキスト、その他のコンテンツを、ある場所から別の場所へドラッグして移動または複製できます。
  • edit-menus.md — 編集メニュー:編集メニューを使用すると、現在のビューで選択したコンテンツを変更できるほか、コピー、選択、関連コマンドも提供します。
  • entering-data.md — データ入力:ユーザーから情報が必要な場合は、間違いを犯しにくく、簡単に提供できる方法を設計します。
  • feedback.md — フィードバック:フィードバックは、ユーザーが何が起こっているかを理解し、次に何ができるかを発見し、アクションの結果を理解し、間違いを回避するのに役立ちます。
  • file-management.md — ファイル管理:一部のアプリは、ユーザーがシステム全体で管理することを期待するドキュメントやファイルをサポートできます。
  • focus-and-selection.md — フォーカスと選択:フォーカスは、ユーザーが操作の対象を視覚的に確認するのに役立ちます。
  • foundations.md — ファンデーション:基本的なデザイン要素がどのようにしてリッチなエクスペリエンスの作成に役立つかを理解します。
  • game-controls.md — ゲームコントロール:正確で直感的なゲームコントロールは、ゲームプレイを強化し、プレイヤーの没入感を高めます。
  • gauges.md — ゲージ:ゲージは、値の範囲内の特定の数値を表示します。
  • generative-ai.md — 生成AI:生成AIを使用すると、アプリやゲームを動的なコンテンツで強化し、創造性の新たなレベルを解き放つインテリジェントな機能を提供できます。
  • gestures.md — ジェスチャー:ジェスチャーは、ユーザーがデバイス上のアプリやゲームのオブジェクトに直接影響を与えるために使用する物理的な動きです。
  • getting-started.md — はじめに:サポートするすべてのプラットフォーム(Web、モバイル、デスクトップなど)で、まるで故郷にいるかのように感じられるアプリやゲームを作成します。
  • going-full-screen.md — フルスクリーン表示:電話、タブレット、デスクトップ、およびWebブラウザは、ユーザーがウィンドウを画面いっぱいに拡大し、システムコントロールを非表示にできるフルスクリーンモードを提供します。
  • gyro-and-accelerometer.md — ジャイロスコープと加速度計:デバイス上のジャイロスコープと加速度計は、物理的な世界でのデバイスの動きに関するデータを提供できます。
  • icons.md — アイコン:効果的なアイコンは、ユーザーが瞬時に理解できる方法で単一の概念を表現するグラフィックアセットです。
  • image-views.md — イメージビュー:イメージビューは、透過または不透明な背景に単一の画像(または場合によってはアニメーション画像のシーケンス)を表示します。
  • image-wells.md — イメージウェル:イメージウェルは、イメージビューの編集可能なバージョンです。
  • images.md — 画像:アートワークがサポートするすべてのデバイスで美しく表示されるように、システムがコンテンツをどのように表示するか、および適切な解像度でアートを提供する方法を学びます。
  • inclusion.md — インクルージョン:インクルーシブなアプリとゲームは、敬意のあるコミュニケーションを優先し、すべての人がアクセスできる方法でコンテンツと機能を提示することで、人を第一に考えます。
  • index.md — インターフェースデザインガイドライン:これらのガイドラインには、あらゆるプラットフォーム(Web、モバイル、デスクトップなど)で優れたエクスペリエンスを設計するのに役立つガイダンスとベストプラクティスが含まれています。
  • inputs.md — 入力:ユーザーがアプリやゲームを制御したり、データを入力したりするためのさまざまな方法について学びます。
  • keyboards.md — キーボード:物理キーボードは、テキスト入力、ゲームプレイ、アプリの制御などに不可欠な入力デバイスです。
  • labels.md — ラベル:ラベルは、ユーザーが読み取ったりコピーしたりできる(ただし編集はできない)静的なテキストです。
  • launching.md — 起動:合理化された起動エクスペリエンスにより、ユーザーはすぐにアプリやゲームの使用を開始できます。
  • layout-and-organization.md — レイアウトと構成:- ボックス
  • layout.md — レイアウト:表示サイズ、向き、マルチタスク設定に適応する一貫したレイアウトは、ユーザーがアプリケーションを理解して楽しむのに役立ちます。
  • lists-and-tables.md — リストとテーブル:リストとテーブルは、1つまたは複数の列の行にデータを表示します。
  • live-viewing-apps.md — ライブ視聴アプリ:ライブ視聴アプリを設計する際は、コンテンツを優先し、ライブ視聴体験への没入を促進する、楽しく流動的なインタラクションを作成します。
  • loading.md — 読み込み:最適なコンテンツ読み込みエクスペリエンスは、ユーザーが気付く前に完了します。
  • machine-learning.md — 機械学習:機械学習により、アプリやゲームはデータと使用パターンから学習し、既存のエクスペリエンスを改善し、魅力的な新機能を作成できます。
  • managing-accounts.md — アカウント管理:エクスペリエンスに対する不必要な障壁を作らない場合、アカウントはユーザーがコンテンツや機能にアクセスするための便利な方法です。
  • managing-notifications.md — 通知管理:通知は、デバイスがロックされているか使用中かにかかわらず、タイムリーで重要な情報をユーザーに提供できます。
  • maps.md — マップ:マップは、アプリ内またはWebサイト上に屋外または屋内の地理データを表示します。
  • materials.md — マテリアル:マテリアルは、前景と背景の要素間の奥行き、レイヤリング、階層の感覚を生み出す視覚効果です。
  • menus-and-actions.md — メニューとアクション:- アクティビティビュー
  • menus.md — メニュー:メニューは、ユーザーが操作したときにオプションを表示するため、アプリやゲームでコマンドを表示するためのスペース効率の良い方法です。
  • modality.md — モダリティ:モダリティは、コンテンツを別の専用モードで提示するデザインテクニックであり、親ビューとのインタラクションを防ぎ、ユーザーの注意を特定のタスクに集中させます。
  • motion.md — モーション:美しく流動的なモーションはインターフェースに命を吹き込み、ステータスを伝え、フィードバックと指示を提供し、視覚体験を豊かにします。
  • multitasking.md — マルチタスキング:マルチタスキングにより、ユーザーはあるアプリから別のアプリにすばやく切り替え、それぞれでタスクを実行できます。
  • navigation-and-search.md — ナビゲーションと検索:- 検索フィールド
  • nearby-interactions.md — 近接相互作用:近接相互作用は、近接性と方向を使用して、周囲の環境に人や物の存在を統合するデバイス上のエクスペリエンスをサポートします。
  • nfc.md — NFC:近距離無線通信(NFC)により、数センチメートル以内のデバイスがワイヤレスで情報を交換できます。
  • notifications.md — 通知:通知は、ユーザーが一目で理解できるタイムリーで価値の高い情報を提供します。
  • offering-help.md — ヘルプの提供:最も効果的なエクスペリエンスはアプローチしやすく直感的ですが、必要に応じてコンテキストヘルプを提供できます。
  • onboarding.md — オンボーディング:オンボーディングは、ユーザーがアプリやゲームの使用をすぐに開始できるようにします。
  • outline-views.md — アウトラインビュー:アウトラインビューは、階層データをセルのスクロールリストで表示し、列と行に編成します。
  • page-controls.md — ページコントロール:ページコントロール(ページインジケーターまたはドットインジケーターとも呼ばれる)は、フラットなコンテンツリスト内の各ページを表すインジケーター画像の行を表示します。
  • panels.md — パネル:デスクトップアプリでは、パネルは通常、他の開いているウィンドウの上にフロート表示され、現在の選択やアクティビティに関連する補助的なコントロール、オプション、または情報を提供します。
  • patterns.md — パターン:一般的なユーザーアクション、タスク、およびエクスペリエンスをサポートするためのデザインガイダンスを入手します。
  • pickers.md — ピッカー:ピッカーは、ユーザーが選択できる個別の値の1つ以上のスクロール可能なリストを表示します。
  • playing-audio.md — オーディオ再生:ユーザーは、デバイスのコンテキストが変更されたときに自動的に調整されるリッチなオーディオ体験を期待しています。
  • playing-haptics.md — 触覚の再生:触覚を再生すると、ユーザーの触覚を刺激し、物理的な世界への親しみをアプリやゲームに取り込むことができます。
  • playing-video.md — ビデオ再生:ユーザーは、使用しているアプリやゲームに関係なく、デバイスでリッチなビデオ体験を楽しめることを期待しています。
  • pointing-devices.md — ポインティングデバイス:ユーザーは、トラックパッドやマウスなどのポインティングデバイスを使用して、インターフェースをナビゲートし、アクションを開始できます。
  • pop-up-buttons.md — ポップアップボタン:ポップアップボタン(一部のプラットフォームではドロップダウンまたはセレクトとも呼ばれる)は、相互に排他的なオプションのメニューを表示します。
  • popovers.md — ポップオーバー:ポップオーバーは、ユーザーがコントロールまたはインタラクティブ領域をクリックまたはタップしたときに、他のコンテンツの上に表示される一時的なビューです。
  • presentation.md — 表示:- アクションシート
  • printing.md — 印刷:アプリは、必要に応じてシステム提供の印刷機能を統合し、必要に応じてカスタムのプリンターおよびドキュメント固有のオプションを表示できます。
  • privacy.md — プライバシー:プライバシーは最も重要です。必要なプライバシー関連のデータとリソースについて透明性を確保し、それらを保護することが不可欠です。
  • progress-indicators.md — 進行状況インジケーター:進行状況インジケーターは、アプリがコンテンツの読み込みや長時間の操作中に停止していないことをユーザーに知らせます。
  • pull-down-buttons.md — プルダウンボタン:プルダウンボタンは、ボタンの目的に直接関連するアイテムまたはアクションのメニューを表示します。
  • rating-indicators.md — 評価インジケーター:評価インジケーターは、水平に配置された一連のグラフィカルシンボル(デフォルトでは星)を使用して、ランキングレベルを伝えます。
  • ratings-and-reviews.md — 評価とレビュー:ユーザーは、アプリやゲームをダウンロードする前に、その評価とレビューをよく確認します。
  • right-to-left.md — 右から左:アラビア語やヘブライ語などの右から左に記述する言語をサポートします。
  • scrolling.md — スクロール:ユーザーは、コンテンツが多い場合や、スペースの関係ですべてのコンテンツを一度に表示できない場合に、コンテンツをスクロールします。
  • search-fields.md — 検索フィールド:検索フィールドを使用すると、ユーザーはキーワードを入力して、現在のコンテキストのコンテンツのコレクションを検索できます。
  • secure-text.md — セキュアテキスト:パスワードなどの機密データを入力する場合、アプリやゲームは、近くにいる人にコンテンツが見られないようにする必要があります。
  • selection-and-editing.md — 選択と編集:ユーザーは、テキスト、画像、アプリやゲーム内のその他の要素を選択して、コンテンツのコピーや貼り付けなどのアクションを実行できます。
  • settings.md — 設定:設定画面は、アプリやゲームの構成とカスタマイズのためのハブです。
  • sidebars.md — サイドバー:サイドバーは、ユーザーがコンテンツをすばやく切り替え、アプリの主要な機能とコンテンツをナビゲートできるようにします。
  • sign-in-with-apple.md — Appleでサインイン:Appleでサインインは、ユーザーが個人情報を共有せずにアプリやゲームにサインインするためのプライバシー重視の方法を提供します。
  • sliders.md — スライダー:スライダーを使用すると、ユーザーは特定の範囲内の値を調整できます。
  • splash-screens.md — スプラッシュスクリーン:スプラッシュスクリーンは、アプリやゲームの読み込み中に表示される起動画面です。
  • split-views.md — 分割ビュー:分割ビューは、2つの隣接するペインのコンテンツを同時に表示します。
  • steppers.md — ステッパー:ステッパーは、値を段階的に増減させます。
  • switches.md — スイッチ:スイッチを使用すると、ユーザーはオン/オフの状態を切り替えられます。
  • tab-bars.md — タブバー:タブバーは、アプリの異なるセクション間をすばやく移動する方法を提供します。
  • tables.md — テーブル:テーブルは、データを行と列に整理して表示します。
  • text-fields.md — テキストフィールド:テキストフィールドを使用すると、ユーザーは1行のテキストを入力できます。
  • text-views.md — テキストビュー:テキストビューを使用すると、ユーザーは複数行のテキストを表示および編集できます。
  • toolbars.md — ツールバー:ツールバーは、現在のコンテキストに関連する頻繁に使用されるアクションへのクイックアクセスを提供します。
  • touch-bar.md — Touch Bar:Touch Barは、Macのキーボード上部にあるマルチタッチ対応のRetinaディスプレイで、現在のアクティビティに応じて動的に変化するコントロールを表示します。
  • transitions.md — トランジション:トランジションは、あるビューから別のビューへのスムーズな移行を提供します。
  • tv.md — TV:tvOS向けの設計では、フォーカスと没入感を優先します。
  • typography.md — タイポグラフィ:タイポグラフィは、読みやすさと明確さを確保しながら、ブランドの個性とトーンを伝えます。
  • undo-and-redo.md — 元に戻すとやり直し:ユーザーは、元に戻すとやり直しを使用して、アクションを元に戻したり再実行したりできます。
  • video.md — ビデオ:ビデオプレーヤーは、ビデオコンテンツの再生を制御するためのコントロールを提供します。
  • voice-over.md — VoiceOver:VoiceOverは、画面を見ることができないユーザーがデバイスを操作できるようにするジェスチャベースのスクリーンリーダーです。
  • watch.md — Watch:watchOS向けの設計では、簡潔さとタップしやすさを優先します。
  • web-views.md — Webビュー:Webビューは、アプリ内にWebコンテンツを埋め込みます。
  • windows.md — ウィンドウ:ウィンドウは、アプリのコンテンツを表示し、ユーザーが操作できるようにするための主要なコンテナです。
  • writing.md — ライティング:効果的なUXライティングは、明確で簡潔、そして共感を呼ぶものです。

関連スキル