birkly.ioは、人とAIの両方のためにつくられたCMS「Birkly」の公式サイトです。7つの言語で、事業者、マーケター、開発者、プロダクトをつくる人、そしてAIエージェントに、Birklyがそれぞれに何をもたらすのかを順に案内します。見た目はシンプルですが、その裏にはコミュニティのSNSや寄付からロードマップの投票、自動化まで、互いにつながった機能がそろっていて、すべてBirkly自身の上で動いています。
- クライアント
- Birkly
- サービス
- デジタルデザインウェブ開発Birkly & プラグイン
- 使用技術
- Birkly
- ウェブサイト
- サイトを見る ↗
出発点
ひとつの製品、まったく異なるふたりの読者
Birklyは、ふたつのタイプの読者に伝わらなければなりません。ひとりは事業を営む人で、誰かに電話することなく、火曜の午後に更新できるウェブサイトを求めています。もうひとりは開発者、あるいは増えつつあるAIエージェントで、コンテンツがどう保存され、表示され、拡張されるのかを正確に知りたがっています。
前者だけに向けた製品サイトは、後者には曖昧に聞こえます。後者だけに向ければ、前者は最初の段落で離れていきます。birkly.ioの課題は、その両方をつなぎとめ、しかも裏付けのない主張をひとつもしないことでした。
文章
まず平易な言葉で、詳細は必要に応じて
サイトの文章は外側から内側へと書きました。どのページも、まずBirklyがあなたのために何をするのかを普通の言葉で伝え、その後でようやくコレクション、エントリー、テンプレートといった仕組みを示します。専門用語は役に立つときにだけ使い、初めて出てきたところで必ず説明します。
あえて載せなかったものもあります。インストール数、製品を使ったことのない企業のロゴ、自分たちで書いた推薦文はありません。Birklyはアルファ版で、サイトもそのことをはっきり伝えています。先行アクセスは段階的に開かれ、ドキュメントはプレビュー版で、ソフトウェアはリリース時に無料のオープンソースになります。同じルールは機械にも当てはまります。Agent GuideはBirklyの主張をAI検索やアシスタント向けの構造化データとして公開しています。どれも確認済みで日付が入っており、それ以上の機能をつくり上げないよう明記されています。

デザイン
紙、インク、ミント、そして白樺
birkly.ioは、ベースの色をCMS自体から受け継いでいます。オフホワイトの紙、インクのように濃い文字、ミントのアクセント。だから製品とそのウェブサイトは、ひとつの家族のように感じられます。見出しはSource Serif 4、本文はInstrument Sans。その土台の上に、管理画面では決して使わないような、より幅広いマーケティング向けのビジュアルや演出を重ねています。
いちばんの特徴は、サイト全体の背景を流れるラインアニメーションです。有機的に動き、birk(デンマーク語で白樺)という名前の背後にある自然の物語を伝え、自然とデジタルのバランスをとるデザインの基調をつくっています。デジタルの側面は、セクションの見出しとして使われる本物のBirklyテンプレート構文の断片に表れています。たとえば from 'birkly' get 'the point' や for each entry in 'hub' ordered by newest です。そしてHubでは、プラグインごとに色と小さな白樺の森があります。

製品の見せ方
モックアップではなく、本物の画面を
サイトがBirklyを見せる場面では、いつも本物を見せています。トップページでは、コンテンツモデルを3つのステップ(形を決める、中身を入れる、ページに取り込む)で説明し、それぞれに稼働中の管理画面のスクリーンショットを添えています。スキーマエディタ、エントリーのフォーム、そして実際に動くテンプレートです。続く例も実際の構成です。ポートフォリオ、ブログ、ドキュメント、オンラインショップ、イベントサイト、ソーシャルフィード。どれも同じコレクション、エントリー、フィールドからつくられています。
そのぶん見た目の完璧さは少し犠牲になります。本物の画面には本物の例外があるからです。それでも、誰かがBirklyをインストールして、約束どおりのものを見つけた瞬間に、その価値は返ってきます。

構成
初めての訪問から、初めてのインストールまで
サイトは、人々が実際に抱く疑問をおおよそその順番どおりに並べた、ひとつのユーザーストーリーとして訪問者を案内します。
- それは何? トップページでBirklyが何かを伝え、読む人のタイプごとに何ができるかを示します。事業者、マーケター、開発者、プロダクトをつくる人、そしてAIエージェント。全員が同じインスタンスを開きます。
- どう動く? 製品ページで、コンテンツモデル、テンプレート、権限、AI、プラグインを説明します。
- 信頼できる? ドキュメントは午後のうちに読めるように書かれ、初心者向けと上級者向けの道が分かれています。1.0までのロードマップは公開され、常に更新されています。
- 一緒につくれる? Clubのメンバーはロードマップに投票でき、次に何をつくるかにコミュニティが本当に関われます。
- どう始める? Hub、Club、そして段階的に開かれる先行アクセスへと、わかりやすく案内します。
- どう応援できる? スポンサーページとClubから、独立したCMSを一度きりでも毎月でも支援できます。
どのページも最後に次の疑問へと誘導するので、メニューの中で迷うことはありません。
Birklyで構築
Birklyのすべての機能を、実際に
birkly.ioはBirklyを紹介するだけでなく、Birklyで動き、システムのあらゆる部分を組み合わせて使っています。
- ページとコンテンツは、サイトが紹介しているのと同じ管理画面で、7つの言語で編集されています。
- Clubは、User Managementプラグインでつくられた、Birklyコミュニティのための実際に動くSNSです。メンバーは投稿し、互いにフォローし、お知らせを共有し、ロードマップに投票します。
- 寄付はCommerceプラグインで動き、一回きりの寄付と毎月のサブスクリプションを選べます。寄付は支援者のClubアカウントにひも付き、サポーターバッジが付与され、専用の寄付者ウォールに表示されます。
- 自動化がフォームの送信に返信し、ウェイトリストの登録者をグループに振り分けます。誰かが登録すると、ワークフローがグループを設定し、確認メールを送ります。人の手は一切かかりません。
- Agent GuideとWebMCPが、AI検索やアシスタントにサイトを説明し、ブラウザのエージェントにいくつかの安全な操作を提供します。
サイトはシンプルに見えますが、各部分はつながっています。寄付はメンバーのプロフィールに表れ、メンバーは投稿して投票し、その投票が次に何をつくるかを決めます。つまりbirkly.ioは、製品にとって最初の、そして最も厳しいテストであり、その柔軟さを何よりはっきり示すものです。運用の中で使いにくいと感じたことは、サイト側の回避策ではなく、Birkly自体の改善になりました。

成果
birkly.ioは落ち着いた製品サイトに見えますが、それこそが狙いです。表面の下では、SNS、寄付、寄付者ウォール、ロードマップの投票、自動化が連携して動いていて、どれもBirklyのユーザーなら誰でも使えるのと同じコレクション、エントリー、プラグインでつくられています。載っている主張はすべて確かめることができ、サイトの改善はいつも製品の改善から始まります。Birklyの柔軟さを、もっともはっきり示すサイトです。


