目的
デザイン to コードで作成したデザインを元に、プロンプト to コードでデザインの表現をする。
使用ツール
結論
IT会社のシングルサイトを作成する場合、claude ならよくある会社HPが出来そうな予感 (無料制限で未完成)
chatGPT > 最終結果
claude > 最終結果
使用割合：AI使用と手作業が約「9:1」
作業時間 (約)
合計：1h
chatGPT：30min
claude：30min
検証内容
プロンプトだけでどのような返答がされるのか確認するため、
chatGPT・claude でコードを生成しサイト作成。
命令プロンプト と 生成結果
GPTの場合
- 命令文：IT会社HPに必要なコンテンツを質問。
IT会社のホームページを作成する際の必要なコンテンツ- 生成結果：IT会社HPを作成する際に必要な基本的なコンテンツが文章で返答された。
1. ホームページ（トップページ）
会社のビジョンやスローガンを一目で伝えるキャッチコピー
最新のサービスや製品、キャンペーン情報
会社の強みや特徴を簡潔に説明するセクション
顧客の声や実績の紹介（例: 顧客のロゴや成功事例）
2. 会社概要（About Us）
会社のミッション・ビジョン
会社の歴史や沿革
経営者や主要メンバーの紹介
会社の所在地や連絡先
社内文化や価値観の紹介
.....- 命令文：指定されたコンテンツに基づいて、トップページのレイアウトを提案。
必要なコンテンツ(コンテンツ番号を入力)をもとに、ホームページのTOPページの構成を考えてください。- 生成結果：トップページの構成について、指定したコンテンツを元にデザイン案の返答がされた。
1. ヘッダー
ロゴ: ページ左上に会社のロゴを配置。
ナビゲーションメニュー: ヘッダー内に固定され、以下のリンクを含むメニューを配置。
ホーム
会社概要（About Us）
サービス紹介（Services）
製品紹介（Products）
お問い合わせ（Contact Us）
よくある質問（FAQ）
コンタクトボタン: ヘッダー右側に「お問い合わせ」ボタンを目立つデザインで配置。クリックするとお問い合わせフォームにジャンプ。
2. メインビジュアルエリア
キャッチコピー: 会社のビジョンやスローガンを大きなフォントで表示。例：「未来を創るITソリューション」
ビジュアル要素: 高品質なイメージや動画を背景に使用し、提供するサービスや製品の一部をビジュアルで示す。
アクションボタン: 「サービスを見る」「お問い合わせ」など、次のアクションを促すボタンを配置。
・・・・・- 命令文：コードの作成依頼
ヘッダーからフッターまでの html,css コードを作成してください。- 生成結果：最終結果
Claudeの場合
- 命令文：IT会社HPに必要なコンテンツを質問。
IT会社のホームページを作成したいです。必要なコンテンツを教えてください。- 生成結果：トップページの構成とデザイン案 + HTML・CSSコード が返答された。
> 元々Claudeについているプレビュー機能で確認可能。
> 生成結果
このHTMLコードは、IT会社のホームページのTOPページの基本的な構造を示しています。主な特徴は以下の通りです：
ヘッダー：ロゴとナビゲーションメニューを含みます。
ヒーローセクション：会社の主要メッセージと呼びかけを表示します。
サービス紹介：主要なサービスを簡潔にリストアップします。
・・・・・- 命令文：細かいスタイルを指定し修正。
>メインビジュアルをスライダーにしてください。
> スライダーは画面いっぱいの、アスペクト比は16:9にしてください。
- 生成結果：上記の指定をHTML + CSSコードが返ってきた。
> 最終結果
※これ以上は有料のためコード生成不可