「言葉では伝わらないテコ入れ箇所を、その場で視覚的に納得してもらいたい」という問いから始まった。 デザインカンプ画像の上に、手書き風付箋や赤ペン指示を直感的に重ね、スライダーで前後を比較できるツールの構想。
クライアントへの修正提案やデザインレビューの際、「ここをこう変えると良くなりますよ」と文章だけで説明するのは難しい。かといって、その場ですぐにデザインを全て作り直すのも時間がかかる。
「カンプ画像の上に、その場でペタペタ付箋を貼ってフィードバックできたら——」
TCLaboのアナログな温もり(手書き付箋・赤ペン)をそのまま使って、デザインの『もったいない度』や『改善ポイント』を直感的にレイヤーとして重ね合わせることができれば、提案資料づくりが劇的にラクになり、クライアントとの合意形成もスムーズになるはずだ。
01 / IMPORT
カンプ画像(PNG/JPG)をドラッグ&ドロップでブラウザに直接アップロード。瞬時にフィードバック用キャンバスを展開。
02 / ANNOTATION
画像上の気になるところをクリックし、手書き風の「テコ入れ付箋」(色・サイズ変更可能)をペタッと配置。直感的に改善点を指示。
03 / DRAWING
「赤ペン」で画面上に自由に矢印を引いたり、強調したい部分を丸で囲んだりできる、温もりある手書き落書き機能。
04 / SLIDER & SHARE
ビフォーアフターを左右にドラッグして見比べる比較スライダー。Supabaseへ保存してクライアントへ即座に共有リンク発行。
「デザインの改善箇所を提案するときに、言葉を重ねるよりも、絵の上に直接『ここ!』ってTCLaboみたいな手書き付箋を貼って見せられたら、それだけで会話の10倍の価値があるはず。
相手を否定するレビューではなく、『ここをこうしたらもっと良くなる!』というポジティブな共創のための道具にしたい。」
HTML/CSSキャンバスへのドラッグ&ドロップ画像読み込み検証
手書き付箋(CSS/DOM要素)の動的ドラッグ&ドロップと座標保持ロジック設計
HTML5 Canvasを用いた「手書き赤ペン」ライティング機能のモックアップ作成
META
TAGS
「否定するレビュー」から、「一緒に良くする共創」の道具へ。