デザイナーがコードで自走する_Mita_ClaudeForBusiness_LT.pdf

Transcript

1. デザイナーがコードで⾃⾛する ノーコードからVercelへ ― Web制作が約10倍速に 2026年7⽉ Mita | Claude for Business ∕ 株式会社ログラス 社⻑室 AI-Ops 荒⽊慎平
2. X (twitter) 荒⽊ 慎平 (Araki Shimpei) ログラス 社⻑室 AI-Opsチーム マネージャー 【経歴】 慶應義塾大学大学院修了後、TOTO株式会社にて 商業施設向けIoTシステム、ウェルネストイレ/スマホアプリなどの企画開発を主導。 その後、フリー株式会社でfreee会計のPdMとして、 確定申告や小規模法人向けの財務会計を担当。 AI機能開発や業務効率化を得意とする。 現在は株式会社ログラスにて、 社長直下で社内のAI戦略立案・組織全体へのAI実装と定着を担当。 AIエージェント開発、全社へのAI浸透、ガバナンス設計などを一気通貫でリード。 そのログラスの事例や成果が、全国出版の書籍に掲載予定。 【社外活動】 米国SpaceX社のグループ会社公式認定の 「Cursor Ambassador （国内で5人のうちの1人)」として グローバルAIエバンジェリストとして活動。 Cursor、Claudeなどの公式イベント主催・運営も行う。 100種類以上のAIを取り扱い、年15本以上講演/登壇。 趣味はテニス、筋トレ、お酒を嗜む。
3. 個人的に遊んだ AI・便利ツール AI Coding & Agentic IDE • • • • • • • • Cursor Google Antigravity / Windsurf / Codex Roo Code (Cline) / Devin / OpenDevin Factory / Manus / Prism Amazon Q Developer / Quick Suite OpenCode / JetBrains Copilot / CopilotStudio CodeRabbit Generative Media • • • • Video: Runway / Hailuo AI / Veo / Vids / HeyGen / Sora / Genie3 / Remotion Image: Midjourney / Stable Diffusion / Adobe Firefly / Canva AI / Seadream / Flux / Pencil / Stich Audio: ElevenLabs / Suno / kits / Whisper / Amazon Transcribe / Grok Speech Voice: superwhisper / aquavoice / Genspark Speakly Search & Data Collection (RAG) Generative UI & Full-stack Dev • • • • • Bolt.new / Lovable / Replit Agent v0 / Figma Make Google Code Wiki MCP App (Interactive App) Streamlit Automation & Workflow • • • • • • • • • • Google Workflows・Studio n8n / Make / Zapier / sim ai Dify / Langflow / Flowise Mastra / Argo GAS / clasp MCP (Model Context Protocol) CrewAI / MGX / ChatPRD GitHub Actions Claude Code GitHub Actions OpenClaw (moltbot, clawdbot) Knowledge & Productivity • • • • • NotebookLM / Obsidian (Clipper) Mapify / Napkin / Gamma Page Sidebar Kiro / Opal / Nano-banana Notion AI / Slack AI LLM & Foundation Models • • • • • • • OpenAI (GPT-4o / o1 / Realtime API / GPT-OSS) Google Gemini (Pro / CLI / Extension / AI Mode / nano) Anthropic Claude (Opus / Claude Code / App / Desktop / Cowork / Plugin / Fable / Manged ) xAI Grok / Cohere / Mistral Kimi Nemotron / Qwen / Gemma / Ollama Meta Llama 3 / DeepSeek / Phi • • • Google File Search API / Tavily Perplexity / Genspark / Murquery / Felo Firecrawl / Watercrawl / Jina Reader / Graphiti LLM Ops & Evaluation • • • • • • • LangChain / LangGraph / LangGraph Studio LangSmith / Langfuse Hugging Face / OpenRouter LM Arena / Design Arena / MagicArena Ragas / vLLM Comet / Computer SQLite Developer Tools & Infrastructure • • • • Ghostty with glow and yazi Jujutsu Snowflake GA4 Others • • • • • • • • • • • • • • • • • • Lakera Guard Microsoft Security Copilot Snyk Menlo Security CrowdStrike Falcon GitGuardian Atlas / dia / Arc / commet Heptabase agentresistry Lovart ailbreak ClaudeTag Yolo Hyperframe Omni ORIGIN mira dreamina /oct 2025~2026年度 AI関連の登壇 /運営
4. Before ノーコードで作っていた頃の課題 • デザインを外部エンジニアに依頼し、擦り合わせてアップロードするまで⼯数が⼤きい • アニメーション表現が難しく、やりたい動きを再現しづらい • Google Analyticsの設定やデータ取得に⼿間がかかる • ノーコードツール⾃体の使い⽅を覚える学習コストもかかる
5. After 制作環境をまるごとコードベースへ 1 2 3 Vercelへ完全移管 Claude Codeで構築 GitHubで即反映 ノーコードをやめ、コードで動く⼟台に デザイナーがコードベースでデザインを プルリクをマージすれば本番サイトへ⾃ 載せ替え 実装 動反映
6. Webページ https://loglass.jp/solution/ai-analysis
7. 移管で得られた成果 ClaudeCodeと対話するだけで完了するようになった。データ測定や微修正もラクラク！！ 約10倍 ゼロ ほぼ100% 制作スピード 調整コスト GAデータ計測 ⼿作業でのアップロード⽐ エンジニアなどの 関係者とのやり取りが不要に GA全配置でABテストも前提に
8. 作業30分で動画作成が完了
9. 表現⼒も妥協しない ― アニメはFableで 1 2 3 アニメの基準を整備 Fableに指⽰して⽣成 確認してマージ Loglassらしい動きのガイドラインを⽤ 「いい感じのアニメを」で実装が返る OKならプルリクを出して即反映 意
10. まとめ ― デザイナーがコードで⾃⾛する • 制作の主役がデザイナー⾃⾝になり、反映まで⼀⼈で完結する • エンジニアとの往復が消え、スピードと表現⼒が両⽴する • 明⽇の⼀歩は「1画⾯だけコードで直してPRを出す」ことから