Notes — 研究ノート
Claude Design で
サイトを作り直した話.
「軽く試す」が、全面リデザインになった。
Abstract
デザイナーのいない研究室が、デザイン AI を試しました。
2026 年 4 月、Anthropic の Claude Design——デザインに特化したオンライン版の Claude Code——を使って、このサイト（1stpiece.io）を全面的に作り直しました。
旧サイトは、情報だけを並べた最小構成でした。システムフォント、黒テキスト、リンク青。必要な情報は全部ありましたが、研究室としての世界観はゼロ。「軽く試す」つもりで Claude Design に渡したところ、想定以上に大がかりな工程になりました。
ここでは、何ができて、何ができなかったかを記録します。
| Type タイポグラフィ | システムフォント → 志操明朝 + EB Garamond + IBM Plex Sans。和文の品格と欧文のクラシカルさを両立する 3 書体構成です。見出し・本文・キャプション・コードでフォントが分かれ、情報の階層が視覚的に伝わるようになりました。 |
|---|---|
| Color 配色 | 黒 + リンク青 → ネイビー + 生成り紙 + 朱の判子色。ロゴのネイビーを主色に据え、アクセントは朱一点。落ち着いた研究室の空気感を、色だけで出す設計です。 |
| Structure ページ構成 | Top + Learn + Work の 3 ページ → Top + Projects + Learn + Work + Notes の 5 ページ、さらに各プロジェクトの詳細ページ。prompt-as-code、CriticChain がそれぞれ独立した解説を持つようになりました。 |
| Parts コンポーネント | なし → 仕様テーブル、ターミナルブロック、エージェント構成図、プルクオート、eyebrow + section mark。技術的な内容を、読みやすく構造化するための部品群です。 |
Evaluation
何ができたか。
Claude Design が強かった領域を 3 つ挙げます。
| Vision 世界観の初期提案 | 「小さな AI 研究室」という性格から、ネイビー主体 + 朱アクセントという配色と、明朝体ベースのタイポグラフィを導き出しました。方向性の着想としては、十分に使えるものが出てきました。 |
|---|---|
| CSS CSS の構造設計 | CSS カスタムプロパティによるトークン管理、レスポンシブグリッド、タイポグラフィスケール——構造的な CSS は精度が高い水準でした。特にカスタムプロパティの設計は、後から人間が調整する際にも扱いやすい形で出力されました。 |
| Parts 技術系コンポーネント | 仕様テーブル、ターミナル風コードブロック、エージェント構成図（SVG）——技術ドキュメントに必要な部品は、一発で使えるものが出てきました。特に spec-table のモノスペース + 大文字ラベルの処理は、そのまま採用しています。 |
Limitation
何ができなかったか。
人間が調整した——あるいは、人間にしか判断できなかった領域です。
| Voice 編集的な声 | 見出しの言い回し、プルクオートの選び方、eyebrow の語感——言葉の温度と距離感は全部人間が書き直しました。AI は「それらしい」コピーを出しますが、ラボの声にはなりません。 |
|---|---|
| IA 情報アーキテクチャ | 何を Top に出し、何を Work に回すか。何を書き、何を書かないか。事業構造を理解した上でのページ分割は人間の仕事です。AI は聞かれれば案を出しますが、判断の重みを持ちません。 |
| Edit 「引く」判断 | Claude Design はデザインを足す方向には強いです。が、「ここは要らない」「ここは引く」という抑制の判断は苦手です。余計な装飾やセクションを提案してくることが何度かありました。引き算は、まだ人間の仕事です。 |
| Tone 通しの一貫性 | 個々のページは良くても、サイト全体のトーンの一貫性——これは人間が通しで確認して微調整しました。ページ間で微妙にフォントサイズが揺れたり、余白のリズムがずれたりします。1 ページ単位では気づきませんが、全体を通すと見えてきます。 |
Verdict
使う側の目が問われるツール。
Claude Design は、デザイナーがいない個人ラボにとって無視できないツールになりました。ゼロからの世界観構築、CSS の構造設計、技術系コンポーネントの生成——ここは genuinely に強いです。
一方で、「何を言うか」「何を言わないか」「どういう印象を残すか」——ブランドの核心は、まだ人間の仕事です。AI が出すのは「見た目として成立するデザイン」であって、「あなたのための唯一のデザイン」ではありません。
その差分が見えている人にとっては、非常に有効な加速装置です。見えていない人にとっては、「AI が作ったきれいなサイト」で終わります。