Claude Artifacts でポートフォリオを作る位置づけ
Claude Artifacts は、Claude との会話から独立したページを書き出し、専用の URL で共有できる仕組みです。公式のヘルプは「Claude は、まとまった独立した内容を、会話の本流とは別の専用の枠であなたと共有できます」と説明しています。書き出せる中身は、Web ページ、対話型の資料、ドキュメント、図表、簡単なアプリまで幅広く、書き出したページはチャットの右側のパネルで直接手直しできます。
対応プランは Free、Pro、Max、Team、Enterprise の全プランです。2026 年 7 月 13 日の更新で、公開共有が全プランに開放されました。Free の利用者でも、書き出したページに公開の URL を発行して、社外の相手に URL 一本で渡せます。ポートフォリオのように、初回の公開まで費用を抑えて出したい制作物と、この開放は相性が良い動きです。
ポートフォリオサイトの用途は幅があります。個人のアーティストが作品を並べる一枚もの、映像作家が案件別に見せる複数ページ、スタジオが所属クリエイターと過去案件を束ねる会社案内の代わりのページ。既存の Web 制作会社に発注する前に、方向性を固めるための下地としても機能します。
ポートフォリオに向く三つの型
Artifacts で作るポートフォリオの型を、三つに整理します。順に、個人の作品集の型、スタジオ紹介の型、案件事例集の型です。
一つめは個人の作品集です。写真、映像、イラスト、グラフィック、UI の作品を、縦にスクロールする一枚のページに並べます。頭にプロフィールと得意領域、下に作品のサムネイルと短い説明、末尾に連絡先を置く並びが基本です。営業活動の前に URL を渡す下地として機能します。
二つめはスタジオ紹介の型です。所属クリエイターの一覧、代表作、得意な領域、依頼から納品までの流れを、複数の見出しに分けて並べます。会社案内の代わりに使うことで、コーポレートサイトを構える前の段階でも、外部への提示が成立します。
三つめは案件事例集の型です。過去の案件を、依頼元、期間、体制、成果物、当時の課題と対応の順で並べます。案件ごとに一枚の別ページとして書き出して、束ねる索引の一枚だけを公開する構成も組めます。企画会議で持ち出す下地としても向きます。
三つの型は排他ではありません。個人の作品集の末尾に案件事例を並べる、スタジオ紹介の中で代表作を掘り下げる、といった混ぜ方も自然に取れます。
ポートフォリオ制作の四段 workflow
制作の流れは、下地、作品、プロフィール、書き出しの四段に整理できます。順にみていきます。
一段目の下地は、ページ全体の骨組みを Claude に書き出させる工程です。用途、読み手、載せる中身、色と書体の基準を短い文で渡し、下書きの 1 ページを出します。この一段目で骨組みが決まると、残りの三段の往復が減ります。
二段目の作品は、書き出された下地に、実際の作品と説明を差し込む工程です。作品の並び順、サムネイルの大きさ、下の説明文の長さを、目に見える要素の話で Claude に伝えて直します。
三段目のプロフィールは、経歴、得意領域、実績、連絡先を整える工程です。読み手が案件を頼む判断で見る場所なので、素直に読める言葉で置きます。
四段目の書き出しは、公開の URL の発行と、共有先への配布の工程です。パネル右上の共有の操作から公開すると URL が発行され、相手は Claude のアカウントなしで開けます。
四段は順に一回で進むというより、二段目と三段目を往復してから四段目に移る、という進み方が自然です。書き出しの後も、更新のたびに同じ URL の中身が置き換わる動きに任せられます。
下地に渡すブリーフ 七つの要素
下地を書き出させる前に、Claude に渡すブリーフを七つの要素で整えます。順に、名義、読み手、目的の行動、載せる作品の種別、ブランドの基準、避けたい表現、参考の URL です。
名義は、個人の氏名か、スタジオの名称かを一文で書きます。個人の場合は活動名も併記します。読み手は、想定する属性、案件を頼む立場、この URL に到達した経路の三点で書きます。プロデューサー、代理店、直接の企業窓口のどれを主に想定するかで、載せる文言が変わります。
目的の行動は、この URL を見た相手にとってほしい行動を、動詞で書きます。「問い合わせフォームに進む」「返信のメールを書く」「上長に転送する」といった具体の動詞にします。載せる作品の種別は、写真、映像、イラスト、UI などの領域と、公開できる本数、掲載の可否の三点で書きます。
ブランドの基準は、色の 16 進コード、書体の名前、写真の質感の三点で書きます。個人でも、基本の色と書体を先に決めておくと、書き出しの一発目の見た目が安定します。避けたい表現は、業界の中で使い古された言い回し、直訳調のフレーズ、他者の受け売りに聞こえる形容を並べます。参考の URL は、方向性が近い他者のポートフォリオを三本前後で挙げます。
七つのブリーフをまとめて Claude に渡し、「以下のブリーフに沿って、ポートフォリオサイトの下地を 1 枚で書き出してください」と続けます。右側のパネルに骨組みの下書きが開きます。
作品ページの整え方
作品を差し込む工程では、サムネイルの見せ方と、下の説明文の書き方の二つが要点です。
サムネイルは、作品ごとに縦横の比率を揃えると、並びの見え方が落ち着きます。写真と映像を混ぜる場合は、映像には冒頭の一枚を静止画として置き、再生の操作を後段に寄せます。作品の点数が多い場合は、領域別に見出しを立て、各領域の中で年月順に並べる形が読みやすい形です。
下の説明文は、案件名、依頼元、期間、体制、担当領域の五点を短く並べます。個人の制作物として出す作品は、依頼元の欄を「個人制作」とします。案件名や依頼元を出せない場合は、業種と規模だけを書く並びにします。
説明文の長さは、一つの作品で 3 行前後に収めます。長い文章を並べると、作品そのものへの視線が逸れます。詳細を伝えたい案件は、後段の案件事例ページに切り出します。
作品の順序は、頭に最新か、頭に代表作を置くかの二択です。読み手が最初の一つだけを開いて判断する前提で組みます。頭の作品を「これが読み手に届いてほしい一つ」として意識して選びます。
プロフィールと連絡先の見せ方
プロフィールの並びは、氏名または名義、活動領域、経歴の要点、得意な仕事、連絡先の五段が基本です。
氏名または名義は、ページの頭に大きく置きます。読み方の揺れがある名義は、ふりがなを添えます。活動領域は、写真、映像、UI、といった大枠と、案件で受けている仕事の粒度を一文で書きます。「ブランドの広告写真と Web の撮影を軸に、映像の絵作りも担う」といった書き方です。
経歴の要点は、これまで組んだ相手、担当した仕事の中心、独立や設立の年月を、時系列で三点前後に絞ります。長い経歴の全文を並べるより、案件を頼む判断につながる要点を選ぶ書き方が向きます。得意な仕事は、依頼を受ける場面で伝えている領域と、直近で伸ばしている領域の二つに分けて書きます。
連絡先は、メールアドレス、返信の目安、対応言語の三点を置きます。返信の目安を書くことで、相手が問い合わせる心理の壁が下がります。案件の相談窓口を別にしている場合は、その旨を短い一文で添えます。
Team と Enterprise の組織で公開する場合は、外部共有の可否が組織の管理者の設定で決まります。個人のアーティストが Free で使う場合は、自分の判断で公開の URL を発行できます。
案件事例ページの組み方
案件事例のページは、依頼元、期間、体制、成果物、当時の課題と対応、公開できる素材の順で並べます。1 件を 1 ページとして書き出す構成が扱いやすい形です。
依頼元は、公開の可否を先に相手と確認します。公開できない場合は、業種、規模、地域の三点で書きます。期間は、着手と納品の年月を並べます。体制は、担当した役割と、組んだ相手の役割を並べます。個人で完結した仕事も、その旨を明記します。
成果物は、書き出す媒体、本数、公開の URL または画像の順で並べます。公開の URL がある案件は、この欄に置きます。当時の課題と対応は、依頼元が抱えていた状況と、対応で決めた方針、実際に動いた工程を、短い段落で書きます。過度な形容を避け、事実の並びで書く方が案件を頼む判断の材料になります。
案件事例のページは、それぞれ個別の URL として書き出し、索引の 1 ページから内部リンクでつなぐ構成にします。索引のページだけを公開しておき、事例のページは相手に URL を直接渡す運用も組めます。事例のページの公開範囲を、案件ごとに調整できる形です。
Artifacts の対話性を使うと、事例のページの中に、対応前後の比較や、選んだ選択肢の理由をたどれる要素を差し込めます。読み手が触れる部分を残すことで、事例が「読み物」から「たどれる資料」に変わります。
公開共有と URL の運用
パネル右上の共有の操作から公開すると、URL が発行され、URL を知っている相手なら Claude のアカウントなしで開けます。公開の可否は、公開する前に一段の判断を挟む段取りにします。
2026 年 7 月末に、公開の URL を発行した一部の共有会話と成果物が、検索の対象として拾われる事例が報じられました。ポートフォリオとして公開するページは、そもそも外部への提示を想定した内容ですが、案件事例に載せる情報の一部(依頼元、金額、社内の判断の細部)は、公開の前に必ず相手の同意を確認します。
公開の URL は、名刺、メール署名、SNS の bio、案件の応答メールに載せる出口として使います。同じ URL の中身を更新するたびに新しい状態が反映される動きなので、URL そのものは長く使えます。
更新の頻度は、新規の作品が入るごとに小さく更新する形と、四半期にまとめて更新する形の二通りに分かれます。個人のアーティストは前者、スタジオは後者の運用が扱いやすい形です。
Team と Enterprise の組織で作った成果物は、既定では組織の中だけで共有されます。外部共有そのものを管理者が制御できます。組織の中で完結する状態を既定にし、外に出すときだけ判断が挟まる設計が扱いやすい形です。
更新運用と版の管理
ポートフォリオは、一度公開して終わりの制作物ではありません。新規の作品、実績の更新、連絡先の変更、案件事例の追加が、日常の運用で続きます。
Artifacts で公開したページは、同じ URL の中身が置き換わる形で更新されます。開いたままの相手のブラウザにも変更が届きます。メールや SNS で告知した URL が、そのまま最新の版を指す形になります。差し替えのたびにファイルが増えて、どれが最新か分からなくなる状態を避けられます。
Pro、Max、Team、Enterprise の各プランでは、永続保存の仕組みで、読み手の操作の履歴を成果物のページの中に残せます。案件の問い合わせに使う入力の記録などを、成果物の中で保持したい場面で使えます。Free では使えません。運用の設計を先に決める必要があります。
Team と Enterprise で組織のメンバーが複数のポートフォリオを扱う場合は、共有した成果物からその成果物を作った会話の添付にも共有相手が触れられます。取り扱いに気をつけたい書類を含む会話から作った成果物は、公開の前に会話を分けておきます。
Claude Skills と Claude Design との使い分け
ポートフォリオを作る場面では、Claude Artifacts、Claude Skills、Claude Design の三つが揃って実務が回ります。役割の分担を整理します。
Claude Skills は、自分の名義、得意領域、案件の書き方、避けたい表現を Claude に読ませておく仕組みです。SKILL.md にまとめておくと、どこから頼んでも同じ判断で書き出しが揃います。ポートフォリオの更新のたびに、基準を伝え直す手間が消えます。
Claude Design は、複数の版面を並べて視覚で仕上げていく編集の場です。作品の並び順、余白、色の細かい調整を、目で見ながら整える工程に向きます。Artifacts で書き出した下地を、最終の見え方に近づけるところで登場します。
Claude Artifacts は、会話の流れからポートフォリオを書き出して、そのまま共有できるひとつのページを作るところです。Skills が「基準を持たせる」、Design が「視覚で仕上げる」、Artifacts が「動くページとして書き出して渡す」。この三分担で覚えておくと、日々の更新で迷わなくなります。
実務の流れは、Skills で自分の基準を読ませ、Artifacts でポートフォリオを書き出し、必要なら Design で最終の見え方を整える。この順で動かすと、公開の速さと質の両方が上がります。
関連の記事として、Claude Artifacts ブランドチーム活用ガイド|UI 試作から資料共有までの実務 がハブに当たります。姉妹の記事に、Claude Artifacts でランディングページを作る実務ガイド、Claude Artifacts でブリーフの入力フォームを作る手順、Claude Artifacts で Recraft のブランドブックを組む、Claude Artifacts でスライド 作成|提案書とピッチと社内資料を URL 一本で配る手順 を並べています。
FAQ
Q1. Claude Artifacts でポートフォリオを作るのに費用はかかりますか
A. Free、Pro、Max、Team、Enterprise の全プランで作れます。2026 年 7 月 13 日の更新で公開共有が全プランに開放されたため、Free の利用者でも公開の URL を発行して、社外の相手に URL 一本で渡せます。読み手の入力の履歴を残す永続保存が要る場合は Pro 以上を選びます。
Q2. ポートフォリオの独自ドメインは使えますか
A. Artifacts の公開の URL は、共有した相手が Claude のアカウントなしで開けますが、独自ドメインでの提供は原則の使い方には含まれません。名刺、メール署名、SNS の bio には Artifacts の URL を直接置く形が基本です。独自ドメインを使う設計にしたい場合は、書き出したページを別の Web ホスティングに移す構成を組みます。
Q3. 作品の点数が多い場合はどう見せますか
A. 領域別に見出しを立て、各領域の中で年月順に並べます。案件事例は 1 件を 1 ページとして別に書き出し、索引の 1 ページからつなぐ構成が扱いやすい形です。頭の一つで判断される前提で、頭に置く作品を意識して選びます。
Q4. 案件事例に載せる依頼元の情報はどこまで書けますか
A. 公開の可否は依頼元と先に確認します。公開できない場合は、業種、規模、地域の三点で書きます。金額や社内の判断の細部を載せる場合は、事前に相手の同意を必ず取ります。事例のページを公開せず、相手に URL を直接渡す運用も組めます。
Q5. Team と Enterprise の組織で個人のポートフォリオを扱えますか
A. 扱えますが、外部共有の可否は組織の管理者の設定で決まります。組織の設定で外部共有を有効にした場合のみ、メンバーが公開の URL を発行できます。組織の中で閉じた運用が既定なので、外に出すときは管理者の承認を通す段取りを組みます。
情報源
- What are artifacts and how do I use them? (Claude Help Center)
- Publish and share artifacts (Claude Help Center)
- Claude Code now supports artifacts (Claude Blog)
- Build with Artifacts (Claude Blog)
- Use live artifacts in Claude Cowork (Claude Help Center)
- Custom visuals in chat and Cowork (Claude Help Center)
- Skills (Claude Product Page)
- Claude.ai / Artifacts overview