MokuDocs 2.0
読む体験を軸に、Framer標準のCMSだけでドキュメントテンプレートを作り直した
項目 | 内容 |
|---|---|
プロダクト | MokuDocs 2.0 |
種類 | プロダクトデザイン、ドキュメントテンプレート |
対応範囲 | プロダクトデザイン、CMS設計、コンポーネント開発、アクセシビリティ |
プラットフォーム | Framer |
Marketplace | |
期間 | 2026年7月 |
スタジオ | Mokujiro Studio |
所在地 | オーストラリア、メルボルン |
デザイナー／エンジニア | 田井憲橘 |
見えないものを、かたちに。優れたドキュメントのデザインは意識されません。読者に見えるのは、答えだけです。
課題
MokuDocs 1.0は、サイドバーナビゲーション、検索、目次、ブックマーク、読了進捗という一通りの機能を備えてFramer Marketplaceに公開しました。動作は安定し、販売も順調でした。使い続けるうちに、ドキュメントテンプレートが本当に果たすべき役割が見えてきました。
ドキュメントを書くチームにとっては、開発と並行して維持しやすいこと。ドキュメントと変更履歴は同じプロジェクトにあり、リリースの記録とドキュメントの更新が一つの流れで済むこと。
読者にとっては、集中を守ること。読むという行為はそのページの上、一つのインターフェースの中で完結し、注意をそらすものがないこと。
作り直しはそこから始めました。機能の数ではなく読む体験がプロダクトだとすれば、ドキュメントテンプレートはどのような姿になるのか。ドキュメントにたどり着く人は、すでに作業の途中です。答えを一つ得たら、仕事に戻りたいと考えています。
判断1：すべてをFramer標準のCMSに
四つのCMSコレクションがサイト全体を動かします。Categories、Docs、Changelog、Glossaryです。Docsの項目はタイトル、説明、カテゴリーへの参照、書式付きテキストの本文、更新日を持ちます。Changelogの項目はバージョン、タイトル、日付、書式付きテキストの本文を持ち、公開ページではタグで絞り込めます。
外部サービスも、コンテンツをFramerに橋渡しするプラグインもありません。すべてのフィールドはFramer自身のコレクションの中にあるため、購入者はサイトの他の部分と同じ方法でドキュメントを編集できます。CMSパネルを開き、フィールドを更新し、公開する。管理すべき二つ目のログインも、気づかないうちに失敗しうる同期の手順もありません。
技術的な話に聞こえますが、これは所有し続ける体験そのものを左右します。外部ツールに依存するドキュメントサイトは、書く仕事の上に維持する仕事を重ね、予告なく壊れうる連携を一つ増やします。すべてをFramer標準に保てば、コンテンツはサイトと同じ場所に、購入者がサイトを持ち続ける限り残ります。
判断2：ページではなく、読むことを設計する
デザインの労力の大半は、ここに注ぎました。
インライン用語集。ドキュメントの中で言及された用語集の語は、クリックできるリンクになります。クリックすると定義を載せたサイドパネルが開くため、読者はページを離れることも、別の場所に定義を探しに行ってスクロール位置を見失うこともありません。
目次。レールは細い線の列で、読者が必要とするまでレイアウト上の幅を取りません。ホバーで展開し、スクロールに合わせて現在の節を追うため、長い文書のどこにいるのかが常に分かります。
ブックマーク。ドキュメントを保存すると、その状態は訪問をまたいで保持されます。一度見つけたページを、もう一度探さずに済みます。
ハイライト保存。本文の任意の箇所を選択し、タイトルとメモを付けて保存できます。ハイライトはリロードやページ移動をまたいで保持され、専用パネルに一覧表示されます。ハイライトへのジャンプ、編集、取り消しにも対応しています。ドキュメントサイトをパンフレットではなく、作業中の文書として扱うための機能です。
四つの機能が示していることは同じです。ドキュメントの読者は眺めているのではなく、作業の途中で、別のウィンドウの仕事と照らし合わせて何かを確かめています。どの機能も、読者の居場所を守るためにあります。読者が意識しなくなったとき、うまく働いている証拠です。
判断3：自分で自分を維持するテーマ
ライトとダークのテーマは、サイト自身が公開しているFramerの色定義から実行時に生成します。別のパネルに置かれ、いずれライトとずれていくだけのダーク用パレットは持ちません。
Color Styleを一つ変えれば、両方のテーマが追従します。
多くのテーマ機構は、購入者にすべての色の判断をライト用とダーク用の二通りで維持させ、ブランドカラーが変わったときに両方を更新することを覚えておいてもらう前提で作られています。その習慣はめったに続かず、ライトモードだけが手入れされ、ダークモードは静かに古びていきます。
この抑制は意図的なものです。本当の機能は切り替えボタンではなく、購入者が二度とやらずに済む維持作業のほうです。色を一つ変えて、先に進む。ライトとダークを、二度解くべき二つの問題として扱いません。
成果
4ページ · 4つのCMSコレクション · 9つのコードコンポーネント · WCAG AAのコントラスト · スマートフォン専用レイアウト。
アクセシビリティは最後の検査ではなく、デザインブリーフの一部でした。header、nav、mainのセマンティックなランドマーク、完全なキーボード操作、コンテンツへスキップするリンク、そして全ページで確認した色のコントラストを備えています。
この構築は、出発点の問いに答えを出しました。ドキュメントテンプレートが完成していると感じられるかどうかは、ページ数では決まりません。読者の居場所と、すでに見つけたものを守れるかどうかで決まります。四つのコレクション、九つのコードコンポーネント、そして「インターフェースが読者に二度とやり直させてはならないこと」についての一連の判断です。