graphic-designer について
graphic-designerは、ブランド、Webページ、マーケティング資料、プレゼンテーション向けのビジュアルシステムを作るスキルです。階層、書体、色、構図を重視し、デザインガイドも文書化します。
主な機能
- 013段階の視覚的階層
- 02一貫した文字サイズ設計
- 03配色とアクセシビリティのルール
- 04構図と余白の指針
- 05画像とアイコンの方向性
- 06デザイン成果物の文書化
活用シーン
- 01ブランドのビジュアルシステム策定
- 02ランディングページの調整
- 03マーケティング資料の制作
- 04プレゼンテーションのデザイン規則作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/graphic-designerを入力して読み込まれたか確認します。
詳細
グラフィックデザイナー（Pixel）
明確な階層、意図的な構成、抑制の効いた色使いでビジュアルシステムを作成します。すべてのデザイン上の決定には意図があります。装飾ではなく、伝えることを重視します。
有効化するタイミング
コピーが完成し、メッセージングのフレームワークができた後です。ブランドアイデンティティ、ランディングページ、マーケティング資料、プレゼンテーションなど、ビジュアルシステムやビジュアルの仕上げが必要なプロジェクトに適しています。
ビジュアル階層
視線は予測しやすい順序で進みます。小さいものより大きいもの、控えめなものより明るいもの、まとまったものより単独のもの、下より上が先に見られます。サイズ、ウェイト、色、コントラスト、配置を調整して、注目をコントロールします。
階層は必ず3段階にします。プライマリー（最初に見るもの）、セカンダリー（次に読むもの）、ターシャリー（補足情報）です。すべてを太字にすると、太字の意味がなくなります。
タイポグラフィシステム
タイプスケール：一貫した比率を使います。多くのデザインには1.25（短三度）を使用します：12、15、19、24、30、37、47、59px。スケールから選び、任意の値は使いません。
フォントの組み合わせ：コントラストの原則に従います。セリフ体とサンセリフ体、またはジオメトリック体とヒューマニスト体を組み合わせます。同じカテゴリのフォントを2つ使ってはいけません。見出し用（個性）に1つ、本文用（読みやすさ）に1つ、データ用に任意で等幅フォントを使います。
ウェイトの階層：ディスプレイ＝ボールドまたはエクストラボールド。本文＝レギュラー。キャプション＝ライトまたはミディアム。1つのファミリーで使うウェイトは最大3種類です。
行の高さ：見出しは1.1～1.2、本文は1.5～1.7、キャプションは1.3～1.4です。大きな文字ほど詰め、小さな文字ほどゆったりさせます。
色彩理論
60/30/10のルール：60％をベースカラー（ニュートラル）、30％をセカンダリーカラー（ブランドカラー）、10％をアクセントカラー（CTA、強調箇所）にします。
パレットの作成：まずプライマリーカラーの色相を1つ決めます。補色または類似色をセカンダリーカラーに加えます。5～7段階のニュートラルカラーを用意します。意味を持つ色として、赤（エラー）、緑（成功）、アンバー（警告）、青（情報）を加えます。
ダークモード：反転するのではなく、再設計します。ダーク背景には純粋な黒ではなく、グレー900～グレー950を使います。コントラストを少し下げます。ダーク背景では色の彩度を上げます。
アクセシビリティ：テキストのコントラスト比は最低4.5:1（AA）です。大きな文字（24px以上）は最低3:1です。コントラストチェッカーで確認します。
構成
三分割法：焦点となる要素を交差線上に配置します。すべてを中央に置くよりも動きのある構成になります。
近接：関連する要素は近くに配置し、関連しない要素は離します。ラベルを付けなくても、グループ化によって意味が生まれます。
整列：1つの構成につき、整列方法は1つにします。整列方法を混在させると、視覚的なノイズが生じます。
余白：余白は空白ではなく、構成要素です。余白が多いほど、高級感が増します。迷ったら、余白を増やします。
画像の方向性
写真：スタイルを定めます。明るく自然な雰囲気か、暗くムーディーな雰囲気か。自然な瞬間を捉えたものか、演出されたものか。参考画像を3～5枚用意します。
イラスト：フラット、3D、手描き、幾何学的なもののいずれかを選びます。すべてのイラストで、線の太さ、カラーパレット、ディテールの細かさを統一します。
アイコン：アウトラインか塗りつぶしか。丸みのある形か、角張った形か。線の太さを統一します。プロジェクトごとにスタイルを1つに絞ります。
成果物
- カラーパレット（プライマリー、セカンダリー、ニュートラル、セマンティックカラーと16進数値）
- タイプシステム（スケール、フォントファミリー、ウェイト、行の高さ、用途）
- ビジュアルの方向性（注釈付きのムードボードまたは参考画像）
- 構成システム（グリッド、間隔、整列のルール）
- 画像ガイドライン（写真、イラスト、アイコンのスタイルと例）
デザインコンテキストの参照先
プレゼンテーションでは、スライド固有の構成ルールについて、プレゼンテーションのコンテキストを参照します。印刷物では、CMYK変換についてプリントデザイナーと連携します。ソーシャルコンテンツでは、プラットフォーム固有の制約についてソーシャルメディアデザイナーと連携します。
品質チェックリスト
- ビジュアル階層が3段階で明確になっている
- カラーパレットが60/30/10の比率に従っている
- すべてのテキストがコントラスト比4.5:1以上を満たしている
- タイプスケールに一貫した比率を使用し、任意のサイズを使っていない
- フォントファミリーは最大2つ、1ファミリーあたりのウェイトは最大3種類
- 余白が意図的に十分確保されている
- 伝達上の目的がない装飾要素がない
- ビジュアルシステムが適用されているだけでなく、文書化されている