moimemoime

Mobile-first link-in-bio — “One link, every you.” Multiple pages per creator, rich blocks, motion, and editing on the page itself.モバイル向けリンクまとめ — 「One link, every you.」クリエイターごとに複数ページ、リッチブロック、モーション、ページ上での編集。

Open moime.appmoime.app を開く

Challenge課題

Link-in-bio tools flatten every creator into the same layout. moime needed distinct editorial templates and motion without forking the whole app for each look — while staying fast on phones and safe to ship.リンクまとめはみんな同じレイアウトに寄せがち。moime は見た目ごとにアプリを分岐させず、編集的なテンプレートとモーションを載せる必要があり、スマホで速く、出しても安全であることも要った。

Solution解決

One public renderer (PublicPageView + BlockView) with templates as values only — Voice, Frame, Motion — plus generated palettes checked for contrast in CI, a card-and-slot block model, and a Studio editor that edits one block at a time without hijacking the keyboard.公開は PublicPageView + BlockView の1レンダラー。テンプレートは Voice / Frame / Motion の値だけ。CI でコントラストを通した配色生成、カード＋スロットのブロック、キーボードを勝手に出さない Studio 編集。

Impactインパクト

I shipped moime — one renderer, value-only templates, and in-page Studio editing.moime を出した — 1 レンダラー、値だけのテンプレ、Studio 編集。

What I handled担当フェーズ

End-to-end一気通貫

Researchリサーチ
Business / Strategyビジネス／戦略
Conceptコンセプト
UX / UIUX／UI
Design Systemデザインシステム
Prototypeプロトタイプ
Build実装
Launch / Growthローンチ／グロース

Overview概要

moime is a mobile-first link-in-bio: creators keep separate pages for dance, film, interiors, affiliate work, and more — with images, video, files, embeds, promo codes, and countdowns, edited in place on the page. Tagline: One link, every you. moime はモバイル向けリンクまとめ。用途別に複数ページ、リッチブロック、ページ上編集。キャッチは「One link, every you.」

What makes it impressive印象的な点

One renderer, many editorial looks — templates change Voice, Frame, and Motion values only, not the DOM. Generated palettes must pass contrast checks (2,000 seeds × all templates in CI). 1レンダラーで多数の編集ルック。テンプレは値だけで DOM は共通。生成配色は CI でコントラスト検査。

templatesテンプレート

~78

color variants (approx.)配色（概算）

merged PRsマージ PR

245

unit tests (third-moime)ユニットテスト

Travertine template on a phone, with a sample ceramicist's page — **Travertine**The calm one: travertine stone, a high-contrast serif on the centre line, arched photos.静かで美しい一枚。トラバーチンの石、中央のセリフ、アーチ型の写真。

Arc template on a phone, with a sample ceramicist's page — **Arc**The loud one: a full-bleed colour gradient and a heavy headline.目立つ一枚。全面のグラデーションと太い見出し。

Seraphine template on a phone, with a sample ceramicist's page — **Seraphine**Dark and editorial: a large display serif on black.黒地に大きなセリフ。雑誌のような一枚。

Oak template on a phone, with a sample ceramicist's page — **Oak**Warm wood behind the page, with framed cards.木目の背景と額装のようなカード。

Riso template on a phone, with a sample ceramicist's page — **Riso**Print-inspired: an oversized, offset two-colour headline.印刷風。大きくずらした二色の見出し。

Travertine · Nero template on a phone, with a sample ceramicist's page — **Travertine · Nero**Travertine in its dark colourway.Travertine のダーク配色。

The editor, on a phoneスマホで編集する

Edit one block at a time, add photos and cards, and try a template on your own page before you switch. Screen recordings of the real editor, sized as an iPhone 15 Pro. ブロックは一つずつ編集。写真やカードを足し、切り替える前に自分のページでテンプレートを試せる。実際のエディタを iPhone 15 Pro サイズで画面収録。

Adding a block in the moime editor — Add a blockブロックを追加

Adding photos and a card in the moime editor — Photos and a card写真とカード

Trying templates on a page in the moime editor — Try a template on your page自分のページでテンプレートを試す

What Takao didTakao の役割

Founder / Product Lead at creativity is everywhere — design and direction across product, brand, templates, editor, CI, and privacy. Implementation through AI coding agents (Claude Code, Cursor cloud agents, Grok Bot). 創業者／プロダクトリード（creativity is everywhere）— プロダクト、ブランド、テンプレ、エディタ、CI、プライバシーのディレクション。実装は AI コーディングエージェント。

Theming architecture Brand system v1.0 Cards + slots Events MVP (tickets) Fail-closed auth E2E without external services

Struggles & how they were solved苦労と解決

Rebuildthird-moime on Firebase → moime4 on Next.js 16, Neon, R2, Vercel.

CI / E2EPGlite + fakes; template × width × theme matrix with overflow + axe.

Deploy safetyMigrations once per deploy; failure keeps the previous version live.

ConcurrencyAsset save/delete races blocked with advisory locks.

HostingDNS off Firebase; Cloudflare Workers migration in progress (not shipped).

PrivacyLikes use HMAC visitor IDs; video loads after tap; Clarity removed.

Design systemデザインシステム

Brand v1.0 and in-repo cie-ds tokens — colour, type, components, logo rules, motion. The scrolling reference is embedded near the top of this page (no Storybook). ブランド v1.0 と cie-ds トークン。スクロール型の参照ページはこの事例の上部に埋め込んであります（Storybook なし）。

Stackスタック

Next.js 16, React 19, TypeScript, Tailwind v4, Neon + Drizzle, Auth.js, R2, Resend, Playwright + axe, Vercel, cie-ds. Next.js 16、React 19、TypeScript、Tailwind v4、Neon、Auth.js、R2、Playwright、Vercel、cie-ds。