スマホでNotionを開くたび、「これ、もっとパッと見られたらいいのに」と思っていました。
植物の手入れ記録も、日々のタスクも、Notionにまとめてはいる——でも、外出先でサッと確認したいときに、あの画面の作り込みがかえって”重い”。
Notionをそのままスマホで見やすく整える方法も、探せばあるのかもしれません。でも、それよりも”自分の想像力で、一から作ってみる”ほうが面白そうだと思いました。
「だったら、自分だけの見やすいアプリを作ってもらえばいいのでは」。そんな思いつきから、Claudeと一緒にアプリ作りが始まりました。
最初の一歩は、あえて「計画」から始めた
作り始める前に、ひとつ工夫をしました。
Claude Codeには「プランモード」という、いきなりコードを書き始めるのではなく、まず「計画」だけを立ててもらえる機能があります。
あえてこのモードを使い、作業に入る前にまず計画だけを返してもらうことにしました。いきなり完成品を作らせるよりも、一度立ち止まって「どんな進め方をしようとしているのか」を見たかったからです。
返ってきた計画に一通り目を通したあと、さらにもう一手間加えました。今度は「UI/UXのプロとして見たらどうか」という視点で、その計画にコメントをもらうよう依頼したのです。
「これでいいか」を自分の感覚だけで判断するのではなく、一度専門家の視点を通してから進める——そのひと手間が、後の手戻りを大きく減らしてくれました。
プロの視点からのコメントをもらったうえで、ようやく計画を実行に移してもらう——この順番を踏んだことで、行き当たりばったりにならず、見通しを持って進めることができました。
「とりあえず作ってもらう」ではなく、「計画→レビュー→実行」の三段階を踏む。それだけで、仕上がりの精度がかなり変わると実感した出来事でした。
① 「埋め込み」ではなく「自分の画面」を選んだ理由
最初に出てきた案は、Notionのページをそのままアプリにiframeで埋め込む方法でした。
けれど検討の結果、この方法は採用しないことになりました。
スマホでの操作感が悪くなることに加え、Notionの中身がそのままインターネットに公開される形になってしまうリスクがあったからです。
代わりに選んだのが、Notionの情報だけを取り出して、自分好みの画面に”描き直す”という方法。
「公開されるのは見た目の部分だけで、Notionの中身そのものはそこに乗らない」という設計にできると聞いて、安心して前に進むことができました。
② 黒地に紫のグラデーション——「自分らしさ」に気づいた瞬間
最初に出てきたデザインは、白を基調に、緑がやさしく差し色になった、とてもナチュラルで自然を感じさせる画面でした。
おそらく「植物が好きな人なので、考え方もそうだろう」と汲み取ってくれたデザインだったのだと思います。機能はちゃんと動いているのに、不思議と「自分のもの」という感じがしませんでした。
よく考えてみると、普段使っているNotionの画面は、ずっと黒背景。自分は思っていた以上に、「自然やさしさ」よりも「デジタルでかっこいい」ものに惹かれていたんだ、と気づかされました。
そこで伝えたのが、「黒い画面に、紫から青へのグラデーションがかかったような、デジタルで近未来っぽい感じにしてほしい」という、最初の提案とはまったく逆方向の、かなり感覚的な要望でした。
すると数分後、深い黒の背景に紫と青の光がにじむような、サイバーっぽい雰囲気の画面が出てきて——思わず「これこれ!」と声が出ました。
「やさしい雰囲気」よりも「使うたびにテンションが上がるかっこよさ」のほうが、自分にとっての満足感につながる——そんな、自分でも気づいていなかった好みを発見できた瞬間でもありました。
機能だけでなく見た目にもこだわれることで、”自分のためだけの道具”という愛着が一気に強まりました。
③ 立ちはだかった「CORSエラー」と、郵便局のたとえ話
開発が進む中で、一度大きくつまずいた場面がありました。
ブラウザがNotionに直接データを取りに行こうとすると、「知らない相手とは話しません」というセキュリティの仕組みに引っかかってしまうのです（これが「CORSエラー」と呼ばれるものでした）。
専門用語だけ聞くと身構えてしまいますが、Claudeは”郵便局の窓口”にたとえて説明してくれました。
アプリが直接Notionに話しかけるのではなく、間に「窓口」を一つ置く。窓口がNotionに取り次ぎ、答えを持ち帰ってくる——だからブラウザの警戒心も働かない、という仕組みでした。
正直、Cloudflareというサービス自体、名前を聞いたことがあるくらいで、自分で触るのは初めてでした。”知らない仕組みに手を出すのは、ちょっとドキドキするな”というのが本音でした。
でも、いきなり使い始めるのではなく、Claudeに「これは料金がかかるものなのか」「どこまでなら無料で使えるのか」を先に確認してもらいました。一定の範囲内であれば無料で使えると分かったことで、ひとつずつ段階を踏みながら、安心して前に進むことができました。
この「窓口」にあたる仕組み（Cloudflare Workerというサービス）を作るときには、コードを画面にコピー&ペーストする作業を、私自身の手で行いました。
“全部お任せ”ではなく、自分の手も動かして仕組みが立ち上がっていく——その瞬間は、ちょっとした達成感がありました。
④ 使いながら直していく、「育てる」感覚
アプリが動き出してからも、改善は続きました。
- 表示される日付が1日ずれていた → 日本時間の計算方法を直してもらう
- タイムラインを横スクロールにしてみたら、タスク名が見切れて読みにくい → 縦スクロールに変更
- 長いタスク名が画面からはみ出す → 自動で折り返すように調整
- 使っているうちに「やっぱり横スクロールに切り替えられたらいいかも」と思うようになった
- 日付よりもタスクのカードのほうが大きくて、日ごとの区切りがぱっと見てわかりにくい
ひとつ試して、気になるところを伝えて、また直してもらう——その繰り返しでした。日々の暮らしの中で「あ、ここはこうしたい」と気づいては直してもらう作業は、まるで小さな生き物を育てているようで、作りながらずっとワクワクしていました。
完成形を一気に作ってもらうのではなく、使いながら一緒に育てていく。この進め方のおかげで、最後には本当に自分の生活に合った形に仕上がっていました。
思いつきが、形になった日
「Notionの予定を、スマホでサクッと見たい」。
そんな小さな思いつきから始まったやり取りは、質問に答え、要望を伝え、時には自分の手も動かしながら、気づけば一つのアプリになっていました。
機能だけでなく、見た目も、使い心地も、自分の言葉から生まれた——そう思うと、画面を開くたびに、ちょっと誇らしい気持ちになります。
完成してから、ふと気になったこともありました。今度は逆に、Claudeと一緒に作ったこの画面を、Notion側でも再現できないか試してみる——そんな遊びをしてみるのも面白くて、それぞれのツールの良さに気づくきっかけにもなりました。
思いついたことを、誰かと一緒に形にしていく——そんな体験を、ぜひ味わってみましょう!
ここまでが、アプリそのものを作るまでの過程です。
この後、完成したアプリをスマホのホーム画面に置くまでの試行錯誤は、すでに別記事としてご用意しています（「自分専用アプリをスマホのホーム画面に置いてみた話」）。
コメント