TCLabo

LAB_001 / OVERVIEW

実験中の デザインログ

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

実験ログを見る 4 experiments running

SCROLL

LAB_005 / LATEST EXPERIMENT

完了

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

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

01 / PROBLEM 課題発見:読者を巻き込む仕掛け作り

記事を読むだけの「受け身の体験」ではなく、ユーザー自身がポチポチと参加できる「診断ツール」があれば、エンゲージメントや別コンテンツへの誘導率が高まるはずだ。

しかし、通常そういった動的ツールを作るにはバックエンド(サーバー処理)や複雑なシステムが必要だと思われがちだ。

← サーバーなし・維持費ゼロでどこまで動かせるか?

02 / HYPOTHESIS 仮説

ブラウザ上で動くJavaScriptを使えば、バックエンドなし(静的HTMLのまま)で、十分にリッチで実用的な「診断メーカー」を構築できるはず。

03 / EXPERIMENT 実験:診断メーカーの実働テスト

実際に作成した診断メーカーのプロトタイプを詳細ページに埋め込んだ。5つの質問にYES/NOで答えることで、現在のWebサイトの課題タイプを判定する。

OBSERVATION

一切のサーバー環境を構築することなく、HTMLファイル内の数十行のJavaScriptだけで完璧に機能している。この手軽さは、非エンジニアにとって強烈な武器になる。

META

開始日2026.05.18
完了日2026.05.18
ステータス完了(実証済)
使用AIAntigravity (GUIエージェント)

RELATED TAGS

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

MEMO

これを応用すれば「お見積りシミュレーター」とか「プラン診断」も作れる。クライアント提案の幅が広がりそう!

LAB_003 / PAST EXPERIMENTS

過去の実験アーカイブ

全 6 件

#EXP-006 進行中

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

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

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

30% — 思考継続中

#EXP-003 完了

感情・思考の巨大世界化

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

ビジュアル思考 SNS集客

100% — 反応獲得済

#EXP-002 検証中

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

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

情報整理 SNS集客

70% — 反応テスト中

#EXP-001 進行中

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

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

ABテスト CTA最適化

50% — データ収集中

+

新しい実験を追加

HTMLを複製して作成

LAB_004 / THINKING NOTES

思考メモ

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

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 で整理
ログ公開
気づき記録