デザインまで作ってくれるAI「bolt」に感動
はじめに
最近「bolt」というAIツールを試してみたところ、
あまりの便利さに思わずスタンディングオベーションしてしまうほど、感動しました。
普段はフロントエンドの開発（React中心）をしているのですが、
そろそろ知識もついてきたし、何か作ってみようかなと思い立ち、Webアプリの個人開発に挑戦することにしました。
そこで早速壁にぶつかったのが「デザイン」です。
業務ではデザイナーさんが作ってくれたUIをもとに実装することが多いため、
いざ自分で一から考えようとしたら、想像以上にデザインが浮かばず途方に暮れました。
「これはAIに頼ってみるしかない！」と思って使ってみたのがbolt。
試してみたら、その悩みが嘘のように軽くなりました。
今回はその体験を、スクショ付きで軽くシェアしてみます。
boltってなに？
ChatGPTのように日本語や英語などの自然言語で指示することでAIがコードを生成してアプリケーションを開発してくれるプラットフォームです。指示するだけで必要なコードを生成できるのが特徴で、プレビュー機能で実際の画面や挙動も確認することができます。
とにかく、自然な会話意図をくみ取ってくれるのが最大の魅力です。
▶️ 公式サイトはこちら
実際に使ってみた
以下は、実際にboltに「こういうアプリを作って」とお願いしたときのスクショです。
何がすごいかって、
- 無料でも使える（しかも精度が高い）
- 「もっとこうしたい」と伝えると、即座に修正してくれる
- もはやNext.jsやTailwindでフロントエンドのコードを自動生成してくれる
- 生成されたコードの画面プレビューもその場で確認できる
日本語で指示を出しただけで短時間ですぐに形になりました。
まだすべての機能を使いこなせているわけではないですが、
そのままデプロイやテストもできる機能も備わっているようです。これは今後さらに使い込みたいところです。
完成したもの
▶️ 実際に作ったアプリはこちら
boltに作ってもらったものをほぼそのままですね笑
かっこいいかは分からないですが、私がデザインするよリははるかにかっこよく、楽し気なデザインと思います笑
まずは「とにかく早く公開してみたい！」という気持ちで、
最低限の機能だけを実装し、バグは多めですがとりあえず動いています。
デザインを助けてもらおうとしたらもはやコーディングまで自動生成してくれました笑
一部、APIからのデータ取得やレイアウトの微調整だけは手を加えましたが、
正直、ほとんど自分でコードを書かずにデプロイまでできました！
今後は気が向いたときに、機能追加やバグ修正をちょこちょこやっていく予定です。
まとめ
まだ使い始めたばかりですが、
なんで今まで使ってなかったんだろうと思うくらい感動しました。
いままでWebアプリを作成しようと思っても途中で飽きたり仕事が忙しくなったりで
なかなか進んでいませんでしたが、こんなに爆速で楽にデプロイまでできるのであれば
楽しく続けられそうです。すごい時代になったなあと思いました。
今後は、テストやデプロイ機能も本格的に触ってみたいと思っています。
まだ使ったことがない人はぜひ、一度触ってみてください！