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