TCLabo

LAB_001 / OVERVIEW

実験中の デザインログ

完成した制作物を並べるのではなく、「なぜこう考えたか」の過程を残す場所。
課題発見から気づきまで、思考をそのまま記録します。

実験ログを見る 4 experiments running

SCROLL

LAB_012 / LATEST EXPERIMENT

完了

「TTMしかできない」コンプレックスの終焉 EXP-012

高クオリティなLPモックアップをAIが一瞬で吐き出すのを見て感じた恐怖。そこから見えた、作業者から伴走型ディレクターへのパラダイムシフトの記録。

01 / PROBLEM AIの進化による「作業者」の存在意義の喪失

AIに「売れるLPの模写」を指示したところ、数秒でセオリー通りの完璧なモックアップが完成してしまった。

「これではWebデザイナーはいらないのでは?」という強烈な虚無感と、「自分はTTM(模倣)しかできない」というコンプレックスに直面した。

02 / HYPOTHESIS AIを「ゼロイチの壁」を壊すアシスタントとして使う

もしAIがTTMを高速でこなしてくれるなら、真っ白な画面から正解を探す苦痛をAIに丸投げできるのではないか?デザイナーは「ヒアリング」と「ディレクション」に特化できるのではないか?

03 / EXPERIMENT VC DesignOSによる伴走型ディレクターへの進化

ヒアリングからサイトマップを構築し、AIの高速プロトタイピングで「守」のベースを一瞬で構築。そこに独自の審美眼と人間的調整を加えて「破・離」へと練り上げる。この圧倒的スピードと品質を、追加コストゼロの完全無料で実現する。

META

開始日2026.05.30
完了日2026.05.30
ステータス完了(パラダイムシフト)
使用AIAntigravity

RELATED TAGS

VC DesignOS 伴走型ディレクション Rapid Prototyping

SHARE THIS EXP.


🛠 LINKS

LAB_006 / ARCHIVED EXPERIMENTS

過去の実験アーカイブ

#EXP-011 完了

AI Web Lab コーディングアレルギー克服

「コードを書くのが苦手」なデザイナーが、AIとペアプログラミングしながらWebの基礎体力をつけていくリアルドキュメンタリー。

AIペアプロ コーディング ドキュメンタリー
#EXP-010 完了

Elementor V4.0とJSON生成の究極シナジー

Elementor V4.0のAtomic Editor(独立したデザインシステム)とJSON作成術を掛け合わせ、Web制作のワークフローを極限まで加速させる実験。

Elementor V4 JSON作成術 開発効率化

100% — 実証済

#EXP-009 完了

カンプからJSONへの翻訳で開発スピード爆速化

デザインカンプをJSONデータに変換してコーディング効率を極限まで高める実験。初心者の友人向けに「お弁当レシピ」で学ぶインタラクティブ教材。

JSON基礎 講義教材 開発効率化

100% — 教材完成

#EXP-008 進行中

カンプテコ入れビフォーアフター

デザイン合意を劇的にスムーズにする実験。カンプ画像の上に手書きコメントや付箋形式のフィードバックを重ね、テコ入れ表現を容易にする装置の検証。

UX設計 クライアント提案 共創ツール

10% — 思考・構想開始

#EXP-007 完了

コンポーネントシミュレーターの実装と検証

Vanilla JSによる20種のホバー制御に加え、Supabase連携により全世界で共有可能なデザインライブラリをノンコードで実現する実験。

ツール開発 UX設計 クラウド連携

100% — 実証済

#EXP-006 進行中

AIトークン難民になってわかったこと

トークン上限の不安を正直に記録。現状の棚卸し、収益モデルの仮説、「Webデザイナー → 伴走者」への転換を考える。

AI活用 収益化 フリーランス

30% — 思考継続中

#EXP-005 完了

Webサイト診断メーカーの実装と検証

非エンジニアでも「動的なWebアプリ」は作れるのか?簡単なYES/NOで分岐する診断ツールを静的HTMLとJavaScriptだけで構築する実験。

Webアプリ開発 JavaScript インタラクティブ

100% — 実証済

#EXP-003 完了

感情・思考の巨大世界化

Threadsでの閲覧・反応率を上げるため、自分の内面を圧倒的なスケールの「コンセプトアート」として可視化する。

ビジュアル思考 SNS集客

100% — 反応獲得済

#EXP-002 検証中

Webサイト診断レポートとマネタイズ

「整理力」を可視化するため、実験ノート風の診断画像をAI出力し、ワンコインnoteへの導線を作る。

情報整理 SNS集客

70% — 反応テスト中

#EXP-001 進行中

解約文言がCTAに与える影響

「いつでも解約可能」という一言で、予防・検討段階のユーザーの心理的ハードルは下がるか?

ABテスト CTA最適化

50% — データ収集中

+

新しい実験を追加

HTMLを複製して作成

LAB_004 / THINKING NOTES

思考メモ

自動化の誘惑と、手ざわりの納得感

2026.05.20

何でも自動化し、データベースと繋げることが「最先端」で「正解」だと思い込んでいた。
でも、自動化の裏には『コントロールを失うリスク』や『ブラックボックスのエラーに怯えるコスト』もある。
あえて使い慣れたFileZillaで、自分の目で確かめ、自分の呼吸で本番サーバーにファイルを届ける。
この少しの泥臭さの中にこそ、ものづくりの確かな納得感がある。

← 自分のテンポを大切にする

デザイナーの価値って何だろう

2026.04.12

AIが増えて、見た目を作るだけなら誰でもできる時代になった。
じゃあ私が残せるものは何か。
「言語化できないものを引き出す力」
栄養士でやってたカウンセリングと、本質は同じかもしれない。

← これ、提案書に書こう

自動化の本当の価値

2026.04.18

GASとElementorを連携させてJSONを吐き出す仕組み。
最初は複雑で心が折れそうだったけど、AIがいれば「やりたいこと」さえ明確なら実現できる。
数ヶ月かかる作業が数日で終わる破壊力。
手作業の罠から抜け出すことが、次のクリエイティブを生む。

インフラの壁と諦めない心

2026.05.06

Supabaseのスリープ問題。無料枠の制約でデータベースが止まる。
インフラの知識なんて皆無だったけど、AIと一緒にエラーログを読んでGitHub ActionsでCronを回す解決策にたどり着いた。
「わからない」を理由に立ち止まらなくていい時代になったんだ。

AIとのペアプログラミング

2026.05.10

「これを作って」と指示するだけじゃダメ。
「なぜこれを作るのか」「誰に届けるのか」という文脈(コンテキスト)を共有することで、単なるコード生成から「共創」に変わる。
私の役割はプログラマーではなく、ディレクターだ。

対話の質がアウトプットを決める

泥臭い改善がUXを作る

2026.04.19

WPブログの画像最適化やWebP化プラグインの選定。
派手なデザインよりも、こういう「見えない部分のスピード改善」が最終的なユーザー体験(UX)を底上げする。
PageSpeed Insightsの数値を追うのは、意外と楽しい。

完成より過程を見せる

2026.05.03

ポートフォリオに並ぶ「きれいな成果物」は、クライアントが本当に知りたいことを答えていない。
「なぜこうなったか」「何に悩んだか」の方が、一緒に仕事したいと思えるかどうかに直結する気がする。
だからこのTCLaboを作った。

クライアントに寄り添う = 疑問を先回りすること

「話してみたい」と思わせる文章を書く

安さより誠実さで選ばれたい

実験は失敗してもいい。記録が資産になる。

非エンジニアだからこそ作れるモノがある

デザインは問題解決の手段にすぎない

LAB_005 / AI & WORKFLOW

使用AI / Workflow

ちゃっぴー ChatGPT

最初の壁打ち役。アイデアの粗削りや、自分の思考の抜け穴を指摘してもらう。ブレインストーミング専用。

仮説のブラッシュアップ
コピーの複数案出し
リスク視点の補完
ジェミ田 Gemini

デザイン提案フェーズで活用。Figma Stitch連携やモックアップ生成の文脈理解が得意。守・破・離の概念整理も。

デザインコンセプト整理
Figmaプロンプト生成
競合分析の補助
グラビ Antigravity

頼れる実装パートナー。ローカル環境で直接コードを編集し、デザインから実装まで二人三脚で並走。静的ファイルの構築特化。

静的HTMLの構築
自由なデザイン実装
ファイル・サーバー管理
Claude Anthropic

構造化・言語化・実装補助。ケーススタディの文章整理、コードレビュー、論理の精度を上げるフェーズで。

実験ログの構造整理
HTML / CSS 実装
提案文の言語化

EXPERIMENT WORKFLOW

課題発見
ちゃっぴー壁打ち
仮説定義
実験設計
Claude で整理
ログ公開
気づき記録