記事を書く癖をつけるために、写真を見ながら話すだけの下書きアプリ「下書き」を作っている話

記事を書いていく癖をつけるため、簡単に記事のモックアップを作りたい人に向けて作った「下書き」というアプリを、今つくっています。

LIFE OFFICEに続いての2本目

先日、iOS向けに初めてのアプリ「LIFE OFFICE」をリリースしました。
フリーランスの怠け癖を直すために作った勤怠アプリで、企画からリリースまでの流れはこちらの記事にまとめています。

「下書き」は、その次に手を動かしているアプリです。
LIFE OFFICEと同じくExpoで作っています。
まだ審査には出していない、開発中の段階の話として読んでもらえればと思います。

いろんなアプリが簡単に作れてしまう時代になりました。
ちょっとしたものなら、Google Studioとかで勉強用とか、自分用にアプリとか作って使ってる人もいるんじゃないでしょうか。

僕はClaudeとCursorをメインとして使いながら作成しています。
最近はComfyUIをUI周りや素材作成に組み込んでいます。
このあたりのツールの使い分けはAIを使ったコーディング生活についてやCursorとClaude Codeを併用している理由にも書いたので、よければあわせてどうぞ。

記事を書くにも、下書きが要る

さて、この記事の本題ですが。

記事を書くのにも、下書きがないと始まりませんよね？
（僕はそう笑）

書こうかなと思っていても、面倒くさいから後回しにしてしまったり……。
そんな怠惰な自分に向けてまずは作ってみようと思ったのが「下書き」というアプリです。

どんなアプリか

さて、どんなアプリか。

まずは写真をベースにして、日ごろ撮ったもの、スクショ、などなど。
それらをみながらスワイプして音声メモで残してから、マークダウンでまとめる。

というものです。

かなりシンプルで、記事の精度は上げずに、まずは書きたい人の経験をベースにタイピングなしで、写真にメモを追加していき記事の下書きを作る。
こういうものです。

言葉で説明するより、実際の画面を見てもらったほうが早いと思います。

まず写真を選ぶ

最初のステップは、記事に使う写真を選ぶところからです。
（実際に、写真なしでもやりたいなぁーという声が聞こえてきたら写真なしでも出来るようにしていこうと思います。）

カメラロールから選んだ順番が、そのまま記事の流れになります。
あとからギャラリーボタンで足したり減らしたりもできるので、最初から完璧に選ばなくても大丈夫です。

選んだ写真が並んだ録音画面。大きな写真の下にサムネイル、その下にタイトルとメモ欄

録音したまま、写真をスワイプする

ここが一番作りたかった部分です。

録音を止めずに写真を横へスワイプすると、話した内容がそのとき見ていた写真ごとに自動で振り分けられます。
「朝露」の写真を見ながら「空気が冷たくて、草にはまだ露が残っていた」と話すと、それがそのままその写真のメモになる、という流れです。
声で話しにくい場面のために、キーボード入力も残してあります。

録音はexpo-audioで一本につなげて録っています。
止めたあとに、iOS 26のSpeechTranscriberが端末の中で文字起こしして、スワイプした時刻に合わせて写真へ振り分けます。
音声そのものは外に出していません。
タイトルや構成の指示は、別画面でexpo-speech-recognitionのリアルタイム入力も使っています。

AIが構成を組み立てる

写真とメモが揃ったら、構成をAIにお願いするステップです。

「旅行記っぽくまとめて」のように、どんな記事にしたいかを声か文字で伝えると、見出し付きの構成案を作ってくれます。
無料プランでも合計10回までは試せるので、気軽に投げて何度か作り直すこともできます。
撮影場所を渡すかどうかも、ここで選べます。

構成の生成は端末では走らせていません。
メモ本文と、写真のタイトル・撮影時刻・場所名（任意）だけをCloudflare Workers経由でGroqに渡して、openai/gpt-oss-120bに組んでもらっています。
写真ファイルは送らないようにしてあります。
AIなしで進めるスキップも残してあります。

並べ替えて、書き出す

最後は、提案された構成を確認して並べ替え、書き出すステップです。

見出しごとのカードをドラッグで並べ替えながら、記事とMarkdownを見比べて確認できます。
書き出しはMarkdownのほか、画像込みのHTMLとZIPにも対応しています。

記事プレビュー画面。見出しと写真、本文が並び、記事とMarkdownを切り替えられる

今のところ、ここまで

もともとは「タイピング完全ゼロ」を狙って作り始めたんですが、実際に触ってみるとタイトルや構成の指示だけはテキストでも入れたい場面があって、今はタイピングも残す形に落ち着いています。

書き出しはMarkdownの他にHTMLやZIPにも対応させてあります。
AIによる構成生成は無料の範囲でも動画広告などを入れて、何回か試せるようにするつもりです。
ただ、このへんの条件は審査に出すまでにまだ変わる可能性があります。

今は開発とApp Store提出の準備を並行して進めているところなので、リリースできたらまた記事にします。
アプリの紹介ページも用意していて、今のところはここでタグラインと概要だけ見られます。

写真を見ながら話すだけで記事の下書きができる AI 日記アプリ — 下書き

下書きは、旅先や日常の写真を見ながら話すだけで、AI が見出し付きのブログ記事・旅行記の下書きに整える iPhone / iPad アプリです。録音を止めずに写真をスワイプすると、話した内容が見ていた写真に自動で紐づきます。Markdown / HTML / ZIP で書き出せて、アカウント登録は不要。App Store で無料配信中です。

legal.testkun.net

自分と同じように「下書きがないと書き始められない」、下書きを思った時にパッと作れるようにしたいなと思っている人がいたら是非。