外注に約100万円かけたゴミアプリが、Codexで生まれ変わった件⑦｜高機能ツール実装編

こんにちは！吉田です！
前回は、納品されたAPIをCodexに見てもらい、費用がかかる理由や、回答の根拠を見直していくお話でした。

今回は、チラシを編集する「エディター」の開発についてです。実はこれ、最初からつくろうと考えていた機能ではありません。自分には無理だと思って、諦めていたもののひとつでした。

エディターなんて、自分には無理。
でも、Codexならつくれるんじゃない？

Codexなら、エディターもつくれる？

日常的にIllustratorやPhotoshopを使っているからこそ、
エディターを自分でつくるなんて、どう考えても無理だと思っていました。
あれだけいろいろな操作ができるものを、一から開発するなんて想像もつきません。

でも、Codexと一緒にAPIを見直し、提案された改善を実際に形にしていくうちに、「もしかして、エディターもつくれるんじゃないか？」と思うようになりました。
そこで、チラシを編集する機能までつくれるのか、聞いてみたんです。

返ってきたのは、必要な機能を整理して進めれば対応できる、という回答でした。もちろん、すぐに完成するという意味ではありません。それでも、自分の中では最初から選択肢になかったものが、試せることに変わったんです。

いや、そんなものまでつくれるのか。
すげぇな、と（笑）

つくれるかもしれないと分かると、これまでお客様にお願いするしかなかった作業も、アプリの中で解決できるんじゃないかと考え始めました。

チラシの用意まで、お客様自身で完結できるように

写真と文字を配置

位置・サイズを調整

QRを載せて書き出す

もともとのアプリは、QRコードの発行や、チラシの配布先を分析するところまではできるように設計していました。ただ、実際に配るチラシを完成させるまでには、まだ手間が残っていたんです。

チラシのデータは別で用意して、発行したQRコードをそこに載せる。その作業はお客様自身で進めてもらうか、私に制作を依頼してもらう、という形を考えていました。

でも、使う人からすると、分析ができても、そのままチラシを完成させられるわけではありません。だったら、編集もQRコードの配置もアプリ内でできるようにして、お客様だけで一連の作業を完結できるようにしたい。
エディターをつくる目的は、そこにありました。

Illustratorほどの高機能なものは必要ありません。まずは、
チラシを用意するために必要な機能を整理するところから始めました。

写真や文字を置いて位置や大きさを変え、QRコードを配置して、使える形で書き出す機能です。

もうひとつ大事にしたかったのが、テンプレートです。エディターを用意しても、真っ白な画面から自由につくってください、では使う人が困ってしまう。
まずはベースになるデザインを選び、写真や商品名、価格などを差し替える形を考えました。

例えばクレープ店なら、クレープのテンプレートを選んで、お店の写真やメニューに変更し、QRコードを配置する。デザインを一から考えなくても、必要なところを編集して使える。そのためのエディターにしたかったんです。

それっぽいものはできた。でも、使ってみると……

2026年9月1日の開発初期の画面　※クリックで拡大

そうして、エディターらしい画面はできてきました。写真があって、文字があって、編集するためのメニューもある。見た目だけなら、「お、いい感じじゃん」と思うわけです。

ところが、実際に触ってみると、違和感が出てきます。

グループ機能がないうえに、レイヤーパネルもごちゃごちゃしていて操作しづらく、文字のカーニング、つまり文字間の見え方もおかしい。機能は揃い始めていても、制作に使う道具としては、まだ足りないところがありました。

エディターの形をしていることと、
エディターとして使えることは、別でした。

例えば、写真と見出しをセットで動かしたいのに、別々に動かさなければならない。それだけでも、レイアウトを調整するたびに手間がかかります。

レイヤーは、写真や文字などの重なりを管理するものですが、そのパネル自体が整理されていないと、目的のパーツを探したり、前後の重なりを調整したりするだけでも迷ってしまいます。
パネルが「ある」だけでは、使いやすいとは限らないんですよね。

文字も、入力できれば十分というわけではありません。
文字間や行間が不自然だと、チラシとして仕上げるときに気になります。

「文字を置けます」「画像を動かせます」だけでは足りない。その機能を使って、無理なく制作できるところまで考える必要があったんです。

これ、プログラマーに任せるだけでは難しくない？

まとめて動かせない

文字間が不自然

途中で、正直こう思いました。

私は仕事で日常的にIllustratorやPhotoshopを使っています。だからこそ、グループ機能がない、アートボードの外にパーツを仮置きできない、文字をそろえるためのベースラインがない、画像を切り抜くマスク機能がない、といった点に違和感を覚えました。

見た目の細かな好みというより、制作で普段使っている機能がなく、「これでは作業が進められない」と気づく感覚です。

でも、普段こうしたツールを使っていない人にとっては、文字が表示され、画像が動けば、機能としては完成しているように見えるかもしれません。

これは、プログラミングができるかどうかとは、また別の話なんですよね。

「動くものをつくる知識」と、
「制作に使える道具にする知識」は違う。

デザインツールの扱いまで分かるプログラマーなら、こちらが説明する前に気づけることもあると思います。そうでなければ、使う側が確認し、何が不自然なのかを具体的に伝える必要がある。

今回、私が普段から制作をしていた経験は、この部分で役立ちました。

これまで何気なく使っていた「当たり前の操作」が、つくる側になると、ひとつずつ考えなければならない要件になる。これは、やってみて初めて実感したことでした。