ui-illustrations

ui-illustrations — プロダクト UI 向けのイラストと画像

概要

Web アプリケーションの UI におけるイラストを調達し、ブランドに合わせて調整し、組み込み、提供します。中心となるのは、画像が温かみや明瞭さをもたらす場面でも、現在はテキストだけが表示されている、データが密集したプロダクトツールです。対象となるのは、空の状態、オンボーディング、エラーページであり、装飾に走ることなく、そうした場面を改善します。このスキルでは、画像を置くべき場所と、かえって雑然とする場所を見極める指針、ライセンス上の落とし穴を含む無料ライブラリの調達先、デザインのトークンに合わせて既存の SVG を再配色し、どちらのテーマでも同じアセットを使う方法、React で SVG を正しく組み込む方法、アクセシビリティに配慮したアニメーション画像、そして優れた空の状態を作る技術を扱います。既存のイラストを調達して組み込むものであり、オリジナルのアートを描く方法は扱いません。

有効にするタイミング

• ✅ 画面に「アイテムはまだありません」のようなテキストだけ（または、それよりひどく、何も表示されていない）があり、適切な空の状態が必要な場合。
• ✅ オンボーディングや初回利用時、エラーページ（404／500／権限不足）、成功を伝える場面に画像を追加する場合。
• ✅ イラストの調達先を選ぶ、クレジット表記が必要か確認する、または既存のアートをアプリの配色やダークモードに合わせる場合。
• ✅ React のコードベースに SVG や Lottie ファイルを埋め込み、アクセシビリティに対応させる場合。

次の場合は有効にしないでください：

• アイコンが必要な場合 — アイコンシステム（lucide、Heroicons）は独自の慣例を持つ別種のアセットです。
• UI 要素や操作のモーション（トランジション、マイクロインタラクション）が必要な場合 — モーションの実装は専用のスキルが担当します。このスキルが扱うのは画像であり、アニメーション画像のファイルも含みます。
• オリジナルのイラストを描く必要がある場合、またはイラストのデザイン言語を一から作る場合 — それはデザイナーや制作会社の仕事です。このスキルが行うのは選定と組み込みです。
• マーケティングサイトのヒーロー画像や写真のアートディレクション。

ワークフロー

ステップ 1：配置 — そもそもここに画像が必要ですか？

配置場所	画像を使うか	理由
空の状態（初回利用時、リストをクリアした後、検索結果なし）	はい — 代表的な配置場所です	行き止まりを、状況説明と次のアクションがある場面に変えます
オンボーディング／初回利用時の場面	はい、控えめに	最初にトーンを設定します。訪問のたびに表示するものではありません
エラーページ（404、500、権限不足）	はい	失敗の印象を和らげ、信頼を保ちます
成功／完了の場面	任意、小さめに	遅延させずに達成感を与えます
データが常に表示される画面（テーブル、操作途中のダッシュボード）	いいえ	ユーザーはデータを読んでいます。アートはノイズになります
読み込み／進捗の場面	いいえ（通常）	スケルトンやスピナーが一般的なパターンです。これは画像ではなく、体感パフォーマンスの領域であり、専用のスキルが扱います
認証画面（サインイン画面の分割パネル）	問題ありません	定着したパターンです。フォームの横にブランドのトーンに合う画像を置いて構いません。ただし、種類は統一し、控えめにします
フォームや設定画面の横にある装飾	いいえ	メッセージを伝えない画像は雑然とした印象になります（前述の認証画面の分割パネルは例外であり、何でもよいという意味ではありません）

バランスを保ちましょう。運用・管理ツールでは控えめにし、上記の配置場所に一貫性のあるイラストを少数だけ使います。一般消費者向けのプロダクトなら、もう少し多く使ってもよいでしょう。隣接するテキストがすでに伝えている内容を、イラストが何も補わないのであれば、削除してください。

ステップ 2：選定 — 判断の道筋

1. デフォルト：unDraw。 数百のコンセプトにわたって一貫したスタイルを保ち、サイト上でプライマリカラーをカスタマイズでき、寛容なライセンスが適用されます。商用利用と改変が可能で、クレジット表記は不要です。主な禁止事項は、素材をパックや競合するコレクションとして再配布すること、およびAIモデルのトレーニングに使用することです。
2. アニメーション：LottieFilesの無料プラン（Lottie Simple License） — 商用利用と改変が可能で、クレジット表記は不要（表記は推奨）です。改変した場合は同一条件での共有が求められます（派生物は同じライセンスで再配布）。ファイルを競合するコレクションにまとめることは禁止されています。アニメーションや、よりリッチなSVGシーンには Storyset（Freepik） を利用できます。無料プランでは見つけやすい場所に明確なクレジット表記（「Designed by Freepik」＋リンク）が必要です。Freepik社の有料サブスクリプションでは不要になります（規約に記載されるプラン名は変わってきたため、採用時に最新の規約を確認してください）。転売・再配布、および商標・ロゴとしての使用は禁止されています。
3. 採用時にライセンスを記録する。 規約は変わります（上の表は日付入りのスナップショットで、2026-07-11に作成されたものです）。採用時には提供元の最新のライセンスページを再確認し、素材のそばに提供元URL、ライセンス、日付を記録してください（assets/illustrations/LICENSES.md が適しています）。クレジット表記の義務は、リリース要件であり、脚注ではありません。
4. AI生成イラストも選択肢の一つです。ただし、生成ごとのスタイルのばらつきやライセンスの曖昧さがあるため、デフォルトではなく、意図的に選択してください。

ステップ 3：スタイルファミリーを一つに絞る

量よりもスタイルの一貫性が重要です。同じファミリーのイラスト5点はデザインされた印象になりますが、スタイルの異なる50点はクリップアートのように見えます。製品内のすべてのイラストで、幾何学的か有機的か、フラットか立体的か、線の表現、ディテールのレベルを統一してください（キャラクターアートでは、プロポーションと多様性も統一します）。実際には、ステップ 2 でライブラリ／ファミリーを一つ選び、その中で統一します。必要なコンセプトが見つからない場合は、別のスタイルの素材を持ち込むのではなく、同じファミリー内で最も近いメタファーを選んでください。

ステップ 4：ブランドに合わせる — トークンで色を変更する

• 手軽な方法：ダウンロード前に、unDrawのサイト上のカラーピッカーでアクセントカラーをプライマリカラーに設定します。
• 長期的に使える方法：SVGをインライン化し、ハードコードされた塗りをセマンティックトークンに置き換えます。fill="#6c63ff" → fill: var(--primary)（style属性またはCSS）。これにより、ダークモードを含むテーマ切り替えに同じ素材が追従します。肌の色と純粋なニュートラルカラーはそのままにし、アクセント、衣服、オブジェクト、背景の図形をトークン化します。
• 詳細は references/svg-integration-and-theming.md を参照してください（ダークモードの3つの方法を含みます。ライトテーマ向けのアートは、変更せずにダーク背景で使うと、ほとんどの場合うまく表示されません）。

ステップ 5：正しく組み込む

• CSS／Reactからトークンによる色変更やa11y制御を行う場合は、インラインコンポーネント（Vite：SVGRプラグイン経由で import Art from "./empty.svg?react"）。
• サイズの大きな静的アートには <img src>（import artUrl from "./empty.svg?url"）を使います。キャッシュ可能で遅延読み込み（loading="lazy"）ができ、CSSから内部にアクセスすることはできません。
• 常にレイアウトシフトを防いでください。SVGには viewBox を保持し、表示領域には明示的なサイズまたは aspect-ratio を指定します。
• バンドルを適切に管理します。インラインSVGはJSバンドルに含まれるため、ファーストビューに表示される小さな空状態アートはインライン化し、それ以外は img ＋遅延読み込みにします。
• 判断表の全体とLottieの埋め込みについては references/svg-integration-and-theming.md を参照してください。

ステップ 6：アクセシビリティのデフォルト設定

• 空状態／装飾用アートには aria-hidden="true"（インライン）または alt=""（img）を指定します。隣接する見出し／テキストがメッセージを伝えます。画像自体が情報を伝える場合は、意味のある alt テキストを指定します。
• アニメーション画像は prefers-reduced-motion に従い（最初のフレームを静止画として表示）、自動再生の動きが合計5秒を超える場合（ループするかどうかを問わず）は、一時停止コントロールが必要です（WCAG 2.2.2）。
• コントラスト要件の詳細、空状態の構成要素とバリエーションについては、references/empty-states-and-a11y.md を参照してください。

ルール

厳守事項（必ず守ってください）：

• アセットをリリースする前にライセンスを確認してください。アセットの近くに、出典・ライセンス・日付を記録してください。必要な帰属表示（Storysetの無料プラン）を見える形で掲載するか、アセットを使用しないでください。
• 永続データを表示する画面に画像を使用しないでください。オーナーから明示的な指示がない限り、画像を使用できるのは空の状態、オンボーディング、エラー、成功時の画面に限ります。
• 1つの製品につき、スタイルファミリーは1つにしてください。
• 装飾画像は支援技術から隠してください（aria-hidden／空のalt）。情報を伝える画像には、適切な代替テキストを付けてください。
• アニメーション画像は動きを減らす設定に対応させてください。prefers-reduced-motionでは静止画に切り替え、合計5秒を超える自動再生アニメーションには一時停止コントロールを設けてください。
• 出典のあるアセットをコレクションとして再配布しないでください。ここに記載したすべての出典が再配布を禁止しています。アセットは製品内でのみ使用してください。

推奨事項（変更可能）：

• デフォルトの出典にはunDrawを使用してください。アニメーションを使う意義がある場合は、Storyset／Lottieを使用してください。
• イラストはあくまで補助的な要素とし、主役にしないでください。空の状態のイラストは、デスクトップでは高さを約160～240 pxまでに抑え、モバイルではさらに小さくしてください。
• イラストで対応できる場合は、テーマごとにアセットを用意するのではなく、トークンを使って色を変更してください。

注意点

• Storysetの帰属表示は実際に守るべき義務です。「無料」とは、帰属表示が必要という意味です。誰も見つけられないフッターにクレジットを隠しても、利用条件を満たしません。unDrawおよびLottie-Simple-Licenseのアセットには帰属表示は不要です。
• ライトテーマ用のイラストはダークモードで気づかないうちに表示が崩れます。組み込みの白い図形は明るく光り、濃い色の線は見えなくなります。すべてのイラストを両方のテーマで確認し、トークン化した塗りつぶし、またはテーマごとのアセットで修正してください。出典のあるSVGをそのまま使うと、ほとんどの場合ダークモードに適しません。
• SVG自身の<title>が漏れます。ダウンロードしたSVGの多くには<title>（「undraw_empty_4zx0」など）が含まれています。aria-hiddenを設定し忘れると、支援技術がこれを読み上げます。また、ブラウザーではホバー時のツールチップとして表示されます。インラインで使う際は、aria-hiddenを設定するだけでなく、<title>を削除するか、意味のある内容にしてください。
• 寸法未指定によるCLS：表示領域が確保されていないSVGは、読み込み時にレイアウトを急に変化させます（特にimgと遅延読み込みを併用する場合）。表示領域を確保してください。
• すべてをインライン化するとバンドルが肥大化します。40 kBのイラストを共有チャンクにインライン化すると、すべてのルートに配信されます。CSSから参照する必要があるものだけをインライン化し、それ以外には?urlを使用してください。
• currentColorはカラーパレットではありません。単色のグリフの色は変えられますが、多色のイラストには使えません。多色のイラストでは、塗りつぶしごとに明示的なトークン置換が必要です。
• Lottieの継承ライセンス：Lottie-Simple-Licenseのアニメーションを改変すると、再配布時にも同じライセンスが適用されます。アプリ内で使う分には問題ありませんが、アセットパックを公開する場合は注意が必要です。

アンチパターン

• 「親しみやすく見えるから、どこにでもイラストを追加しよう」。まず配置の原則を守ってください。伝えるメッセージのない画像は雑然とした印象を与え、データを表示する画面はすっきり保つべきです。
• 「無料だから、そのまま使おう」。無料プランは、問題になりやすい義務（帰属表示）の条件がそれぞれ異なります。ライセンスを確認し、記録してください。
• 「各ライブラリから最も良いイラストを選んで組み合わせよう」。アセットごとの品質より、スタイルファミリーの一貫性を優先してください。
• 「今リリースして、後からイラストをダークモード対応にしよう」。後回しにすると、視覚上の不具合として報告されます。統合時に両方のテーマで確認してください。
• 「装飾目的だから、a11y属性は省略しよう」。装飾目的かどうかは、実装で決めるa11y上の判断です（aria-hidden／alt=""）。省略してよいものではありません。

出力

Reactコードベースのイラスト付きUI画面：プロジェクトのアセット規約に従い、出典とライセンスを記録したアセットを使用します。空の状態、オンボーディング、エラーページには、一貫性があり、トークンで色を変更でき、テーマに対応し、アクセシブルな画像を配置します。アニメーション画像は、動きを減らす設定に応じて表示を制御します。利用者はコードベースのレビュアーとデザインシステムのドキュメントです。このドキュメントには、製品で選んだスタイルファミリーと配置ルールを記録します。

関連

• モーション実装スキル（Motion for React）は、UI 要素やインタラクションのアニメーション、およびこのスキルのアニメーション画像ルールが参照する視覚効果を抑える動作の仕様を担います。画像 ファイル（Lottie を含む）はここで扱います。
• アイコンシステムの規約（lucide など）は、別のアセットクラスであるアイコンを担います。
• デザインシステムのスキル／ドキュメントには、この製品で確定したファミリー、トークン、配置を記録します。このスキルは、それらに適用する持ち運び可能な手順書です。
• コンポーネントのスタイリングスキル（Radix/Tailwind）は、画像を配置するコンポーネントを担います。

段階的な情報開示

• references/sourcing-and-licensing.md — ソースの選定、利用条件の確認、クレジット表記や生成アートに関する質問への対応時に読み込みます。
• references/svg-integration-and-theming.md — SVG の埋め込み（インライン、img、Lottie）、トークンに合わせた色の変更、ダークモードの修正時に読み込みます。
• references/empty-states-and-a11y.md — 空状態、オンボーディング、エラーページの作成や、画像のアクセシビリティ対応時に読み込みます。
• references/sources.md — 調査の出典情報です。主張を監査する場合にのみ読み込みます。

本文の上限

• description は 1,024 文字以下（agentskills.io の上限）です。
• 本文は約 500 行／5,000 トークンを目安とし、超過分は references/ に置きます。