【六節噺(仮称)】投稿で文字配置を変えられるようにしました。

lumenHeroです。

開発中の6節のショートショートを投稿できるSNS（六節噺(仮称)）の投稿画面の開発を行ったので、Reactでどのように実装したのか共有します。

どんな投稿画面が良いのか？

文字をそのまま表示し投稿するものを実装するのは簡単ですが、それだと味気ないので、使いやすく且つちょっと表現の幅を広げられるUIを作りたいと考えました。

文字の配置

　six word story(本家)では、「他人、友人、親友、恋人、他人」(英語から訳してるので5節になっています。)のような、関係性の時間的な変化を表すようなものや、以前の投稿で紹介した“Wrong number,” says a familiar voice. （「間違い電話です」と、聞き覚えのある声。）などのような、文章としてまとめると良いものなど様々あります。

sixwordmemoirs

海外の6文字物語が投稿できるホームページ

www.sixwordmemoirs.com

既存の海外の投稿ホームページだと、これらすべてを一緒のフォーマットで表示していました。

開発は容易ですが、日本語には、縦書きと横書きがあり、また、その配置によっても感じ方が大きく変わると考えました。そこで、文字レイアウトを変えられるように実装することにしました。

自由に変えられるようにできたらよかったのですが、データベースに全部保存させるというのは、難しいため、レイアウトのひな形を6つ用意しました。

文字レイアウトのひな形(開発中、一部)

このくらいの文字配置テンプレートがあれば、ある程度表現の幅を広くできそうです。

例：互い違い配置で、二人の会話を表すなど

画像に対する投稿：ポラロイド写真風

　六語噺(仮称)には、文字投稿のほかに、毎日更新される画像から連想した物語を投稿できるようにしたいと思っています。仕組みはテスト中なので、毎日更新ではなく、ランダムに画像表示など他の方が良いと感じたら今後変えるかもしれません。

レイアウトをどうするか考えたとき、画像と文字を投稿する、且つ、画像が文字の邪魔にならない。＋出切れば、世界観を崩さない。という条件でアイデアをいくつか出しました。

• 画像の上に文字を載せる
• 画像に枠を設けてそこに文字を配置
• 写真を左に、文字を右に配置する
• ポラロイド写真風にして、その下側に文字を配置
• (等々)

レイアウト案をもとに、画像を配置したりしてテストしてみて、ポラロイド写真風がもっとも綺麗に且つ、文字だけ投稿と併せても邪魔にならないと感じたので、ポラロイド写真風を採用することにしました。

終わりに

投稿のレイアウトはまだまだ改良の余地がありそうですが、ひとまず、今の形で投稿していけるようにしようと思います。

前回 構想編

『売ります。赤ちゃんの靴。未使用』——6語文学を投稿するWebサービスを個人開発したい【構想編】

ヘミングウェイの「6語の回想録」に衝撃を受け、デジタルな投稿が「物理的な本」になるSNSを個人開発します。広告に頼らず、花を贈り合うことで持続可能な運営を目指す循環システムとは？Firebase×Reactで挑む、新しい物語のプラットフォーム構想を公開。

次回：ユーザホーム画面を作る

関連記事は、2025年12月24日に公開予定 (あと2日)