Vibe Codingに恋した話

AIをフルに活用して超シンプルにスライド作成アプリを作ってみました

Vibe Codingの使用箇所

すべて！

使用技術

React Js とか

挑戦したこと

Vibe Codingの魅力はコーディングを依頼することで設計に集中できることである。しかし、30分という時間内で作りたかったので設計もAIに任せました。
(一部の直したほうが良い箇所は手直し)
結構いいアプリケーションを作ることができました。

感じたこと

AIの進化はすごいな～と他人事のように感じてた1年前と違い、このサービスを作るちょっと前までAIを脅威としてみるようになってしまいました。作ってみるとAIによって面倒な工程が省かれ、自分がはじめ考えていたサービスよりももっと創造的に拡張することができるようになりました。驚きを隠せませんでした。
AIは最初から完成版のようなコードを出してくれるので詳細な指示をしっかり出せば自分の満足するサービスなら30分以内で完成させることができました。
プログラミングを学ぶ意味を考えさせられました。

改善箇所

バックエンドで費用を使いたくないためエクスポートの方法を変更しました。

作成スライドをJSON形式のテキストデータに落とし込んでユーザーに保持してもらう。

インポートをJSONデータを読み込む形にした。

サービスの紹介

あえて機能を絞ってスライド作成アプリを作りました。これによりAIが作るよりも早くシンプルでわかりやすいスライドを作ることができるようになりました。一度使ってみてはいかがでしょうか。

つかいかた！

スライドを作成する

作成ボタンを押してタイトルと詳細を打ち込みます。
画像を入れたければ(1枚まで)詳細設定から入れることができます。
保存ボタンを押してスライド作成完了
これを繰り返して何枚もスライドを作ることができます。

スライドを消去する

左側のスライド概要コンポーネントの各スライドの右上にある🚮マークを押すと削除できます

スライドを保存する

エクスポートボタンを押すとたくさんの文字が入力されている部分とコピーボタン、ファイルに保存ボタンが出てきます。
コピーボタンを押してメモアプリなどに張り付けておくことでどこでも見ることができます。
エクスポートはファイルが作られます。PC上級者は使ってみてください

スライドを読み込む

テキストを入力ボタンを押してメモアプリなどに張り付けたたくさんの文字をテキストボックスにコピー&ペーストします。
上級者はファイルをJSONファイルをドラッグのところにファイルをドラッグすることで読み込むことができます。

AIに負けない効率化

vercelでデプロイしました

https://v0-sepia-one.vercel.app/

NEWS

2025/06/17

デプロイ + 自動保存に対応。再読み込みしてもデータが落ちない！