2025/05からAI駆動開発を開始
ヴィジュアル表現をAIでブーストし
コンテキストエンジニアリングに注力しています

Web

Development

Experience and
Dependencies

経験と依存性


About This Site

個人制作ページ、ツールをまとめています。
これまではNextJS CMS、AIチャット共有拡張機能、
AI前提のweb開発を行なってきました。

Typescript PhotoShop Figma Three.js Supabase GSAP

Details

Experience and Dependencies

経験とAI依存の詳細。

職種・スキル概要4 lists

Web デザイナー
3.5 Year
Web コーダー
3.5 Year
フロントエンドエンジニア
実務未経験
AI駆動開発
1 Year

エージェント / web4 lists

Cursor
1 Year
Claude Code (GLM, OpenRouter)
4 Month
Codex / web
1 Month / 1 Year
Gemini / NanoBanana
1 Year / 6 Month

言語 + ライブラリ5 lists

WEB SCSS+JavaScript+HTML
4 Years
TypeScript
AI 1 Year
Python
AI 6 Month
React/Next.Js/Vite
AI 1 Year
vue/astro/svelte
AI 4 Month
WordPress
`Local`で学習中 wp-local-demo

デザインツール7 lists

PhotoShop
4 Year
Illustrator
4 Year
Figma
HtmlToFigmaなど補助利用
Pencil.dev
数回
Stitch
数回
GPT Image-2.0
LPデザイン・アセット作成の実運用を研究
Claude Design
情報収集

環境4 lists

MacOS
4 年
Windows
社内利用 3.5 年
情報収集
主にX,Zenn,+webAI ディスカバー
制作環境
自作のtask系,memory系,実装系スキルを使用

インフラ / データベース4 lists

Vercel
AI 1 Year
Supabase
AI 1 Year
Github
AI 1 Year
Xserver+MySQL
実務 4 Year

その他利用履歴

Tailwind CSS
6 Month,AI 1 Year
canvas API
AI 1 Year
Three.js
AI 1 Year
D3.js
AI 6 Month
GSAP
3.5 Year
VScode/Chrome Extentions
1~2回作成
NanoBanana
スキルで頻繁に利用
Quiver.ai/arrow-1
BYOS demoのsvg生成で使用
Recraft
高度な画像生成、SVG作成
LottieAnimation
webツール試用
memsearch
claude/codexで常用
superpowers/oh-my-claudecode
試用
tweekpane
`/Generator`で使用
Z.ai Coding Plan
Claude Codeで使用
Open Router
モデル比較
Fal AI
動画生成で使用
OpenClaw
試用
tailscale
スマホターミナル操作試用

Vibe
Design or Vault
Driven

AI Ready

DESIGN.md , 画像生成デザインを基点としたゼロからのページ作成の検証と、自然言語でUIパーツを再利用する為の環境構築を行っています。

Burn Your Own Style

Thinking…
– モデルの学習データに基づくwebデザイン・コーディングは平均的で、振れ幅が大きく、個人の理想とするマークアップ、スタイリングとかけ離れたものになる。
– 構造=既存クラス、装飾=Tailwindで手直ししやすい状態になるが、無駄な記述が多い。
考察：モデルのファインチューニングが民主化するまでは「完成品の再利用」を効率化する方が良い
Repository  Preview

Typescript PhotoShop Figma Three.js Supabase GSAP

## 文脈.app

### SPEC.md, DESIGN.md, AGENTS.md をGUIで作成するツール

DESIGN.mdはフロントエンドの要件定義書と言えます。公開サイトURLから作成するツールが多く出回っており、一定の効率化につながりますが、Sticthの公式テンプレートの情報量でも不十分であり、結局テンプレート出力になります。

一方ClaudeDesignでは詳細を問いかける設計が従来のAIビルダーとの差別化でありますが、最先端モデルのテンプレートであることに変わりはありません。

このツールではClaudeやモデル性能に依存せずに仕様書を作成すること。GUIで認知コストを下げることでどこまで実用に耐えられるかを試すMVP未満のものです。実際には出力品質を担保するための質問を用意することが最先端モデルでも困難で、時間がかかります。

AGENTS.md(CLAUDE.md)では文章量を少なくすることが推奨されており、定型的なデータを使う場合が多いので最低水準が低いように思いますが、頻繁に更新するものではありません。AIツールを使い始める人のため、またはプロンプト保存、SKILL保管庫の機能を統合することでチーム内ツールとして活用できる可能性はあります。
またcodex app-serverなどでGUI上から文書をプロンプトとしてあらためてmdファイルの作成をリクエストするという実装も検討できます。

Bunmyaku
  • Other Works
  • Random Generator

    コントローラー付きのランダム図形配置ジェネレーター

    SVG…
    セル数、コンテナを埋める方向性、図形の種類(正方形、三角形、星、十字)、角度などを調整。rect,circle等SVGタグのスニペットをコピペできる。
    Rects…
    divタグの大きさ、個数、角丸、重なり可否などを指定。いいバランスの時にコピーして画像配置などでそのまま使う想定。SVG出力も可。
  • Agent Driven CMS

    Codex または Claude Code を Next.js Node runtimeで中継。ローカルブラウザでエージェントに直接ソースコードを編集させるCMS

    Detail…
    – AI時代では「チャットで編集できるwebサイト」が求められると仮定する
    – ローカル完結ならモデル性能依存を解消できる
    – フロントエンド以外は全て仕様駆動。
    考察：リテラシーの高いクライアント＆十分な初期サポートという条件は必須と考えていたし、体験としては有意義であるが、エージェントの行動への責任は「サポート」ではカバーできないことを実感した。ここまでやるならCursor、Codex等の使い方自体をサポートした方が無難。と考えました。
  • Shuffle Divide

    制作サイトの部分再現です。

  • Glitch

    制作サイトの部分再現です。

  • Grid Carousel

    グリッドカルーセルです。

  • Bounding Box On Design

    AI生成のLPデザインにバウンディングボックスを配置し、画像+構造化データをエージェントに渡すツールです。

  • Activity

    職務要約と活動記録を書いています。

  • Chat Canban

    ローカル環境の特定ブラウザ(Chromium系)に拡張機能をインストールし、ChatGPTやGeminiにチャット履歴を送信するためのUIを設置。特定のurlでまとめて閲覧。ムーバブルサイドバー機能付き。
    ＊デモページ。当サイトに統合していません。

  • NextJs CMS

    AI駆動開発最初の制作物。実務で経験できないシステム設計、データ管理、React、TypeScriptを学ぶため、単一ページ専用CMSを作成。閲覧pass: view