TCLabo
実験ログ一覧へ戻る
#EXP-008 進行中

カンプテコ入れ
ビフォーアフター ——手書き付箋と赤ペンで、デザイン提案を視覚化する装置

「言葉では伝わらないテコ入れ箇所を、その場で視覚的に納得してもらいたい」という問いから始まった。 デザインカンプ画像の上に、手書き風付箋や赤ペン指示を直感的に重ね、スライダーで前後を比較できるツールの構想。

01 / PROBLEM なぜ作ろうと思ったか(仮説)

クライアントへの修正提案やデザインレビューの際、「ここをこう変えると良くなりますよ」と文章だけで説明するのは難しい。かといって、その場ですぐにデザインを全て作り直すのも時間がかかる。

「カンプ画像の上に、その場でペタペタ付箋を貼ってフィードバックできたら——」

TCLaboのアナログな温もり(手書き付箋・赤ペン)をそのまま使って、デザインの『もったいない度』や『改善ポイント』を直感的にレイヤーとして重ね合わせることができれば、提案資料づくりが劇的にラクになり、クライアントとの合意形成もスムーズになるはずだ。

02 / CONCEPT 実装したい機能のスケッチ

01 / IMPORT

カンプ画像(PNG/JPG)をドラッグ&ドロップでブラウザに直接アップロード。瞬時にフィードバック用キャンバスを展開。

02 / ANNOTATION

画像上の気になるところをクリックし、手書き風の「テコ入れ付箋」(色・サイズ変更可能)をペタッと配置。直感的に改善点を指示。

03 / DRAWING

「赤ペン」で画面上に自由に矢印を引いたり、強調したい部分を丸で囲んだりできる、温もりある手書き落書き機能。

04 / SLIDER & SHARE

ビフォーアフターを左右にドラッグして見比べる比較スライダー。Supabaseへ保存してクライアントへ即座に共有リンク発行。

03 / LOG & NEXT 思考のログ(ゆっこのメモより)

「デザインの改善箇所を提案するときに、言葉を重ねるよりも、絵の上に直接『ここ!』ってTCLaboみたいな手書き付箋を貼って見せられたら、それだけで会話の10倍の価値があるはず。
相手を否定するレビューではなく、『ここをこうしたらもっと良くなる!』というポジティブな共創のための道具にしたい。」

  • HTML/CSSキャンバスへのドラッグ&ドロップ画像読み込み検証

  • 手書き付箋(CSS/DOM要素)の動的ドラッグ&ドロップと座標保持ロジック設計

  • HTML5 Canvasを用いた「手書き赤ペン」ライティング機能のモックアップ作成

META

開始日2026.05.20
ステータス進行中(思考開始)
共同思考Antigravity & ゆっこ

TAGS

ツール開発 UX設計 クライアント提案 画像合成 共創

「否定するレビュー」から、「一緒に良くする共創」の道具へ。

💡 FEEDBACK

「ビフォーアフター機能はこんな挙動がいい!」「赤ペンはこういう質感がほしい!」といったご意見があれば、ふらっと教えてくださいね。

💬 期待の声を残す