会社HP制作
改善・ブラッシュアップ
デザイン修正・画像埋め込み・AIとの相談で完成度を高める
デザインや配色を好みに合わせて修正指示を出す方法
色・配色の指示
「色を変えて」だけでも通じますが、より具体的に伝えると意図通りに仕上がります。色の伝え方は3つあります。
| 伝え方 | 例 | 精度 |
|---|---|---|
| 雰囲気で伝える | 「落ち着いた紺色に」「温かみのある茶色系に」 | おおよそ合う |
| 具体的な色名で伝える | 「ネイビーブルー」「オレンジ」「チャコールグレー」 | かなり近い |
| カラーコードで伝える | 「#1141a8（濃い青）にして」 | ピタリと合う |
よく使われる配色パターン
ボタンのアクセントカラーはオレンジ（#ea580c）にして。
全体的に「信頼感のある落ち着いた印象」にしたい。
レイアウト・余白の指示
「なんとなく窮屈」「スカスカに見える」という感覚的な言葉でも通じます。
「なんか窮屈」「文字と文字の間が詰まって読みにくい」「カードが横に並びすぎて見づらい」
「全体的に余白を広くして、ゆったりした雰囲気にして」
「各セクションの上下のパディングを大きくして」
「スマホでカードを1列に変えて」
特にセクションとセクションの間の隙間を大きくして。
サービスカードは今3列だけど、スマホでは1列になるようにして。
フォント・文字の指示
トップのキャッチコピーは特に大きく、画面いっぱいに広がる感じにして。
一度にたくさん変えると、どの変更が良かったかわからなくなります。「色だけ変える」「余白だけ調整する」と1回の指示を絞ると、納得いく結果になりやすいです。
画像を添付してWebサイトへ埋め込む具体的な手順
使える画像の種類
Webサイトに使う画像はファイルサイズが小さいほど良いです。スマホで開いたとき重くならないよう、あらかじめ適切なサイズに調整しておきましょう。
| 形式 | 用途 | 目安サイズ |
|---|---|---|
| .jpg / .jpeg | 写真・ヒーロー画像 | 300KB 以下が理想 |
| .png | ロゴ・透過画像 | 200KB 以下が理想 |
| .webp | 写真全般（モダン形式・推奨） | 150KB 以下が理想 |
| .svg | アイコン・ロゴ（ベクター） | サイズ問わず鮮明 |
スマホで撮った写真は4〜8MBと大きすぎます。 Squoosh（squoosh.app） という無料ツールで、ブラウザ上で簡単に圧縮できます。
images フォルダに画像を入れる
第3回でClaudeが自動生成した場合は images/ フォルダが既にあります。
なければ VS Code の左側でフォルダを右クリック →「新しいフォルダー」で作成します。
エクスプローラーで画像ファイルを yamada-plumbing/images/ の中にコピー&ペーストします。
ファイル名は英数字・ハイフンのみに変更しておくと安全です。
📁 images/
📷 hero.jpg ← ヒーロー画像
📷 logo.png ← ロゴ
📷 work-01.jpg ← 施工実績写真
AIに埋め込みを指示する
画像を images/ フォルダに入れたら、あとはClaudeにファイル名を伝えて指示するだけです。HTMLのコードを自分で書く必要はありません。
画像の上に少し暗いオーバーレイをかけて、その上に白い文字を表示して。
施工実績セクションにこの3枚を横3列で並べて。
各写真の下に「施工例①」「施工例②」「施工例③」とキャプションをつけて。
高さは 40px で、会社名のテキストの代わりに使って。
Claudeはサーバーにアクセスできないので、自分のPC内のフォルダに画像を置いてからファイル名を教えます。パスは images/ファイル名.jpg の形式で伝えれば確実です。
AIと相談を繰り返してサイトの完成度を高める
反復改善のサイクル
HP制作は「一発で完璧に作る」ものではありません。小さく作って、少しずつ育てるのが正しい進め方です。以下のサイクルを回すことで、自然と完成度が上がっていきます。
相談の上手な進め方
Claudeは「相談相手」としても使えます。どう直せばいいか迷ったときは、提案を求めましょう。
完成の目安
「完成」の基準を持っておくと、いつまでも直し続けるループを防げます。以下の項目がクリアできたら、公開の準備ができた状態です。
公開前チェックリスト
| ☐ | 会社名・住所・電話番号が正しく表示されているか |
| ☐ | スマホで崩れていないか（Chromeの開発者ツールで確認） |
| ☐ | お問い合わせフォームのボタンが目立つか |
| ☐ | 画像がすべて表示されているか（リンク切れがないか） |
| ☐ | 誤字・脱字がないか（会社概要・サービス説明） |
| ☐ | 第三者（家族・知人）に見てもらってわかりやすいと言われたか |
自分で何度も見ていると慣れてしまいます。家族や知人に「このサイトでどんな会社かわかる？」と聞いてみましょう。その反応が一番正直なフィードバックになります。
70〜80点のサイトでも公開することで、実際のお客様の反応がわかります。そこからまた改善すればいい。まず世に出すことを目標にしましょう。
第4回 まとめ
| ☐ | 色・レイアウト・フォントの修正指示を1つ試した |
| ☐ | 画像を images/ フォルダに入れてAIで埋め込んだ |
| ☐ | 「どう直せばいい？」とClaudeに相談した |
| ☐ | 公開前チェックリストを確認した |