Webサイト構築サンプル集
Claude Codeと技術スタック・プロンプトを組み合わせることで、様々なWebサイトを効率的に構築できます。
Note
技術スタックについて
すべてのサンプルは以下の技術スタックで構築されています：
- HTML5 + CSS3（セマンティックマークアップ）
- Tailwind CSS（レスポンシブデザイン）
- Vanilla JavaScript（インタラクティブ機能）
- モダンWebAPI（フォーム処理、アニメーション）
サンプルサイト一覧
以下のサンプルサイトで、Claude Codeの能力を確認できます：
🏪 カフェサイト（基本版）
シンプルなカフェのランディングページ
特徴: 基本的なレイアウト、メニュー表示
- sample-cafe.html - 基本レイアウト
- sample-cafe0.html - 初期バージョン
- sample-cafe2.html - 改良版
🏢 企業サイト
- sample-company.html - ワンページ、基本
👤 プロフィールサイト（Sonnet4版）
個人のポートフォリオサイト
特徴: モダンなデザイン、レスポンシブレイアウト
- sample-profile1-by-sonnet4.html - 基本プロフィール
- sample-profile2-by-sonnet4.html - 拡張版
🎭 プロフィールサイト（Opus4版）
Opus4による独特なアプローチ
特徴: Opus4独自の表現力とクリエイティブなレイアウト
Opus4の特徴: 他のモデルと比較して、より芸術的で実験的なアプローチを取る傾向があります。レイアウトや色使い、インタラクションの設計において独創性を発揮します。
🛠️ Tailwind CSSサンプル
Tailwind CSS機能のデモンストレーション
特徴: 各種Tailwindクラスの実装例
🚴 バイクフィッティングサイト（作り込み版）
ワンページ構成専用の特別に用意されたプロジェクトテンプレート を使って作成した例です。
ロードバイクのパーソナルフィッティング・サービスサイト
特徴: 本格的なビジネスサイト、高品質なデザインと機能性
- sample-bikefitting.html - プロジェクト用に作り込まれた高品質サンプル
- sample-bikefitting2.html - プロジェクト用に作り込まれた高品質サンプル（APIプランで、約$1.5（222円）で作成）
このサンプルについて: Claude Code用に作り込まれた本格的なプロジェクトサンプルです。実際のビジネス要件を想定したデザインと機能を実装しており、商用レベルのWebサイト制作の参考として活用できます。
技術的な特徴
レスポンシブデザイン
すべてのサンプルは以下のブレークポイントに対応：
- モバイル: 320px〜767px
- タブレット: 768px〜1023px
- デスクトップ: 1024px〜
アクセシビリティ対応
- セマンティックHTML構造
- 適切なコントラスト比
- キーボードナビゲーション対応
- スクリーンリーダー対応
パフォーマンス最適化
- 軽量なVanilla JavaScript
- CSS Grid/Flexboxによる効率的なレイアウト
- 画像の適切な最適化
- モバイルファースト設計
Tip
開発を始める準備はできましたか？
技術スタック・プロンプトを参考に、Claude Codeでの開発環境を準備して、あなた独自のWebサイトを構築してみてください！ あるいは ワンページ作成専用プロジェクト を参考に、試してみてください。
よくある質問
Q: サンプルサイトはどのように作られているのですか？
A: すべてのサンプルは以下の手順で作成されています：
- 要件定義: サイトの目的とターゲットを明確化
- 技術選定: HTML5 + Tailwind CSS + Vanilla JavaScriptで統一
- Claude Code指示: 具体的なプロンプトでコード生成
- 反復改善: フィードバックに基づく段階的な改良
この手順により、実用的で保守性の高いコードが生成されています。
Q: Opus4版とSonnet4版の違いは何ですか？
A: 各AIモデルの特徴が反映されています：
Sonnet4の特徴:
- 実用性とバランスを重視
- 一般的なWebデザインパターンを採用
- コードの可読性と保守性を優先
Opus4の特徴:
- 創造性とユニークさを重視
- 実験的なレイアウトや色使い
- より芸術的なアプローチ
同じ要件でも、モデルによって異なるアプローチの作品が生まれます。
Q: サンプルをベースに商用サイトを作ることはできますか？
A: はい、可能です。ただし以下の点にご注意ください：
推奨事項:
- 画像の差し替え: サンプル画像は商用利用不可の場合があります
- コンテンツの変更: 固有の情報に変更してください
- セキュリティ対策: 本番環境では適切なセキュリティ対策を実装
- パフォーマンス測定: 実際のデータでの動作確認
Claude Codeを使用して、これらの調整も効率的に行えます。
webサイト構築サンプル集 claude code カフェサイト プロフィールサイト sonnet4 opus4 tailwind css レスポンシブデザイン アクセシビリティ対応 パフォーマンス最適化 vanilla javascript html5 css3 ランディングページ ポートフォリオサイト コード生成 カスタマイズ指示 技術スタック プロンプト 開発環境