Written with AI assistance from the source video. The video is the authority.
14:14AI LABS
Log in to leave a comment
No posts yet
Claudeが出力するHTMLファイルは、最初はそれらしく見えます。しかし、ページが3つを超えた時点で修正は悪夢と化します。フォントサイズを一つ変えるために10個ものファイルを開くのは時間の無駄です。コードを分離しましょう。
/assets/css、画像は /assets/img、レイアウトは /components といったように分類します。main-header.html のように、小文字とハイフンのみを使用してください。これにより、Claudeがパスを誤解する可能性が減ります。<head> タグ内にスタイルシートへのリンクを追加し、スタイルを一箇所で管理できるようにします。こうすることで、後からヘッダーを一つ修正するだけで、すべてのページに変更が即座に反映されます。その都度ファイルを手直しして時間を浪費する必要はありません。
カラーコードをコンポーネントごとに直接入力してはいけません。ボタンの色を変えたいときに、何千行ものコードを探す羽目になります。代わりにCSS変数を使用しましょう。
/assets/css/global.css ファイルを開きます。:root { --main-color: #000000; --sub-color: #ffffff; } のように、主要な色を3つ定義します。background-color: var(--main-color); のように指定します。後でブランドカラーが変わった場合、ファイルを一つ修正するだけで3秒で完了します。すべてのページのボタン色が一括で変わります。デザインを毎回手動でいじるよりもはるかに効率的です。
コードを修正してブラウザに戻り、リロードを繰り返す作業は集中力を削ぎます。VS Codeの「Live Server」拡張機能をインストールしましょう。
リロードなしでリアルタイムに変更を確認してください。デザイン修正にかかる時間が半分以下に短縮されます。
Claudeはリクエストのたびに異なる形式でコードを書きます。最初からルールを決めて対話しましょう。プロジェクトのルートディレクトリに CLAUDE.md ファイルを作成します。
CLAUDE.md にCSS変数のルールや使用するフォルダ構造を書き留めておきます。<code>）で定義しておきます。CLAUDE.mdのルールを守って作成して」と一言添えるだけです。AIが勝手にコードの書き方を変えてしまうことが大幅に減ります。
サーバー設定や複雑な環境構築に悩む必要はありません。Vercelを使えば、コードをアップロードするだけでウェブサイトがすぐに動きます。
サーバーを自分で管理する必要はありません。ドメインは自動的に生成され、問題があればいつでも以前のバージョンに戻すことができます。今すぐコードを公開しましょう。