Groselia

つくることはボトルネックではなくなった。見つけてもらうことが、新しいボトルネックになった。

AIはソフトウェアをつくるコストを一気に下げました。エンジニアリングの経験がない創業者でも、いまは週末でプロダクトをリリースできます。そしてそれは、ほかの誰もが同じです。安くならなかったのは、誰かに気づいてもらうこと。ディストリビューションはタスクではなく、終わりのない運用です。毎日投稿し、それぞれ違う形式を求める8つのネットワークに対応し、すべてのコメントに返信し、アプリごとにバラバラに報告される数字を読み解く。

スタートアップはその代償を、3つのうちどれかで払います。まだ雇う余裕のないチームを雇うか、一部分しか解決しないツールを十数個つなぎ合わせるか、何も投稿せずに成長で払うか。Groseliaは、4つ目の選択肢になるために存在しています。

Groseliaは、いまの姿にたどり着くまでに4回形を変えました。そのたびに、うまくいったものを残し、それ以外を手放してきました。

1. 

   2025年末〜2026年2月

   Argibee

   AIでブランドデザインをするプラットフォーム。2025年末にプロトタイプとして始まり、2026年2月に正式な会社になりました。市場は見つかりませんでしたが、そのブランドキットのエンジンは、その後のすべての背骨になりました。

2. 

   2026年4月

   モーション動画

   Groseliaは、After EffectsのテンプレートでつくるApple風のローンチ動画から始まりました。パイプライン全体を手作業で検証し、そして求める品質にはスケールできないとわかりました。

3. 

   2026年6月

   Link Vectorからプレシード

   Link School of BusinessのStartup Schoolに参加しました。創業者のための100日間のプログラムで、リアリティ番組として撮影されています(シーズンを見る ↗)。最後はデモデイで、私がステージでGroseliaをピッチし、そしてプレシードを調達しました。私の母校Link School of BusinessのアクセラレーターLink Vectorから、R$100kの出資です。

   

4. 2026年8月

   マーケティング版のLovable

   フォームの代わりにひとつの会話。キャンペーンを説明すれば、Groseliaが計画し、書き、公開します。ボットの集まりではなく、ツールを持つひとつのチャットエージェント。

5. 2026年9月

   ソーシャルメディアマネージャー

   お客さんはAIにコンテンツをつくってほしいわけではありませんでした。自分の写真をうまく投稿して、コメントに返信してほしかったのです。私たちは生成をやめ、チャンネルの運用を深く掘り下げました。

6. 

   現在

   サービス・アズ・ア・ソフトウェア

   売るのはツールではなく仕事です。私たちのチームがプラットフォームで各お客さんのソーシャルメディアを運用していて、そのおかげで、かつては代理店が必要だった仕事をひとりで回せます。

つくる過程を公開

私たちは最初から、つくる過程を公開してきました。まだArgibeeだったころからYouTubeで歩みを共有していて、Argibeeのウェイトリスト公開から、Groseliaを初めて見せた動画まであります。その先の物語は、動画ごとにチャンネルで見られます ↗.

Groseliaのブランドは大胆にしたいと思っていました。ウェブサイトでも、アプリでも、ソーシャルメディアのどの投稿でも、思わず足を止めて見てしまうようなもの。どこで出会っても、驚かせて、少し憧れてもらって、いま見たもののおかげで私たちに頼みたくなる。何よりも、私たちが属するエコシステムであり、最初のお客さんでもあるテック系スタートアップの目に、最高にかっこよく映る必要がありました。

ブランドはすべてCodexの中のFigmaプラグインを使ってデザインしました。ロゴ、タイポグラフィとシンボルを正しい比率で組み合わせる方法、イメージ、SVGアイコンライブラリ、文字スタイル、整理されたカラーパレット。どの判断も寸法つきで1枚のボードにまとめ、比べたり議論したりできるようにしました。

シンボル

シンボルは最初にあり、そのまま残りました。中心のまわりを回る3枚のやわらかな花びら。会社のいちばん最初のバージョンから受け継いだもので、新しいロゴはその上に描き直すのではなく、そのまわりに組み立てました。形状はコピーして拡大縮小しただけで、一度も描き直していません。

ワードマーク

ワードマークはTT Commons Pro Boldの小文字で、どこでも同じように表示されるようアウトライン化しています。標準の字間ではシンボルの隣でゆるく見えたので、160pxで各文字を左に6.4ユニットずつ詰め、−4%のトラッキングにしました。小さな変化に聞こえますが、単語の幅が564から520ユニットになり、ひとつの形として読めるようになりました。

Hのグリッド

すべてはH、つまりワードマークの見た目の高さで測り、H/10のグリッドに乗せています。これでロゴを拡大縮小するときに、誰かが目分量で合わせ直す必要がなくなります。

縦組みのロゴでは、シンボルのサイズ3種(1.50H、1.75H、2.00H)と間隔2種(0.15H、0.25H)を組み合わせて6案を描き、B: 1.75Hのシンボルを、文字の0.15H上にを選びました。横組みでは0.20Hから0.35Hまでの間隔を比べ、1.10Hのシンボルと0.35Hの間隔に決めました。

横組み

シンボル 1.10H · 間隔 0.35H

縦組み

シンボル 1.75H · 間隔 0.15H

シンボル

元の比率、0.93 : 1

Colour

The palette is fifteen colours, loud on purpose. But the logo only ever comes in four treatments: blue symbol with black text, blue with white, all black and all white. The other colours are grounds, never the symbol.

To prove that, I put the symbol and both lockups on twelve backgrounds, 24 studies each, and kept the ones where its silhouette survives. On blue grounds the symbol goes monochrome. Click a colour to copy it.

タイポグラフィ

TT Commons Proはすべてをこなします。LightからExtraBoldまでの6ウェイト、12pxから96pxまでの11段階のスケール、そして本物のイタリック。ファイル内の688個のテキストレイヤーをすべてこの書体に移行したので、ブランドブックもアプリもウェブサイトも、いまはひとつの声で話しています。

アプリアイコン

アプリアイコンは、ブランドが唯一3Dになる場所です。磁器のようなシンボルを重ね、上から光を当てて、少しだけ艶を出しています。のちのリニューアルで、タイルの中で余白が生まれるよう中のシンボルを10%小さくしました。ワードマークと組み合わせた専用のロックアップもあり、タイルは1.5Hです。

3Dオブジェクトの世界

ロゴのまわりには、3Dオブジェクトたちが暮らしています。ぎょろ目のついたハート、吹き出し、ハッシュタグ、キラキラ。ウェブサイトや投稿でブランドの声になる存在で、じっとしていることはありません。ふわふわ浮かび、サイトではカーソルに反応します。ここにいる子たちも同じです。押してみたり、ひとつ引っぱって離してみたりしてください。

Neo ドゥードゥル

フラットなものにはすべて、私たちのアイコンセットNeoを使います。太い黒の輪郭、パレットからの塗り、白いハイライトをひとつ。ウェブサイトでは、どれも白いチップに入ったシンプルな線のアイコンから始まり、カーソルを合わせると落書きに変わります。パーツがひとつずつ現れて、円がぽんと出て、棒が落ちてきて、ハイライトが描かれる。ウェブサイトの落書きとアニメーションをそのまま持ってきました。ひとつ触ってみてください。

Groseliaでは、すべてをひとつのチャットに打ち込むだけで済みます。何をいつ出すかを書けば、予約し、公開し、コメントに返信し、何がうまくいったかを教えてくれます。仕事は、操作すべき十数個の画面ではなく、オーナーが承認するひとつのプランとして届きます。

主な機能

• リンクひとつでブランドキット

  ウェブサイトを貼りつけて、アカウントを連携するだけ。Groseliaがサイトを読み取り、過去の投稿を読んで、ロゴ、カラー、フォント、トーン、オーディエンスを自動で埋めます。

• ひとつの会話

  41個のツールを持つAIエージェントが、メディアにキャプションをつけ、あなた自身のエンゲージメントデータから時間を選び、指標を読み、返信の下書きを書いて、すべてをひとつのプランにまとめます。

• 8つのネットワークのためのカレンダー

  Instagram、LinkedIn、TikTok、YouTube、X、Facebook、Threads、Reddit。それぞれのネイティブな形式で。過去の投稿も取り込むので、カレンダーが空になることはありません。

• すべてのコメントに返信

  すべてのネットワークのコメントとDMをひとつの受信箱に。返信はブランドのトーンで下書きされ、デリケートなものは人が対応するまで保留されます。

• わかりやすい言葉のインサイト

  すべてのアカウントのリーチ、再生数、エンゲージメント。各プラットフォームが何を報告し、何を報告しないかに正直で、「何がうまくいってる?」にも答えます。

• サイクルと承認

  仕事はサイクルで回ります。それぞれミーティングで始まり、AIが数字から書くレポートで締めくくられ、どの投稿もお客さんの承認を待つことができます。

AIエージェントと一緒につくる

GroseliaはAIエージェントをエンジニアリングチームにしてつくりました。CodexとClaude Codeがコードを書き、変更はそれぞれ専用のブランチで。私はデザインし、すべてのプルリクエストをレビューし、何をリリースするかを決めました。

プロンプトのほとんどは、タイプせずにWispr Flowで話して入力しました。いいプロンプトは長くて細かい指示書です。話せば、考えるのと同じ速さでそれを渡せました。

• 

  Codex

  コーディングエージェント

• 

  Claude Code

  コーディングエージェント

• 

  Wispr Flow

  音声入力

ウェブサイトは、ブランドがいちばん声を張る場所です。Next.jsでデザインして開発しました。17言語に対応していて、登録するときには訪問者の言語をそのままアプリに引き継ぎます。

遊べるヒーロー

ページを読み込むあいだにロゴが回り込み、そしてヒーロー。ふわふわ浮かび、マウスに合わせて傾き、カーソルに押しのけられる3Dの小道具たち。スクロールシーンの最後は「Made for you」で終わります。

groselia.com

本物のアプリを再現

「Inside your Groselia」では、アプリ自身の画面をコードで再現し、デモブランドを使ってプラットフォームをありのままに見せています。

groselia.com

ブログ

ソーシャルメディア運用についてのメモ。記事はシンプルなMDXファイルで、言語ごとに1つ、CMSはなし。それぞれに専用のフィードと構造化データがあるので、検索エンジンもAIアシスタントも正しく読めます。

groselia.com

見込み客を見極めるフォーム

どの「Book a call」も、カレンダーの前に短いフォームを開きます。あなたは誰か、どこに投稿しているか、何が必要か、予算はいくらか。各ステップは入力するたびにデータベースに保存されるので、途中までの回答も見られます。最後まで終わると、Slackでチームに通知が届きます。

groselia.com

いつでもレスポンシブ

どのページも、ただ縮めて収めるのではなく、スマホのためにもデザインしています。ホバーがない環境では、セクションは画面の中央に来たときに目を覚まします。

アーキテクチャ

プラットフォームはAIを相棒にして自分でつくりました。アプリはReactとVite、ランディングはNext.js、どちらもひとつのSupabaseプロジェクトの上にあります。行レベルセキュリティつきのPostgres、認証、リアルタイム、ストレージ、そして47個のEdge Functions。時間のかかる処理や定期実行はTrigger.devで動き、ソーシャルネットワークはひとつの投稿APIを通り、Stripeがプラン、カード、ブラジルのボレートを扱います。

MCPサーバーとCodexプラグインもあるので、AIエージェントの中からGroseliaを使えます。同じブランド、投稿、下書きを、ツールとして。

使われる場所

WebアプリウェブサイトMCPサーバー

↓

コア

Supabase

認証PostgresRealtimeストレージEdge Functions

↓

その裏側

最先端のLLMTrigger.dev投稿APIStripePostHog

アプリ、ウェブサイト、MCPサーバーはVercelでホストしています。

ボックスにカーソルを合わせるかタップすると、役割とつながる先が表示されます。

投稿がたどる道のり

パーツがどうかみ合うかを知るいちばんの方法は、ひとつの投稿を追いかけること。チャットの一文から、インサイトに並ぶ数字まで。ステップをクリックして進めるか、そのまま再生してください。

エージェント

エージェントは、Anthropic、OpenAIなどのプロバイダーが提供する市場最高のモデルで動いていて、ツールループを持つひとつのストリーミングEdge Functionとして実装しています。モデルには独自のツールが41個に加えて、ウェブ検索とウェブ取得があり、1ターンで最大8ホップ。難しかったのはモデルではなく、エージェントが「いま何が本当か」を常に知っているようにすることでした。

そこで毎ターン、モデルがメッセージを見る前に、関数がデータベースからコンテキストを組み直します。オーナーのタイムゾーンでの日付と時刻、ブランドのメモリードキュメント、ライブカレンダー、進行中のプラン、アップロードされたドキュメント、古いメッセージの要約。プロンプトの安定した部分は1時間キャッシュしますが、この部分は決してキャッシュしないので、古くなることがありません。

残りは2つのルールで形づくられました。公開されるものや取り消せないものは、そのまま出さず、必ずオーナーが承認するプランに入れること。そして、投稿はそのターンにツールが作成したときだけ存在すること。これで、エージェントがやっていない作業を説明してしまう日々が終わりました。エージェントはひとつのモデルに縛られてもいません。小さくて安いモデルが十分よくなったときに、会話あたりのコストを下げるため、チャットをそちらに移しました。

毎ターン組み直すコンテキスト

指示とツール1時間キャッシュ

日付と時刻オーナーのタイムゾーン

メモリードキュメント好み、やること・やらないこと

ライブカレンダーすべての投稿とそのステータス

進行中のプラン提案済みと承認済み

これまでの流れ随時更新される要約

→LLMトップモデル · 最大8ホップ→

ツール呼び出し

✓get_posting_times

✓get_insights

✓propose_plan

承認待ちのプラン

収穫ウィーク: 投稿3件、返信4件

// Volatile block: time + memory + live calendar + active plans + rolling summary.
// Rebuilt each turn (never cached) so the agent always sees current state.
const volatileSystem = () => {
  const parts = [
    nowBlock,
    renderMemories(memories),
    renderCalendar(calendar, todayISO),
    renderPlans(plans),
  ]
  if (documents.length) parts.push(renderDocuments(documents))
  if (rollingSummary) parts.push(`STORY SO FAR (summary of earlier messages in THIS conversation):\n${rollingSummary}`)
  // … then a line for each of the brand's other conversations
  return parts.join('\n\n')
}

データモデル

テーブルはおよそ55個で、いくつかのはっきりしたグループに分かれています。ワークスペースにはメンバーとブランドがあり、それ以外はすべてブランドにぶら下がるので、行レベルセキュリティはどこでもひとつの問いに答えればいい。この人はこのブランドのメンバーか?

信頼性とセキュリティ

Groseliaは本物のアカウントに投稿します。だから痛い失敗は、投稿が2回出てしまうことか、気づかないうちに投稿が出ないこと。エンジニアリングのほとんどはそこに注いでいます。

しばらくのあいだ、ローカルのアプリと本番のアプリがひとつの本番データベースを共有していて、デプロイより先に走ったマイグレーションが、本番のBrand Kitsページを空にしてしまったことがあります。それ以来、バックエンドの作業はまずSupabaseのブランチで行い、それを必要とするコードと一緒に本番へマージしています。

品質とワークフロー

140個のテストファイルにわたる約1,000件のテストケースが、アプリ、MCPサーバー、Edge Functionsをカバーしています。一度壊れたことがあるから存在するチェックもあります。17言語のどれかでキーが欠けるとビルドを落とすパリティテストや、合成データで動いて最後にロールバックするMCPのデータベーステストなどです。

エージェントには専用の評価もあります。ブランドのパフォーマンスについて決まった質問を、毎回新しい会話で本番のエージェントに投げ、正しい期間でインサイトを読んだか、答えにインサイトのページと同じ数字が入っているかを確認します。

AIエージェントをチームのように扱うことで、ひとりで520件以上のプルリクエストをリリースしました。変更はそれぞれ専用のgit worktreeの中の専用ブランチで行うので、Claude CodeとCodexはお互いの邪魔をせずに複数の作業を同時に進められます。それぞれがテストと型チェックを走らせ、小さなプルリクエストを開き、私が読むまでは何もマージされません。

どれもUIのバグに見えて、実はもっと深いところに原因がありました。ストリームの形、タイムスタンプ、ネットワークが実際に報告するもの、そして時計。

export function sameInstant(a: string | null | undefined, b: string | null | undefined): boolean {
  if (a == null && b == null) return true;
  if (a == null || b == null) return false;
  if (a === b) return true;
  const ta = Date.parse(a);
  const tb = Date.parse(b);
  return Number.isFinite(ta) && Number.isFinite(tb) && ta === tb;
}