Claude Opus 5で“リッチなサイト”を作る手順が話題｜4ツール連携と「見せて伝える」指示のコツ

2026年7月27日、AI活用を発信する「すぐる」さん（@SuguruKun_ai）が投稿した「Claude Opus 5でかなりリッチなサイトを作る解説が海外で話題」というポストが反響を集めています。

紹介されているのは、AIモデル「Claude Opus 5」を軸に、4つのツールを組み合わせて完成度の高いWebサイトを作る手順。デザイン探しから画像素材づくり、コード実装、修正指示までの流れが具体的にまとまっており、「AIでここまで作り込めるのか」と話題になりました。

「AIにサイトを作らせる」という話は珍しくなくなりましたが、今回の投稿が刺さったのはツールの役割分担と、指示の出し方まで具体的に示した点にあります。順番に見ていきましょう。

4つのツールを役割分担させる、という発想

投稿で紹介されているワークフローは、1つのAIに全部任せるのではなく、得意分野ごとにツールを分担させるのが特徴です。投稿によると、使うツールと役割は次の4つです。

• Pinterest：参考にするデザイン探し。投稿では「real estate award winning website（受賞歴のある不動産サイト）」で検索し、良い1枚を見つける使い方が紹介されています
• Higgsfield：ヒーロー画像（トップの主役画像）の生成と加工。投稿ではGPT Image 2とNano Banana 2という画像生成モデルを使い分けるとされています
• Figma：デザインのモック（下書き）を作り、スクリーンショットを撮る。これをAIへの指示用の素材にします
• Claude Opus 5：サイト本体の実装（コード化）を担当。Tailwind（CSSの仕組み）とパララックス（奥行きのある動き）を使った作りにするとされています

そもそも「Claude Opus 5」とは？

Claude Opus 5は、AI開発企業Anthropicが2026年7月24日に公開した最新のAIモデルです。公式発表によると、有料プランとAPIで利用でき、コード生成や複雑な指示への対応力が強化されています。今回話題になったサイト制作は、このコーディング能力の高さを活かした活用例にあたります。

最大の肝は「言葉で説明しない」指示

投稿者が「肝」と強調しているのが、④の修正指示のやり方です。「ここをこう直して」と言葉で細かく説明するのではなく、Figmaで作った理想のモックのスクリーンショットを渡して、それに近づけてもらうという進め方です。

デザインの微妙なニュアンスは、言葉にするより見せたほうが速く正確に伝わる——。この「視覚で指示する」考え方は、サイト制作に限らず幅広く応用できるポイントです。

投稿内容を整理すると

なお、このワークフローで使う画像生成やデザインツールには、それぞれ別の利用料が発生する場合があります。まずは手持ちのツールで一部だけ試してみる、という始め方が現実的です。

業務でどう使える？どう変わる？

「見た目の完成度が求められるページを、少人数で用意する」という業務ほど、この発想の恩恵が大きくなります。職種別に見てみましょう。

職種別の活用アイデア

• Web制作・デザイン：クライアント提案用のLPやトップページのたたき台づくりに。ゼロから組むより、AIが作った下地を微調整する進め方で初動を速められる
• マーケティング：キャンペーンごとの特設ページやLPを、同じ型で複数パターン試作。反応を見てから作り込む「まず出す」運用がしやすくなる
• 広報・コーポレート：採用ページやサービス紹介ページの構成・見た目の下書きに。デザイナーへの発注前に、イメージを固める用途で使える
• 個人事業主・小規模チーム：外注していたサイト制作を手元で試作。まず自分の理想形を形にして、必要な部分だけプロに依頼する判断がしやすい

この話題から学べること

今回のワークフローで一番参考になるのは、「1つのAIに全部任せる」のではなく、得意なツールに役割を振り分けるという設計です。画像は画像生成AI、デザイン下書きはFigma、実装はClaude——と分けることで、それぞれの精度が上がります。

そして「言葉で説明しづらいことは、見せて伝える」という発想。これは資料作成やスライドデザインなど、見た目が関わる仕事全般に応用できる実践的なコツです。

よくある質問

まとめ：AIは「役割分担」でこそ真価を発揮する

今回のワークフローが話題になったのは、Claude Opus 5の性能そのものだけでなく、「どのツールに何を任せ、どう指示を出すか」という設計まで具体的に示した点にあります。とくに「言葉で説明せず、見せて伝える」という指示の出し方は、多くの業務に応用が利く実践的なヒントです。

今回の内容は、すぐるさん（@SuguruKun_ai）の投稿を参考にさせていただきました。ツールの役割分担と指示の出し方を、わかりやすく整理して紹介されたポストです。

「まず自分がAIを業務で使える側になりたい」という方には、デイトラのAI業務活用コースで、プロンプトの基本からMCP・AIエージェントまで体系的に学べます。