Claude Artifacts で作るランディングページの位置づけ

Claude Artifacts は、Claude との会話から独立したページを書き出し、専用の URL で共有できる仕組みです。公式のヘルプは「Claude は、まとまった独立した内容を、会話の本流とは別の専用の枠であなたと共有できます」と説明しています。書き出せる中身の中で、ブランドチームが日常でいちばん使うのが 1 枚の Web ページ、つまりランディングページです。

対応プランは Free、Pro、Max、Team、Enterprise の全プランで、Web、デスクトップ、モバイルのどこからでも扱えます。2026 年 7 月 13 日の更新で、公開共有が全プランに開放されました。Free の利用者でも、書き出した 1 枚 LP に公開の URL を発行して、社外の相手に URL 一本で見せられるようになりました。

1 枚 LP の使いどころは、キャンペーンの特設ページ、新商品の案内、イベントの申込前ページ、社内の告知ページ、代理店に向けた説明の共通の下地など幅広い範囲に及びます。Web 制作会社にいきなり発注する前に、方向性を揃えるための共通の下地として使う場面が、いちばん相性が良いです。

1 枚 LP 制作の四段 workflow

Claude Artifacts で 1 枚 LP を作る流れは、ブリーフ、原稿、レイアウト、書き出しの四段に整理できます。順にみていきます。

一段目のブリーフは、Claude に何を作らせるかを言葉にする工程です。用途、読み手、目的の行動、ブランドの色と書体、既存の資産のトーンを、短い文で並べて渡します。この一段目の中身が薄いと、書き出しの一発目の質が上がりません。

二段目の原稿は、書き出された 1 枚 LP の中の文言を整える工程です。見出し、リード、本文、ボタンの上の一文、脚注の順に、目に見える要素の名前で Claude に直しを頼みます。

三段目のレイアウトは、色、余白、要素の並び、写真の位置、行間を整える工程です。ここも、目に見える要素の名前で伝えると速いです。「三つ目の見出しの下の余白を一段広く、写真は横並びから縦並びに」といった伝え方が向きます。

四段目の書き出しは、公開の URL の発行と、外部への共有の工程です。パネル右上の共有の操作から公開すると、URL が発行され、URL を知っている相手が Claude のアカウントなしで開けます。

この四段は、順に進むというより、二段目と三段目を何度か往復してから四段目に進む、という進み方が自然です。

ブリーフの書き方 - Claude に渡す七つの要素

ブリーフに載せる要素は、七つに整理できます。順に、用途、読み手、目的の行動、既存の資産、ブランドの基準、避けたい表現、参考の URL です。

用途は、キャンペーンの特設ページなのか、社内の告知ページなのか、代理店に説明を渡すためのものなのかを、一文で書きます。読み手は、想定する属性、事前の知識の量、この LP に到達した経路の三点で書きます。目的の行動は、この LP を読んだ相手にとってほしい行動を、動詞で書きます。「申込フォームに進む」「資料を請求する」「上長に転送する」といった書き方です。

既存の資産は、これから作る 1 枚 LP の兄弟にあたる、社内の別の LP、既存のパンフレット、商品ページの URL を渡します。ブランドの基準は、色の 16 進コード、書体の名前、写真の質感の三点で書きます。避けたい表現は、業界の中で使い古された言い回し、社内で禁じている用語、直訳調のフレーズを列挙します。参考の URL は、方向性が近い他社の LP を三本前後で並べます。

この七つのブリーフを、書き出しの依頼の前にまとめて Claude に渡します。渡し方は、箇条書きでも段落でも構いません。「以下のブリーフに沿って、1 枚のランディングページの初稿を書き出してください」と続ければ、初稿の下書きが右側のパネルに開きます。

原稿とレイアウトの往復 - 直しの伝え方

書き出された 1 枚 LP は、そのままでは完成品になりません。原稿とレイアウトの往復で仕上げます。往復のうちどちらが先か迷ったら、原稿を先に固め、レイアウトを後に整える順が向きます。原稿の骨が動くと、レイアウトも動き直しになるためです。

原稿の直しは、要素の位置で指定します。「ヒーローのキャッチを短く、一行に収める」「三つの並列の見出しの表現を、動詞で揃える」「最後のボタンの上の一文を、読み手が背中を押される温度で書き直す」といった書き方が伝わります。文字数の目安を添えると、初回で仕上がる確度が上がります。

レイアウトの直しは、目に見える距離と並びで指定します。「二つ目のセクションの上の余白を、いまの一段分広く」「三つ目のセクションの写真を、いまの位置から本文の下に移し、幅を本文と同じに」といった書き方です。色の指定は 16 進コード、書体の指定は書体名で伝えます。

この往復を、初稿から数えて三回から五回のあいだで区切ります。区切らずに直しを続けると、初稿の温度を失って、平板な出来上がりに向かいます。三回で切りがつかないときは、初稿からやり直す判断が向きます。

Claude Skills との組み合わせで、書き出しの精度を上げる

Claude Skills を組織で導入している場合、1 枚 LP の書き出しに Skills を掛けて、初稿の温度を安定させられます。ブランドチームの Skills には、書体の指定、色の 16 進コード、写真のキャプションの語尾、キャッチの温度感の指針を書きます。Skills を掛けた状態で Artifacts に書き出させると、書き出しの一発目の完成度が上がります。

Skills の中身は、一つの LP のためだけに作るのではなく、ブランド全体で使い回せる粒度で作ります。この点は、姉妹記事の Claude Skills ブランドガイドライン運用 で詳しく扱っています。

公開共有とチームレビュー - URL 一本の受け渡し

公開の URL は、パネル右上の共有の操作から発行します。全プランで発行できるようになったのが、2026 年 7 月 13 日の更新です。Team と Enterprise の組織では、外部共有の可否を組織の管理者が決めます。既定は外部共有が無効の状態で、組織の中だけで見せる運用が最初の入口です。

外部共有を有効にした場合、URL を知っている相手が Claude のアカウントなしで開けます。この、閲覧のためのアカウントが要らない、という点が、社外レビューの敷居を下げます。代理店、印刷会社、Web 制作会社に渡す下地の共有に向きます。

社内レビューは、Team と Enterprise の中で公開の URL を発行して、Slack や社内の掲示に貼るのが基本の流れです。閲覧の履歴、コメントの往復、承認の記録が要るときは、社内の別のツールと組み合わせます。Claude Artifacts 単体は、あくまで下地の共有と、生きた更新の反映を担う位置づけで扱うのが向いています。

更新運用 - 同じ URL で中身を差し替える

Claude Artifacts の 1 枚 LP は、公開後に中身を差し替えても、URL を維持できます。差し替えた瞬間、URL を開いている相手のブラウザに、更新がその場で反映されます。この動きは、Anthropic の公式ブログが「Claude Code は作業の途中経過を成果物として取り込み、Claude Code の仕事を、生きた、共有できる見た目のあるページに変えます」と説明する Claude Code Artifacts と、同じ設計思想の延長にあります。

キャンペーンの初日と、初日を過ぎたあとで、LP の見せ方を差し替える場面に向きます。URL を替えずに中身を差し替えられるので、社内の掲示板や、外部への案内メールに載せた URL を貼り替える手間が発生しません。

差し替えの前には、直前の版のスクリーンショットを社内で保管しておきます。生きた更新の裏返しで、差し替えの前の状態は URL 側には残らないためです。この点は、姉妹記事の Claude Artifacts のチーム共有と workflow で扱っています。

既存の LP から作り直す入口 - 三つの持ち込み方

既存の LP を持っていて、Claude Artifacts で作り直すときの入口は、三つの持ち込み方に整理できます。順に、URL、画面のスクリーンショット、原稿のテキストです。

URL の持ち込みは、既存の LP の URL を Claude に貼り付け、「この LP のトーンを維持したまま、次の三つの要素を差し替えて、1 枚 LP に組み直してください」と依頼します。既存の温度が保たれた状態で書き出されます。

スクリーンショットの持ち込みは、既存の LP の画面を PNG や JPG で Claude に渡し、要素の並びを言葉で説明します。URL を渡せない事情がある社内資産の作り直しに向きます。

原稿のテキストの持ち込みは、既存の LP の文言を段落ごとに Claude に渡し、「この文言を骨に、1 枚 LP のレイアウトに乗せてください」と依頼します。文言の主導権を編集者側に置いたまま、レイアウトだけを Claude に任せる進め方です。

印刷や外部素材化の出口 - PDF と PowerPoint への書き出し

書き出された 1 枚 LP は、Web の URL のまま公開する以外に、PDF や PowerPoint に書き出して外部の資料として渡す出口も持ちます。PDF は、印刷用の下地として使えます。PowerPoint は、社内の説明資料や、外部の関係者向けの資料として使えます。

PowerPoint への書き出しには、Claude Skills の PowerPoint 内蔵 Skill を併用します。Claude と PowerPoint の連携は、姉妹記事の Claude Design のブランド視覚ガイド で扱っています。印刷向けの下地は、姉妹記事の Recraft と Claude Artifacts のブランドブック で扱っています。

エンジニアの手を借りずに済む範囲と、借りるべき範囲

Claude Artifacts で作った 1 枚 LP は、URL を発行してそのまま公開する範囲では、エンジニアの手を借りずに完結します。既存の Web の資産と切り離した、単発のキャンペーンページの下地としての運用に向きます。

一方で、独自ドメインに載せる場面、既存の Web サイトの中に組み込む場面、決済や個人情報の入力を含む場面では、エンジニアや Web 制作会社の手を借ります。Claude Artifacts の URL は Claude の側で管理される URL で、独自ドメインへの割り当ては別の実装が要ります。個人情報の取り扱いも、社内の別のフォームの仕組みと組み合わせる前提です。

この線引きが、ブランドチーム側の運用の落としどころになります。下地の作成と、レビューまでの共有は Claude Artifacts、独自ドメインでの本番公開と、個人情報の入力は別の実装、と切り分ける進め方が向きます。この線引きの詳細は、hub 記事の Claude Artifacts ブランドチーム活用ガイド で扱っています。

Claude Code Artifacts との使い分け

2026 年 6 月 18 日、Anthropic は Claude Code の中から成果物を書き出す Claude Code Artifacts を、Team と Enterprise 向けのベータで公開しました。1 枚 LP を作るときに Claude.ai と Claude Code のどちらから入るのが向くかは、社内の役割で決まります。

ブランドチームや編集の側から入る場面は、Claude.ai から入るのが向きます。会話の中で 1 枚 LP を書き出させ、原稿とレイアウトを往復で仕上げる、この流れが Claude.ai で完結します。

技術の側から入る場面は、Claude Code から入るのが向きます。既存の Web の資産と連携させる、コードのリポジトリに載せて版管理する、外部の情報を取りに行く成果物にする、といった用途で、Claude Code Artifacts の強みが出ます。Claude Code から書き出した成果物も、更新のたびに同じ URL の中身が置き換わり、開いたままの相手のブラウザに反映される動きは同じです。この使い分けは、姉妹記事の Claude Code でブランドコンテンツを量産する で扱っています。

FAQ

Q1. Claude Artifacts でランディングページを作るのに、コードの知識は必要ですか

A. 必要ありません。Claude.ai の会話の中で用途と要素を伝えれば、1 枚 LP が書き出されます。書き出された成果物は、右側のパネル上で目に見える要素の名前で直しを頼めます。ただし、独自ドメインでの本番公開や、決済や個人情報の入力を含む実装には、別の仕組みが要ります。

Q2. Free プランでも公開共有はできますか

A. できます。2026 年 7 月 13 日の更新で、公開共有が全プランに開放されました。Free の利用者でも、書き出した 1 枚 LP に公開の URL を発行し、社外の相手に URL 一本で見せられます。Team と Enterprise の組織では、外部共有の可否を組織の管理者が決める設定になります。

Q3. 既存の LP を Claude Artifacts で作り直すときの入口は何ですか

A. 三つあります。既存の LP の URL を貼り付ける方法、画面のスクリーンショットを渡す方法、原稿の文言を段落単位で渡す方法です。既存のトーンを保ちたい場合は URL、社内資産で URL を渡せない場合はスクリーンショット、文言の主導権を編集者側に残したい場合はテキスト、と使い分けます。

Q4. 更新のたびに URL は変わりますか

A. 変わりません。同じ成果物を更新して公開すると、同じ URL の中身が置き換わります。開いたままの相手のブラウザに、その場で更新が届きます。差し替えの前の版は URL 側には残らないため、直前の状態を残したい場合は社内でスクリーンショットを保管します。

Q5. Claude Artifacts の LP と、Web 制作会社に発注する LP の使い分けは

A. Claude Artifacts で作る 1 枚 LP は、下地の作成と、外部との方向合わせの共有に向きます。Web 制作会社への発注は、独自ドメインでの本番公開、決済や個人情報の入力、既存の Web サイトへの組み込みが必要な場面に向きます。この二つを切り分けて回すのが、実務での落としどころです。

情報源