AIエージェント活用事例
Views —

AIエージェント活用事例

今日の新着

44すべて 189件

全189件中 1〜20件

販促・制作

ポートフォリオサイトをAIコーディングエージェントで制作する

AIコーディングエージェントを使って、HTML、CSS、JSベースのポートフォリオサイトを制作する過程を紹介しています。

Claude Code

使い方

  1. サイトに必要な機能とデザイン要素を整理します。
  2. HTML、CSS、JavaScriptで基本構造とスタイルを設計します。
  3. AIコーディングエージェント（Claude Code）にルールファイルと意思決定ログを提供し、段階ごとにコードレビューとコミットを進めます。
  4. フォントやSVGグラフィックなど必要なリソースを自分でホスティングします。
  5. アクセシビリティ、パフォーマンス、SEO基準をLighthouseやWCAGツールでチェックします。
  6. Vercelにサイトをデプロイし、リンクが正しく動作するよう設定ファイル（vercel.json）を追加します。

結果

著者によると、AIコーディングエージェントの助けを借りて、HTML、CSS、JSのみで動作するポートフォリオサイトを完成させたそうです。外部フレームワークやビルドツールを使わず、コードレビューとコミットの過程を経て、希望する機能やデザインを実現できたといいます。アクセシビリティ、パフォーマンス、SEOのスコアも高水準だったと報告されています。

補足

著者はClaude Codeをコーディングエージェントとして使用したと明かしていますが、実際のコード生成・修正過程の詳細な例は公開されていません。クライアント名などの機微な情報はすべて削除したとのことです。n8nワークフローなど自動化の事例は別フォルダにまとめられていますが、本記事ではサイト制作に焦点を当てています。

出典

GrayTupas/gray-tupas-portfolio (GitHub) 原文 ↗

プロンプト例 · Claude Code

目標: AIコーディングエージェントを活用し、HTML、CSS、JavaScriptのみで動作するポートフォリオサイトを制作し、アクセシビリティ・パフォーマンス・SEO基準を満たす成果物を完成させてください。

入力および環境:
- サイトに含める主な機能、デザイン要素、ページ構成（例：ホーム、制作事例など）
- 自分でホスティングするフォント、SVGグラフィックなどのリソースファイル
- コードレビューやコミット過程を記録するルールファイルおよび意思決定ログ
- デプロイ環境：Vercelまたはその他の静的ファイルサーバー

実装および設定手順:
1. サイトに必要な機能とデザイン要素を整理してください。
2. HTML、CSS、JavaScriptで基本構造とスタイルを設計してください。
3. Claude CodeなどAIコーディングエージェントにルールファイルと意思決定ログを提供し、各段階でコードレビューとコミットを進めてください。
4. フォントやSVGグラフィックなど必要なリソースを自分でホスティングしてください。外部リクエストやトラッキングスクリプトは使用しないでください。
5. アクセシビリティ（例：WCAG AA準拠、キーボードナビゲーション、スキップリンク）、パフォーマンス、SEO基準をLighthouseやWCAGツールでチェックしてください。
6. Vercelにサイトをデプロイし、リンクが正しく動作するよう設定ファイル（vercel.json）を追加してください。

成果物:
- HTML、CSS、JSファイルおよびリソースを含む完成したポートフォリオサイト
- コードレビューおよびコミットログ、ルールファイル
- LighthouseおよびWCAGチェック結果

検証条件:
- 外部フレームワークやビルドツールを使わずに動作すること
- アクセシビリティ、パフォーマンス、SEOスコアが90点以上であること
- すべてのテキスト色の組み合わせがWCAG AAコントラスト基準を満たすこと
- キーボードでスクリーンショットビューアなど主要機能を利用できること