MokuDocs 1.0

はじめに

MokuDocsは、Framer Marketplace向けに作ったドキュメントテンプレートです。CMSで完全に動くドキュメントサイトで、SaaSのチーム、創業者、Framerデザイナーが、何週間もの準備なしに使える整った出発点です。2026年4月11日にFramer Marketplaceで公開しました。

このプロダクトは、構想から構築までMokujiro Studioの社内で完結しています。クライアント案件ではなく、商業テンプレート製品として設計し、開発し、出荷しました。

課題

ドキュメントサイトは、見かけ以上にきちんと作るのが難しいものです。サイドバーナビゲーション、検索、目次、ダークモード、ブックマーク、読了進捗といった構造上の要件だけでも、すぐに積み上がります。多くのチームはその複雑さを外部プラットフォームに任せますが、その分、外部アカウントと維持すべき連携が増え、コンテンツはプロダクトの外に置かれます。

MokuDocsの目標は明快でした。外部依存なしにFramer標準のCMSだけで動き、初日から本物のドキュメントを公開できる一式を備えたテンプレートを作ることです。

もう一つの制約はMarketplace対応でした。FramerのMarketplaceには独自の品質基準があります。提出カテゴリー、ビジュアルプレビュー、機能タグ、そしてテンプレートが何をするもので誰のためのものかを即座に伝える出品説明文です。

アプローチ

アーキテクチャ

設計の中核はCMSスキーマです。MokuDocsはページを平坦に並べるのではなく、カテゴリーを軸にした構造を採っています。各ドキュメント記事はカテゴリーに属し、サイドバーはその関係から描画されます。購入者はFramerのCMSパネルだけで新しいカテゴリーと記事を作れ、コードの変更は不要です。

サイドバーナビゲーションは、CMSデータで駆動するアクティブ状態付きのアコーディオンです。Docs Hubは公開済みの全カテゴリーの構造化された概要を描画し、CMSで管理するフィールドから「New」「Updated」のバッジを表示します。

検索

サイト全体の検索はCmd+Kのモーダルで実装しました。開発者なら即座に分かる標準的なキーボードショートカットです。Algoliaのアカウントも、APIキーも、外部の検索インデックスも不要。検索はCMSのコンテンツを直接照会し、実装全体をFramerのネイティブ環境に収めています。

読む体験

読書を支える三つの機能をネイティブのコンポーネントとして作りました。すべてのドキュメントページの読了進捗バー、見出しから自動生成する目次、そしてブックマークと「続きから読む」の仕組みです。これらは商用のドキュメント製品では当たり前に期待される機能です。ネイティブで作ることで、テンプレートは外部依存がなく、購入者が自分で維持できるものになりました。

ビジュアルデザイン

テンプレートはダークを基本にデザインし、すべてのページでライトとダークを手動で切り替えられます。ビジュアルの言語はミニマルでプロフェッショナルです。高いコントラスト、整ったタイポグラフィ、構造化された余白で構成しています。複数のカテゴリーにわたる18本以上のサンプルドキュメントを同梱し、購入者が現実的なコンテンツの骨組みから始められるようにしました。

提出の戦略

Framer Marketplaceへの提出前には、載せる範囲を意図して絞りました。下書きのカテゴリーはDocs Hubの特集リストから外しています。完成した五つのカテゴリーだけのほうが、挙動の不安定な一つを足すより第一印象が強いからです。説明のなかったPagesのCMSコレクションも見直し、出品前に整理しました。

提出前に、テンプレートをFramerのMarketplace基準の全項目に照らして監査しました。アクセシビリティ要件（ARIAラベル、画像の代替テキスト、タブインデックス、セマンティックなHTMLタグ、色のコントラスト）も含みます。すべての項目を出品前に解決しました。

成果

MokuDocsは2026年4月11日、Documentation、SaaS、Landing Pageの3カテゴリーでFramer Marketplaceに公開されました。

テンプレートは完成した状態で出荷しました。サイドバーナビゲーション、Cmd+K検索、ダークとライトのモード、ブックマーク、読了進捗、目次、パンくず、前後のナビゲーション、FAQページ、独自の404、18本以上のサンプルドキュメント。すべてFramer標準のCMSで動きます。

Marketplaceでの公開は、実際のサイトが動く様子を見せるInstagramリールのキャンペーンで支えました。既存フォロワーのエンゲージメントより、発見タブでのリーチと新しい読者の獲得を優先しています。