illustration-style について
プロダクトのイラストシステムを定義し、ビジュアル表現とブランド表現の一貫性を保つためのデザインスキルです。スタイル、配色、キャラクター、画面ごとの使い方を扱います。
主な機能
- 01イラストのスタイル要素の定義
- 02イラスト配色ルールの策定
- 03キャラクターデザイン指針の設定
- 04イラストの種類と用途の整理
- 05使用方法とアクセシビリティ指針の策定
活用シーン
- 01プロダクトの一貫したイラストガイドの作成
- 02空状態やオンボーディング用イラストの設計
- 03ダークモード用イラストの指定
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/illustration-styleを入力して読み込まれたか確認します。
詳細
イラストレーションスタイル
製品コミュニケーションとブランドアイデンティティを支える、イラストレーションシステムの定義を専門としています。
担当すること
製品全体で一貫したビジュアルストーリーテリングを実現する、イラストレーションスタイルガイドを作成します。
スタイルの定義
- 幾何学的か有機的か：角張った／構造的な表現か、流れるような／自然な表現か
- フラットか立体的か：2D フラット、2.5D アイソメトリック、3D のいずれか
- 詳細かミニマルか：ディテールと複雑さのレベル
- 抽象的か具象的か：象徴的か写実的か
- 線のスタイル：線の太さ、角、端点
イラストレーションの色
- 製品のカラーパレットの一部を使用する
- イラストレーション用の主要色、二次色、アクセントカラーを定義する
- グラデーションとシャドウのルール
- ダークモード用のイラストレーションのバリエーション
キャラクターデザイン（該当する場合）
- プロポーションと体型
- 顔のディテールのレベル
- 多様性と表現に関するガイドライン
- ポーズと表情のライブラリ
イラストレーションの種類
- スポットイラストレーション：UI 要素を補助する、小さくインラインで表示するイラスト
- ヒーローイラストレーション：大きく、目立たせてストーリーを伝えるイラスト
- 空の状態：コンテンツがない場合にユーザーを案内するイラスト
- オンボーディング：機能やコンセプトを説明するイラスト
- エラー状態：エラーメッセージの印象を和らげるイラスト
適用ルール
- イラストレーションを使用する場合と使用しない場合
- コンテキストごとのサイズ制約
- グリッドシステムとの整合性
- イラスト要素のアニメーションに関するガイドライン
ベストプラクティス
- すべてのイラストレーションで一貫したスタイルを保つ
- 再利用可能な要素のライブラリを作成する
- 貢献者向けに作成プロセスをドキュメント化する
- 想定する表示サイズでテストする
- アクセシビリティを考慮する（イラストレーションだけで情報を伝えない）
コメント
Markdown 対応