Claude CodeにTailwindCSS専用コーチになってもらって段階的に学習してみた

はじめに

Tailwind CSSの学習をClaude Codeの出力スタイルを変更して一緒に考えるようしたら、ちょっとだけ楽しかったかも

昨今のVibe Coding

現在、プログラムを書くとなった際にAIエージェント(Claude Code, CodeX等々)を利用して書いている人が多いのではないでしょうか。

僕は、Reactなんかのコードを書いているときHTML、CSSなどの設計をほぼ全てClaude Codeに丸投げしています。ちなみにCSSはTailwindcssを使用しています。

そんなことを続けているとHTMLやCSSをいざ書こう!となったときに頭がパーになってしまいます。具体的には

• Tailwind CSSでどのユーティリティを使えばいいかわからない
• 書いたコードの結果がイメージできない
• AIが支援したコードは完成品が提示されるだけで学習に繋がらない

解決方法

そこで、実践したことを以下にまとめたいと思います。

Cladue Codeにはoutput-style機能というものがあります。output-styleはClaude Codeがユーザとコミュニケーションを取る際のスタイルをカスタムする機能です。

最初から用意されている2つのスタイルがあります。

• Explanatory（説明型）: コードベース設計パターン、理解に特化したスタイル
• Learning（学習型）: 人間と協調しながらコードを記述するスタイル

また、自分でスタイルを作るカスタム出力スタイルがあります。今回はそのカスタム出力スタイルを利用して、tailwindcssをAIと協調しながら学ぼうというスタンスです。

Learningスタイルを利用しない理由としては、細かい部分のスタイルを自分自身で制御するのが難しいのと、人間に行ってほしい部分もAIがサクサク作ってしまうおそれがあったため今回はカスタム出力スタイルを利用しました。

カスタム出力スタイルの作成

作成方法はClaude Codeを起動している状態で以下を実行

/output-style:new `カスタム出力スタイルの名前`

カスタム出力スタイルは以下の場所にマークダウンファイルとして保存されます。

• 個人用：~/.claude/output-styles/
• プロジェクト用:${workspaceFolder}/.claude/output-styles/

今回作ったカスタム出力スタイル

主に次のことを意識して段階的な学習サイクルを作るようにカスタム出力スタイルを決めました。

• 最初に全体計画(htmlの構造、スタイル)のみ提示して生成停止
• ユーザ主導で1ステップずつ進行
• AIは要件をTODO(human)として、コード内にコメントで記載
• 次のステップで終わったTODOコメントを消し、新たなTODOコメントを記載（TODOコメが増えすぎて見づらくなるため）
• AIがtailwindなどのスタイリングを日本語で要件を述べるように

カスタム出力スタイルの作成実行

tailwindcss-coachという名前でカスタム出力スタイルを作成する

/output-style:new tailwindcss-coach

実際のカスタム出力スタイルの内容

作成されたマークダウンファイルに以下の内容を記載しました：

作成したカスタム出力スタイルはこちら

重要な特徴：

• 2フェーズ構造: 全体計画提示 → ユーザー主導実装
• 日本語でのヒント表現: 「背景を青の600」「左右に4・上下に2の余白」
• 動的TODOコメント管理: 完了分削除、現在タスクのみ表示
• 段階的進行: Step1（HTML構造）から順番に

実行結果(簡単なサインインページを作る例)

• 最初の実行では各要件と必要なステップを考えてくれる。

● 要件分析

  シンプルなサインインページを作成し、HTML構造とTailwind
  CSSのスタイリングをユーザー自身が実装できるよう段階的に支援します。

  実装計画 (全5ステップ)

  Step 1: HTML基本構造 - ページコンテナ、フォームコンテナ、入力要素の配置
  Step 2: レイアウト設計 - Flexboxでの中央配置、フォーム要素の縦並び配置
  Step 3: 視覚的装飾 - 背景色、カード風の見た目、境界線と影の追加
  Step 4: 間隔・サイズ調整 - 入力欄の幅、ボタンサイズ、要素間隔の最適化
  Step 5: レスポンシブ対応 - モバイル/デスクトップでの表示最適化

  ---次のアクション: どのステップから始めますか？「Step1をお願いします」と入力してください。
  重要: 一度に全てではなく、1ステップずつ進めることで確実なスキルアップを目指します。

• step1の実行をお願いすると,簡単な構造と各スタイリングの提案をしてくれる.このTODOが終えるとAIが次のステップとTODOコメントを記載してくれる。

export default function SignInPage() {
  return (
    {/* TODO Human: ページ全体を包むメインコンテナのdivタグを追加してください */}
    {/* ヒント: classNameは空で構いません。後のステップでスタイルを追加します */}
    
      {/* TODO Human: サインインフォームを格納するカードコンテナのdivタグを追加してください */}
      {/* ヒント: フォーム要素をグループ化する役割です */}
      
        {/* TODO Human: 「サインイン」という見出しを追加してください */}
        {/* ヒント: h1タグを使用し、日本語または英語でタイトルを記述 */}
        
        {/* TODO Human: formタグを追加して、以下の要素を含めてください:
            1. メールアドレス用のlabelとinput (type="email", name="email")
            2. パスワード用のlabelとinput (type="password", name="password")  
            3. サインインボタン (type="submit")
            ヒント: 各inputには対応するlabelを付け、アクセシビリティを考慮 */}
        
  );
}

おわりに

AIとの学習では「教えてもらう」から「一緒に考える」に変えると効果的だと思いました。特にHTMLやCSSなどはあやふやな理解で進めてしまっており、このスタイルで考えることを積み重ねて学ぶことが重要だと感じます。ただ、TODOコメントなど大量に生成されるためコードベースが見づらくなるのが欠点です。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼