はじめに

はじめましてこんにちは、とぴ（@topi）と申します。
オンラインプログラミングスクールにてRuby on Railsをメインに学習しつつ、自主学習としてフロントエンドも勉強しています。
（という序文を見るのが2回目以上の人はありがとうございます。）
3/30に公開したリレー小説アプリ「言の葉つむぎ」の第2弾として6/15に「言の葉つづり」を公開しました。
「言の葉つむぎ」については下記記事にありますのでよろしければご覧くださいませ。

今回作成したアプリの紹介、技術、感想をまとめさせていただきます。
どうぞよろしくお願いいたします。

１．作成経緯

「言の葉つむぎ」でいただいたフィードバックを元に、改めてアプリを作りたいと考えていました。
しばらくスクールの卒業制作に集中していたため難しかったのですが、そちらが一段落ついたことと、スクール内でコンテストのようなイベントが開催されるので応募のために作成しました。
コンテストは複数応募OKだったので、卒制と過去作った「Leaf Record ～大草原不可避～」の2作品を応募しました。
しかしどうしても「お前はリリース済みのアプリを応募するのか？」「新作を出せ！応募するなら新作を出せ！」と心の中の私が謎の思考に陥ったので、「言の葉つむぎ」の反省を生かしたアプリ「言の葉つづり」を作成いたしました。

２．Webアプリの紹介

手紙のやり取りから物語をつづる、新しいタイプのリレー小説投稿アプリです。
レスポンシブ対応をしておりますので、PC、SPどちらからでもお楽しみ頂けます。

サービスURL

GitHub

アプリの着想

後ほどの「言の葉つむぎ」からの変更点でも触れますが、今回はとにかく「いかにレスポンシブ対応するか」を基点に考えました。
縦書き表示とレイアウトは画面サイズによって表示崩れが大きく起きることを「言の葉つむぎ」で痛感したので、横書き表示のレイアウトにしました。
横書きでPC・SPどちらから見ても違和感なく世界観が変わらないものはなんだろうと散歩しながらあれこれ考えました。フランクに書けるもので横書きでも問題なく、ひらがな・カタカナ・英語どれであっても違和感がないもの。
そうしてたどり着いたのが「手紙」です。
とはいえ手紙だとやり取りが固定化されてしまいそうなため、世界観として「いろんな手紙が色んな場所に届く」「手紙を書いている/読んでいる自分と届いた手紙を書いた人とは世界がそもそも違う」としました。
これにより文章に物語性を持たせ、さらに書き手の自由な発想と読み手の自由な受け取り方ができるのではないかと考えています。

機能紹介

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

トップ画面PC	トップ画面SP

手紙を開く演出をしています。	スマホからでも操作感が変わらないようにしています。

一覧画面PC	一覧画面SP

立体的に表示しホバーでアニメーションします。	PCと同じ演出をしつつ手紙のレイアウトが崩れないように調整しています。

詳細画面PC	詳細画面SP

手紙本文をメインとしシンプルなUIで余計な情報は入れていません。	PCと変わらない操作感で手紙を読めます。

投稿ユーザー一覧画面PC	投稿ユーザー一覧画面SP

投稿ユーザーのみの一覧です。	見づらくないように左右交互に表示しています。

ユーザー詳細画面PC	ユーザー詳細画面SP

1通目の投稿と返信で分けて表示させています。	一覧同様、見やすさが変わらないようにしています。

■新規投稿画面PC	■新規投稿画面SP

オートコンプリートでジャンルとタグ付けが出来ます。投函の演出もしています。	投函の演出が極端に変わらないようにしました。

■返信画面PC	■返信画面SP

投稿画面と操作感を変えず、過去の手紙も見やすくしました。	操作感はPCと同じまま、操作に違和感ないようにしました。

メニュー画面PC	メニュー画面SP

SPと同じ表現にすることでどちらからでも操作感が変わらないようにしました。	細部まで演出を拘っています。

■ログイン時メニュー画面PC	■ログイン時メニュー画面SP

新規投稿ページと自分の投稿ページへ遷移できます。	メニュー項目が増えても表示が変わらないようになっています。

３．技術スタック

使用技術

カテゴリ	技術
フロントエンド	Next.js14(App Router), TypeScript, tailwind CSS, Mantine, Framer motion
バックエンド	Rails7.1.3 APIモード
データベース	MySQL
開発環境	Windows, WSL2, Docker
インフラ	Vercel, Heroku
CI/CL	GitHubActions
その他	SWR, Recoil, Axios, ESLint, Pritter, Devise, DeviseTokenAuth, OmniAuthGoogle2

選定理由

今回、着手から〆切までの期限が1週間ほどだったため、スピーディな開発を行うために経験したことのある技術スタックを利用しました。
その代わりESLintやPritterを設定することで可読性と型の安全性が強固になったと思います。
また、SWRを利用することでローディングの読み込みの速さを実現しています。

ER図

４．「言の葉つむぎ」からの変更点

1. モバイルファーストなレスポンシブ対応

スマートフォンからの閲覧がPCと変わらないよう、何よりも先にSPでの表示を優先して実装しました。
tailwind CSS自体がモバイルファーストなため、レスポンシブ対応が容易にできました。

2. フォント変更

今回は横書きになったことでひらがな・カタカナ・英語が非常に読みやすくなっています。
これに当たり日本語・英語どちらでもクセがなく可読性に優れている「Klee One」を選びました。
量を書いても見やすさが損なわれないよう、通常の手紙より行間を若干あけております。

3. 返信で読み返す時の見やすさ

「言の葉つむぎ」では演出上、見え方が画面サイズに大きく左右されました。
今回はドロワーを使いどの画面サイズでも見え方が変わらないように対応しました。
またページネーションの位置も固定化することで、どのページでもすぐに見返すことが出来ます。

4. Xシェアから特定の手紙を見られるように

手紙の詳細ページを独立化することで、Xシェアから直接特定の投稿を見られるようにしました。
「言の葉つむぎ」では演出にこだわるあまり、直接特定の投稿が見られなかったのですが、共有のしやすさを優先し独立させました。

５．こだわったところ

Googleログインはポップアップで

今まで認証時はリダイレクトで行っていました。
今回は、リダイレクトであることは同じですがポップアップでのリダイレクトにすることで使いやすさが向上したのではないかと思います。

1通目の序文はチラ見せ

中身が全くわからない状態で見るのも楽しいですが、それぞれの投稿にタイトルがないので何を読んだか一覧からは分からなくなってしまいます。
手紙の1通目をちら見せすることで、読んだか読んでいないか判別しやすくしています。

何通続いているか表記

やりとりに回数制限がないので、何通続いているのか、つまりどのくらい長いのかが一見するとわかりにくくなってしまいます。
5枚目までは手紙が重なるような演出をつけました。6枚目以降は表示するというのも考えたのですが、パット見でわかるほうが親切かと思い1通目から表示するようにしています。
その際、消印に近いデザインで手紙っぽさも演出できているのではないかと考えています。

キャッシュを利用したページネーション

次ページを事前に裏で読み込み、キャッシュを利用して次ページのローディング時間を短縮させました。
最初手紙を読むときは1枚1枚次ページを読むことが予想されるので、一気に全ページを裏で読むのではなく、次ページのみ読み込むようにしています。

６．反省点

やっぱりつけられなかったジャンルやタグの検索機能

フロントとバックを分けた際の検索機能の実装に苦手意識があり、1週間で追加するには至りませんでした。
フロントの実装に時間がかかってしまい、バックの実装に時間を掛けられなかったので時間配分が難しいです。
ただフロントをこだわった分、見た目はおしゃれに仕上がったのはあると思うので前向きに捉えています。

投稿へのハードルが逆に上がったのかもしれない

手紙のやり取りとなり、地の文が減るので投稿へのハードルが下がったのではないかと考えていました。
しかしそもそもの世界観が把握しづらそうで、登録者数に対し投稿者は少ない現状です。
まだ公開して2日なので、今後増えていったらいいなぁと期待しています。

７．感想

今回は主に「UI/UX」をメインに実装しました。となると当然ではありますがフロントに時間がかかり、例によってバックの実装時間が短くなってしまいました。
とはいえ1週間でここまで作れたのはこれまでのアプリ開発経験の結果ともと考えています。
本アプリが、スクールに入ってから10個目に作ったアプリでした。
今後も発想を実現できるアプリ開発をしていきたいと思います。
これから就活に入るので、アウトプットを意識した学習を継続していこうと思います。
ご拝読いただきありがとうございました！

Xもやっておりますので、よろしければフォローよろしくお願いいたします！

【個人開発】手紙でリレー小説できるアプリ「言の葉つづり」を作りました【Next.js×Rails】