目的
無料の生成AIを活用し、作成したサイトの出来栄えと作業割合、作成時間が知りたい。
使用ツール
結論
テンプレートの様なサイトなら作成可能
> 最終結果
使用割合：生成AIと手作業 約「7:3」
作成時間 (約)
合計：10h
デザイン：3h
デザイン調整：2h
メイン画像生成：1h
アイコン画像生成：1h
コーディング：1h
コード調整：2h
完成したサイトのキャプチャ
検証内容
- relume.io でサイトの構成とフレームデザインの生成
- XD でデザインの手動修正
- Light でメインビジュアルの画像生成
- Adobe firefly でコンテンツ要素のアイコン画像を生成
> 完成デザイン - chatGPTでコーディング
方法：コンテンツ要素ごとに画像のスクショを撮影しGPTでコード生成
> 生成結果
命令プロンプト
GPTにコンテンツ要素のスクショと共に、下記を送信。
添付した画像の html,css を作成してください。社員紹介などのgrid要素は列も指定する。 (指定しない場合、要素すべてが横並びになるため)
添付した画像の html,cssを作成してください。要素の並び方は3列2行です。- GPTコーディング後、CSS, HTMLの手動調整
・ヘッダのボタンを削除
・サービスを縦並びにし、偶数・奇数で画像とテキストを左右逆にする
・社員要素背景を白に変更
・フッターのスタイル変更
> 最終結果