【個人開発】起承転結でリレー小説できるアプリ「言の葉つむぎ」を作りました【Next.js×Rails】

はじめに

はじめましてこんにちは、とぴ（@topi_log）と申します。
オンラインプログラミングスクールにてRuby on Railsをメインに学習しつつ、自主学習としてフロントエンドも勉強しています。
3/30にリレー小説ができるアプリをリリースしたので、アプリ紹介と技術、感想をまとめさせていただきます。
こういった記事は初めてですのでお手柔らかにお願いいたします。

目次

1. 作成経緯
2. Webアプリ紹介
3. 技術スタック
4. こだわったところ
5. 反省点
6. 感想

1.作成経緯

オンラインプログラミングスクールにて文化祭のような受講生主催のイベントがあります。元々作っていたアプリの応募が間に合わないと判断し、急遽イベントのために別のミニアプリを作ることにしました。
そうして生まれたのが今回ご紹介するアプリ「言の葉つむぎ」です。
3/18に開発を開始し、3/30にリリースしたので制作期間は12日ほどです。

2.Webアプリ紹介

物語というバトンを繋いで１つの小説を完成させる、リレー小説を投稿するアプリです。起承転結の4節構成で、1構成400文字の制限をつけています。
PC専用アプリですのでPCからお楽しみいただけます。

サービスURL

GitHub

アプリの着想

初めて小説を書いたのは小学2年生の国語の授業でのこと。そこから物語を書くことが好きになり、高校時代は兼部で文芸部に入っておりました。
文芸部の活動の中で、リレー小説を書くことがあり「自分が考えたものと違う方向へ物語が進む」ことや「他の人の考えた物語の続きを書く」ことに面白さと楽しさを覚えました。
そういった過去や、小説を書くのが好きで小説に関連するアプリが作りたいなという想いからこちらのアプリを作成しました。

機能紹介

（未）がついているものは未ログインでも使える機能です。
※gifで載せておりますので動画にカクつきがあります。

トップ画面（未）	トップから一覧画面（未）
シンプルながらに演出をつけてみました。 初めて小説を読むときのわくわく感を演出してみました。	読み込みまでのラグが分かりにくくなるようタイトルとナビゲーションをアニメーションで移動させページ遷移を感じさせない工夫をしました。

一覧画面（未）	小説（未）
タイトルと冒頭が分かるよう一部を表示しています。	ページ遷移せずそのまま読めます。紙をめくるような感覚で次ページを読めます。

執筆	続きを書く
起承転結の起を書くページです。起の節ではタイトルから作成できます。	ユーザーがまだ書いていない小説のみ、続きを書くことが出来ます。同じユーザーが2つ以上の節を書くことは出来ません。

自分の書いた小説一覧
起承転結の節別に一覧を分けています。

3.技術スタック

使用技術

カテゴリ	技術
フロントエンド	Next.js14(Page Router), TypeScript, Tailwind CSS, MaterialUI
バックエンド	Rails7.1.3
データベース	PostgreSQL
開発環境	Windows, WSL2, Docker
インフラ	Vercel, Fly.io
CI/CL	GitHubActions
その他	Swiper, Devise, DeviseJWT

ER図

4.こだわったところ

文字の読みやすさ

読みやすく、クセがなく、どのジャンルの小説でも違和感のないフォントとして「しっぽり明朝」を選びました。
行間も広すぎず狭すぎず、文字の大きさも一般的な小説サイトよりあえて大きめにすることで小説に読み慣れない人でも読みやすくなるのではないかと考え調整しました。

手に取っている感

Swiperによるカード形式のカルーセルをつかい、ページを捲るような感覚で読めるようにしました。
一覧から遷移せずそのまま読むようにしたことで、「机にある紙を手にとっている」ような演出ができないかと考え実装しています。

読んでいる最中は小説以外の文字は目立たせないように

小説にフォーカスさせるため、小説を読んでいるときは背景を薄い黒をかぶせ、且つブラーをかけることで文字をぼやかしてページ上の文字をより注視しやすくしました。

続きを書くとき読み返せるように

続きを書いていて「あれ、前の話どうだったっけ」となりがちです。
前のページを読み返せるよう工夫しています。

編集・削除機能は無し

リレー小説は前後の文章も作品を構成する大事な要素です。編集により内容に齟齬が発生しないよう、また削除によって穴抜けにならないよう編集・削除機能はわざとつけていません。
また、1作品に4人が関わることから小説そのものの削除機能もありません。

5.反省点

モニタサイズ・PCによってはレイアウト崩れが起きる

開発者ツールやChromの拡張機能でPCサイズでの見え方を適宜確認していました。
しかし実際に公開したあと、Macbookユーザーからレイアウト崩れの報告をいただきました。
縦書きによる縦レイアウトの影響かスタイリングが思うようにいかないこともあり、HTMLやCSSの勉強をもう少ししようと反省しました。

Xシェアから特定の小説を見られない

単独の小説ページがないことからXシェアではトップページのシェアをしていました。
「シェアされた小説が見られたらよい」とご意見頂いたので、そういった工夫を出来たら良かったなと思いました。

ジャンルやいいね、検索などの他の機能

本アプリと並行でチーム開発に2件参加しており本アプリに時間を取れなかったとはいえ、いいねやジャンルであればそこまで難しくないだろうと考えています。そちらの機能まで追加できればより良かったのかなと思いました。
検索機能はリリース前に触っていただいたときに「そういうのあったらいいね」とご意見頂いたので、実装できなかったのが悔やまれます。

5.感想

個人で作ったアプリは本アプリで4つ目となります。
今回は「フロントとバックを分ける」「認証機能は使ったことないGemを使う」「使ったことないサーバーを使う」と新しいことを挑戦できたので非常に良い開発でした。
その一方、ミニアプリとはいえ自分の中の最低限の機能がまだまだ機能不足なので、いいね機能などはもうすこしスラスラと実装できるようになりたいなと目標が出来ました。
今回の反省点は次回のアプリ開発で活かしたいと思います。

終わりに

過去に作ったアプリによってはNotionにアウトプット記事を書いていたのですが、Qiitaなども活用していこうと思いこちらに投稿いたしました。
2週間弱且つ別の開発2件抱えた中だったため、「いかに短時間で素早く実装できるか」を重きに起きつつ「新しいことへの挑戦」が出来たので良い経験になりました。
次のアプリもこの調子で作っていきたいです。
ご拝読いただきありがとうございました！

X（旧Twitter）もやっておりますので、よろしければフォローしてくださいませ