1年以上ぶりの生成AIネタです。
本日Floria Harpの公式サイトをリニューアルしました。
GeminiのCanvas機能を使用したデザイン案、コード生成、コードレビューまでの一連の流れを生成AIを活用してサイトを作成しました。所謂Vibe Codingと言われる手法となります。
私はHTMLとJavascriptを少しかじった程度のスキルはありますが、本職のプログラマーには遠く及ばない程度のスキルしかなく悪戦苦闘し、完成までには実質1週間程度かかりました。
備忘録を兼ねて完成までの流れを書いていきます。
Canvas機能は「その他のツール」→「Canvas」より選択します。
最初のプロンプトとして
「下記URLの小型ハープ教室のコーポレートサイトを運営しています。サイトのリニューアルを考えています。デザイン案を考えてください #URL https://〇〇」
と入力しました。入力結果は下画像の通り、今すぐにでも使用できそうなデザイン案が出てきました。
デザイン案に記載されている文章を順番に修正していきましたが、講師紹介文だけ表示されない不具合が発生しました。
何度か修正を行ないましたが、どうしても改善されないため、
別のチャットで作成されたコードと画像を読み込み、1から修正をお願いしたらなんとか解消しました。
その後、生成されたコードをダウンロードし、画像の差し替えと外部リンク先の修正を行い、コードレビューを実施しました。
書式の誤り、外部リンクの誤り等の指摘事項がいくつかあったためコードを修正しました。
修正後のコードを再度レビューし指摘事項を修正、再度レビューを行い・・・を指摘がなくなるまで数回繰り返して完成となりました。
講師紹介文が表示されない不具合で途中はまってしまいましたが、何とか無事完成することができました。
初回プロンプトの時点でかなり完成度が高いため、そのまま使えればサイト更新はかなりの時短できそうですが、今回みたいに不具合が出た場合はコードの中身を全く把握していないため修正がすごく面倒。。。
GeminiではなくClaudeやChatgptの最先端モデルを使用したらサクッとできてしまうのかもしれませんが。
コメント