artifact-design Skillで、Claude Codeの成果物を「見せられるデザイン」にする

はじめに

artifact-design Skillは、Claude Codeの成果物を、ただ表示できるだけのHTMLから**「人に見せられるデザイン」へ整える組み込みSkill**です。

これからClaude CodeでHTML資料、ダッシュボード、UI案などを作りたい人向けに、artifact-design Skillが何をしているのかを紹介します。

きっかけは、Xで見かけたこちらの投稿でした。

• げま｜個人開発さんの投稿

投稿では、Claude Codeへこう頼んでいました。

artifact-designを使ってkakuアプリのスマホ用UIを複数案考えて比較して

自分はこれを見て、最初は「新しいデザイン生成ツールかな」と思いました。調べてみると、画像を作るツールでも、外からインストールするSkillでもありません。

Claude Codeの中で、成果物の見せ方を考えるデザイン担当でした。

artifact-design Skillとは

artifact-designは、Claude CodeがArtifactを作る前に読み込むデザイン指針です。

ここでいうArtifactは、Claude Codeのセッションで作ったHTMLやMarkdownを、ブラウザで見られるページとして扱う機能です。先にClaude Code Artifactsとは？ 作ったHTMLをURLで共有できる機能で、実際の作成・更新画面を紹介しました。

名前が似ていてややこしいので、先に関係を整理します。

左のArtifactsは成果物を見られるページにする入れ物、右のartifact-design Skillは成果物の見せ方を考える役割です。

たとえば、Claude Codeに調査結果をまとめてもらったとします。

• Artifactsは、調査結果をHTMLやMarkdownのページとして見られるようにする
• artifact-designは、重要な数字をどこに置くか、見出しをどう分けるか、どんな色や文字を使うか考える

つまり、Artifactsが入れ物で、artifact-designが見せ方です。

少なくとも手元のClaude Code 2.1.266には、artifact-designという名前と「Artifactsのためのデザイン指針」という説明が組み込まれていました。

claude --version

Claude Codeは更新が速いので、見つからない場合はまずバージョンを確認するのがよさそうです。

artifact-design Skillが考えていること

artifact-designは、決まったテンプレートを毎回当てはめるSkillではありません。

Claude Codeの実行ファイルから収集したシステムプロンプトを公開している非公式リポジトリで内容を読むと、最初に行うのは今回の成果物に、どれくらいデザインが必要かを判断することでした。

今回のプロンプトだけでなく、プロジェクトにある既存デザインと、成果物の題材・読者・目的も材料にします。そのうえで、配色・文字・レイアウト・情報設計をまとめて決めます。

たとえば、業務メモとランディングページでは求める見た目が違います。

作るもの	artifact-designの考え方
計画書・メモ	読みやすく整える。派手にしすぎない
レポート・解説資料	情報の階層と、読む順番をわかりやすくする
ダッシュボード	要点を先に見せ、状態を一目で区別できるようにする
UI・ツール	読む順番より、操作と情報の探しやすさを優先する
LP・共有ページ	題材に合う、より特徴的な見た目を考える

「デザインするか、しないか」ではなく、何を作るかに合わせてデザインの強さを変えるわけです。

全部を巨大なヒーロー画像付きのサイトにしない。資料は資料らしく、アプリはアプリらしく作る。地味ですが、めちゃくちゃ大事です。

既存のデザインを先に探す

プロジェクト内にデザインシステムがある場合、artifact-designはそちらを優先します。

探す対象は、たとえば次のようなものです。

• CLAUDE.mdに書かれたデザインルール
• CSSのテーマ変数
• 色・余白・文字サイズを定義したデザイントークン
• すでにあるコンポーネントのスタイル

優先順位はこうです。

今回のプロンプト
  ↓
プロジェクトの既存デザイン
  ↓
artifact-designの判断

毎回勝手に違うブランドを作るのではなく、すでにある見た目の続きとして成果物を作る設計です。

題材から見た目を決める

既存のデザインがなければ、成果物の題材・読者・目的から見た目を決めます。

「とりあえず紫のグラデーション」「とりあえずカードを3枚」「とりあえず巨大な見出し」のような、AIが作りがちなテンプレートへ逃げないためです。

Claudeが先に考えるのは、次の3つです。

何についての成果物か
誰が見るのか
見た人に何をしてほしいのか

同じダッシュボードでも、経営者が全体を見る画面と、エンジニアが障害を追う画面では、最初に見せる数字が違います。色を選ぶ前に、まずページの仕事を決める。ちゃんとデザインしてる。

文字・配色・レイアウトも細かく見る

方針を決めたあと、artifact-designは具体的な見た目も考えます。

観点	主な内容
タイポグラフィ	見出しと本文の階層、行幅、行間、文字サイズを揃える
配色	題材に合うアクセント色と、少し色味のあるニュートラルカラーを選ぶ
レイアウト	余白や区切りに意味を持たせ、情報の関係が伝わるようにする
テーマ	ライト・ダーク・OS設定に従うsystemの3状態を考える
アクセシビリティ	キーボードフォーカスを見せ、動きを減らす設定にも対応する
インタラクション	押せるものを押せる見た目にし、操作後の結果を具体的に伝える

特に面白かったのが、構造のない装飾を増やさないという考え方です。

01 / 02 / 03の番号を置くなら、本当に順番がある内容へ使う。区切り線やラベルも、なんとなく飾るのではなく、情報の関係を伝えるために使う。

見た目だけ整っているのに、どこから読めばいいかわからない資料。あります。あれを避けるための指針でした。

artifact-design Skillはどう使うのか

Artifactを作るときはClaude Code側で使われますが、こちらから名前を出して頼むこともできます。

まずは、作りたいものと読者、目的を一緒に渡します。

artifact-designを使って、この調査メモを社内向けのHTMLレポートにしてください。

見る人: 開発チーム
目的: 調査結果と、次に試すことを5分で把握する
見せたいもの: 結論、比較表、次のアクション

UIなら、複数案を比較させる使い方もできます。

artifact-designを使って、このメモアプリのスマホ用UIを3案作ってください。

3案は色違いではなく、情報設計から変えてください。
- すぐ書き始められる案
- 過去のメモを探しやすい案
- 1日の記録を振り返りやすい案

同じArtifact内に並べて、各案の狙いも書いてください。

これが、冒頭のX投稿で紹介されていた使い方です。

完成形を一発で当ててもらうのではなく、まず案を並べてもらう。見たあとに「導線はA案、色はB案」のように返せば、デザイン用語を知らなくても壁打ちできます。

実際にこの記事をArtifactにしてみた

説明だけではわかりにくいので、実際にこの記事自体をartifact-design Skillでデザインしてもらいました。

使ったプロンプトはシンプルです。

artifact-designを使って、この記事をArtifactにしてください。

できたのが、この「artifact-design Skill 入門」です。

※リンクを開けない場合に備えて、下に同じ画面のスクリーンショットも載せています。

元はいま読んでいるMarkdownです。それが単にHTMLとして表示されただけでなく、タイトル、概要、対象読者、先に結論と、読む順番まで整理されていました。

artifact-designは見た目を飾るだけではありません。この内容を、誰に、どの順番で見せれば伝わるかまで設計するSkillでした。これが、「見せられるデザイン」になるということか。

普通のHTML/CSS化と何が違ったか

自分は以前、読みにくいmdはClaudeに投げてHTML/CSSにするだけでよかったという記事を書きました。

その記事では、MarkdownをHTML/CSSにするだけでも読みやすくなる、と書きました。artifact-designを使うと、そこからさらに、情報の順番、見出しの強弱、本文の行幅、余白、強調色まで内容に合わせて考えてくれます。

前の記事でやったHTML/CSS化を、artifact-designと指定するだけで、情報設計まで含めて一段上の仕上がりにしやすくなります。

Markdown
  ↓ HTML/CSSにして読みやすくする
HTML / Artifact
  ↓ 読者・目的に合わせて情報の見せ方を設計する
artifact-design

前の記事を書いた翌日にこのSkillを見つけました。タイミングいい！

共有前に公開範囲を確認する

• デフォルトは**非公開（自分だけ）**です
• 他の人に見せるときは、右上のShareから共有範囲を変更します
• QiitaへURLを載せる前に第三者が開けるか確認し、開けなければスクリーンショットで見せます

プロジェクト共通の見た目はCLAUDE.mdへ書く

毎回同じ色やフォントを使いたい場合は、CLAUDE.mdへデザインルールを書いておくと、以降のArtifactもプロジェクト共通の見た目に寄せやすくなります。

普段のルールはCLAUDE.mdへ置き、その成果物だけ変えたい部分はプロンプトで伝える。この使い分けでよさそうです。

作れるもの

artifact-designは、UI専用のSkillではありません。

HTMLやMarkdownで見せられるものなら、いろいろな成果物に使えます。

• 調査結果をまとめたレポート
• 数字を一覧できるダッシュボード
• 複数の実装案・デザイン案の比較ページ
• PRの変更点を追うウォークスルー
• 障害調査のタイムライン
• 作業の進捗を見せるチェックリスト
• スライダーやトグルを動かせる説明ページ

まとめ

artifact-design Skillは、Claude Codeで作る成果物のデザイン指針です。

• Artifactsは、成果物をブラウザで見られるページにする仕組み
• artifact-designは、その成果物の配色・文字・レイアウト・情報設計を考える
• 計画書、レポート、ダッシュボード、UIなど、作るものに合わせてデザインの強さを変える
• CLAUDE.mdや既存のテーマがあれば、そちらを優先する
• Skill名を出して、読者・目的・見せたい情報を一緒に頼める

まずは、手元にあるMarkdownを1つ選んで、こう頼んでみるのが早そうです。

artifact-designを使って、このMarkdownを人が読むためのHTMLにしてください。
見る人と、この資料で一番伝えたいことを先に整理してからデザインしてください。

ただHTMLに変換するだけでなく、誰に何を伝えるかまで見た目へ反映してくれる。artifact-design、かなり地味に見えて仕事がデカいSkillでした。

参考

• げま｜個人開発さんのX投稿 … artifact-designでスマホUIを複数案作り、見ながら壁打ちする使用例
• Claude Code の Artifacts とは？ — セッションの成果を「見られるページ」にして共有する新機能を解説 … Artifactsの仕組み、作成・更新・共有方法の解説
• skill-artifact-design.md - Piebald-AI/claude-code-system-prompts … Claude Codeの実行ファイルから収集されたSkillの内容。公式リポジトリではないため、実装の詳細はバージョンによって変わる可能性があります
• Artifacts are now generally available - Anthropic … claude.aiのArtifactsに関するAnthropicの発表
• What are artifacts and how do I use them? - Claude Help Center … Claude CodeのArtifactの公開範囲と共有に関する公式説明
• Publish and share artifacts - Claude Help Center … プランごとの公開・組織内共有の違い
• How Claude remembers your project - Claude Code Docs … CLAUDE.mdへプロジェクト共通の指示を書く公式ドキュメント

関連記事

• Claude Code Artifactsとは？ 作ったHTMLをURLで共有できる機能 … 前の記事。Artifactを実際に作り、同じURLのまま更新するところまで試しました
• 読みにくいmdはClaudeに投げてHTML/CSSにするだけでよかった … Markdownを人に見せるHTMLへ変える話。今回の記事は、その見た目をどう決めるかの続きです
• AI製UIの「AIっぽさ」を消すのは、地道なひと手間でした … GPTとPencilで、非デザイナーがUIを作りきるまでの実践編
• Claude Code新出力スタイル「Concise」で、Claudeが結果ファーストの有能な相棒になった … Claude Codeの振る舞いを、組み込みの仕組みで変える別の例です

告知

最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを
募集しております。詳しくは採用情報ページをご確認ください。

みなさまからのご応募をお待ちしております。