matrix.js
2軸の交点に、思考を構造化する。
4×3、2×2、3×3。
あらゆる次元の思考マトリクスをWeb上に美しく描画する、ゼロ依存のレイアウトエンジン。
なぜ私たちは、
物事を2軸で考えるのか。
世の中にはテーブル（表）ライブラリがあり、チャート（グラフ）ライブラリがあります。しかし、表はデータを淡々と並べるだけであり、グラフは数値を可視化するだけです。
人間やAIが本当に新しいアイデアを生み出したり、戦略を決断したりするとき、私たちはいつも「2つの軸（行と列）が直交する空間」に思考を並べてきました。「緊急度 × 重要度」「顧客セグメント × 提供価値」「難易度 × 効果」。2軸が交わるセルの中にこそ、創造的なひらめきが宿ります。
しかし、いざWebで2軸マトリクスを描こうとすると、原点タイルの位置揃え、スマホでのレスポンシブ崩れ、立体的なカード表現の調整など、毎回地味で膨大な実装コストがかかっていました。
Kamosが長年培ってきた「マトリクス描画の知見」を、外部依存ゼロの単一JSライブラリとして抽出したのが matrix.js です。AIが出力したJSONや手動のデータを渡すだけで、誰でも手軽に洗練された思考マトリクスを立ち上げることができます。
動くマトリクスを体験する
タブを切り替えて、異なる次元のマトリクスやテーマの切り替え、Markdownコピーをお試しください。
matrix.js の8大コア機能
「ただの表」ではない、思考の道具として設計された組版アーキテクチャ。
任意 N × M グリッド
2×2、3×3はもちろん、4×3や5×4など非正方の多次元マトリクスに対応。配列の長さから自動でレイアウトを計算します。
直感的な原点タイル
縦軸（Y）と横軸（X）が直交する左上の「交点」を上品に表示。どちらが縦でどちらが横かが一目で直感理解できます。
立体的なセルカード
平坦なテーブルではなく、思考を保持する「カード」としてセルを構築。タイトル、問い、本文の美しい階層構造。
CSS完全自己完結
外部CSSフレームワークへの依存は不要。軽量なCSSファイル1つとお好みのスタイルで自由にカスタマイズ可能です。
軽量Markdownパーサー
セル内の太字、斜体、コード、箇条書きリストを標準で自動レンダリング。思考のメリハリを自然に表現できます。
破綻なきスクロール設計
スマートフォンやタブレットで見てもセルが潰れません。黄金比の最小セル幅（min-width）と滑らかなタッチスクロール。
LLM / JSON 直結
GeminiやGPTが出力した構造化JSON（xAxis, yAxis, cells）をそのまま流し込むだけで描画可能。AIアプリのビュー層に最適です。
ワンクリックMarkdown出力
画面右上のボタンをクリックするだけで、NotionやGitHub、社内Wikiにそのまま貼れるMarkdownテーブルをクリップボードにコピー。
使い方
既存のHTMLに、シンプルな3ステップで思考マトリクスを導入できます。
ファイルを配置して読み込む
ダウンロードした matrix.css と matrix.js をプロジェクトに配置し、HTMLから読み込みます。
描画用の要素を用意する
HTML内にマトリクスを描画するためのターゲット要素（例: <div id="my-matrix"></div>）を配置します。
データを渡してインスタンス化
縦軸・横軸・セル内容のJSONオブジェクトを渡すだけで、美しい2軸マトリクスが自然に立ち上がります。
<!-- 1. ダウンロードした CSS を <head> 内に配置 -->
<link rel="stylesheet" href="./css/matrix.css">
<!-- 2. ダウンロードした JS を <body> 末尾で読み込む -->
<script src="./js/matrix.js"></script>const matrix = new Matrix('#my-matrix', {
title: 'プロダクト展開戦略 (4 × 3)',
// 横軸（3列）
xAxis: {
label: '提供チャネル',
items: ['Web / アプリ', '店舗 / 対面', 'コミュニティ']
},
// 縦軸（4行）
yAxis: {
label: '顧客セグメント',
items: ['新規層', 'ライトユーザー', 'ロイヤル顧客', '法人 / B2B']
},
// セルデータ（Markdown対応）
cells: [
{
row: 0,
col: 0,
title: 'SEO ＆ LP最適化',
question: '最初の接点をどう作るか？',
content: '**即効性大**\n- 検索流入特化のLP\n- ログイン不要の試用体験'
},
{
row: 0,
col: 1,
title: '週末ポップアップ展示',
question: 'リアルで世界観を届ける',
content: '主要都市での短期間出店による認知獲得と手触り検証'
}
],
theme: 'auto', // 'auto' | 'light' | 'dark'
onCellClick: (cell) => {
console.log('選択されたセル:', cell);
}
});APIリファレンス
| オプション / メソッド | 型 / 引数 | 説明 |
|---|---|---|
| xAxis / yAxis | Object | Array | 軸ラベルと項目配列（{ label, items } または ['A', 'B']） |
| cells | Array<Object> | 各セルの定義（row, col, title, question, content） |
| theme | 'auto' | 'light' | 'dark' | 外観テーマ。autoはOS設定に追従 |
| onCellClick | Function(cell, event) | セルがクリックされた際のコールバック |
| matrix.toMarkdown() | - ➔ String | 現在のマトリクスをMarkdownテキスト表として出力 |
| matrix.copyMarkdown() | - ➔ Promise | Markdown表をクリップボードにコピー（トースト通知付き） |
| matrix.setData(options) | Object | 新しいデータでマトリクスを即座に再描画 |
matrix.js
いつものWebサイトに、思考を深める構造と対話の空間を。