非コーダーとして5つのバイブコーディングツールを試してみました。率直な体験をお伝えします。
素晴らしいアプリのアイデアを思いついたのに、自分にはコーディングの基本すら分からないと気づいたことはありませんか？それが私の長年の現実でした。コンテンツライターとして私はアイデアにあふれていますが、それを実現する技術的な側面はずっと手の届かないものに感じていました。
そのすべてが「vibe coding」に出会って変わりました。これは、欲しいものを普通の英語で説明するだけでソフトウェアを構築できるという約束です。夢のような話に聞こえました。本当にコードを1行も書かずにウェブサイトを作れるのでしょうか？確かめずにはいられませんでした。
私は最も話題になっている vibe coding ツールの中から5つを選び、テストしてみました。私の課題はシンプルでした：非常に特殊なクリエイティブスタイルの個人ポートフォリオウェブサイトを構築すること。汎用的なテンプレートには興味がありませんでした。これらの AI ツールが本当にクリエイティブなビジョンを理解し実行できるかを見たかったのです。
これは私の実験の物語です。技術的な深掘りではなく、その魔法が本物かどうかを知りたかった非コーダーからの正直な報告です。何が起こったのか、お話しします。
すべてのツールに使った正確なプロンプト
このテストを公平に保つため、5つのツールすべてに全く同じプロンプトを使いました：
「コンテンツライター向けの個人ポートフォリオウェブサイトを作成してください。プロフィールを掲載したホームページ、執筆サンプルを紹介するページ、お問い合わせフォームを含めてください。デザインは、遊び心とクリエイティビティを感じるポップアート／アブストラクトスタイルにしてください。大胆で鮮やかな色を使いつつ、テキストは読みやすくしてください。角丸、遊び心のあるタイポグラフィ、控えめなホバーアニメーションを加えてください。退屈で堅苦しいものではなく、楽しくエネルギッシュに見えるようにしてください。」
なぜこのプロンプトなのか？ これは機能性（複数ページ、お問い合わせフォーム）とデザインの解釈（特定のスタイル、色、アニメーション）の両方をテストします。これにより、各ツールがクリエイティブな指示にどれだけうまく従うかを比較できます。
私がテストしていたこと
デザイン要素 | 何を求めていたか |
ポップアート／アブストラクトスタイル | 退屈な企業テンプレートではなく、遊び心があり、クリエイティブで、エネルギッシュなデザイン。 |
大胆で鮮やかな色 | 楽しく生き生きとしたカラーパレット。 |
テキストの読みやすさ | 大胆な色にもかかわらず読みやすいテキスト。 |
角丸 | ボタンやコンテナなどの要素の柔らかく丸みを帯びたエッジ。 |
遊び心のあるタイポグラフィ | 全体的な雰囲気にマッチする楽しくクリエイティブなフォント。 |
ホバーアニメーション | インタラクティブな要素にカーソルを合わせた際の控えめなアニメーション。 |
複数ページ | ホームページ、執筆サンプルページ、お問い合わせページ。 |
お問い合わせフォーム | メッセージを受信できる機能的なお問い合わせフォーム。 |
簡易評価:私のランキング一覧
順位 | ツール | 非エンジニアへの優しさ | デザインの再現精度 | 私の評価 |
1 | Lovable | ★★★★★ | ★★★★☆ | 真の初心者に最適 |
2 | Replit | ★★★★☆ | ★★★☆☆ | 優れたオールラウンダー |
3 | Bolt | ★★★★☆ | ★★★☆☆ | 高速だが一貫性に欠ける |
4 | Cursor | ★☆☆☆☆ | ☆☆☆☆☆ | 強力だが非エンジニアには敷居が高い |
5 | Manus | ★★★★★ | ★★★★★ | デザインの再現精度が最高 |
#1 Lovable:本当に魔法のように感じた一品
Lovable は、欲しいものを説明するだけで Web アプリケーションを作成できる AI 搭載のアプリビルダーです。最小限の労力で美しく洗練されたデザインを生み出すことで知られています。
ツールの使用とナビゲーション
使い始めてすぐに、Lovable には安堵感を覚えました。インターフェースはすっきりと、驚くほどシンプルで、私のアイデアを待つプロンプトボックスが用意されていました。紛らわしいボタンや専門用語もなく、威圧的というよりむしろ親しみやすく感じられました。カラーテーマを選択できるオプションもありがたかったのですが、AI が単独でどこまでできるかを見るため、私は素のプロンプトのまま進めました。音声入力オプションまで備わっており、アクセシビリティへの配慮として気の利いた追加機能でした。
出力結果
結果は本当に印象的でした。完璧なポップアートの再現とまではいきませんでしたが、Lovable は私が目指していたカラフルで楽しい雰囲気を確かに捉えていました。角丸を取り入れ、楽しいタイポグラフィに挑戦してくれましたが、タイトルのフォントはもっとバリエーションがあってもよかったかもしれません。とはいえ、視認性のために選ばれた可能性もあります。ボタンのホバーアニメーションはごく標準的で、カーソルを乗せたときに少し動く程度で、特別なものではありませんでした。リクエストしたすべてのページが揃っており、レイアウトも直感的でした。単なる静止画像ではなく、本物の機能する Web サイトのように感じられました。ただし、いくつか小さな癖にも気づきました。例えば、作成されたブランドロゴは半分しかクリックできず、ホバー効果のあるボタンのような要素のいくつかが、実際にはクリック可能なボタンではなく、少し混乱しました。しかし、これらは追加のプロンプトでおそらく修正できる些細な問題に感じられました。
Lovable が構築した Web アプリ:
パフォーマンスはどうだったか？
デザイン： 「ポップアート」というよりは「遊び心のある」雰囲気に寄っていたものの、カラフルで楽しい雰囲気を見事に捉えていました。全体的な美的感覚は洗練されており、プロフェッショナルでした。
指示への忠実度： 私の指示のほとんどに上手く従ってくれて、必要なすべてのページを作成し、角丸や遊び心のあるタイポグラフィなどの要素も含まれていました。特定の「ポップアート」スタイルは部分的にしか満たされませんでした。
使いやすさ： 素晴らしい。インターフェースは非常に直感的で、初心者に最適です。
価格： Lovable は毎日の積分が付属する無料プランを提供しており、有料プランはより多くの使用量で月額 $25 から始まります。
非コーダーとしての結論
難易度： カスタムメイドのピザを注文するようなもの。何が欲しいかを伝えれば、それを作ってくれます。
また使うか？ 間違いなく使います。急な学習曲線なしで美しく機能的なウェブサイトを求めている非コーダーの方には、Lovable は素晴らしい出発点です。無料ツールとしては、結果は驚くべきものでした。
#2 Replit：あらゆることをこなすオールインワン プラットフォーム
Replit は、アプリケーション全体を計画して構築できる AI Agent を備えたブラウザベースの開発環境です。コーディングからホスティングまで、すべてを一か所で処理します。
ツールの使用とナビゲーション
Replit のインターフェースは Lovable のものよりも少し複雑でした。完全な開発環境として、私には馴染みのないボタンやオプションがたくさんありました。しかし、AI Agent は役に立つガイドでした。構築、テスト、または反復するオプションを提示し、迅速な変更のための「高速」モードと、フル Agent 体験のための「自律」モードのどちらかを選ぶことができました。その全潜在能力を見るため、自律モードを選びました。
出力結果
Replit が生成したウェブサイトはまずまずでした。カラフルで、リクエストした角丸も備えていましたが、ポップアートや抽象的な雰囲気は完全には捉えていませんでした。レイアウトは少しおかしく、奇妙な下部バナーやぎこちないスペーシングがありました。フォントは個人的には好みではありませんでした。あまり見た目が良くないと思いましたが、これは個人の好みの問題かもしれません。最初のページのメインタイトル「I turn coffee into copy」も少し首をかしげるものでした。アニメーションは標準的で特に優れたものではありませんでしたが、全体に動きを加えていました。残念ながら、私の主な問題は、ライティングサンプルのページにある画像の一部が壊れていて、空白のアイコンとして表示されていたことです。全体として比較的機能的なウェブページでしたが、美的観点では最高ではありませんでした。
Replit によって構築された Web アプリ：
パフォーマンスはどうだったか？
デザイン: デザインはカラフルでしたが、特定のポップアートスタイルからは外れていました。レイアウトと生成されたテキストの一部はやや雑然とした印象でした。フォントの選択もページ全体を通じて疑問が残るものでした。
指示への忠実さ: リクエストしたページとアニメーションは作成されましたが、デザインの解釈がずれており、すべての画像を生成することにも失敗しました。
使いやすさ: AI Agent は役立ちましたが、全体的な環境はコーディング未経験者には圧倒されるかもしれません。
価格: Replit には無料のスタータープランがあり、有料プランとしては Core プランが月額 $20 などがあります。
非コーダーとしての結論
難易度: 説明書が半分しかない状態で IKEA の家具を組み立てようとするようなものです。なんとかできるかもしれませんが、フラストレーションのたまる体験になるかもしれません。
もう一度使うか? おそらく使いません。強力ではありますが、ある程度のコーディング経験がある人に向いていると感じます。私の好みには少々技術的すぎる体験でした。
#3 Bolt:このブロックで最速のビルダー
Bolt.new はそのスピードで知られており、数秒で動作するプロトタイプを生成します。素早い実験や迅速なイテレーションに人気があります。
ツールの使用とナビゲーション
Bolt のインターフェースはすっきりとしていて要点を押さえており、プロンプトボックスが中央に配置されていました。ファイルを添付したり、データベースを選択したり、GitHub や Figma からインポートしたりするオプションもあり、強力に感じました。生成中にプランを表示してくれるので、その思考プロセスを確認できる点が気に入りました。デフォルトの Agent である Claude の Sonnet 4.5 を使用しました。
出力結果
最終結果は…カラフルでした。私が求めていた角丸は取り入れられていましたが、ポップアートや抽象的なスタイルのリクエストにはあまり従わず、よりプレイフルでパステル調の色合いを選んでいました。タイポグラフィはかなり標準的で退屈であり、'Word Wizard' という言葉に少し工夫が見られた以外、プレイフルとは言えませんでした。生成されたバイオは驚くほど内容が充実しており、特に他のツールが生成したバイオと比較すると良い点でした。リクエストしたすべてのページが揃っており、すべて問題なく動作しているように見えました。しかし、アニメーションは汎用的で最小限のものであり、体験に特別なものを加えるものではありませんでした。また、ナビゲーションを容易にするためにページ間の相互リンクがあればと思いました。
Bolt によって構築された Web アプリ:
パフォーマンスはどうだったか?
デザイン: デザインはリクエストしたポップアートスタイルというよりも、よりプレイフルでパステル調でした。心地よくはありましたが、私が求めたものではありませんでした。
指示への忠実さ: ページと優れた自己紹介文を作成してくれましたが、デザインスタイルとアニメーションは期待外れでした。
使いやすさ: 非常にシンプルで使いやすいです。
速度: 信じられないほど速く、最初のバージョンが2分以内に完成しました。
価格: Bolt には1日のトークン制限付きの無料プランがあり、有料プランは月額25ドルから始まります。
非コーダーとしての評価
難易度: 電子レンジを使うようなもの。速くて簡単ですが、グルメ料理は期待できません。
もう一度使うか? たぶん、シンプルで素早いウェブサイトが必要で、特定のデザインにあまりこだわらない場合なら使うかもしれません。ラピッドプロトタイピングには最適ですが、デザインを完璧にするには手動での調整が必要だと覚悟しておきましょう。
#4 Cursor: 開発者のお気に入り(でも非コーダーには?)
Cursor は VS Code をベースにした AI 駆動のコードエディタです。強力な機能で開発者に愛されていますが、コーディング未経験者にも使いこなせるのでしょうか?
ツールの使用とナビゲーション
Cursor の第一印象は…威圧感でした。インターフェースはクリーンでミニマルなコードエディタで、開発者には素晴らしいですが、そうでない人にはかなり気が重いものです。親しみやすいボタンやプロンプトはなく、ただの空白の画面と点滅するカーソルだけ。少し探ってみて、開始するには GitHub アカウントを接続する必要があることが分かりました。
出力結果
ここで Cursor との旅は残念ながら終わりを迎えました。GitHub アカウントを接続してプロンプトを入力したところ、有料プランの壁にぶつかりました。AI エージェントを使うには有料プランが必要だとのこと。最善を期待して Pro プランに20ドルを投資することにしました。しかし、支払い後も「リポジトリ」がないというエラーメッセージが次々と表示されました。GitHub で作ろうとしましたが、インターフェースはすべてコードで、何をしているのかさっぱり分かりませんでした。1時間のフラストレーションと20ドルを無駄にした末、諦めるしかありませんでした。ウェブサイトを目にすることすらできませんでした。そもそもこのページがバイブコーディングツールに分類されるべきだったのか疑問です。
パフォーマンスはどうだったか?
デザイン: 該当なし
指示への忠実さ: 該当なし
使いやすさ: 非コーダーにとっては非常に悪い。体験全体が開発者向けに作られている。
速度: N/A
価格: Pro プランは月額 20 ドルですが、私はそこから何の価値も得られませんでした。
非コーダーとしての評価
難易度: 訓練なしでヘリコプターを操縦しようとするようなもの。墜落して炎上することになります。
もう一度使うか? 絶対に使いません。これは開発者にとっては強力なツールかもしれませんが、コーディング知識なしでウェブサイトを作りたい人向けではありません。1 時間と 20 ドルが無駄になりました!
#5 Manus: コーディング以上のことをこなす AI アシスタント
ツールの使用とナビゲーション
Manus のインターフェースはクリーンで分かりやすく、プロンプトボックスが中央に配置されていました。専用の「バイブコーディング」ツールというより、汎用的な AI アシスタントのように感じられ、他の専門ツールと比較して少し異なっていました。とはいえ、明確な「Build Website」ボタンがあり、それは評価できました。プロンプトを入力した後、ポップアップでより良い結果を得るために有料機能である「Manus 1.6 Max」バージョンに切り替えることが提案されました。私はまず無料版で何ができるか試してみることにしました。
出力結果
残念ながら、無料版は完全に失敗し、404 エラーが発生しました。作られたはずのウェブサイトすら見ることができませんでした。
がっかりして、有料の「Max」バージョンを試してみることにしました。試してみて本当に良かったです。結果は一言で言って、見事でした。テストしたすべてのツールの中で、私が目指していたポップアート的、抽象的、遊び心のある雰囲気を本当に捉えていたのは Manus だけでした。色はぴったりで、アニメーションは創造的で意図的、全体のデザインはまさに完璧でした。その素晴らしい例が、角丸への取り組み方です。私のプロンプトでは「追加する」よう求めましたが、すべてが丸くなることを期待していたところ、Manus は丸い角と鋭い角を組み合わせて提供してくれました。これは嬉しい驚きで、デザインがより動的で一面的でなくなり、プロンプトを文字通りに従うのではなく、私のニーズを予測していることを示していました。さらに、異なる要素にホバーした際にカーソルの色が変わるようにカスタマイズされており、これも大きな違いを生み、クリエイティブブリーフへの真の理解を示すもう一つの細部でした。この結果は有料プランからのみ得られましたが、このウェブページを作成するのに使用されたクレジットを計算すると、1 ドル未満になります!
パフォーマンスはどうだったか?
デザイン: 見事。私のプロンプトに完璧にマッチし、真に創造的で洗練されたデザインを提供した唯一のツールでした。
指示への従順さ: 優秀。ページ構造から特定のデザインスタイル、アニメーションまで、すべての指示に従いました。
使いやすさ: インターフェースはシンプルで使いやすいです。主なハードルは無料版の失敗でした。
価格: Manus には無料プランがありますが、複雑なウェブ構築には、良い結果を得るために有料プラン(月額 20 ドルから)が必要です。
非コーダーとしての評価
難易度: パーソナルアシスタントを雇うようなもの。やってほしいことを伝えれば、すべて代わりにこなしてくれます。
もう一度使うか? 即答でイエス。無料版は期待外れでしたが、有料版は他のツールをはるかに凌ぐ結果を提供してくれて、投資する価値が十分にありました。私のビジョンを本当の意味で形にしてくれた唯一のツールです。
並べて比較:5つの成果物すべてを比較
ツール | 最も優れたデザイン要素 | 最も劣るデザイン要素 | 総合スコア |
Lovable | 全体的に楽しく遊び心のある雰囲気。 | ポップアートスタイルを十分に取り入れていない、やや無難なデザイン。 | 4/5 |
Replit | かわいくカラフルなアニメーション。 | 壊れた画像と奇妙なレイアウト。 | 3/5 |
Bolt | 内容が充実していて文章のしっかりしたバイオ。 | 最小限で平凡なアニメーション。 | 3/5 |
Cursor | 該当なし | コーディングの知識がないため成果物なし。 | 0/5 |
Manus | 見事に仕上げられた素晴らしいポップアートデザイン。 | 無料版が機能しなかったこと。 | 5/5 |
5つのツールすべてをテストして学んだこと
これら5つのバイブコーディングツールに何時間も費やして、いくつかの重要な気づきを得ました。まず、「バイブコーディング」は万能の解決策ではありません。それぞれのツールには独自の個性があり、異なるタイプのユーザー向けに作られています。Lovable のようなツールは、最小限の手間で美しいウェブサイトを求める真の初心者に最適です。Replit や Bolt のようなツールはより多くのパワーを提供しますが、もう少し忍耐が必要です。そして Cursor は明らかに一線を画す存在で、開発者向けに作られています。
次に、対価に見合ったものが得られることが多いと学びました。無料ツールは印象的でしたが、すべてに限界がありました。特定のクリエイティブビジョンに合致した、本当にカスタマイズされた高品質のウェブサイトを得るには、有料プランへの投資が大きな違いを生みます。Manus での経験はその完璧な例でした。無料版は行き止まりでしたが、有料版は大成功でした。
最後に、AI は非コーダーにとって強力なパートナーですが、心を読み取る存在ではないと気づきました。それでも、何を作りたいかという明確なビジョンを持ち、そのビジョンを効果的に伝える必要があります。プロンプトが具体的で詳細であるほど、より良い結果が得られます。
私のおすすめ
あなたが...の場合 | まず使うべきは... | 理由 |
素早く美しい結果を求める完全な初心者 | Lovable | 最も使いやすく、最小限の労力で素晴らしいウェブサイトを作成できます。 |
デザインを非常に重視し、品質にお金を払う意思がある人 | Manus | 私のデザインビジョンを真に捉え、誇りを持って見せられるウェブサイトを作成してくれた唯一のツールです。 |
より多くのパワーと柔軟性のために少し学ぶ意欲がある | Replit または Bolt | より多くの制御とカスタマイズオプションを提供しますが、Lovable ほど初心者向けではありません。 |
コンテンツ + 計画 + 構築が必要な人 | Manus | 最初から最後までプロジェクト全体を処理できるオールインワンの AI アシスタントです。 |
最後に
バイブコーディングの世界への旅はジェットコースターのようでした。Manus で自分のビジョンが形になったのを見たときのような純粋な魔法の瞬間もあれば、Cursor での経験のような純粋な挫折の瞬間もありました。しかし、結局のところ、やってよかったと思っています。ウェブサイトを構築することはかつて思っていたほど怖いものではなく、AI はコーディングをしない人にとって強力な創造的パートナーになり得ることを学びました。だから、もしあなたがアプリのアイデアを持つ非コーダーなら、バイブコーディングを試してみることを恐れないでください。あなたが作れるものに驚くかもしれません。
よくある質問
コーディング経験がなくても本当にアプリを作れますか?
はい、絶対にできます!Lovable や Manus のようなツールを使えば、誰でも一行のコードも書かずに美しく機能的なウェブサイトを構築することができます。ただし、さまざまなプロンプトを試す準備をし、プロセスに対して忍耐強くあることが必要です。
どのツールが最も見栄えの良い結果を出しましたか?
私にとって、デザインの面では Manus が明らかな勝者でした。私が目指していたポップアート、抽象的、遊び心のある雰囲気を真に捉えた唯一のツールでした。Lovable は僅差の 2 位で、個人ポートフォリオに最適な楽しくカラフルなデザインでした。
どのツールが私のデザイン指示に最もよく従いましたか?
圧倒的に Manus です。私のプロンプトのニュアンスを理解し、美しく創造的なデザインに翻訳してくれた唯一のツールでした。
コードを見なければならないことはありましたか?
Lovable、Replit、Bolt では、一行のコードも見る必要はありませんでした。Cursor では、すぐにコードエディタに放り込まれ、何をすればいいかわかりませんでした。Manus では、コードを見る必要はありませんでしたが、見たければ見ることもできました。
他の非コーダーにバイブコーディングを推薦しますか?
もちろんです!アイデアを形にする楽しくて力を与えてくれる方法です。ただし、自分のニーズに合った適切なツールを選び、プロセスに対して忍耐強くあることを忘れないでください。最初の試みで常に完璧というわけではありませんが、少しの実験で本当に素晴らしいものを作ることができます。
