Jamstackの弱点克服！ClaudeDesignでデザインシステムを構築する方法
Jamstack 2026年5月29日
こんにちは、メンバーズルーツカンパニーの荒井です。
弊社サイトで以前公開した記事で触れたように、ヘッドレスCMSを採用したJamstack構成のWebサイトはフロントエンドとバックエンドが分離していることがセキュリティリスク回避の観点から優れています。
ですがそれは同時に、新規にWebサイトを構築する際はフロント部分の実装を必要とすることを意味しており、そのためのデザインシステム構築が施策スピードを落とす要因の一つでもあります。
そこで今回は、26年4月中頃に米AntrhopicからリリースされたClaude Designを用いてデザインシステムを構築する方法を共有し、施策スピードな向上を図ろうと思います。
※本記事で扱われている情報は2026年5月末時点でのものです。ご覧になっているタイミングによって、画面の内容や機能に差異が生じる場合がございます。ご承知おきください。
Claude Designとは
Claude Designは米Anthropic社が提供するClaudeに搭載された機能の一つです。
ClaudeのProプラン以上に向けて26年4月17日にリリースされたばかりで、ブラウザ上での動作のみ対応しています。
効果的なプロンプトの書き方や仕組みに関しては公式のチュートリアルページからご確認ください。
Claude Designはページ単位のプロトタイプ作成から、プロジェクト単位のデザインシステムにまで対応しており、今回は後者を利用します。
Claude Designにアクセスしてみよう
Claude Designにアクセスするために、まずはWeb版のClaudeCodeにアクセスしましょう。
Proプラン以上のプランに加入していた場合、画面左のサイドバーからClaude Designにアクセスできます。
このとき、Claude DesignからClaudeの画面に戻ってくる方法がブラウザバック以外にないので、別タブで開くことをお勧めします。
オレンジの枠で囲った「デザイン」を押下してClaude Designへアクセスすると、以下のページに遷移します。
ここからプロトタイプの作成やデザインシステムの作成を進めていくことができます。
デザインシステムを作ってみよう
では早速デザインシステムを作りましょう。
今回は自社の技術系メディアサイトを新規に作成する想定で進めていきます。
手順は次の通りです。
既存のサイトを分析
Claude Designにデザインを提案させる
提案させたデザインをベースにデザインシステムを構築
既存のサイトを分析
既存の競合サイトがどのような形を取っているのかを知ると自社が目指したい方向も自ずと定まります。
なので、今回はHmhmというWebサービスを用いて分析していきましょう。
使い方は簡単で、サイトにアクセスして分析したいWebページのURLを入力するだけです。
今回はメンバーズが運営するメディアサイトBEMA Labを対象にとってみます。
しばらく待つと次のような結果が得られました。
ペルソナ：技術情報の収集や開発組織の改善に関心のあるエンジニア、テックリード、開発マネージャー
価値：エンジニア向けの技術知見を通じて、個人の学習と開発組織の改善を後押しする点
課題：継続的な情報消費が定着しにくいこと、実務への転用が個人任せになりやすいこと、そして組織改善への成果が見えづらいこと
BEMA Labは開発組織の改善に関心のあるエンジニアに向けて、その背中を押すようなコンテンツを発信しているものの、「発信されている取り組みが実際に及ぼした成果が見えづらい」というのが課題になっているようですね。
Claude Designにデザインを提案させる
早速、上記の分析結果をもとにClaude Designとデザインを練っていきましょう。
今回は次のようなプロンプトを渡しました。
自社のメディアサイトを作成したいと考えています。
サイトの名前はHOGE Labで、技術情報の収集や開発組織の改善に関心のあるエンジニア、テックリード、開発マネージャーをメインのターゲットとします。
掲載内容はエンジニア向けの技術知見と開発組織の改善を中心に、それらの取り組みが実際にどのような成果を生み出したのかまでを取り扱います。
これを紹介するためのHTMLを作成して欲しいのですが、ヘッドレスCMSを軸にしたJamstack構成であることと、このページのデザインをベースにデザインシステムを構築していくことを念頭においてください。
他に色々と壁打ちしながら進めたいです
するとClaude側から更なる情報提供を求められるので、これに回答していきます。
これらの質問に答えてさらにしばらく待つと、次のようなデザイン案が提出されました。
これらの案の内、今回はA案 - 余白詰めでデザインシステムを構築していきましょう。
提案させたデザインをベースにデザインシステムを構築
いよいよ大詰めです。
まずは、次のようなプロンプトを送ってみました。
A案を余白詰めで使いましょう。
これをベースにヘッダーやカード、フッターのデザインシステムを構築したいです。また少し待つと、次のような出力が得られました。
これにてデザインシステムの草案が完成しました。所要時間は3時間ほどでした。
ここまででデザイナーが介在するフェーズはなく、デザインシステムの草案もできているので、これをベースに他のページ（記事一覧や著者ごと記事一覧ページなど）に展開し、スムーズに実装に移ることが可能です。
また、このデザイン草案をたたき台にデザイナーにさらにブラッシュアップしてもらうことで改善サイクルをスムーズに回し、以前よりも短いスパンでサイトの成果向上につなげる動きも可能になるはずです。
おわりに
今回はClaude Designを用いてデザインシステムを構築し、ヘッドレスCMS軸Jamstack構成の弱点の克服と施策サイクルの向上を実現する方法を紹介しました。
生成AIの出した出力をベースに実際に動作する初版を作成し、デザイナーや他の専門家とともにブラッシュアップを重ねていく一手法として参考になれば幸いです。
