コンポーネントシミュレーターは
実現可能か？ ——非エンジニアがWebディレクター目線のツールを作った記録

「見せるポートフォリオ」から「体験させるポートフォリオ」へ

静的な制作物一覧より、触れるツールの方が圧倒的に会話が生まれる。クライアントが「これ！」と言える瞬間をデザインできる。

ホバーパターンに「業種タグ」をつけることで提案になる

「⑧ GLOW → ゲーム/テック系」という文脈があることで、クライアントが自分のビジネスとボタンを結びつけて考えられる。単なる演出紹介ではなく、提案ツールとして機能する。

「クライアントモード」という発想が鍵だった

技術的な操作（CSS出力・ライブラリ）を隠して、プレビューだけを見せるモードを作ったことで、ツールが「デザイン打ち合わせの場」になった。

Magnetic・3D Tilt・Rippleは「JS必須」を実感

CSSだけでは実現できないインタラクションがある。非エンジニアでもJSの「カーソル座標を取得して動かす」という発想を実装できた。これは自信になった。

Supabaseのリアルタイム保存がもたらす『共創体験』

localStorageでの自己完結から、クラウド共有へ移行したことで、自分の作ったデザインを他の誰かが閲覧・利用できるようになり、単なるツールから『開かれたキャンバス』へと進化した。

スマートな自動モード切替による『迷わせないUX』

クライアントモード中にヘッダーの「ライブラリ」ボタンを押した際、裏側で自動でデザイナーモードに切替を行い、パネルへ滑らかにスクロールさせる仕様。ちょっとした泥臭いJSの気配りが、打合せの現場のテンポを崩さない極上の体験を生む。