安裝設計スキルから、参考素材の収集、構築プロンプトの作成、スポットライトカーソルアニメーションの実装、段階的なレビューと修正、最終的な微調整まで、この完全ガイドはプログラミング未経験者でも取り組める内容です。本記事はmonokern Xの記事を整理・翻訳したものです。 （前回の要点：Claude Codeが/goalsコマンドを新たに導入：実行と評価を分離し、AIエージェントの怠慢や嘘を防止） （背景補足：実践：7つのエージェントを使ってVibe Codingをエキスパートレベルの開発フローにアップグレードする方法）
本文目次
トグル
エージェントに5,000ドル支払わなければ、こんなに洗練されたポートフォリオサイトは作れないと言われます。
私は2時間で自分のものを作りました。以下がその完全なプロセスです。
これは実際の作業記録であり、汎用的なテンプレートガイドではありません。
私は自分のポートフォリオを例として使っています：実際に使用した参考素材、実際に送信したプロンプト、実際に遭遇して修正したバグ。
プログラミング経験は一切不要です。
デフォルトでは、Claudeのデザイン出力は平凡です。同じフォント、同じタイポグラフィ、同じフラットな外観。2つのスキルでこの問題を解決できます。
これをClaude Codeに貼り付けてください：
Install this skill: github.com/anthropics/skills/tree/main/frontend-design
プロンプトが表示されたら変更を許可し、グローバルにインストールします。
Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max
モードセレクターをAutoモードに切り替えてください。そうすれば、Claudeは各ステップで許可を求めなくなります。
理想のサイトを頭の中で説明するのではなく、Claudeに実際のイメージを見せましょう。
私のポートフォリオは、Awwwardsの「Il Capo Production」を主な参考にしました。
awwwards.com/sites/il-capo-production
あのダークで映画のようなスタイルがまさに私の求めていたものです。
以下が私の実際の使い方です：
ページ全体をキャプチャして「これを作って」とは言わず、気に入った部分をセクションごとに抽出しました：
ポートフォリオページ（全作品を一覧表示するページ）については、参考サイトに合うレイアウトがありませんでした。そこでPinterestでスタイルの似た別のレイアウトを見つけ、それをスクリーンショットして11.pngと名付けました。
サイトを完全にコピーしようとせず、各サイトから良い部分を借用しましょう。
すべての素材をプロジェクト内の**/referenceフォルダ**に入れてください。
プロンプトの先頭に**/ui-ux-pro-max**を使用してデザインスキルを有効にします。
これが私がポートフォリオに使用した正確なプロンプトです：
コピー用プロンプト：
/ui-ux-pro-max フロントエンド開発者向けのハイエンドな個人ポートフォリオサイトを作成してください。高級感があり、モダンで技術的な印象を与え、 どのデバイスでもスムーズに動作するエレガントなアニメーションを備えたものにしてください。 referenceフォルダ内のデザイン参考資料を使用してください：1.pngはヒーローセクション、2.pngはヒーロー直下のセクション （動画＋タイトル/説明形式で作品を表示）、6.pngはフッター/サイト下部、7.pngは全作品を一覧表示する ポートフォリオページ、11.pngはポートフォリオから作品をクリックしたときの単一プロジェクトページのサンプル、12.pngはローディング画面です。 ヒーローセクションの中央には、me.pngを使用して私の写真を配置してください。 すべての作品/プロジェクト画像のプレースホルダーにはexample.pngを使用してください。 構築を開始する前に、明確にする必要がある質問があれば何でも聞いてください。
最後の行が鍵です Claudeはスタイル、フォント、レイアウト、アニメーションの程度、コンテンツのトーンについて4～6個の質問をして停止します。あなたの回答がサイト全体の基礎になります。
回答は具体的にしてください。ここで正確であればあるほど、後でのやり取りが少なくなります。
あなたが回答した後、Claudeは約5分間計画を立て、さらに約10分間で構築します。最初の出力でもかなりしっかりしたものになります。
暗いヒーローセクションの中央に普通の写真を置くのは退屈です。 ユーザーがマウスを動かしたときに何かが起こらなければなりません。
私は自分のポートフォリオのためにスポットライトのアイデアを思いつきました：
このコンセプトをClaudeに説明し、実装を依頼しました：
「ヒーローセクションに、懐中電灯/スポットライトカーソル効果を実装したいです。暗い背景。私の写真はデフォルトでほとんど見えません。カーソルがセクション上を移動すると、それがスポットライトとして機能し、カーソルに追従するソフトエッジの円形マスクを通して、写真の下にある明るく暖色系のバージョンを表示します。半径100～150px、柔らかいぼかしエッジ。この効果を実装してください。」
Claudeは一度で実装しました。効果は説明通りで、ユーザーがカーソルを動かすと、指した場所の写真が明るくなります。
正式な品質チェックを行う前に、自分でサイトをスクロールして確認し、違和感のある箇所をすべてメモします。
最初の構築後の私のリスト：
すべての問題をメモし、一度にまとめて送信します：
「以下は修正が必要な問題です。すべて対応してください：\ [問題1の説明]\ [問題2の説明]\ [問題3の説明]」
「以下は修正が必要な問題です。すべて対応してください：\
問題を一度にすべて送信することが非常に重要です。
明らかなバグを修正した後、構造化された品質チェックを行います。これをClaudeに貼り付けてください：
「以下の基準に照らしてこのサイトをレビューし、改善が必要な箇所を正直に指摘してください： — タイポグラフィ（Interのような過度に使われるAIフォントを使用していませんか？） — カラー（カラーパレットは抑制されているか、乱雑ですか？） — 階層構造（テキストサイズは視線を正しく誘導できていますか？） — アニメーション（スムーズで意図的ですか、それとも跳ねたりランダムですか？） — モバイル版（本当にモバイル向けにデザインされていますか、それとも単にデスクトップ版を縮小しただけですか？） — コピー（抑制されて具体的ですか、それとも汎用的なAIの埋め草ですか？）」
Claudeは各項目をスコアリングします。一通り読んだ後、各項目に同意するかどうかを決め、修正したい問題を1つのプロンプトにまとめて一度に送信します。
同意しない項目は修正させないでください。あなたの方が自分のサイトをよく理解しています。
最終的にはしっかりしたサイトができあがります。完璧ではありませんが、十分に良いものです。
最初の構築では、すべてが完全に正しく動作するわけではありません。モバイル版をもう一度確認する必要があるかもしれませんし、あるアニメーションが少しずれているかもしれません。それは普通のことです。
ここから反復を始めてください。毎日1つ改善点を見つけて修正していきましょう。
144.08K 人気度
1.36M 人気度
67.38K 人気度
574.8K 人気度
3.83M 人気度
Claude Codeを使って1万ドル級のウェブサイトとアニメーション効果を作り出す方法
安裝設計スキルから、参考素材の収集、構築プロンプトの作成、スポットライトカーソルアニメーションの実装、段階的なレビューと修正、最終的な微調整まで、この完全ガイドはプログラミング未経験者でも取り組める内容です。本記事はmonokern Xの記事を整理・翻訳したものです。
（前回の要点：Claude Codeが/goalsコマンドを新たに導入：実行と評価を分離し、AIエージェントの怠慢や嘘を防止）
（背景補足：実践：7つのエージェントを使ってVibe Codingをエキスパートレベルの開発フローにアップグレードする方法）
本文目次
トグル
エージェントに5,000ドル支払わなければ、こんなに洗練されたポートフォリオサイトは作れないと言われます。
私は2時間で自分のものを作りました。以下がその完全なプロセスです。
これは実際の作業記録であり、汎用的なテンプレートガイドではありません。
私は自分のポートフォリオを例として使っています：実際に使用した参考素材、実際に送信したプロンプト、実際に遭遇して修正したバグ。
プログラミング経験は一切不要です。
ステップ1：デザインスキルのインストール
デフォルトでは、Claudeのデザイン出力は平凡です。同じフォント、同じタイポグラフィ、同じフラットな外観。2つのスキルでこの問題を解決できます。
これをClaude Codeに貼り付けてください：
プロンプトが表示されたら変更を許可し、グローバルにインストールします。
これをClaude Codeに貼り付けてください：
モードセレクターをAutoモードに切り替えてください。そうすれば、Claudeは各ステップで許可を求めなくなります。
ステップ2：参考素材の収集
理想のサイトを頭の中で説明するのではなく、Claudeに実際のイメージを見せましょう。
私のポートフォリオは、Awwwardsの「Il Capo Production」を主な参考にしました。
あのダークで映画のようなスタイルがまさに私の求めていたものです。
以下が私の実際の使い方です：
ページ全体をキャプチャして「これを作って」とは言わず、気に入った部分をセクションごとに抽出しました：
ポートフォリオページ（全作品を一覧表示するページ）については、参考サイトに合うレイアウトがありませんでした。そこでPinterestでスタイルの似た別のレイアウトを見つけ、それをスクリーンショットして11.pngと名付けました。
サイトを完全にコピーしようとせず、各サイトから良い部分を借用しましょう。
すべての素材をプロジェクト内の**/referenceフォルダ**に入れてください。
ステップ3：構築プロンプトの作成
プロンプトの先頭に**/ui-ux-pro-max**を使用してデザインスキルを有効にします。
これが私がポートフォリオに使用した正確なプロンプトです：
コピー用プロンプト：
最後の行が鍵です
Claudeはスタイル、フォント、レイアウト、アニメーションの程度、コンテンツのトーンについて4～6個の質問をして停止します。あなたの回答がサイト全体の基礎になります。
回答は具体的にしてください。ここで正確であればあるほど、後でのやり取りが少なくなります。
あなたが回答した後、Claudeは約5分間計画を立て、さらに約10分間で構築します。最初の出力でもかなりしっかりしたものになります。
ステップ4：ヒーローセクションのアニメーション
暗いヒーローセクションの中央に普通の写真を置くのは退屈です。
ユーザーがマウスを動かしたときに何かが起こらなければなりません。
私は自分のポートフォリオのためにスポットライトのアイデアを思いつきました：
このコンセプトをClaudeに説明し、実装を依頼しました：
Claudeは一度で実装しました。効果は説明通りで、ユーザーがカーソルを動かすと、指した場所の写真が明るくなります。
ステップ5：レビューと修正
正式な品質チェックを行う前に、自分でサイトをスクロールして確認し、違和感のある箇所をすべてメモします。
最初の構築後の私のリスト：
すべての問題をメモし、一度にまとめて送信します：
問題を一度にすべて送信することが非常に重要です。
ステップ6：微調整と磨き上げ
明らかなバグを修正した後、構造化された品質チェックを行います。これをClaudeに貼り付けてください：
Claudeは各項目をスコアリングします。一通り読んだ後、各項目に同意するかどうかを決め、修正したい問題を1つのプロンプトにまとめて一度に送信します。
同意しない項目は修正させないでください。あなたの方が自分のサイトをよく理解しています。
結果
最終的にはしっかりしたサイトができあがります。完璧ではありませんが、十分に良いものです。
最初の構築では、すべてが完全に正しく動作するわけではありません。モバイル版をもう一度確認する必要があるかもしれませんし、あるアニメーションが少しずれているかもしれません。それは普通のことです。
ここから反復を始めてください。毎日1つ改善点を見つけて修正していきましょう。