AI

AI時代のWeb制作カテゴリです。Claude Code/Cursor/Copilotとの協働コーディング、llms.txtによるAI検索最適化、AI検索引用対策、生成AI比較、vibe codingなど、AIをWeb制作に組み込む実務知識を扱います。全体像は AI時代のWeb制作完全ガイド を参照してください。

全33件の記事中、1-30件を表示

ComfyUIとは?無料の範囲・動作環境・ライセンスを始める前に整理

ComfyUIとは?無料の範囲・⁠動作環境・⁠ライセンスを始める前に整理

ComfyUIとは、画像や動画を生成するAIモデルを、ノード(処理の部品)を線でつないで動かす無料の...
続きを読む
Fireflyは自分の契約でどこまで使えるか|生成クレジットの上限と超過後

Fireflyは自分の契約でどこまで使えるか|生成クレジットの上限と超過後

生成クレジットとは、Adobeの生成AI機能を使うたびに減っていく、月ごとの持ち点です。付与数は契約...
続きを読む
DESIGN.mdとは|AIが作るUIを「それっぽい」で終わらせない設計ファイル

DESIGN.mdとは|AIが作るUIを「それっぽい」で終わらせない設計ファイル

DESIGN.mdとは、AIコーディングエージェントにデザインの判断基準を渡すためのファイル仕様です...
続きを読む
AI社員の職種一覧|1人会社が実際に配属できる仕事とその境界

AI社員の職種一覧|1人会社が実際に配属できる仕事とその境界

AI社員とは、Claude Code のサブエージェント機能を使って、業務ごとに専任のAIを定義し、...
続きを読む
DomoAIとは|料金プラン・使える機能・クレジットの仕組みを整理

DomoAIとは|料金プラン・⁠使える機能・⁠クレジットの仕組みを整理

DomoAI(ドモAI)とは、シンガポールの DOMOAI PTE. LTD. が提供する、ブラウザ...
続きを読む
TikTok ShopのAI動画はどこまで作れるか|DomoAIで4本検証

TikTok ShopのAI動画はどこまで作れるか|DomoAIで4本検証

TikTok Shop の商品動画を AI で作るとき、映像そのものは商品を映しても崩れません。化粧...
続きを読む
ClaudeでPhotoshopを操作する2つの方法|公式コネクタとExtendScript

ClaudeでPhotoshopを操作する2つの方法|公式コネクタとExtendScrip...

ClaudeからPhotoshopを操作する方法は2つあります。コードを書かずに済ませるなら、Ado...
続きを読む
AI動画生成は指示の出し方で9割決まる|DomoAIで6本検証

AI動画生成は指示の出し方で9割決まる|DomoAIで6本検証

AI動画生成の出来を決めているのは、モデルの性能よりも指示の粒度です。同じツール・同じ尺・同じ解像度...
続きを読む
生成AIで写真から動画を作る|無料枠で3本作って本番サイトに載せた

生成AIで写真から動画を作る|無料枠で3本作って本番サイトに載せた

生成AIの無料枠を使えば、手持ちの写真から数秒の動画を作ってWebサイトやSNSに載せられます。ただ...
続きを読む
MCPサーバーの作り方|Claude Codeから呼べる自作ツールを実装する

MCPサーバーの作り方|Claude Codeから呼べる自作ツールを実装する

MCPサーバーの作り方は、公式SDKでツールを1つ定義して、Claude Codeに登録するだけです...
続きを読む
Claude CodeのMCP連携ガイド一覧|Figma・WordPress・Chrome DevTools・Notion

Claude CodeのMCP連携ガイド一覧|Figma・⁠WordPress・⁠Chrome...

Claude Codeは、MCP(Model Context Protocol)を通じてFigma・...
続きを読む
Chrome DevTools MCPの使い方|Claude Codeにブラウザ実測・デバッグさせる方法

Chrome DevTools MCPの使い方|Claude Codeにブラウザ実測・⁠デバ...

Chrome DevTools MCPとは、Claude CodeなどのAIコーディングエージェント...
続きを読む
NotionとClaude Codeを連携する方法|公式MCPで仕様書・タスクを開発コンテキスト化する

NotionとClaude Codeを連携する方法|公式MCPで仕様書・⁠タスクを開発コンテ...

NotionとClaude Codeは、Notion公式のリモートMCPサーバー「Notion MC...
続きを読む
WordPressとClaude Codeを連携する方法|公式MCP Adapterでサイトを操作するワークフロー

WordPressとClaude Codeを連携する方法|公式MCP Adapterでサイ...

WordPressとClaude Codeは、WordPress 6.9でコアに搭載された「Abil...
続きを読む
FigmaとClaude Codeを連携する方法|Dev Mode MCPでデザインをコード化するワークフロー

FigmaとClaude Codeを連携する方法|Dev Mode MCPでデザインをコー...

FigmaとClaude Codeは、Figma公式の「Dev Mode MCPサーバー」を使って連...
続きを読む
「AI組織」は組織図から作ると失敗する|1人会社をAI会社化する正しい順序

「AI組織」は組織図から作ると失敗する|1人会社をAI会社化する正しい順序

AI組織(AI会社化)とは、Claude Codeのサブエージェントに代表されるAIエージェントを「...
続きを読む
【Claudeが書いた】AIライターと人間ライターの違い|AIが自分の弱点まで正直に

【Claudeが書いた】AIライターと人間ライターの違い|AIが自分の弱点まで正直に

AIライターと人間ライターの最大の違いは、文章を生成する能力ではなく、書いた内容の真偽・経験・責任を...
続きを読む
APIキー不要でAIに聞ける付箋メモアプリを作った|Puter.jsでGPT・Claudeを呼ぶ仕組み

APIキー不要でAIに聞ける付箋メモアプリを作った|Puter.jsでGPT・⁠Claude...

「AIでちょっと調べながらメモ」は、付箋に質問を書いて「送信」するとAIが回答を返してくれる、登録不...
続きを読む
Claude Codeのスキル・ループ・ワークフローの使い分け|いつどれを使うか判断ガイド

Claude Codeのスキル・⁠ループ・⁠ワークフローの使い分け|いつどれを使うか判断ガイド

Claude Codeのスキル・ループ・ワークフローは、名前が並ぶと混同しがちですが役割はまったく別...
続きを読む
CSSアニメーションはAIに「コードを渡して」作る|動くコードが最強のプロンプト

CSSアニメーションはAIに「コードを渡して」作る|動くコードが最強のプロンプト

CSSアニメーションをAIで作るなら、動きを言葉で説明するより「動くコードを渡す」方が速く、正確です...
続きを読む
Claude Codeのルール・エージェント設計術|CLAUDE.mdとサブエージェント運用の実践知

Claude Codeのルール・⁠エージェント設計術|CLAUDE.mdとサブエージェント運...

Claude Codeのルール・エージェント設計とは、何を恒久的なルールとして固定し、何を誰(サブエ...
続きを読む
ローカルLLM vs クラウドAPI|5基準で選ぶ実装判断ガイド

ローカルLLM vs クラウドAPI|5基準で選ぶ実装判断ガイド

ローカルLLMとクラウドLLM APIは、自社で大規模言語モデルを運用するか、外部のAPIサービスに...
続きを読む
Webサイトへの LLM 導入事例5選|チャットボット・検索・要約・振り分け・翻訳

Webサイトへの LLM 導入事例5選|チャットボット・⁠検索・⁠要約・⁠振り分け・⁠翻訳

サイトへのLLM導入とは、自社のWebサイトに大規模言語モデル(ChatGPT・Claude・Gem...
続きを読む
AI時代のWeb制作完全ガイド|AIを使う×AIに見つけてもらう【2026年版】

AI時代のWeb制作完全ガイド|AIを使う×AIに見つけてもらう【2026年版】

AI時代のWeb制作ガイドとは、AIを「使う側」と「見つけてもらう側」の両面から、Web制作者が押さ...
続きを読む
Claude Codeでブログ見出しデザインツールを作ってみた|プロンプト公開

Claude Codeでブログ見出しデザインツールを作ってみた|プロンプト公開

「ブログの見出しをおしゃれにしたいけど、CSSがわからない」——そんな悩みを解決するツールを、Cla...
続きを読む
Claude Codeコマンド一覧&実践ガイド【2026年版】

Claude Codeコマンド一覧&実践ガイド【2026年版】

Claude Codeは、Anthropic社が提供するAIコーディングアシスタントのCLI(コマン...
続きを読む
vibe coding とは?原義と実務用法の違い・AIのコードを受け入れる判定手順

vibe coding とは?原義と実務用法の違い・⁠AIのコードを受け入れる判定手順

vibe coding(バイブコーディング)とは、AIが生成したコードの差分を読まずに受け入れながら...
続きを読む
AIとの協働コーディング入門|プロンプトの書き方で結果が変わる理由

AIとの協働コーディング入門|プロンプトの書き方で結果が変わる理由

AIコーディングにおけるプロンプトの良し悪しとは、文章のうまさではなく、自分が書いた制約が出力に何個...
続きを読む
AI時代に必要なディレクターとは何か|制作もでき判断もできる人だけが実務で残る

AI時代に必要なディレクターとは何か|制作もでき判断もできる人だけが実務で残る

AI時代に起きている「制作と判断の分離」 AIの進化によって、デザインやコードは誰でも作れる時代にな...
続きを読む
主要生成AIを完全比較!テキスト・画像・動画・音楽の使い分けガイド【2026年版】

主要生成AIを完全比較!テキスト・⁠画像・⁠動画・⁠音楽の使い分けガイド【2026年版】

生成AIの使い分けは、「テキスト・画像・動画・音楽の4分野に分け、分野ごとに常用を1つ決めて固定する...
続きを読む