アイデア集(こんなこともできる)

この章でわかること: 「Webでこんなことまでできるの?」という発想のネタ帳。 フロントだけでできることと、サーバー(やAI)が要ることに分けて並べました。 顧客提案のアイデア出しにどうぞ。

使い方

気になる項目を見つけたら、Claude Code に「○○みたいな機能を、まず簡単に作れる?」と 聞いてみてください。意外と手軽に試作できることが多いです。

フロントだけでできる(ブラウザの中で完結)

サーバー不要。手軽に試せて、単一ファイル構成でも動かせます。

アイデア	ざっくり何ができる
3D表現(three.js / WebGL)	商品を3Dでぐるぐる回す、空間的な演出
カメラ映像(getUserMedia)	その場で撮影、フィルター、QRコード読み取り
顔・手・骨格の検出(MediaPipe等)	口を開けたら反応、手のジェスチャーで操作(※端末内で完結)
簡単な画像処理(Canvas)	トリミング、明るさ調整、スタンプ合成
音声認識・読み上げ	声で入力、文章の読み上げ(Web/Chrome API)
傾き・方角(ジャイロ/コンパス)	端末を傾けて操作、方位を使う演出
地図・現在地	近くのスポット表示(地図サービスのキーは要注意)
アニメーション/インタラクション	スクロール演出、ドラッグ操作、ミニゲーム

「AIっぽい」けどフロントで動くもの

顔認識や骨格検出などは、端末の中で動く仕組み(オンデバイス)を使えばサーバー不要です。 「AI機能=必ずサーバー」ではない、という点が面白いところ。

サーバー(やAI)が要ること

秘密の鍵を安全に扱ったり、データを共有・保存したりするには、サーバー側が必要です (プロトタイプの作り方のB、Next.js)。

アイデア	なぜサーバーが要る
生成AI機能(Gemini / Claude などのAPI)	APIキーを隠す必要がある(APIキーの危険性)
データの保存・共有	複数人で同じデータを見る・残すには保存場所が要る
本格的なログイン	利用者ごとのアカウント管理
決済	安全性・法令対応のため必ずサーバー経由
メール送信・通知	送信処理はサーバー側で行う

鍵を使うAIはフロントに置かない

「AIに文章を生成させる」ような機能は、APIキーをブラウザに出すと盗まれます。 キーを使う処理は必ずサーバー側で(APIキーの危険性)。

なぜ大事か

「それ、Webでできるの?」にできますと引き出しを出せると、提案の幅が一気に 広がります。まずはフロントだけでできるものから試すと、手軽に驚きを作れます。 実際に動くデモはWeb/Chrome APIも見てみてください。