【個人開発】フランス人と縦書きの画像を生成するWebサービスを作った 

https://tategaku.io/

![main ui3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/c70a09b3-4edc-474a-78da-746dbd2a381c.png)

苦節６ヶ月の時を経て、個人開発で作っていたWebサービスが完成しましたので報告させてください。
制作の中でフランス人のデザイナーと出会い、二人で真剣に作りました。
我ながら良いサービスができたと自負しております。

この記事では、個人開発の楽しさに加え、国際的なチームを組んでサービスを作り上げる楽しさについても共有できたらと思います。


## 日本語をより美しく見せる　縦書き画像アプリ「タテガク」
私たちが作ったのは、「タテガク」というWebアプリです。
タテガクを使えば、自由度が高く、直感的に縦書きの画像を生成できます。
短歌や短編、メッセージを美しい縦書き画像にして、SNSでシェアできます。

https://tategaku.io/

![main ui](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/63ec66e8-7b0f-4d4a-dadf-c0030754e65a.png)

### こんな縦書き画像を作れます
タテガクを使えば、さまざまなバリエーションの縦書き画像を、美しく作ることができます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/8751bb2c-bcf6-84d3-5f84-24ca25d156f7.png)
背景に画像を入れたりできますし、縦横の幅も自由自在に変更できます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/527c949a-ff6a-f610-d8a8-5884160d0299.png)
また、長い文章を複数枚に分けて出力できます。
![Beige Collage Moodboard Photo Gallery Twitter Post (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/dc7bfcfd-f8fe-4365-a1b1-7c5d352072ef.png)

### タテガクの操作方法
UIはシンプルで、一目で操作方法がわかるように設計しています。インタラクティブで直感的なデザインを目指しました。

本文は、縦書きの画面に直接入力します。
![Screenshot 2024-10-22 at 9.45.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/3bb898a4-95e1-899a-e0de-6c7c50bcc0c5.png)


画像や文字のタテヨコのサイズは、右のメニューから変更できます。数値にフォーカスを当てると、縦書き画面にオレンジ色のガイドラインが引かれるため、どの箇所が変更されるか一目でわかります。
![main ui1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/e39d2638-25f4-a2a3-213d-6e70961793bc.png)
四隅と上下に、テキストやページ番号を設定できます。
![main ui2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/23ee4d69-56ff-1877-66b1-3b446d4c157d.png)
スマホ向けの縦画像だけではなく、横に広い画像も作れます。
![main ui3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/c70a09b3-4edc-474a-78da-746dbd2a381c.png)
そして最後に、右下の書き出しボタンを押せば、簡単に画像を出力できます。無料でダウンロードでき、SNSに投稿することができます。
![Screenshot 2024-10-22 at 0.20.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/101bec78-2072-7534-c93b-449a0326135e.png)

### タテガクは現在、無料で利用できます
ぜひ、皆様もタテガクを利用してSNSを彩ってみてください。

https://tategaku.io/

## 半年にわたる苦くも甘い開発ストーリー
続いて、タテガクができるまでの山あり谷ありのストーリーを紹介します。
### 縦書きエディタを作ろうと思い立ったきっかけ
タテガクを作ろうと思ったきっかけは、縦書きで物語を投稿しているX(Twitter)アカウントを見つけ、その表現力に感銘を受けたからでした。興味を持ち調べると、詩人の界隈でも、縦書きの美しいビジュアルとともに詩を投稿している方々がいることを知りました。
彼ら彼女らは、文字で語るX(Twitter)の場において、あえて縦書きの画像を用いることで日本語が持つ見た目の美しさを表現していました。

しかし、縦書き文章をそのまま入力できる直感的なツールはまだないことに気づきました。
日本語の多くの本は縦書きで書かれており、文化として根付いているので、このようなツールがないのには正直驚きでした。

縦書き画像をSNSに投稿しているユーザーはすでにたくさんいるし、今後も増えていくでしょうから、ツールを作れば、ユーザーをつけて、ゆくゆくはマネタイズもできると考えました。
「日本語を美しい画像にする」というコンセプトも気に入ったので、早速プロトタイプを作ることにしました。

縦書きエディタの開発については過去に試したことがあったため、プロトタイプはわずか４日で完成しました。
![prototype](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/310f5fad-6cc4-4ee8-879b-52694988ac03.png)

普段ならここで満足してしまうところですが、今回はさらに一歩踏み出すことになりました。

### デザイナーとの出会い
UIUXデザイナーのジョセフさんとの出会いは偶然でした。
一人でふらっと参加した「Spectrum Tokyo」というUIUXデザインのオフラインイベントに、彼がいました。
彼が醸し出す強く穏やかな雰囲気になんとなく惹かれ、二郎系ラーメンを食べに行きました。

Josephはフランス出身で現在は日本に暮らしており、日本からフランス向けのUIUXのクライアントワークをしています。
彼は仕事以外でも個人開発をしており、生粋のクリエイターでした。
多くのフランス人は仕事以外に個人開発もしているらしく、彼の目からすると、フランスに比べると日本人の個人開発者はほんのわずかしかいないとのことでした。
それもあってか、互いのプロトタイプを見せ合ったところ、互いの起業家精神や熱意に通じるところがあり、すぐに意気投合しました。
僕のプロトタイプにインスパイアされたから一緒にやりたい！と言ってくれて、とんとん拍子で一緒にタテガクを作ることになりました。

翌日に目が覚めると、彼からDMが来ていました。
「インスピレーションが湧き出てたよ」というメッセージと共に、figmaデザインのURLが添えられていました。
初見でクオリティの高さに武者震いしました。

![figma](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/126b234d-d5c0-21a8-8665-dd5516587caa.png)

「美しい...」

このクオリティならユーザーがつくかもしれない。ただの遊びでプログラミングするのではない、本気の遊びをやるんだ。
そう思えるUIUXデザインでした。
### ディスカッション、ディスカッション...
彼のペースに負けじと私も開発を進めました。
平日の夜の11時から朝1時までは必ず時間をとって、二日に一回は開発しました。
区切りがつくたびにサービスを触りながらディスカッションし、UIUXを磨き上げました。
一緒にラーメンを食べながら、サービスが広がった時のことを妄想してニマニマする時間は至福でした。

彼はUI以外にも、Discordの開設や広報戦略、ローンチの基準なども提案してくれました。
僕は開発で頭がいっぱいになっていたのですが、ミーティングのたびに、彼はサービスにおける「開発以外の全て」の世界の引き摺り出してくれました。
長年の経験に裏打ちされた提案はどれも説得力があり、マネタイズやファーストリリースの方針は、基本的には彼のアイディアをベースに進めています。

（ユーザーコミュニティのDiscordも開設しました！）
https://discord.gg/PJBPstATag
![Screenshot 2024-10-21 at 13.56.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/a5a5da0d-0089-7214-8c87-7fbc56dde053.png)

### 死ぬほど開発。え、もう寝るの？
本業の後、深夜まで開発に取り組む日々。
仕事が遅くなることもあり、平日の開発は必然的に深夜になります。
次々と課題が発生し、当然のように土日の片方は開発に消えます。それでも楽しく、最終的には228コミットまで到達しました。
![github](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/850ba0a8-9e6f-e9ab-bbc3-c3efbe0f7119.png)

膨大のタスクの中で、どうしても解決できないバグに直面して、メンタルの限界を迎えそうになったこともあります。
でも、なんとか頑張れました。

第一の理由に一人でやってるわけではないというのがあります。人と一緒にやっている以上、簡単にプロジェクトを放棄するわけにはいきません。

第二の理由は、周りに激務の友人が多かったからです。
彼らを見ていると、自分がどんなに作業をしても、「俺なんて全然余裕だな..」と思えるレベルでした。

たまに彼らと無言のLINE通話をします。
通話の中で、僕がおやすみなさいと言ったら、彼らに「え、もう寝るの？」と言われました。
是非はともかくとして、彼らが「踏ん張ってあと一歩こだわる」ことに目を向けさせてくれました。
技術力は場数を踏めば身につきます。でも、品質を上げるにはあと一歩の精神が重要です。
個人開発では手分けして作ることもないですから、難しい課題に当たるたび、自分があと一歩踏ん張ってバグを直していくことでしか形にならないのです。

![last_one_step-300x230.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/04c324e4-6a69-e2d8-25f4-7529314cc4f1.jpeg)

そして最後に、オンオフを切り替えてくれる人が周囲にいたというのも大きいです。

### ついに完成　「日本に来てよかった」
そして10月、ついに「タテガク」が完成を迎えました！
長かった。😌
画面越しにJosephと喜びを分かち合いました。

この時Josephが言った一言が胸に響きました。

「日本に来てよかった」

フランスから日本にやってきたJosephと、日本で一緒に物事を成し遂げることができたことを誇りに思いました

馴染み深い母国を離れて海外に行くのは容易なことではありません。
だからこそ、その土地で訪れる新たな出会いや冒険を期待するのだと思います。
Japanでの冒険を共にできたことに感謝です。

![Screenshot 2024-10-21 at 14.48.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984288/3e94e43b-4abf-408d-ddb7-a6af8d0f7bc9.png)

### 旅はこれから。ドッグフーディング、プロモーション、進化。
とはいえ、旅は始まったばかりです。次はユーザーを増やす旅が始まります。

そのために、自分たちでタテガクを利用してドッグフーディングをしたり、ユーザーのフィードバックを効率的に集約し、機能改善に役立てる必要があります。
その挑戦はまた別な記事にまとめさせてください。

皆様ぜひタテガクを利用して、SNSで発信してみてください。
あわよくばDiscordなどからフィードバックをいただけたら嬉しいです！

https://tategaku.io/

最後までお読みいただきありがとうございます。
現在タテガクは、[Joseph](https://www.linkedin.com/in/joseph-cavé-07692776/)とわたくし松山で制作しています。
皆さんと一緒にタテガクを育てていければ嬉しいです。