はじめに
バックエンドエンジニアが、AIの力を借りてわずか数ステップで「スタイリッシュなWebサイト」を構築できた話をお届けします。
「フロントエンドは難しそう」「デザインには自信がない」と思っている方にこそ、AIを活用したWebサイト構築の驚くべき簡単さを体験してほしいです。
きっかけは拙いHTML画面
普段はバックエンド開発をすることが多く、フロントエンド開発には正直苦手意識がありました。しかし、ちょっとした個人プロジェクトで、簡単なWeb画面を作る必要があり、HTMLで画面を組んでみることに。
とはいえ、できあがった画面は、どうにも"イケてない"。
そこで、AIを使ってこの拙い画面をかっこよくすることに挑戦しました。
この記事で作った画面をスタイリッシュにしていきます！
ゴールイメージ
この画面を"イケてる"感じにして公開できるようにします。
画面機能
- 利用者がWebSocket接続
- システムからコメントを適宜配信
- Web画面に配信コメントを表示
Claudeで画面を生成
まずは、Claudeに画面を作成してもらうことに挑戦。
(1)画面のイメージを添付
・チャットに上記の画面の画像をそのまま添付。
(2)WEB画面の作成を依頼
・こんな感じでClaudeに依頼する。
(3)結果
・数分もしないうちに、さっきまでのダサい画面を、いい感じの画面にしてくれました。
・AWS Bedrockを使おうとしていることを見抜かれたのか、タイトルに「Nova」を付けてくれたので、このまま採用することに。
・もっとカラフルに、カッコよくしてほしいと依頼してみました。
出てきた回答がこちら。
もっと楽をするために、V0を使ってみる
Claudeはコードを生成してくれるものの、実際のホスティングは自分で行う必要があります。
"もっと手軽に"を求めて見つけたのが、V0 (v0.dev) というサービス。V0は、UI生成に特化したAIプラットフォームで、画面をアップロードするだけで、即座にホスティング可能なWebサイトが完成します。
-
Claudeに依頼した時と同じように、画面イメージを添付して、WEB画面の作成を依頼。
V0には、Cloudeで作成した画面のイメージを添付しました。 -
得られた結果はこちら。画面のイメージをそのまま再現してくれているのには驚きです。
- Previewで実際に、機能の確認をすることもできます。
- WebSocket接続をし、メッセージ配信を受け付けた結果がこちら。
しかも、V0上でPreviewできるだけでなく、Next.js形式でコードもダウンロード可能。
さらに、V0では画面を改良したり、簡単にデプロイまで行えます。
右上のDeployedを実行、Visit Siteで作成したWeb画面がホスティングされたサイトに行くことができます。
まとめ
AIドリブンでここまでできる！
バックエンドエンジニアでも、AIの力を借りればフロントエンドに苦手意識を感じる必要はありません。「Webサイトを作りたいけど、デザインが苦手・・・」という方も、ぜひAIを活用してみてください。
思ったより、ずっと簡単に"かっこいいWebサイト"が作れると思います！