ビジネスサイト制作
企業やお店のホームページ（コーポレートサイト）を作成します。信頼感と情報の分かりやすさを重視しましょう。
ビジネスサイトの基本構成
必須ページ
トップページ
会社の顔。事業内容を一目で伝える
サービス・事業内容
提供するサービスの詳細
会社概要
会社情報、代表挨拶、沿革など
お問い合わせ
連絡先、問い合わせフォーム
あると良いページ
実績・事例
お客様の声
よくある質問
採用情報
ニュース・お知らせ
アクセス
事前準備
まずはプロジェクト用のフォルダを作成し、Claude Codeを起動しましょう。
mkdir business-site && cd business-site
フォルダに移動したら、Claude Codeを起動します。
claude
ポイント：Claude Codeは現在のフォルダをプロジェクトとして認識します。必ず専用フォルダの中で起動してください。
Step 1: トップページを作成
Claude Codeへの指示
以下のプロンプトをClaude Codeに入力してください。
Claude Codeに以下を入力：
株式会社テクノソリューションのビジネスサイトを作成します。index.htmlとして以下のセクションを含む1ページを作成してください。Tailwind CSS CDN使用。セクション：ヒーロー、選ばれる理由（3つ）、サービス紹介（3つ）、実績数値、お客様の声、CTA、フッター
生成されるコード（index.html）
Claude Codeが以下のようなコードを自動生成してファイルに保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>株式会社テクノソリューション | 中小企業のDXを、ともに。</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800">
<!-- ナビゲーション -->
<nav class="bg-white shadow fixed w-full z-50">
<div class="container mx-auto px-6 py-4 flex items-center justify-between">
<a href="index.html" class="text-xl font-bold text-blue-900">TechnoSolution</a>
<div class="hidden md:flex space-x-6 text-sm">
<a href="#reason" class="hover:text-blue-600">選ばれる理由</a>
<a href="#service" class="hover:text-blue-600">サービス</a>
<a href="#results" class="hover:text-blue-600">実績</a>
<a href="#voice" class="hover:text-blue-600">お客様の声</a>
<a href="company.html" class="hover:text-blue-600">会社概要</a>
<a href="#cta" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">お問い合わせ</a>
</div>
</div>
</nav>
<!-- ヒーローセクション -->
<section class="bg-gradient-to-r from-blue-900 to-blue-700 text-white pt-32 pb-20">
<div class="container mx-auto px-6 text-center">
<p class="text-blue-200 text-sm mb-4">株式会社テクノソリューション</p>
<h1 class="text-4xl md:text-5xl font-bold mb-6">中小企業のDXを、ともに。</h1>
<p class="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">
ITの力で、あなたのビジネスをもっと強く。<br>
導入から運用まで、丁寧にサポートします。
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#cta" class="bg-orange-500 text-white px-8 py-4 rounded-lg text-lg font-bold hover:bg-orange-600">
無料相談はこちら
</a>
<a href="#service" class="border-2 border-white text-white px-8 py-4 rounded-lg text-lg hover:bg-white hover:text-blue-900">
サービスを見る
</a>
</div>
</div>
</section>
<!-- 選ばれる理由 -->
<section id="reason" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">選ばれる3つの理由</h2>
<p class="text-center text-gray-500 mb-12">多くの中小企業様に支持される理由</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-3">中小企業専門</h3>
<p class="text-gray-600">大企業向けの過剰なシステムではなく、御社の規模に最適なソリューションをご提案します。</p>
</div>
<div class="bg-white p-8 rounded-lg shadow text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-3">丁寧なサポート</h3>
<p class="text-gray-600">導入後もお困りの際はいつでもご相談ください。専任担当が迅速に対応いたします。</p>
</div>
<div class="bg-white p-8 rounded-lg shadow text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-3">15年の実績</h3>
<p class="text-gray-600">創業以来15年間、500社以上の企業様のIT化を支援してきた経験と実績があります。</p>
</div>
</div>
</div>
</section>
<!-- サービス紹介 -->
<section id="service" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">サービス紹介</h2>
<p class="text-center text-gray-500 mb-12">お客様の課題に合わせた3つのサービス</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="border rounded-lg overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-blue-100 flex items-center justify-center">
<svg class="w-16 h-16 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">ITコンサルティング</h3>
<p class="text-gray-600 mb-4">現状の業務フローを分析し、最適なIT活用プランをご提案。無駄なコストを削減します。</p>
<a href="#cta" class="text-blue-600 font-bold hover:underline">詳しく見る →</a>
</div>
</div>
<div class="border rounded-lg overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-green-100 flex items-center justify-center">
<svg class="w-16 h-16 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">システム開発</h3>
<p class="text-gray-600 mb-4">業務管理システム、Webアプリケーションなど、御社専用のシステムをオーダーメイドで開発。</p>
<a href="#cta" class="text-blue-600 font-bold hover:underline">詳しく見る →</a>
</div>
</div>
<div class="border rounded-lg overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-purple-100 flex items-center justify-center">
<svg class="w-16 h-16 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
</svg>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">クラウド移行</h3>
<p class="text-gray-600 mb-4">オンプレミスからクラウドへの移行を安全に実施。コスト削減と業務効率化を同時に実現。</p>
<a href="#cta" class="text-blue-600 font-bold hover:underline">詳しく見る →</a>
</div>
</div>
</div>
</div>
</section>
<!-- 実績数値 -->
<section id="results" class="py-20 bg-blue-900 text-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">数字で見るテクノソリューション</h2>
<div class="grid md:grid-cols-3 gap-8 text-center">
<div>
<p class="text-5xl font-bold text-orange-400 mb-2">500社+</p>
<p class="text-blue-200">導入企業数</p>
</div>
<div>
<p class="text-5xl font-bold text-orange-400 mb-2">98%</p>
<p class="text-blue-200">お客様満足度</p>
</div>
<div>
<p class="text-5xl font-bold text-orange-400 mb-2">15年</p>
<p class="text-blue-200">業界実績</p>
</div>
</div>
</div>
</section>
<!-- お客様の声 -->
<section id="voice" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">お客様の声</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center font-bold text-blue-700">A</div>
<div class="ml-3">
<p class="font-bold">製造業 A社様</p>
<p class="text-sm text-gray-500">従業員50名</p>
</div>
</div>
<p class="text-gray-600">「在庫管理システムの導入で、作業時間が半分になりました。丁寧なサポートで安心して任せられました。」</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-200 rounded-full flex items-center justify-center font-bold text-green-700">B</div>
<div class="ml-3">
<p class="font-bold">小売業 B社様</p>
<p class="text-sm text-gray-500">従業員20名</p>
</div>
</div>
<p class="text-gray-600">「クラウド移行でテレワークが可能に。コロナ禍でも事業を継続できたのはテクノソリューションさんのおかげです。」</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-200 rounded-full flex items-center justify-center font-bold text-purple-700">C</div>
<div class="ml-3">
<p class="font-bold">サービス業 C社様</p>
<p class="text-sm text-gray-500">従業員30名</p>
</div>
</div>
<p class="text-gray-600">「ITに詳しくない私たちにも分かりやすく説明してくれました。売上管理が格段にラクになりました。」</p>
</div>
</div>
</div>
</section>
<!-- CTAセクション -->
<section id="cta" class="py-20 bg-gradient-to-r from-blue-900 to-blue-700 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-4">まずは無料でご相談ください</h2>
<p class="text-blue-200 mb-8 max-w-xl mx-auto">
「何から始めればいいか分からない」でも大丈夫。<br>
御社の課題をお聞きし、最適なプランをご提案します。
</p>
<a href="#" class="inline-block bg-orange-500 text-white px-10 py-4 rounded-lg text-lg font-bold hover:bg-orange-600">
無料相談に申し込む
</a>
<p class="text-blue-300 text-sm mt-4">お電話でもお気軽に：03-1234-5678（平日9:00-18:00）</p>
</div>
</section>
<!-- フッター -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-3 gap-8 mb-8">
<div>
<h3 class="text-white font-bold text-lg mb-4">株式会社テクノソリューション</h3>
<p class="text-sm">〒100-0001<br>東京都千代田区千代田1-1-1<br>TEL: 03-1234-5678</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">サービス</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white">ITコンサルティング</a></li>
<li><a href="#" class="hover:text-white">システム開発</a></li>
<li><a href="#" class="hover:text-white">クラウド移行</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">企業情報</h3>
<ul class="space-y-2 text-sm">
<li><a href="company.html" class="hover:text-white">会社概要</a></li>
<li><a href="#" class="hover:text-white">お知らせ</a></li>
<li><a href="#" class="hover:text-white">お問い合わせ</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-8 text-center text-sm">
<p>© 2024 株式会社テクノソリューション All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>Step 2: 会社概要ページを作成
Claude Codeへの指示
続けて会社概要ページを作成します。index.htmlと同じデザインテーマで統一しましょう。
Claude Codeに以下を入力：
company.htmlとして会社概要ページを作成してください。index.htmlと同じナビゲーションとフッターを使用。会社名、代表者名、設立年月、資本金、従業員数、所在地、事業内容、主要取引先を表形式で掲載。地図埋め込み用のプレースホルダーエリアも含めてください。
生成されるコード（company.html）
Claude Codeが以下のようなコードを自動生成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会社概要 | 株式会社テクノソリューション</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800">
<!-- ナビゲーション -->
<nav class="bg-white shadow fixed w-full z-50">
<div class="container mx-auto px-6 py-4 flex items-center justify-between">
<a href="index.html" class="text-xl font-bold text-blue-900">TechnoSolution</a>
<div class="hidden md:flex space-x-6 text-sm">
<a href="index.html#reason" class="hover:text-blue-600">選ばれる理由</a>
<a href="index.html#service" class="hover:text-blue-600">サービス</a>
<a href="index.html#results" class="hover:text-blue-600">実績</a>
<a href="index.html#voice" class="hover:text-blue-600">お客様の声</a>
<a href="company.html" class="text-blue-600 font-bold">会社概要</a>
<a href="index.html#cta" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">お問い合わせ</a>
</div>
</div>
</nav>
<!-- ページヘッダー -->
<section class="bg-gradient-to-r from-blue-900 to-blue-700 text-white pt-32 pb-12">
<div class="container mx-auto px-6">
<h1 class="text-3xl font-bold">会社概要</h1>
<p class="text-blue-200 mt-2">Company Information</p>
</div>
</section>
<!-- 会社情報テーブル -->
<section class="py-16">
<div class="container mx-auto px-6 max-w-3xl">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 w-1/3 font-bold">会社名</th>
<td class="py-4 px-4">株式会社テクノソリューション</td>
</tr>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 font-bold">代表者</th>
<td class="py-4 px-4">代表取締役 田中 太郎</td>
</tr>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 font-bold">設立</th>
<td class="py-4 px-4">2009年4月1日</td>
</tr>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 font-bold">資本金</th>
<td class="py-4 px-4">3,000万円</td>
</tr>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 font-bold">従業員数</th>
<td class="py-4 px-4">45名（2024年4月現在）</td>
</tr>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 font-bold">所在地</th>
<td class="py-4 px-4">〒100-0001 東京都千代田区千代田1-1-1</td>
</tr>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 font-bold">事業内容</th>
<td class="py-4 px-4">
・ITコンサルティング<br>
・業務システム開発<br>
・クラウド移行支援<br>
・IT研修・教育
</td>
</tr>
<tr class="border-b">
<th class="py-4 px-4 text-left bg-gray-50 font-bold">主要取引先</th>
<td class="py-4 px-4">
株式会社〇〇製作所<br>
△△商事株式会社<br>
□□サービス株式会社
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- 地図エリア -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6 max-w-3xl">
<h2 class="text-2xl font-bold mb-6">アクセス</h2>
<!-- Google Maps埋め込みエリア -->
<div class="bg-gray-300 h-64 rounded-lg flex items-center justify-center">
<p class="text-gray-500">ここにGoogle Mapsを埋め込み</p>
</div>
<p class="mt-4 text-gray-600">
JR東京駅 丸の内北口より徒歩5分<br>
地下鉄大手町駅 C13b出口より徒歩3分
</p>
</div>
</section>
<!-- フッター -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-3 gap-8 mb-8">
<div>
<h3 class="text-white font-bold text-lg mb-4">株式会社テクノソリューション</h3>
<p class="text-sm">〒100-0001<br>東京都千代田区千代田1-1-1<br>TEL: 03-1234-5678</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">サービス</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white">ITコンサルティング</a></li>
<li><a href="#" class="hover:text-white">システム開発</a></li>
<li><a href="#" class="hover:text-white">クラウド移行</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">企業情報</h3>
<ul class="space-y-2 text-sm">
<li><a href="company.html" class="hover:text-white">会社概要</a></li>
<li><a href="#" class="hover:text-white">お知らせ</a></li>
<li><a href="#" class="hover:text-white">お問い合わせ</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-8 text-center text-sm">
<p>© 2024 株式会社テクノソリューション All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>ブラウザで確認
作成したページをチェックしましょう
1. ファイルをブラウザで開く
business-siteフォルダ内のindex.htmlをダブルクリック、またはブラウザにドラッグ&ドロップしてください。
2. レスポンシブ表示を確認
ブラウザのウィンドウ幅を狭くして、スマホ表示になるか確認しましょう。ナビゲーション、カードレイアウト、テキストサイズが適切に変化するかチェックします。
3. ページ間リンクを確認
ナビゲーションの「会社概要」リンクをクリックして、company.htmlに遷移するか確認します。company.htmlからもindex.htmlに戻れるか確認しましょう。
4. 各セクションのリンク確認
「選ばれる理由」「サービス」「実績」「お客様の声」のナビリンクをクリックして、正しいセクションにスクロールするか確認します。
カスタマイズのポイント
Claude Codeでまとめてカスタマイズ
実際のビジネスサイトとして使う場合は、以下のように指示してカスタマイズしましょう。
Claude Codeに以下を入力：
以下の変更をindex.htmlとcompany.htmlの両方に適用してください。 ・会社名を「あなたの会社名」に変更 ・カラーテーマを紺色系（blue-900）から緑系（emerald-800）に変更 ・サービス内容を自社のものに変更（例：Webデザイン、SEO対策、SNS運用代行） ・電話番号と住所を自社のものに変更
変更すべき主な項目
基本情報
- ・会社名・ロゴ
- ・住所・電話番号
- ・代表者名
- ・設立年・資本金
コンテンツ
- ・キャッチコピー
- ・サービス内容
- ・実績数値
- ・お客様の声
デザイン
- ・カラーテーマ
- ・フォント
- ・画像・写真
- ・アイコン
機能
- ・Google Maps埋め込み
- ・お問い合わせフォーム
- ・SNSリンク
- ・ニュース更新欄
よくあるエラーと対処法
トラブルシューティング
ナビゲーションのリンクが動かない
id属性がセクションに正しく設定されているか確認してください。例：<section id="service">と<a href="#service">が一致している必要があります。
会社概要ページに遷移できない
index.htmlとcompany.htmlが同じフォルダに入っているか確認してください。ファイル名の大文字・小文字も一致させましょう。
スマホ表示でレイアウトが崩れる
Tailwind CSSのレスポンシブクラス（md:, lg:）が正しく適用されているか確認します。Claude Codeに「スマホ表示でレイアウトが崩れています。修正してください」と伝えましょう。
Tailwind CSSが読み込まれない（スタイルが適用されない）
<head>内に<script src="https://cdn.tailwindcss.com"></script>が記載されているか確認してください。インターネット接続も必要です。
ナビゲーションが固定表示でコンテンツに被る
fixed指定のナビゲーションの場合、最初のセクションにpt-32などの上余白が必要です。Claude Codeに「ナビバーの下にコンテンツが隠れています。余白を追加してください」と伝えましょう。
ビジネスサイトのポイント
信頼感を出す
実績数値、資格、認証などを掲載
分かりやすく
専門用語を避け、シンプルに伝える
行動を促す
CTAボタンを適切に配置
更新しやすく
ニュースやお知らせを更新できる設計
まとめ
- ✓ トップ、サービス、会社概要、お問い合わせが基本
- ✓ 信頼感と分かりやすさを重視
- ✓ 実績や数値で説得力を高める
- ✓ CTAでお問い合わせへ誘導