目的
参考デザインを元に、プロンプト to コードでデザインの表現をする。
参考デザイン
使用ツール
結論
IT会社のシングルサイトを作成する場合、chatGPTで作成する場合
chatGPT > 最終結果
使用割合：AI使用と手作業が約「9:1」
作業時間
chatGPT：約 2h
検証内容
プロンプトだけでどのような返答がされるのか確認するため、
chatGPT・claude でコードを生成しサイト作成。
命令プロンプト と 生成結果
- 参考デザイン画像をAIに送信し、下記プロンプトを作成してもらう。
下記条件に従ってhtml,cssコードを作成してください。
1.ヘッダーセクション
スタイル: ページ上部に配置されており、ブランドロゴとナビゲーションメニュー（「Home Page」「About us」「Services」「Resources」）が水平に並んでいます。背景は白で、フォントは黒または濃いグレーを使用しています。
フレーム構成: ロゴとナビゲーションメニューは、フレックスボックスを使用して中央揃えになっている可能性が高いです。ロゴは左側に配置され、メニューは右側に配置されています。
2. ヒーローセクション
スタイル: 大きな画像とキャッチコピーが中央に配置されています。背景は白で、テキストは太字の黒いフォントが使用されています。「小さく作って、大きく展げる。」というメッセージが強調されています。
フレーム構成: フルワイドなコンテナに画像が配置され、その下にキャッチコピーのテキストがセンタリングされて配置されています。
3. サービス紹介セクション
スタイル: このセクションは、左側にテキスト、右側にイラストが配置されています。アイコンやイラストはブルーとパープルの色調で統一されており、テキストは黒または濃いグレーです。
フレーム構成: グリッドレイアウトまたはフレックスボックスが使用されており、各アイテムが同じ高さで整列されています。左右に均等にスペースが取られています。
4. 仕事セクション
スタイル: のセクションは、特定の業界向けのサービスやソリューションを視覚的に紹介しています。
フレーム構成:全体的なレイアウトは整然としており、6つの異なるサービスが3列2行のグリッドで配置されています。> 生成結果
- 作成したプロンプトを深津式プロンプトに変更し再送信。
> ChatGPTの回答精度を高めるため。
#命令プロンプト
あなたは{優秀なコーダー}です。以下の条件に基づいて、IT会社のホームページを作成するためのHTMLとCSSを出力してください。
#条件：
1. ヘッダーセクション
・ページ上部に横並びに配置し、フレックスボックスを使用して中央揃えにします。
・ロゴは左側、ナビゲーションメニュー（「About」,「Services」,「Works」,「Contact」）は右側に配置してください。
・背景色は白、フォントの色は黒または濃いグレーに設定します。
2. ヒーローセクション
・コンテンツ幅は1100px。
・アスペクト比16:9の画像を配置し、その下にキャッチコピー「小さく作って、大きく繋げる。」を中央に配置します。
・背景色は白に設定してください。
3. サービス紹介セクション
・コンテンツ幅は1100px。
・背景色は白、フォントの色は黒に設定します。
・4つのジグザグ型レイアウトを含むセクションを作成します。
・各セクションには画像とテキストを含めます。
・1番目と3番目のセクションでは、画像が左、テキストが右に配置されます。
・2番目と4番目のセクションでは、画像が右、テキストが左に配置されます。
・画像のサイズは固定（例: 300px × 200px）で、テキストボックスは中央揃えにします。
・各セクションの間には適切なスペースを設けてください。
4.ワーク紹介セクション
・2行3列のグリッドレイアウトを使用し、合計6つのカードを配置します。
・各カードには、上部にアイコン画像、セクションタイトル、その下に短い説明文が含まれます。
・各カードは均等なサイズとスペースで配置し、中央揃えにしてください。
カードデザイン:
・カードの背景色は白で、四隅に少し丸みをつけます（ボーダー半径を設定）。
・カードの周囲には薄いシャドウ効果を追加し、浮いているように見せます。
・アイコン画像の下に日本語のタイトル、その下に英語の説明文を配置します。
・フォントの色は濃いグレー、背景色は白に設定してください。ポイント
> gred要素の場合、カラムやレコード数を指定しないと横並びになる。
> コンテンツ幅は指定しないと要素が画面いっぱいになる。
> 生成結果
- 手動修正箇所
1.ヘッダコンテンツ幅を変更
・1100pxに指定。
2.彩サーバにある画像をhtmlに追加
3.サービス紹介セクション
・偶数レコードは画像とテキスト、奇数レコードはテキストと画像の並びにしたかった。
結果
下記結果が出力されたため、偶数・奇数どちらも画像とテキストという並びになっていた。
・cssに画像とテキストを交互にするスタイル
・htmlでは偶数・奇数で要素が交互
> なので、html構成を「画像とテキスト」の順番に自身で変更。
2を修正するために入力したプロンプト
× ジグザグ型レイアウトを含むセクションを作成
× html要素は変更せずに、画像とテキストを交互にしてください。
× cssだけで画像とテキストの並びを交互にしてください。- フレームデザインに近いサイトを作成できた。
> 最終結果