🎨

【個人開発】国際取引法を学ぶ法学部生が、Railsで「自分だけのデジタルアトリエ」を作った話

に公開
Rails
Ruby
個人開発
Tailwind CSS
学生
idea

はじめまして。Yenaと申します。 普段は法学を学んでいる学生です。

「法学部生がなぜプログラミング？」と思われるかもしれませんが、私は昔から「創作をすることが好きな上に」「何かを作る人の思考プロセス」や、創作時間に打ち込み没頭する空気が大好きでした。

完成された作品だけでなく、その手前にある「未完成の断片」や「試行錯誤の跡」（ラフ画や適当なペインティング）こそがアイデアのかけらであるのに捨てるのも忘れてしまうのももったいない。そう思った私は、既存のメモアプリやSNSでは満たせない、クリエイターのための隠れ家のようなWebアプリを、未経験から独学で作ることにしました。

開発期間は約2ヶ月。Ruby on Rails 7 を使い、デザインにも徹底的にこだわった『morphe0（モルフェゼロ）』というアプリの話をさせてください。

作ったもの：morphe0
「完成」だけが、作品じゃない。 morphe0（モルフェゼロ）は、クリエイターの頭の中にある思考の断片（Fragment）を集め、育てるためのデジタルアトリエです。

🏛 morphe0 (Web App) https://morphe0.onrender.com
※PC/スマホのブラウザからすぐに使えます

こだわりの機能たち

  1. Studio Drops（トップ画面） アプリを開くと、世界中のクリエイターの「思考の断片」が並びます。SNSのような「いいね数」などのノイズは排除し、純粋にビジュアルとアイデアを楽しむ空間にしました。

  1. Focus Studio（没頭モード） 私が一番欲しかった機能です。 「余計な情報が入ってくると創作できない」という悩みから、秒針の音と共に作業だけに没頭できる全画面タイマーを作りました。UIは極限までシンプルにしています。

  1. Mailbox & Teammates クリエイター同士の交流も、「即レス」が求められるチャットではなく、「手紙」という形式にしました。 じっくりと言葉を選んで送り合い、心が通じ合ったら「Teammates（仲間）」として深い共有ができるようになります。

技術スタック
プログラミング初心者の私が選んだのは、Ruby on Railsでした。

Framework: Ruby on Rails 7
CSS: Tailwind CSS
Frontend: Hotwire (Turbo / Stimulus)
Database: PostgreSQL
Deploy: Render
PWA: 対応済み

SPA（Reactなど）で作ることも考えましたが、「一人で、素早く、高機能なアプリを作る」にはRails 7 + Hotwireの組み合わせが最強だと感じました。

開発でこだわった「アトリエらしさ」
法学部の勉強（六法全書との睨み合い）の合間を縫って開発する中で、特にこだわったのは「アプリの手触り」です。

  1. 「Railsっぽさ」を消すUI
    Railsでscaffoldなどをそのまま使うと、どうしても「管理画面」のような見た目になってしまいます。 私は「アトリエ」を作りたかったので、Tailwind CSSを使い、徹底的にデフォルトのスタイルを上書きしました。

例えば、入力フォームをクリックした時に出る「青い枠線（フォーカスリング）」。 あれが出ると現実に引き戻されてしまうため、focus:outline-none を駆使して、紙に書いているような自然な入力感を目指すなど。

  1. PWAで「アプリストア風」に見せる
    スマホアプリとして使ってもらうために、PWA（Progressive Web App）に対応させました。 特にAndroidでは、インストール時にリッチな説明画面が出るように manifest.json の screenshots プロパティを作り込んでいます。

最後に：商標トラブルを乗り越えて
実は開発当初、このアプリは『Atelier0（アトリエ・ゼロ）』という名前でした。 しかし、リリース直前に商標検索をしたところ、類似の商標が既に登録されていることが発覚...。（法学部生として、ここは見逃せませんでした）

泣く泣く名前を変更することになりましたが、ギリシャ語で「形・形態」を意味する "morphe" という素敵な言葉に出会い、『morphe0』 という新しい名前が生まれました。0は0から創造するきっかけの倉庫としてのmorphe0の役割を象徴する数字です。結果として、このアプリらしい名前になったなと気に入っています。

ここまで読んでいただき、ありがとうございました！ もしあなたが、「作りかけの作品の置き場に困っている」なら、ぜひmorphe0を覗いてみてください。

プログラミングも、法律の勉強も、そして創作活動も。 すべてのプロセスを楽しむ人と繋がりたいです。

🏛 morphe0 https://morphe0.onrender.com

Discussion