メインコンテンツまでスキップ

Claudeで美しく最先端なサイトを高速に公開する

中級

一行のアイデアから、公開済みで本当に見栄えのよいサイトまで、ひと続きの作業で到達できます。コツはプロンプトを増やすことではなく、適切なプロンプトの足場と、速いスタック、そして引き締まった仕上げのループを組み合わせることです。このページがそのレシピです。

What you'll learn
  • 適切なサーフェスを選ぶ：即席アプリならArtifacts、本物のデプロイ可能なリポジトリならClaude Code
  • Anthropicのフロントエンド美学システムプロンプトで、デフォルトの「AIスロップ」を打ち破る
  • 下のStepsを使って、アイデアからデプロイまでのワークフローを回す
  • シニアプロダクトデザイナーがブリーフィングしたかのように読める、コピペ用のビルド／リファインのプロンプトを盗む
  • タイポグラフィ、モーション、レスポンシブを磨き上げ、Vercel・Netlify・GitHub Pagesにデプロイする

まずサーフェスを選ぶ​

最終的に何が欲しいかによって、2つのまったく異なる高速ルートがあります。

  • Claude Artifacts — アプリを説明すると、Claudeがチャットの中にライブで自己完結したReact/HTMLのアーティファクトをレンダリングします。セットアップ不要、共有可能なリンク付きで、プロトタイプ、社内ツール、計算機、ランディングページのモックアップに最適です。デフォルトではアーティファクトは自己完結したロジックで動作します。MCP経由で外部サービスに到達することはできますが、あなたが所有するリポジトリではありません。
  • Claude Code + フレームワーク — Claudeがあなたのマシン上で本物のコードベース（Next.js / Astro / Tailwind / shadcn/ui）を並行してスキャフォールドし編集します。あなたはそれをコミットしてデプロイします。所有し、拡張し、出荷したいときはこのルートです。
Pro tip
  • まずArtifactで60秒で見た目をプロトタイプし、それからClaude Codeに本物のNext.js + Tailwindリポジトリとして作り直すよう伝えましょう。即座のフィードバックと、デプロイ可能なコードベースの両方が手に入ります。
  • Claude Design（Anthropic Labs、リサーチプレビュー）は、ビジュアルキャンバスと永続的なデザインシステム、そしてClaude Codeへのハンドオフを追加します — デザインツールの中で作業する人に有用です。

優れたものと平凡なものを分ける唯一のこと​

デフォルトのままだと、Claudeはコミュニティが**「AIスロップ」**と呼ぶものに収束します。Interフォント、白地に紫のグラデーション、均等に角丸の3枚のカード。Anthropic自身のフロントエンド美学クックブックは、その理由をはっきり述べています。そして解決策は、気にかける次元と避けるべきデフォルトを明示的に名指しすることです。

Anti-slopチートシート
Enter キーまたはスペースキーでカードを裏返します。左右の矢印キーでカードを移動できます。用語を表示しました。
1 / 4

最もレバレッジの効く一手は、ビルドの冒頭にAnthropicの<frontend_aesthetics>ブロック（または自前のDESIGN.md）を貼り付けることです。そうすればモデルは、CSSを1行書く前から何を避けるべきか分かります。

Anti-slopシステムブロック（UIビルドの前に貼り付け）

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

アイデアからデプロイ済みサイトへ​

Guided walkthrough1 of 6
  1. 1つのメッセージでClaudeに伝える：サイトが何か、セクション、オーディエンス、そして名前のついた1つの美学の方向性（例：『温かみのあるエディトリアル、Notionと印刷雑誌の中間のような』）。曖昧なブリーフは曖昧なサイトを生む。

シニアデザイナーがブリーフィングしたように読めるビルドプロンプト​

具体的なプロフェッショナルの役割で書き出すと、出力品質が測定可能なほど上がり、ばらつきが減ります。美学、スタック、状態について具体的にしましょう。

ワンショットビルド：本物のNext.js + Tailwind + shadcnサイト

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

即席Artifactプロトタイプ（チャット、セットアップなし）

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

リファイン：平凡な雰囲気を消す

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

高級に見せる仕上げ​

Pro tip
  • タイポグラフィは最も安上がりなアップグレード：特徴的なGoogle Fontと、ディスプレイと本文の間の3倍以上のサイズジャンプで、即座に『デザインされている』と読める。
  • モーション：10個の小さなホバーよりも、1つの素晴らしい瞬間（animation-delayを使った構成されたロード）に投資する。
  • レスポンシブ：モバイル、長文、空、ローディング、エラーの各状態を扱うよう、Claudeに明示的に依頼する — デフォルトではこれらを飛ばす。
  • 奥行き：重ねたCSSグラデーションや微妙なグレイン／パターンは、毎回フラットな背景に勝る。
  • Claudeは自分の出力を見られないことを忘れずに — スクリーンショットを貼るか、何が悪いか説明して、リファインのループを収束させる。
Watch out
  • 『美しくして』だけでは力不足 — それはデフォルトのプロンプト版にあたる。代わりに美学、フォントの方針、避けるべきデフォルトを名指しする。
  • 本物のサイトを1回の巨大なプロンプトでまとめて作らせない。DESIGN.mdを使ったセクションごとのほうが制御しやすく、トークンの使い方も良い。
  • AIが生成したマーケティングの主張、統計、ストックコピーは草稿として扱う — 公開する前に検証する。

数分でデプロイ​

  • Vercel — Next.jsに最適。GitHubリポジトリを接続すれば、プッシュごとに自動ビルド・デプロイされ、ブランチごとにプレビューURLが付く。
  • Netlify — フレームワーク非依存で、同じgitプッシュでデプロイするフロー、寛大な静的ホスティング。
  • GitHub Pages — リポジトリから直接の無料静的ホスティング。静的エクスポート（Next.jsのoutput: "export"、またはAstroビルド）と組み合わせれば、コストゼロのライブサイトに。（このサイト自体がこの方法で公開されています。）

デプロイの配線

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

確認しよう​

確認しよう

0/4
  1. ゼロセットアップで60秒以内に、ライブで共有可能なプロトタイプが欲しい。どのサーフェス？
  2. Anthropicのフロントエンド美学ガイダンスによれば、避けるべき典型的な『AIスロップ』のデフォルトはどれ？
  3. 多数のプロンプト／セッションをまたいでサイトの見た目を一貫させる、推奨される方法は？
  4. 最大の喜びのために、Anthropicはモーション予算をどこに使うことを勧めている？
Key takeaways
  • サーフェスを選ぶ：即席プロトタイプにはArtifacts、所有可能でデプロイ可能なサイトにはClaude Code + フレームワーク。
  • 美学、フォントの方針、避けるべきデフォルトを名指しして『AIスロップ』を打ち破る — Anthropicのfrontend_aestheticsブロックを貼り付ける。
  • コードに対するCLAUDE.mdと同じように、見た目をセッション越しに一貫させるためDESIGN.mdを永続化する。
  • シニアデザイナーとして役割プロンプトを与え、セクションごとに作り、飛ばされがちな状態（モバイル、ローディング、空、エラー）を要求する。
  • モーション予算は構成された1回のロードに使う。VercelやNetlifyへのgitプッシュ、またはGitHub Pagesへの静的エクスポートでデプロイする。

ソースと参考資料​