AI Web Lab コーディングアレルギー克服
「コードを書くのが苦手」なデザイナーが、AIとペアプログラミングしながらWebの基礎体力をつけていくリアルドキュメンタリー。
「完成より、
考えた痕跡を残す」
— 2026.01 メモより
仮説はいつでも
塗り替えていい
LAB_001 / OVERVIEW
完成した制作物を並べるのではなく、「なぜこう考えたか」の過程を残す場所。
課題発見から気づきまで、思考をそのまま記録します。
SCROLL
LAB_012 / LATEST EXPERIMENT
完了高クオリティなLPモックアップをAIが一瞬で吐き出すのを見て感じた恐怖。そこから見えた、作業者から伴走型ディレクターへのパラダイムシフトの記録。
AIに「売れるLPの模写」を指示したところ、数秒でセオリー通りの完璧なモックアップが完成してしまった。
「これではWebデザイナーはいらないのでは?」という強烈な虚無感と、「自分はTTM(模倣)しかできない」というコンプレックスに直面した。
もしAIがTTMを高速でこなしてくれるなら、真っ白な画面から正解を探す苦痛をAIに丸投げできるのではないか?デザイナーは「ヒアリング」と「ディレクション」に特化できるのではないか?
ヒアリングからサイトマップを構築し、AIの高速プロトタイピングで「守」のベースを一瞬で構築。そこに独自の審美眼と人間的調整を加えて「破・離」へと練り上げる。この圧倒的スピードと品質を、追加コストゼロの完全無料で実現する。
META
RELATED TAGS
SHARE THIS EXP.
LAB_006 / ARCHIVED EXPERIMENTS
「コードを書くのが苦手」なデザイナーが、AIとペアプログラミングしながらWebの基礎体力をつけていくリアルドキュメンタリー。
Elementor V4.0のAtomic Editor(独立したデザインシステム)とJSON作成術を掛け合わせ、Web制作のワークフローを極限まで加速させる実験。
100% — 実証済
デザインカンプをJSONデータに変換してコーディング効率を極限まで高める実験。初心者の友人向けに「お弁当レシピ」で学ぶインタラクティブ教材。
100% — 教材完成
デザイン合意を劇的にスムーズにする実験。カンプ画像の上に手書きコメントや付箋形式のフィードバックを重ね、テコ入れ表現を容易にする装置の検証。
10% — 思考・構想開始
Vanilla JSによる20種のホバー制御に加え、Supabase連携により全世界で共有可能なデザインライブラリをノンコードで実現する実験。
100% — 実証済
トークン上限の不安を正直に記録。現状の棚卸し、収益モデルの仮説、「Webデザイナー → 伴走者」への転換を考える。
30% — 思考継続中
非エンジニアでも「動的なWebアプリ」は作れるのか?簡単なYES/NOで分岐する診断ツールを静的HTMLとJavaScriptだけで構築する実験。
100% — 実証済
非エンジニアが抱える「ターミナルへの恐怖心」や「課金の壁」を、GUIベースのAIアシスタントとの対話だけで突破できるか検証。
100% — 実証済
Threadsでの閲覧・反応率を上げるため、自分の内面を圧倒的なスケールの「コンセプトアート」として可視化する。
100% — 反応獲得済
「整理力」を可視化するため、実験ノート風の診断画像をAI出力し、ワンコインnoteへの導線を作る。
70% — 反応テスト中
新しい実験を追加
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
最初の壁打ち役。アイデアの粗削りや、自分の思考の抜け穴を指摘してもらう。ブレインストーミング専用。
デザイン提案フェーズで活用。Figma Stitch連携やモックアップ生成の文脈理解が得意。守・破・離の概念整理も。
頼れる実装パートナー。ローカル環境で直接コードを編集し、デザインから実装まで二人三脚で並走。静的ファイルの構築特化。
構造化・言語化・実装補助。ケーススタディの文章整理、コードレビュー、論理の精度を上げるフェーズで。
EXPERIMENT WORKFLOW