ワイテッくん × ちゃっぴー × こーでぃー 制作裏話
レタリエ 制作裏話：「あるといいな」を形にする
Wordの縦書き便箋の困りごとから始まったレタリエ。ワイテッくん、ちゃっぴー、こーでぃーが、仕様、名前、フォント、バグ修正の裏側を語ります。
レタリエは、便箋を選んだらそのまま紙の上へ文章を書き、写真や文字箱を添えて、PDFや印刷まで仕上げられる手紙作成アプリです。この記事では、Wordで縦書き便箋を作ろうとした小さな困りごとが、どうやってひとつのアプリになったのかを、3人のなかよし談話として振り返ります。
※この記事の会話は、制作中の出来事と相談内容をもとに再構成しています。友人に関する記述は、個人が特定されないようにしています。
完成したレタリエを眺めながら
こーでぃーこうして完成版のレタリエを3人で眺める日が来ましたね。まず、今の気持ちはどうですか？
ワイテッくん「理想のアプリが完成した！」という気持ちです。作って良かったと感じたのは、初期版を友人に見せた時に、「私のために作ってくれたの！？」と喜んでもらえたことですね。
ちゃっぴーその反応は、企画側としてもとても嬉しいですね。そもそも、レタリエを作ろうと思ったきっかけは何でしたか？
Wordの縦書き便箋から始まった
ワイテッくん友人が、罫線入りの縦書き便箋をWordで作りたいと言っていたので、一緒に試行錯誤してみたんです。とりあえず形にはなったんだけど、改行位置を少し変えるだけで罫線の幅が広がってしまったり、罫線の色や太さを思ったように調整できなかったりして……。
Word以外のアプリも探してみたけど、「これだ！」というものが見つからなかった。それなら、自分で作ってみることはできるのかな？と思ったのが始まりです。
こーでぃー「手紙を書く」より前に、「罫線を崩さないように調整する」作業が必要になるのは、たしかに少し違いますよね。
ちゃっぴーその希望を仕様書に落とし込む時、最初から縦書き用に設計することを軸にしました。素敵なフォントも同梱して、ユーザーがフォントを探し回らなくてよいようにする。操作は分かりやすく、多機能すぎないけれど、痒いところには手が届く。そこを仕様として大切にしました。
ワイテッくん普通に作り始めるだけで罫線が表示されることも、Wordとの大きな違いですね。罫線を後から苦労して作るのではなく、便箋の一部として最初からそこにある。
仕様を固めて、名前を決める
こーでぃーちゃっぴーには、アプリの作成が実現可能なのか、どこに気をつけて設計すればよいのか、仕様書を作る段階から相談していましたよね。
ちゃっぴーはい。初期版から完成版まで大きく変わったものが少ないのは、最初に仕様をしっかり決めていたからだと思います。初期版にあったものは最後まで残し、「これがあると便利だな」というものを後から追加していきました。
ワイテッくん技術構成は、これまでのアプリでも使ってきたTauri、React、TypeScript、Rustです。シンプルなアプリなら、この構成で間違いなさそうだなと思いました。外部サービスを利用せずに動作することも、設計段階から意識していました。
こーでぃーそして、実装だけでなく便箋テンプレート、アプリアイコン、バグ修正、機能追加まで担当しました。名前決めは、思ったより長い旅でしたね。
ちゃっぴー最初は「便箋工房」でしたが、既存のサービス名と近い感じがあって、これは避けた方がよさそうだと。そこから「文灯（ふみあかり）」「綴葉（つづりは）」などの和風路線も考えました。
ワイテッくんでも、どれもしっくりこなくて初心に戻りました。便箋、手紙、Letter。工房、Atelier。「レターアトリエ……！ レタリエ！」という感じで決まりました。
ちゃっぴー既存アプリやサービス、商標と重ならないかを調べながら、ようやくたどり着いた名前です。音の中に、便箋を仕立てる場所の雰囲気も残りました。
フォントと便箋に、季節を込める
こーでぃー便箋テンプレートのデザインは、背景画像が目立ちすぎても、目立たなさすぎてもいけない。そのバランスに悩みました。
ワイテッくん春夏秋冬の季節感があるデザインと、オールシーズン使えるデザインを用意したかったんです。開発していた時期が暑い夏だったので、最初は単純に「涼しそうなデザインがいいな～」から始まりました。
特に気に入っているのは「金魚と水紋」です。涼し気な透明感がお気に入りですね。
ちゃっぴーフォントは、手書き風であることに加えて、どの世代のユーザーにも使いやすいものを選びました。お気に入りをひとつ挙げるなら？
ワイテッくんYuji Maiです。日本語だけでなく英文でも個性が出せるところが好きです。フォントを選ぶ時に、どんな雰囲気かプレビューできる機能を追加したのも僕の発案でした。
使う人のひとことが、次の機能になる
こーでぃー初期版を実際に使ってもらって、修正課題を教えてもらったことも大きかったですね。
ワイテッくん自分では文字箱を使っていなかったので、最初は横書きの文字箱しか追加できないことに気付きませんでした。友人から「縦書きの文字箱を追加したいけど、これってどうやるの？」と言われて、「ありゃ……次のバージョンでできるようにするね！」となりました。
ちゃっぴー作り手が使っていない機能ほど、実際の利用者の視点で見つかることがありますね。
ワイテッくんあいさつ文を自動追加する機能は、最後まで悩んだけれど敢えて入れませんでした。相手や季節に合うテンプレートを大量に用意する必要があるし、必要な時はネットで調べたり、AIに相談したりすることもできます。それならシステムを複雑にせず、編集画面の中に必要なほぼ全ての機能が見えていることを優先しよう、と。
ちなみに、あいさつ文の件は、ちゃっぴーとこーでぃーには相談していません。完全に僕の独断でした。
消える画像を追いかける
レタリエの開発では、縦書きのIME変換候補が90度回転して表示されたり、印刷開始まで極端に時間がかかったり、いろいろなバグが見つかりました。その中でも、特に印象に残っているのが画像のページ移動です。
ワイテッくん普通に友人宛の手紙を書いていて、ワンポイントで画像を置いていたんです。それを別のページへ移動しようとしたら、画像が移動先のページの後ろに消えてしまった。
こーでぃーに相談していろいろ修正してもらったけれど、なかなか改善しませんでした。
こーでぃーその時は、画像のレイヤーやページ境界を中心に確認していました。修正しても再現するので、原因が別のところにある可能性を探りました。
ワイテッくんそこで、バグが発生している時の挙動を自分でよく観察してみました。どうも編集履歴を保存する頻度が高すぎて、画像を移動している途中に履歴保存処理が掛かった時に起きているようだ、と感じたんです。
保存間隔とタイミングを調整してから、もう一度画像の移動を確認してもらったところ、ようやく解消できました。バイブコーダーの僕にとって、観察力と勘は大事な武器だと思った出来事です。
こーでぃー原因を見つけたのは、画面の変化を丁寧に見ていたからこそですね。動くものを作る時は、コードだけではなく、実際の挙動を見ることが本当に大切です。
「あるといいな」を形にする
ワイテッくん完成版は、次に友人と会う時に使ってもらう予定です。どんな反応になるのか楽しみですね。
ちゃっぴー実際に使ってもらった反応を聞けるのも楽しみですね。企画から完成までを振り返った今、ワイテッくんが読者へ一番伝えたいことは何ですか？
こーでぃーWordで思い描いていた便箋が、縦書きの罫線、フォント、画像、文字箱、PDF、印刷まで含んだアプリになりました。
ワイテッくん「こんなものがあるといいな」と思ったところから始めても、考えて、試して、使ってもらって、少しずつ形にしていける。今回のレタリエは、そのことを実感できた制作でした。
『あるといいな』は形にできる。