Product Development — Case Study / Experience Translation
Individual Development — 木下スタジオ / 木下貴博(滋賀・琵琶湖)
— Origin / このプロダクトの問い
このプロダクトは
「なぜ、思考ツールはユーザーに合わせてくれないのか?」
という問いから始まりました。
ツールが多いのではなく、ツールがユーザーの形に合わせてくれるものが存在しなかった。
01 — Problem
Figmaはチームのデザインツールだ。Notionは情報管理ツールだ。メモアプリは線形に記録するものだ。どれもすぐれたツールだが、「そのツールの流儀で使う」ことが前提になっている——ユーザーがツールに合わせるのが当然とされていた。
既存のキャンバスツールは体験がひとつしかない。テーマも、構造も、見た目も固定されている。思考のスタイルがちがっても、ツールは変わらない。デザイナーにとっても、開発者にとっても、はじめて触る人にとっても、同じ顔しか見せない。
— 課題 01
ツールがユーザーを選んでいる。多機能で高機能なツールほど習熟コストが高く、使いこなせる人間が限られる。思考のための道具が、使う人間を制限していた。
— 課題 02
UIが思考を邪魔する。多機能なデザインツールは操作を覚えることに脳のリソースを使う。思考するのではなく、ツールを使っている状態になる。
— 課題 03
「一人の作業」に向いていない。既存ツールの多くはチーム共同作業を前提に設計されている。静かに一人で考える場として設計されていない。
— 課題 04
記録が定着しない。「書いた」のに後から見返さない。思考の外化が一時的なメモで終わり、アイデアが発展しない。保存と整理の設計が思考の継続を妨げていた。
02 — Insight
「Black Mirror」というメタファーはNetflixのドラマから来ている。同じスクリーンが、人によってまったく異なるものを映し出す——それがこのプロダクトの核心だ。デザイナーにはデザイナーの鏡に、開発者には開発者の鏡に、はじめて触る人にははじめての人の鏡になる。ツールの存在感を消し、使う人間の思考だけを浮かび上がらせる。
体験翻訳家としてこのズレを発見したとき、解決策は「機能を削ること」だった。鉛筆・付箋・テキスト——3つのツールだけ。削ぎ落とすことで、思考そのものに集中できる空間を設計した。
ペルソナ設計。共通点は「思考を外化したい・ツールの邪魔をされたくない」という欲求。
— Customer Journey
着想から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
Vision → Experience Axes → Touchpoints → Design の4層構造で「思考の鏡」を設計した。
— Experience Translation Map
体験翻訳のプロセス。届けたい体験と既存ツールのギャップを可視化し、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
体験翻訳の手法をプロダクト開発に適用した実証。「削ぎ落とすことが設計」という方法論の有効性を自社実験で示した。
— Result / この翻訳により
— 01
使い方の理解が変化した
「ツールを使う」から「思考する場所に来る」へ。使い方ではなく、在り方が変わった。
— 02
削ぎ落としが価値になった
機能を増やすことが価値ではない。3ツールへの絞り込みが「使い心地」として直接体験できることを証明した。
— 03
体験翻訳の再現性が証明された
「届けたい体験と届いている体験のズレを揃える」プロセスが、自社プロダクトでも機能することを確認した。
— Studio
木下スタジオ(Kinoshita Studio)は、滋賀県・琵琶湖を拠点に活動するデザイナー木下貴博のスタジオです。UX/UIデザイン・アートディレクション・個人開発まで、一人で設計から制作・ディレクションを一貫して担当します。
Black Mirror Board は 体験翻訳の実証実験プロダクト です。「届けたい体験と届いている体験のズレを揃える」という手法を、自らのプロダクト開発に適用しました。滋賀・琵琶湖から、一人の思考に寄り添うツールを設計・開発しています。