使い方ガイドへスキップ
Illustration Style作者 Owl-Listener

Illustration Style スキル。

制作を依頼するイラストや繰り返し使うイラストに、共通のビジュアル言語と、インターフェース上での明確な役割を与えます。

  • UX
  • デザインガイダンス
ソースレビュー · Illustration StyleSKILL.md
タスク UX 成果物 • イラストのビジュアル言語ガイド • パレット、キャラクター、再利用要素のルール • 利用場面ごとの適用方法とアクセシビリティのガイダンス 始める前に ビジュアルの参考資料、プロダクトの色、イラストが表示される画面とサイズを確認できるエージェント。
編集部による要約 · レビュー済みソース 2026-10-07 · 生成された例ではありません

01 機能概要

Illustration Style:ビジュアル言語を定義する

イラストファミリーのビジュアルスタイル、パレット、キャラクター、プロダクト画面での使い方を定義します。

ソースに基づくワークフロー実行ベンチマークではありません

進め方

Illustration Styleは、イラストファミリーがどのような見た目であるべきか、どこに属するかを規定します。幾何学的な形状と有機的な形状、フラットな表現と立体的な表現、ディテールの量、抽象度、線のスタイルを扱います。

ソースでは、そのビジュアル言語をプロダクトカラー、任意のキャラクタールール、ヒーロー画像・空の状態・オンボーディング・エラーなどの各場面に結び付けています。再利用要素と制作ガイダンスも求めています。これはアートディレクションの仕様であり、画像生成モデルや完成したアセットパックではありません。

期待される成果物

  • イラストのビジュアル言語ガイド
  • パレット、キャラクター、再利用要素のルール
  • 利用場面ごとの適用方法とアクセシビリティのガイダンス
ブリーフ例を見る

ブリーフからレビューまで

  1. 01
    スタイルの軸を定める

    具体的な参考例とともに、形状、立体感、ディテール、抽象度、線の扱いを選びます。

  2. 02
    ファミリーのルールを設定する

    パレットを絞り、影やグラデーションを定義し、必要な場合にのみキャラクターのガイダンスを加えます。

  3. 03
    適用場面を整理する

    ヒーロー、スポット、空の状態などのイラストで、スケールと目的がどう異なるかを説明します。

02 利用場面

使いどころ

シリーズの制作を依頼する前や、既存のプロダクトイラストに一貫したビジュアルの方向性が必要なときに使います。

適したケース

  • シリーズの制作依頼関連性のある作品を制作できるよう、関係者に十分な制約を伝えます。
  • 一貫性のないプロダクト画像すべての場面を同一の構図に押し込めることなく、イラストファミリーを揃えます。

確認すべき制限

  • 画像ジェネレーターではありません文書化されている出力はガイダンスです。完成したアートワークには別の制作プロセスが必要です。
  • アイコン標準ではありません小さな象徴的UIアイコンには、別のシステム仕様があります。

用意する入力

  • ブランドの参考資料プロダクトカラーと、承認済みのビジュアル例を用意します。
  • 適用場所の一覧アートワークが表示される画面とサイズを一覧にします。
  • コンテンツのニーズコンセプト、キャラクター、表現上の要件を明確にします。

03 重要な判断

重要な判断

  1. 幅を持たせた一貫性

    共通の言語があれば、同じ場面を繰り返さなくても複数の種類のイラストを支えられます。

  2. 目的に沿った配置

    利用ルールでは、イラストが役立つ場面と、不要な装飾になる場面を説明します。

04 依頼例

焦点を絞ったブリーフで試す

以下のブリーフ例はテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

designer-skills リポジトリからこのタスクのSKILL.mdを、エージェントが対応するスキルの場所に読み込みます。エントリーファイルでは、汎用のインストーラーコマンドは定められていません。

アップストリームのソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/illustration-style/SKILL.md

承認済みのビジュアル参考資料と、イラストが表示される場所を用意してください。このスキルが生成するのはアートディレクションのガイダンスであり、完成した画像ではありません。

まず1つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

ブリーフ例
illustration-styleを使って、オンボーディングと空の状態のアートワーク向けガイドを作成してください。形状、立体感、ディテール、線、パレットのルールを定義し、ダークバリエーションと、キャラクターが登場する場合の表現に関するガイダンスを含めてください。表示サイズの確認方法と代替テキストを指定し、アセットが生成済みであるとは主張しないでください。

結果を確認する

実際の出力を、以下の観察可能な基準に照らして確認します。

  • スタイルの決定事項が、別のイラストレーターが使えるほど具体的である。
  • 各適用場面に、サイズと目的のガイダンスがある。
  • 重要な情報が画像だけで伝えられていない。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、以下にリンクされた固定のソースリビジョンについて説明しています。アップストリームの動作や要件は変更される可能性があります。

ソースの所有者
Owl-Listener
ライセンス
MIT
レビュー済みスナップショット
2026-10-07 · 9a6930cf84a8
編集部によるソース要約
イラストファミリーのビジュアルスタイル、パレット、キャラクター、プロダクト画面での使い方を定義します。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用数や品質スコアではありません。

06 開始前の質問

始める前の質問

完成したイラストを生成しますか?

いいえ。生成するのはスタイルガイドです。完成したイラストには別の制作プロセスが必要です。

すべてのスタイルでキャラクターを使う必要がありますか?

いいえ。キャラクターのルールは、明示的に条件付きです。

ヒーローと空の状態のアートは同一にすべきですか?

ビジュアル言語は共有できますが、スケールや伝達上の要件に応じて異なる扱いになります。

OpenDesign

次のデザイン反復のための余地をつくりましょう。

ブリーフ、ソース素材、デザイン作業をローカルワークスペースにまとめて管理します。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/illustration-style/SKILL.md