前回の記事で、Claude Codeの最強の武器は「Webページの見た目を作る力」であり、PDFやポスターもまずWebページとして作ってから変換すると品質が劇的に上がるという話をしました。
でも、1つ疑問が残りますよね。
「Claude Codeが作ったWebページの見た目って、どうやって確認するの？」
ファイルを作ってもらっても、中身がどう見えるか分からなければ、「もう少し余白を広げて」「この色を変えて」といった指示が出せません。
実は、VS Codeにはリアルタイムで見た目を確認しながら編集できる仕組みがあります。これを使うと、Claude Codeに指示を出す → 見た目が即座に更新される → 気になる点をまた指示する、というサイクルが画面を切り替えずに回せます。
この記事では、その具体的なやり方を紹介します。
全体像：どういう流れで作業するのか
まず、完成までの流れをイメージしてください。
① Claude Codeに「Webページとして作って」と頼む
② VS Code内でリアルタイムに見た目を確認する
③ 「ここを変えて」と指示する → 即座に反映される
④ 納得いくまで②③を繰り返す
⑤ 完成したらPDFや画像に変換する
ポイントは②と③のサイクルです。見た目を確認しながら微調整を繰り返せるので、完成度がどんどん上がっていきます。
これを実現するのが、VS Codeの拡張機能 「Live Preview」 です。
STEP 1：Live Previewをインストールする
Live Previewは、Microsoft公式が提供しているVS Codeの拡張機能です。Webページの見た目を、VS Codeの画面内にリアルタイムで表示してくれます。
インストール手順
- VS Codeを開く
- 左サイドバーの四角いアイコン（拡張機能）をクリック
- または
Cmd+Shift+X（Mac）/Ctrl+Shift+X（Windows/Linux）
- または
- 検索バーに 「Live Preview」 と入力
- Microsoft公式のLive Preview を見つけて「Install」をクリック
これだけで準備完了です。追加の設定は不要で、すぐに使えます。
STEP 2：Claude Codeにファイルを作ってもらう
VS CodeでClaude Codeを開き、作りたいものを伝えます。
前回の記事で紹介した通り、「Webページとして作って」 の一言がポイントです。
例：
請求書のテンプレートをHTMLファイルとして作って。
A4サイズで、会社名・請求日・明細表・合計金額を含めてください。
Claude Codeがファイルを作成すると、VS Codeのエディタにそのファイルが表示されます。
STEP 3：Live Previewで見た目を確認する
ここからがこの記事の核心です。
プレビューの開き方
Claude Codeが作ったHTMLファイルがエディタに表示されている状態で：
- 画面右上のアイコン（虫眼鏡のようなプレビューアイコン）をクリック
これだけで、エディタの右側にWebページの見た目がそのまま表示されます。
画面が左右に分かれて、左側にファイルの中身、右側にWebページの見た目が並びます。
リアルタイム反映の威力
ここからが本当に便利なところです。
Claude Codeに「ここを変えて」と指示すると、Claude Codeがファイルを更新します。すると、右側のプレビューが自動的に更新されて、変更結果が即座に見えるのです。
ブラウザを別で開いて、毎回更新ボタンを押して……という手間が一切ありません。
STEP 4：見た目を見ながら指示を繰り返す
プレビューを見ながら、気になる点をClaude Codeに伝えます。
色を変えたいとき：
ヘッダーの背景色をもう少し濃い青にして
レイアウトを調整したいとき：
明細表の列幅を、品名を広く、数量と単価を狭くして
要素を追加したいとき：
右下に会社のロゴを入れるスペースを追加して
フォントを変えたいとき：
全体のフォントをもう少し読みやすいものに変えて
指示のたびにプレビューが更新されるので、**「言葉で伝える → 目で確認する → また伝える」**というサイクルがスムーズに回ります。
これが、Claude Code × Live Previewの最強の組み合わせです。
STEP 5：完成したらファイル形式を変換する
見た目が完成したら、最終的なファイル形式に変換します。
PDFにしたい場合：
このHTMLをPDFに変換して
画像にしたい場合：
このHTMLをPNG画像として出力して
Claude Codeが変換まで対応してくれます。
なぜこのやり方が「最強」なのか
従来の方法と比較してみます。
従来：完成品をもらって確認する方法
Claude Codeに頼む → 完成ファイルを受け取る → 開いて確認する
→ 修正を伝える → また完成ファイルを受け取る → また開いて確認する……
ファイルを受け取って、開いて、確認して、閉じて、修正を伝えて、またファイルを受け取って……。この往復が何度も発生します。
Live Preview方式：見ながら仕上げる
Claude Codeに頼む → 目の前で見た目が表示される
→ 修正を伝える → 即座に反映される → 納得するまで繰り返す
→ 最後に変換して完成
画面の切り替えがなく、すべてがVS Codeの中で完結します。指示と確認の間のタイムラグがほぼゼロなので、感覚的には「自分の目の前でデザイナーが作業してくれている」のに近い体験になります。
実際に使える場面
この方法が特に効果を発揮するのは、こんな場面です。
請求書・見積書・報告書 レイアウトや項目の配置を目で確認しながら、細かく調整できます。
プレゼン用の資料（PDF） 色やフォントの雰囲気を見ながら、「もう少しインパクトが欲しい」「文字が小さい」といったフィードバックがすぐ出せます。
ポスター・チラシ デザインの全体バランスを見ながら、要素の配置や色味を何度でも試せます。
グラフ・ダッシュボード データの見せ方を試行錯誤しながら、一番伝わるデザインを探れます。
まとめ
Claude Codeの「Webページの見た目を作る力」を最大限に活かすカギは、作っている途中の見た目をリアルタイムで確認できる環境にあります。
- VS Codeの拡張機能 「Live Preview」 をインストールする
- Claude Codeにはまず 「HTMLファイルとして作って」 と伝える
- エディタの隣に見た目が表示されるので、見ながら「ここを変えて」と伝える
- 納得いくまで繰り返したら、最後にPDFや画像に変換する
この流れを覚えるだけで、Claude Codeとの共同作業は「出来上がりを待つ」ものから「一緒に作り上げる」ものに変わります。
ぜひ一度、Live Previewを開いた状態でClaude Codeに話しかけてみてください。見た目が目の前で変わっていく体験は、きっとClaude Codeの印象を変えてくれるはずです。
次回予告
「ここを変えたいけど、なんて伝えればいいか分からない」――Live Previewで見た目を確認していると、そんな場面が出てきます。
次回は、ブラウザの開発者ツール（F12キー）を使って「変えたい場所」をピンポイントで特定し、Claude Codeに正確に伝える方法を紹介します。これを覚えると、修正の精度とスピードがさらに一段上がります。
Cowork以外でAIを使って記事を書きたい方には、SEO特化の【Value AI Writer byGMO】もおすすめです。
この記事が役に立ったらフォローしてください
