Products  /  Case Study

Product Development — Case Study / Experience Translation

Black Mirror Board
思考を映す、黒い鏡。

Individual Development — 木下スタジオ / 木下貴博(滋賀・琵琶湖)

— TYPE

無限キャンバス · 思考ツール

— PLATFORM

Web App + Chrome Extension

— STATUS

Live — 2025〜

BLACK MIRROR BOARD — NOTE 体験翻訳の本質は ズレを発見すること にある。 THOUGHT A 届けたい体験 ≠ 届いている体験 — INSIGHT 黒い鏡は 自分の思考を 映す装置だ pencil sticky T text BLACK MIRROR BROWSER Chrome Extension [ Black Mirror Board ] Embedded in Browser Side Panel

— Origin / このプロダクトの問い

このプロダクトは
「なぜ、思考ツールはユーザーに合わせてくれないのか?」
という問いから始まりました。

ツールが多いのではなく、ツールがユーザーの形に合わせてくれるものが存在しなかった。

01 — Problem

「ツールを使っている」だけで、
思考の場になっていない。

Figmaはチームのデザインツールだ。Notionは情報管理ツールだ。メモアプリは線形に記録するものだ。どれもすぐれたツールだが、「そのツールの流儀で使う」ことが前提になっている——ユーザーがツールに合わせるのが当然とされていた。

既存のキャンバスツールは体験がひとつしかない。テーマも、構造も、見た目も固定されている。思考のスタイルがちがっても、ツールは変わらない。デザイナーにとっても、開発者にとっても、はじめて触る人にとっても、同じ顔しか見せない。

ツールは揃っていた。しかし自分の形になるものがなかった。

— 課題 01

ツールがユーザーを選んでいる。多機能で高機能なツールほど習熟コストが高く、使いこなせる人間が限られる。思考のための道具が、使う人間を制限していた。

— 課題 02

UIが思考を邪魔する。多機能なデザインツールは操作を覚えることに脳のリソースを使う。思考するのではなく、ツールを使っている状態になる。

— 課題 03

「一人の作業」に向いていない。既存ツールの多くはチーム共同作業を前提に設計されている。静かに一人で考える場として設計されていない。

— 課題 04

記録が定着しない。「書いた」のに後から見返さない。思考の外化が一時的なメモで終わり、アイデアが発展しない。保存と整理の設計が思考の継続を妨げていた。

02 — Insight

黒い鏡は、
自分の思考を映す装置だ。

「Black Mirror」というメタファーはNetflixのドラマから来ている。同じスクリーンが、人によってまったく異なるものを映し出す——それがこのプロダクトの核心だ。デザイナーにはデザイナーの鏡に、開発者には開発者の鏡に、はじめて触る人にははじめての人の鏡になる。ツールの存在感を消し、使う人間の思考だけを浮かび上がらせる。

届けたい体験は「思考に向き合う静けさ」だった。
届いていた体験は「ツールの操作」だった。

体験翻訳家としてこのズレを発見したとき、解決策は「機能を削ること」だった。鉛筆・付箋・テキスト——3つのツールだけ。削ぎ落とすことで、思考そのものに集中できる空間を設計した。

PERSONA DESIGN — BLACK MIRROR BOARD PERSONA A UIデザイナー 25〜35歳 / 孤独な設計作業 GOAL 設計の前段階で思考を整理したい アイデアを視覚的に展開したい PAIN Figmaは重くてUIが邪魔 メモアプリは線形で展開できない KEY EXPERIENCE 「考えている感覚」を味わいたい 思考が目に見える喜び → BMBoard の最初のユーザー PERSONA B 個人開発者 20〜30歳 / アイデア管理・ムードボード GOAL プロダクトのコンセプトをまとめたい インスピレーションを貼り集めたい PAIN ツールが多すぎて迷う 見た目の良いキャンバスが欲しい KEY EXPERIENCE すぐ開けてすぐ使える シンプルで美しいキャンバス → ムードボード・プランニング PERSONA C ライター・知識労働者 25〜45歳 / アイデアを発展させたい GOAL 考えをビジュアルで整理したい 発想をつなぎ合わせたい PAIN テキストだけでは思考が深まらない ツールを覚える時間がない KEY EXPERIENCE 思考が「見えてくる」体験 紙のノートに近い感覚 → スケッチ・アイデア発展 * 木下スタジオ / Kinoshita Studio — Persona Design (BMBoard)

ペルソナ設計。共通点は「思考を外化したい・ツールの邪魔をされたくない」という欲求。

— Customer Journey

CUSTOMER JOURNEY — BLACK MIRROR BOARD STAGE 着想 記録ツール選び BMBoard を開く 書く・描く 思考が整理される ACTION 「メモしたい」 ツールで迷う キャンバスが現れる 鉛筆・付箋・テキスト リンク共有・保存 EMOTION ひらめき ツールに迷う スッと始められる 思考が加速する 「これだ」という感覚 DESIGN OPP. 着想の瞬間に即対応 選択肢を削る設計 黒いキャンバス即表示 3ツールのみ URLリンク共有 * 木下スタジオ / Kinoshita Studio — Customer Journey Map (BMBoard)

着想からBMBoardでの思考整理まで。「ツールで迷う」という落下点をゼロにすることが設計の核心だった。

03 — Experience Strategy

「静けさ」を
設計する。

Experience Strategyの核心は、「思考の静けさ」を4つの体験軸として設計することだった。Surface(場所としての黒)・Silence(操作の静けさ)・Mirror(思考の外化)・Permanence(記録の重さ)——すべての設計判断がこの4軸に準拠した。

— 01

SURFACE

白いキャンバスは誰にでも開かれた入口だ。しかしターミナルコマンドでテーマ・配色・構造を書き換えられる。デザイナーも開発者もはじめての人も、それぞれの「場所」として使える。

— 02

SILENCE

3ツール以外のノイズは存在しない。メニューの多さがツールの邪魔をする——削ぎ落とすことが「静けさ」を生む。

— 03

MIRROR

思考を外化する=鏡の前に立つこと。キャンバスに浮かぶ自分のアイデアは、内側にあったものが可視化された姿だ。ツールではなく、自分の思考が前に出る。

— 04

PERMANENCE

ローカル保存・URLリンク共有。思考には「残る」という感覚が必要だ。記録の重さが思考の密度を上げる。

— Brand Experience Framework

BRAND EXPERIENCE FRAMEWORK — BLACK MIRROR BOARD 01 — VISION 「一人の思考に寄り添う、黒い鏡」 Experience Translation 思考の外化 → 静かな場所で 02 — EXPERIENCE AXES Surface · Silence · Mirror · Permanence SURFACE SILENCE MIRROR PERMANENCE ← 4軸すべてが「思考の静けさ」に収束 03 — TOUCHPOINTS キャンバス · 鉛筆 · 付箋 · テキスト · ブラウザ拡張 黒いキャンバス 鉛筆ツール 付箋ツール テキストツール BMBrowser拡張 URLリンク共有 04 — DESIGN PRINCIPLES 黒 × 金 · 3ツール · ローカル保存 · ミニマル操作 削ぎ落とすUI 自動保存・即起動 モバイル対応 ブラウザ拡張統合 * 木下スタジオ / Kinoshita Studio — Brand Experience Framework (Black Mirror Board)

Vision → Experience Axes → Touchpoints → Design の4層構造で「思考の鏡」を設計した。

— Experience Translation Map

EXPERIENCE TRANSLATION MAP — BLACK MIRROR BOARD INTENDED 届けたい体験 思考に向き合う静けさ 思考が「見える」喜び ツールに邪魔されない 記録の重みと継続性 どこでも即起動 GAP AS-IS 既存ツールの体験 「ツールを使っている」 機能が多くて迷う UIが思考を邪魔する 重くて起動が遅い チーム用でひとりに不向き TO-BE — BMBoard 黒いキャンバスが即起動 3ツールのみ・迷いゼロ 思考だけが画面に現れる ローカル保存・URLリンク共有 ブラウザ拡張で常時そばに * 木下スタジオ / Kinoshita Studio — Experience Translation Map (BMBoard)

体験翻訳のプロセス。届けたい体験と既存ツールのギャップを可視化し、BMBoardの設計方針を導出した。

04 — Design

削ぎ落とすことが、
設計だった。

Experience Strategyで定義した4軸(Surface・Silence・Mirror・Permanence)を、UIに実装した。決断の中心は「何を入れるか」ではなく「何を削るか」だった。機能を削るたびに、思考の場としての純度が上がった。

— Visual Direction

黒 × 金:思考の夜

深い黒(#0e0e0c)と金(#a89060)のみ。色は思考の邪魔をしない。金のアクセントだけが「重要な判断点」を示す。昼でも「夜の思考」の感覚を持てる配色。

— Tool Design

鉛筆・付箋・テキスト

3つのツールだけ。消しゴムは鉛筆の長押しで呼び出す。選択ツールは自動。思考のリズムを止めないために、操作の切り替えコストを最小化した。

— Save & Share

ローカル保存 + URLリンク共有

ブラウザのローカルストレージに自動保存。URLパラメータで他の人に共有可能。アカウント不要で始められる——摩擦ゼロで思考を記録する設計。

— Browser Extension

Black Mirror Browser

Chrome拡張でサイドパネルにBMBoardを常駐させる。ブラウジングしながら、思考が浮かんだ瞬間にそのままキャンバスに書き出せる。思考とブラウザが統合される体験。

— Experience Quality / 体験の質感設計

— Drawing

コーナー検出付き quad-midpoint smoothing

鉛筆は確定アルゴリズム。直線と曲線を自動識別。「手で書いた感覚」と「デジタルの清潔感」を両立させる独自の描画設計。

— Mobile

タッチ・ピンチズーム完全対応

スマートフォンでも同じ体験。外出先でメモ→帰宅してPCで展開——思考の場はデバイスを選ばない。

— v1.3+

GIF・テンプレート・カラーパレット

コア体験(鉛筆・付箋・テキスト)を一切変えずに拡張機能を追加。GIFのキャンバス配置・自動テーマ・背景切り替えが加わった。

05 — Result

「使うツール」から
「考える場所」へ。

「届けたい体験」を設計し、「届いていた体験」との差を埋める——体験翻訳のプロセスを自分自身のプロダクト開発に適用した実証実験。鉛筆・付箋・テキストの3ツールに削ぎ落としたキャンバスは、思考の場として機能し始めた。

SILENCE

3ツールのみの設計により、起動から思考開始まで認知負荷ゼロを実現。「ツールを使っている感覚」が消えた。

LIVE

bmboard.studio 公開中。Chrome Web Store に Black Mirror Browser(サイドパネル統合版)を公開済み。Product Hunt ローンチ完了。

PROOF

体験翻訳の手法をプロダクト開発に適用した実証。「削ぎ落とすことが設計」という方法論の有効性を自社実験で示した。

ツールを作ることは、
思考の場を設計することだった。

— プロダクト一覧に戻る

Products →

— 次のケーススタディ

Ateli.er →

— Result / この翻訳により

— 01

使い方の理解が変化した

「ツールを使う」から「思考する場所に来る」へ。使い方ではなく、在り方が変わった。

— 02

削ぎ落としが価値になった

機能を増やすことが価値ではない。3ツールへの絞り込みが「使い心地」として直接体験できることを証明した。

— 03

体験翻訳の再現性が証明された

「届けたい体験と届いている体験のズレを揃える」プロセスが、自社プロダクトでも機能することを確認した。

— 思想的背景
Experience Translator
体験翻訳家とは何か。このプロダクトが生まれた思想の根拠。
体験翻訳家の思想を見る →

— Studio

木下スタジオ(Kinoshita Studio)は、滋賀県・琵琶湖を拠点に活動するデザイナー木下貴博のスタジオです。UX/UIデザイン・アートディレクション・個人開発まで、一人で設計から制作・ディレクションを一貫して担当します。
Black Mirror Board は 体験翻訳の実証実験プロダクト です。「届けたい体験と届いている体験のズレを揃える」という手法を、自らのプロダクト開発に適用しました。滋賀・琵琶湖から、一人の思考に寄り添うツールを設計・開発しています。

木下スタジオのサービスを見る →