hig-foundations

hig-foundations スキルの概要

hig-foundations は、Apple Human Interface Guidelines に基づく基礎設計のためのスキルで、明瞭性、アクセシビリティ、Apple らしいシステム適合に関わる初期判断を支援します。color、typography、symbols、materials、motion、privacy、layout、RTL、inclusive design について実践的な指針が必要なときに使ってください。大まかな UI アイデアを Apple に沿った設計判断へ落とし込みたい UI デザイナー、プロダクトチーム、エージェントに最適です。

hig-foundations は何のためのスキルか

このスキルは、画面やコンポーネント、プラットフォーム固有のパターンに進む前に、「見た目と使い心地をどうあるべきか」を考えるために役立ちます。特に、dark mode のコントラスト、Dynamic Type 対応、system colors の使い方、フォント選定、アイコンをネイティブに見せる方法のような、土台の設計が問われる場面で力を発揮します。カスタムのビジュアル言語を新規に作るのではなく、機能を Apple HIG に合わせたいなら、hig-foundations が最初の出発点です。

どんなときに適しているか

hig-foundations は、1 画面だけでなくアプリ全体に効く判断が必要な UI Design に向いています。Apple デバイス上でのブランド表現、アクセシビリティ優先のビジュアルシステム、プロダクト仕様書やデザインプロンプトの基礎レビューなどに適しています。すでに狭いインタラクションパターンや、プラットフォーム固有の実装詳細が必要な場合には、あまり向きません。

主な違い

hig-foundations の価値は、装飾的なデザインの勘に頼るのではなく、システムのデフォルトとアクセシビリティを意識した判断へ導いてくれる点にあります。さらに、関連する HIG 領域へのクロスリファレンスも示すため、基礎から platform、patterns、components へ、最初からやり直さずに移れます。だからこそ、hig-foundations のガイドは単なる「Apple らしくしてください」という一般的な指示よりも実用的です。

hig-foundations スキルの使い方

スキルをインストールして準備する

npx skills add raintree-technology/apple-hig-skills --skill hig-foundations でインストールできます。最良の結果を得るには、エージェントが提案を書き始める前に skill ファイルと周辺コンテキストを確認できるワークフローで使うのが理想です。hig-foundations のインストールは、プロダクトの目的、対象プラットフォーム、アクセシビリティ要件をすぐ共有できる状態にしておくと、より効果的です。

スキルに適切な入力を与える

弱いプロンプトは「もっと Apple らしくして」です。強いプロンプトは「この iOS のオンボーディング画面に hig-foundations を適用してください。system colors を使い、Dynamic Type をサポートし、motion は最小限に抑え、CTA は dark mode でも読めるようにしてください」のようになります。プラットフォーム、対象ユーザー、既存の設計制約、そして contrast の問題、icon の不一致、RTL layout など既知の課題を含めてください。現状を具体的に示すほど、スキル側が推測する量は減ります。

ソースはこの順で読む

まず SKILL.md を確認してください。ここに中核となる判断ルールとクロスリファレンスがまとまっています。次に、スキル内で参照されている関連 repo の文脈を確認し、README.md、AGENTS.md、metadata.json、必要なら補助フォルダも見てください。この repository では、実務上いちばん重要なのは SKILL.md 自体に書かれた指針です。なので、そこを素早く読むだけで、hig-foundations の使い方が自分のタスクに合っているか大抵判断できます。

より良い出力を生むワークフロー

このスキルは、3 段階で使うと効果的です。まず UI の課題を定義し、次に platform と accessibility の要件で制約し、最後に提案やリライトを依頼します。たとえば、「この iPad の設定画面を hig-foundations に照らしてレビューし、color、hierarchy、touch target の明瞭性を改善する案を出してください」といった形です。こうすると、モデルに空想で画面を作らせるのではなく、評価対象となる具体的なデザイン面を与えられます。コピーや wireframe から作業している場合は、両方を含めてください。テキストと layout を同時に見るほうが、基礎設計の指針は活きます。

hig-foundations スキル FAQ

hig-foundations はデザイナー専用ですか？

いいえ。hig-foundations スキルは、デザイナー、PM、frontend engineer、そして Apple に沿った UI の方向性が必要なエージェントに有用です。実装チケットを書いたり、インターフェースの文言をレビューしたりする場面でも役立ちます。なぜなら、基礎設計の問題は見た目だけでなくコードにも影響するからです。

一般的なプロンプトと何が違いますか？

一般的なプロンプトでも Apple らしさに触れることはできますが、hig-foundations には system colors、accessibility、visual hierarchy などの基礎要素について再利用できる判断フレームがあります。その結果、曖昧な出力が減り、複数の画面や機能にまたがって hig-foundations のガイドをより安定して使えます。もちろん、プロダクトの文脈の代わりにはなりませんが、単に「もっと良いデザイン」と頼むよりは、はるかに筋の通った使い方です。

どんなときは使わないべきですか？

非常に具体的な interaction pattern、component library の判断、あるいは platform 実装の深掘りが必要な場合は、hig-foundations は使わないでください。そうしたケースでは、より焦点の絞られたスキルや、直接の platform guide のほうが早いです。また、すでにデザインが Apple の慣例に沿っていて、必要なのが小さな copy edit だけなら、このスキルは避けたほうがよいです。

初心者でも使えますか？

はい。製品画面と、解決したい問題を説明できるなら十分です。HIG の用語を最初からすべて知っている必要はありません。hig-foundations をうまく使うコツは、デバイス、問題、制約条件を明確に示す、シンプルで具体的なプロンプトにあります。

hig-foundations スキルを改善する方法

デザイン制約をもっと明確にする

品質が最も大きく向上するのは、変えてはいけないものをはっきり示したときです。たとえば、brand color、既存の layout、対応言語、最低限満たす accessibility 基準などです。「現在の構成は維持しつつ、hierarchy をもっと Apple らしくし、brand accent は保持し、dark mode の contrast をクリアしてください」と伝えると、スキルは当たり前の説明を繰り返す代わりに、トレードオフに集中できます。

一般論ではなく、判断を求める

hig-foundations スキルが最も強いのは、選択を求めるときです。「この status card にはどの system colors が合いますか？」や「この motion は弱めるべきですか、それとも削除すべきですか？」のように尋ねてください。「アクセシビリティを説明してください」より、具体的な判断を求めるほうが、すぐ使えて素早く確認できる出力になります。

最初のドラフトをもとに反復する

最初の回答のあと、最も弱い部分に絞り込みます。typography、contrast、iconography、layout density などです。「CTA が強すぎる感じがする」「Dynamic Type だとまだ詰まりすぎている」といった具体的な不具合をフィードバックしてください。基礎設計の問題は、通常、1 層ずつ直すほうが簡単なので、hig-foundations とは反復作業がよく合います。