見出し画像

音声入力アプリ使ってみたかったから、生成AIに「全部作って」と頼んだら1日で完成した

ぴぴまる

「トライアルしたいけど、欲しくなるだろうし、最近流行りのバイブコーディングで作れないかなー」

まず、Youtube で KEITOさんの説明がわかりやすく、欲しくさせるのが困る

これを見たあと、SuperWhisperの購入画面を前にして、ふとそう思った。
Swiftは以前難しくて断念したので、ほぼ書いたことがない。
（アプリの開発者登録にもお金がかかるし）
でも結果から言うと、1日で完成した。コードは1行も書いていない。

目次

  1. 作ったもの: swhisper

  2. SuperWhisperが欲しかった

  3. 月額$8.49の壁

  4. 「スクショを渡すだけ」で始まった開発

  5. 波形UIはGoogle AI Studioに聞いた

  6. アイコンは10回やり直した

  7. 本家の機能も「追加して」の一言で実装できた

  8. 技術的に面白いポイント

  9. 「完成イメージ」があれば、コードは要らない

作ったもの: swhisper


アプリのアイコン

SuperWhisperと同等の機能を持つ、完全ローカル動作の音声入力macOSアプリ。

  • ホットキーで即録音、文字起こし、カーソル位置にテキスト挿入

  • LLMによるテキスト整形（フィラー除去、メール文体、ビジネス文書など）

  • 録音中の波形アニメーション付きフローティングUI

  • 音声で質問するとAIが回答する「Ask AI」モード

  • カスタム語彙辞書（「ジェミニ」→「Gemini」のような変換）

使った技術はSwift 5.9 + SwiftUI + WhisperKit。LLMはOpenAI、Anthropic、Gemini、Groqの4社に対応している。

かかったコスト: 0円。

SuperWhisperが欲しかった

Macで音声入力するなら、SuperWhisperが最高だと思っていた。

ホットキーを押すだけで録音が始まる。話し終わったらもう一度押す。音声がテキストに変わって、カーソルの位置にスッと入る。録音中の波形アニメーションもかっこいい。

さらにLLMによるテキスト整形がついている。「えーと」「あの」みたいなフィラーを自動で消してくれる。メール文体に変換したり、ビジネス文書風に整えたりもできる。

正直、欲しかった。

月額$8.49の壁

でも、月額$8.49。年間で約15,000円。

払えなくはない。でも今の自分には、ちょっと手が出なかった。

モヤモヤしたまま数日が過ぎた。

だったら自分で作ろう。

ただし条件がある。自分はSwiftを書いたことがない。Xcodeのプロジェクト設定すらわからない。普段はPythonを少し触る程度で、ネイティブアプリ開発の経験はゼロだ。

普通なら諦める。でも2026年には、諦めなくていい理由がある。

「スクショを渡すだけ」で始まった開発

最初にやったのは、SuperWhisperのWebサイトを開くことだった。

サイトのURLとスクリーンショットをAI（Claude Code）に渡して、こう伝えた。

「このアプリと同等の機能を持つmacOSアプリを作りたい。技術スタックと実装計画を立てて」

これだけで返ってきたのが、6フェーズに分かれた詳細な設計書だ。SwiftUI + WhisperKit + HotKeyという技術スタックの選定から、30個以上のファイルの責務まで、全部書いてある。

この設計書をClaude Codeに渡した。「Implement the following plan:」と一言添えて。

233ターン。213回のツール呼び出し。

AIが黙々とコードを書き続けた。Xcodeプロジェクトの設定ファイル、Package.swiftの依存関係、Info.plist、エンタイトルメント。30個以上のSwiftファイルが次々と生成されていく。

ビルドボタンを押した。動いた。

録音して、話して、停止する。数秒後、文字起こしされたテキストがカーソル位置に挿入された。

1回のセッションで、パイプライン全体が動作する状態になった。

波形UIはGoogle AI Studioに聞いた

SuperWhisperで一番かっこいいのは、録音中の波形アニメーションだ。

音声に合わせて48本のバーが波打つ。上下対称のミラーリング。中心が高く、端にいくほど低くなる。地味だけど、これがないと「それっぽさ」が出ない。

Claude Codeも画像を読み込める。マルチモーダル対応なので、スクリーンショットを渡せば解析してくれる。

ただ、UIの寸法を正確に数値化したかった。ここでGoogle AI Studioも併用した。

SuperWhisperの波形UIのスクリーンショットを撮って、Google AI Studioにアップロードした。

「この画像の波形UIを表現するYAMLを教えて」

返ってきたYAMLには、バーの本数（48本）、間隔（2pt）、幅（3pt）、最大高さ（36pt）、ミラーリングの仕様、中心からの減衰係数まで数値で記述されていた。

ui_component:
  name: "Voice Recording / Dictation Toolbar"
  style: "Modern Dark Glassmorphism"
  dimensions: "Compact horizontal bar"
  
  container:
    background: "Solid dark gray to black (#1A1A1A)"
    border_radius: "16px"
    border: "1px solid rgba(255, 255, 255, 0.1)"
    layout: "Vertical stack (Top: Visualizer, Bottom: Controls)"

  top_section:
    content: "Dynamic Audio Waveform"
    waveform_style: "Vertical bars (mirrored)"
    waveform_color: "Pure white (#FFFFFF)"
    animation_state: "Active / Recording"
    icons:
      top_right: "Minimize/Resize arrow icon"
      bottom_left_overlay: "Focus/Selection square icon"

  bottom_toolbar:
    background: "rgba(255, 255, 255, 0.05)"
    divider: "Subtle top border to separate from visualizer"
    padding: "8px 16px"
    elements:
      - label: "Voice"
        indicator: "Small blue dot on the left"
        hotkey: "^⇧Z"
      - action: "Stop"
        hotkey: "⌥⌘^0"
      - action: "Cancel"
        hotkey: "Esc"
    
  typography:
    font_family: "Sans-serif (Inter or SF Pro)"
    font_color: "Light gray (#D1D1D1)"
    hotkey_styling: "Subtle dark pill background with lighter text"

  interactions:
    state: "Recording in progress"
    hover_effects: "Slight highlight on buttons"

このYAMLをClaude Codeに渡して「この仕様でSwiftUIの波形ビューを作って」と伝えた。

AIにUIの実装を指示するための、構造化されたYAMLデータを作成しました。

この画像は、モダンでダークなデザインの**「音声録音/音声入力インターフェース」**です。AI（特にV0やClaude Artifacts、Cursorなど）に渡す際、細部まで再現できるように詳細なプロパティを記述しています。


AIへのプロンプト例（英語）
このYAMLと一緒に、以下のような指示を添えるとより確実です。

"Please recreate the UI shown in the image based on the provided YAML specification. It should be a sleek, dark-themed voice recording bar with a central white waveform, featuring a bottom control bar with specific keyboard shortcuts and a blue status indicator dot."

（和訳：提供したYAML仕様に基づいて、画像に示されているUIを再現してください。中央に白い波形がある洗練されたダークテーマの音声録音バーで、特定のキーボードショートカットと青いステータスドットがある下部コントロールバーを備えたものにしてください。）

Google AI Studio Gemini

一発で動いた。30fpsのアニメーション。音声レベルに連動するバーの高さ。見た目はほぼ本家と同じだ。


設定画面も同じやり方で作った。SuperWhisperのサイトのスクリーンショットを渡して「このUIを解読して、同等のSwiftUI設定画面を作って」と言うだけ。

5タブの設定画面、フローティング録音パネル、メニューバーの状態表示、初回セットアップウィザード。全部、URLとスクリーンショットから生成された。

思い通りのものができた。

アイコンは10回やり直した

アプリアイコンもAIに頼んだ。

「Appleが推奨しているグラスモーフィズムのデザインで作って」

Pythonスクリプトで1024x1024のアイコン画像を生成する方式だ。v1が出てきて、微妙だった。色を変えて、波形のモチーフを調整して、ガラスの透明感を足して。

v1からv10まで、10回のイテレーションを重ねた。

最終的に、半透明のガラス質感に波形を組み合わせた、Apple Human Interface Guidelinesに沿ったアイコンが完成した。Dockに並べても違和感がない。

本家の機能も「追加して」の一言で実装できた

ここまでで午前中が終わった。

午後は改善フェーズに入った。ダーク/ライトテーマの切り替え、波形アニメーションの滑らかさ調整、文字起こし速度の最適化。「ここをこう変えて」と伝えるだけで、164ターンかけてAIが修正していく。

SuperWhisperには「Ask AI」という機能がある。音声で質問すると、テキスト挿入の代わりにAIが直接回答してくれるモードだ。これも欲しかった。

「ちょっとした質問モードを追加して」と伝えた。

音声入力した内容が短い質問だった場合、AIが回答をオーバーレイに表示してくれる。「RPAって何の略？」「DXとは？」と話しかけるだけでいい。コピーボタンとGoogle検索ボタンもつけた。

質問の判定はパターンマッチで行うのでLLM呼び出し不要。ゼロレイテンシーで判定が終わる。

これもAIに伝えるだけで実装された。本家の機能を見て「これも欲しい」と思ったら、その場で追加できる。これが生成AIで開発する最大の強みだと思う。

カスタム語彙辞書も追加した。「ジェミニ」と発音したら「Gemini」と変換する、固有名詞の読みと表記のペアを登録できる機能だ。登録した語彙はLLMのプロンプトに自動で含まれる。

本家にある機能はひと通り再現できた。しかもテーマ切り替えや語彙辞書など、本家同様の機能もいくつか載っている。

1日の開発ログ

実際のセッションログから再構成したタイムラインがこれだ。

午前 — 基盤構築。30個以上のSwiftファイル生成、全機能実装（233ターン）
午後前半 — UI/UX改善。テーマ対応、波形アニメーション、高速化、アイコン作成（164ターン）
午後後半 — 独自機能。質問モード追加、辞書機能修正（現セッション）

合計の実作業時間は1日未満。

自分がやったことを振り返ると、4つしかない。

  1. SuperWhisperのサイトURLとスクリーンショットをAIに渡す

  2. 「こういうアプリを作って」と伝える

  3. ビルドして動作確認する

  4. 「ここをこう変えて」とフィードバックする

コードは1行も書いていない。

技術的に面白いポイント

音声認識はWhisperKitを使っている。AppleのCore MLに最適化されたWhisperモデルで、Apple Silicon上でネイティブに動く。インターネット接続は不要。音声データが外部に送信されることもない。

LLMは4社対応にした。OpenAI、Anthropic Claude、Google Gemini、Groq。APIキーを設定するだけで切り替えられる。Geminiには無料枠があるので、完全無料での運用も可能だ。さらにGeminiはレート制限に達すると自動で別モデルにフォールバックする仕組みも入っている。

これも全部「こうして」と伝えただけで実装された。

「完成イメージ」があれば、コードは要らない

この体験で気づいたことがある。

生成AIにアプリを作ってもらうとき、一番大事なのはプログラミングスキルではない。「完成イメージ」をどれだけ正確に伝えられるかだ。

言葉だけで伝えるのは難しい。「かっこいい波形アニメーション」と言っても、AIには伝わらない。

でもスクリーンショットを1枚見せれば、一発で伝わる。

今回学んだコツは3つある。

1. 参考プロダクトのURLとスクショを用意する
「こういうものを作って」の精度が劇的に上がる。既に存在するプロダクトの画面を見せるのが、最も正確な仕様書になる。

2. AIツールを使い分ける
Google AI StudioでUIデザインのYAMLを生成し、Claude Codeで実装した。画像の解析が得意なAI、コード生成が得意なAI。得意分野の異なるツールを組み合わせると効率が段違いになる。

3. フィードバックを細かく出す
一発で完璧にはならない。でも「ここを変えて」「この機能を追加して」と伝えるたびに、確実に理想に近づいていく。アイコンは10回やり直した。それでも1日で終わる。

SuperWhisperが買えなかったけど、それに似た多機能なアプリが手に入った。

完全無料で。1日で。

「作りたいもの」が頭の中にあるなら、もう言い訳はできない。スクショを撮って、AIに渡すだけだ。

SuperWhisperは素晴らしいプロダクトです。開発チームには敬意を表します。安定性とサポートを求めるなら、正規品の購入をおすすめします。この記事は「生成AIでここまでできる」という体験の共有を目的としています。

いいなと思ったら応援しよう！