← 一覧へ
🎨 デザインCC / Codex 両対応難易度: 初心者
デザインショットガン design-shotgun
デザインの選択肢をバンッと並べて選ぼう！
これは何？
これはデザインのアイデアをたくさん出して比較しながら進められる便利なツールです。Webサイトやアプリの画面デザインを考える時に、AIが複数のバリエーションを提案してくれます。並べてみて好きなものを選んだり、フィードバックをもとに少しずつ改良していけるのが特徴です。
これでできること
- Webサイトのトップページデザインを複数パターン作成できる
- アプリUIのレイアウト案を一度に3〜5種類生成できる
- デザイン候補を並べて比較できるボードを作成できる
- チームメンバーからのフィードバックを構造化して収集できる
- フィードバックをもとにデザインを改善していける
こんな時に便利
新しいWebサイトのデザイン案をいくつか見比べたい時
クライアントに提出するデザインの選択肢を増やしたい時
「このデザイン、なんか違うな」と感じた時に別案を手早く作りたい時
チームでデザインの方向性を話し合うための材料が欲しい時
デザインに煮詰まっていて新しい視点が欲しい時
使い方
「デザインを探索」「選択肢を見たい」「デザインバリアント」などのキーワードを入れると自動で起動します。UI機能について説明している途中で、まだ具体的な見た目が決まっていない場合にも便利です。最初にいくつかのデザイン案が生成されるので、好みや目的に合ったものを選んで調整していきましょう。
使用例（こう頼んでみよう）
「ECサイトのトップページデザインを3パターン作ってみて」「この画面のレイアウト案をもう少し見せて」「ヘッダーメニューのデザインの選択肢をいくつか表示して」「前のデザインと比べて、もっとモダンな印象の案を出して」必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/garrytan/gstack/tree/main/design-shotgun手動で置く
Claude Code →
~/.claude/skills/design-shotgun/Codex →
~/.agents/skills/design-shotgun/使いこなしのコツ
- 「なんとなく違う」と感じた時は、具体的な部分（色・フォント・余白など）を指摘するとより良い改善案が出せます
- 生成されたデザインの中から気に入った要素を組み合わせるのも効果的です
- チームで使う時は「A案の〇〇の部分がいいけど、B案の△△も取り入れたい」のように具体的なフィードバックをするとスムーズです