はじめに
Claude Design に DESIGN.md を読み込ませることで、AI に特定のデザイン原則を適用させられるのではないかと思い、試してみました。
今回は、awesome-claude-design で紹介されている Apple 風の DESIGN.md を使い、既存サイトのトップページを Apple 風に再設計 してみます。
題材として、商標やブランド表現の扱いを気にせず公開記事に載せられるサイトを探した結果、情報量も多くデザイン適用の効果が分かりやすい e-Stat（政府統計の総合窓口） を選びました。
この記事のゴール
特定サイトの公式リニューアル案を作ることではありません。
Claude Design × awesome-claude-design × DESIGN.md × 公開サイトのスクリーンショット & URL を組み合わせることで、AI による UI 再設計の質がどこまで変わるのかを検証することが目的です。
完成スクリーンショット
使用したもの
今回使った主な素材は以下です。
Claude Design
Claude Design は、会話ベースでデザインやプロトタイプを作成できる Claude のデザイン向け機能です。
今回は、Web サイトの再設計案を作るために使用しました。
awesome-claude-design
今回の中心になるのが、こちらの GitHub リポジトリです。
awesome-claude-design には、さまざまなブランド風の DESIGN.md がまとめられています。
今回はその中から、Apple 風のデザインシステムを選びました。
Apple 風の DESIGN.md
今回使用した Apple 風の DESIGN.md はこちらです。
この DESIGN.md には、Apple 風の UI を作るためのデザイン原則がまとまっています。たとえば、以下のような要素です。
- 広めの余白
- 白・黒・薄いグレーを中心にした配色
- 大きなヒーローセクション
- 整理されたタイポグラフィ
- シンプルなカード UI
- 控えめな装飾
- 情報階層の明確化
これは Apple 公式のデザインシステムではありません。
Apple 公式サイトをコピーするためではなく、Apple 風のデザイン原則を AI に伝えるための参考資料 として使っています。
Claude Design に渡した素材と役割
Claude Design には、以下の 3 つを渡しました。重要なのは、それぞれに異なる役割を持たせる ことです。
| 素材 | 内容 | 役割 |
|---|---|---|
| スクリーンショット | 現行 e-Stat トップページの画像 | 現行サイトの構造を伝える |
| URL | https://www.e-stat.go.jp/ | 最新のページ構成を AI が直接確認 |
| DESIGN.md | 前述の Apple 風 DESIGN.md
|
適用するデザイン原則を伝える |
この役割分担を明確にしないと、AI の出力がブレやすくなります。たとえば、
- 見た目だけ Apple 風になって、対象サイトとして使いにくくなる
- 逆に現行サイトに寄りすぎて、デザイン検証としての変化が出ない
- 情報量を削りすぎて、サイト本来の役割が弱くなる
といった問題が起きやすくなります。
実際に使用したプロンプト
今回 Claude Design に渡したプロンプトは以下の通りです。素材の役割、デザイン方針、必須要素、避けることをセクション分けで明示し、最後に出力手順を指定しています。
添付したスクショ、https://www.e-stat.go.jp、添付したDESIGN.mdを使って、
e-StatトップページをApple風デザイン原則で再設計してください。
Apple風の余白、タイポグラフィ、ヒーロー構成、カードUI、静かな高級感をやや強めに反映してください。
参照の役割：
- スクショ：現行e-Statトップページの情報設計、セクション構成、主要導線の参考
- https://www.e-stat.go.jp：現行サイトの最新構造の参考
- DESIGN.md：Apple風の余白、タイポグラフィ、情報階層、カードUI、CTA整理の参考
重要：
DESIGN.mdはApple公式サイトをコピーするためではなく、
Apple風のデザイン原則を参考にするために使ってください。
今回のデザイン方針：
- Apple風の影響を強めに出す
- 大きなヒーローセクションを作る
- 検索バーをトップの主役にする
- 余白を広く取る
- 白、薄いグレー、黒を基調にする
- 色数を抑える
- カードUIをシンプルにする
- 統計カテゴリを見やすく整理する
- 公共サイトとしての信頼感は維持する
必須要素：
- 統計検索
- 分野別カテゴリ
- 主要統計への導線
- 新着情報
- API、データベース、地図などの利用導線
- 初めて利用する人向けの案内
避けること：
- Apple公式サイトの直接的なコピー
- AppleロゴやApple固有のブランド要素の使用
- Apple製品ページの構成をそのまま流用すること
- 公共サイトとしての信頼感を損なうこと
- 情報量を減らしすぎて統計ポータルとして使いにくくなること
出力手順：
1. 現行e-Statトップページの構造を要約
2. Apple風を強めに反映した改善方針を3案提示
3. 最もQiita記事で見栄えする案を1つ選択
4. その案でワイヤーフレームを作成
5. 次に高忠実度UIを作成
6. 最後に、どのApple風デザイン原則を反映したかを説明してください
このプロンプトのポイントは、以下の 5 つを明示的に分けて記述している点です。
-
参照の役割：スクショ、URL、
DESIGN.mdが何のために渡されているかを明示 - デザイン方針：強めに反映したい要素を箇条書きで指定
- 必須要素：公共サイトとして残すべき情報導線を指定
- 避けること：商標や信頼性に関わる地雷を事前に回避
- 出力手順：要約 → 改善案 → 選択 → ワイヤーフレーム → 高忠実度 UI → 原則の説明、という段階的なプロセス
特に「出力手順」を指定したことで、いきなり高忠実度デザインが出てくるのではなく、改善方針の比較検討と段階的な詰め ができるようになりました。
完成したデザインの印象
完成したデザインは、現行の公共サイトらしい情報量を残しつつ、かなり Apple 風の印象が強い UI になりました。特に変化が大きかったのは、以下の点です。
ファーストビューが強くなった
大きな黒背景のヒーローセクションと、中央配置の検索バーによって、最初に見るべき場所が明確になりました。現行サイトのように多くの情報を同時に提示するのではなく、まず「統計を探す」という主要行動に集中させる構成です。
セクションの意味が分かりやすくなった
「分野から探す」「主要統計を見る」「データを使う」「システムに組み込む」「最新情報を見る」といった形で、セクションごとの役割が明確になりました。それぞれのセクションが独立して見えるため、スクロールしながら情報を把握しやすくなっています。
情報量が多くても重く見えにくくなった
余白、カード UI、背景色の切り替えによって、情報量が多くても画面が整理されて見えるようになりました。現行サイトの情報量を残しつつ、視覚的な負担を減らせた点は、DESIGN.md を使った効果が大きい と感じました。
やってみて分かったこと
DESIGN.md を使うと、AI のデザイン出力に一貫性が出る
単に「Apple 風にして」と指示するだけだと、AI の解釈はかなり曖昧になります。
一方で、DESIGN.md を渡すと、
- 色
- 余白
- タイポグラフィ
- カード UI
- CTA
- レスポンシブ方針
- やるべきこと
- 避けるべきこと
といった判断基準をまとめて渡せます。その結果、出力される UI に一貫性が出やすくなります。
一流デザイン原則を AI に渡せる感覚がある
今回の実験で特に面白かったのは、AI に単に「きれいなデザインを作って」と頼むのではなく、デザイン原則そのものを渡せる 点です。
高度なデザイン知見やデザインシステムを AI に適用することで、専門デザイナーでなくても、一定水準以上のデザイン検討や UI 改善案を作れる時代になってきたと感じました。
もちろん、最終的な品質判断には人間のレビューが必要です。ただ、初期案の作成や方向性の比較、デザイン検討のたたき台としてはかなり有効です。
「何を変えないか」の指定が重要
AI にデザインを依頼すると、見た目を変えることに意識が寄りやすくなります。しかし、実務では「変えてはいけないもの」も重要です。
たとえば既存サイトを再設計する場合、
- そのサイトが何のためのサイトか（今回で言えば統計ポータル）
- 主要な行動導線（検索・カテゴリ閲覧など）
- 必要な情報の網羅性
- 既存ユーザーが期待する役割
は残す必要があります。AI に UI を再設計させるときは、
- 何を変えるか
- 何を残すか
- 何を避けるか
を明確にすると、出力の品質が安定しやすくなります。
今回の学び
今回の検証で分かったことをまとめます。
-
DESIGN.mdを使うと、AI にデザイン原則を渡しやすい -
awesome-claude-designを使うと、さまざまなブランド風のデザイン原則を試せる - Claude Design と組み合わせると、UI 再設計の初期案をかなり速く作れる
- スクリーンショット、URL、
DESIGN.mdの役割を分けると精度が上がる - AI に任せる場合でも、「残すもの」「変えるもの」「避けるもの」の指定が重要
- デザイン検証の初期案作成にはかなり有効
特に、awesome-claude-design のようなリポジトリを使うと、デザインの方向性を短時間で切り替えられます。たとえば、同じサイトを題材にしても、
- Apple 風
- Google 風
- Notion 風
- Stripe 風
- Airbnb 風
- Spotify 風
のように、異なるデザイン原則で比較することができます。これは、UI 改善の初期検討や、デザイン方向性の比較にかなり使えそうです。
まとめ
今回は、awesome-claude-design で紹介されている Apple 風の DESIGN.md を使い、Claude Design で既存サイトのトップページを Apple 風に再設計してみました。
結果として、DESIGN.md を使うことで、AI にかなり具体的なデザイン原則を渡せること が分かりました。
AI に「いい感じにして」と頼むだけでは、出力の方向性は安定しません。しかし、DESIGN.md のようなデザインシステム仕様書を渡すことで、AI に明確な判断基準を持たせることができます。
これにより、専門デザイナーでなくても、デザイン検討のたたき台をかなり高い水準で作れる可能性があります。
今後は、同じサイトに対して複数の DESIGN.md を適用し、デザインの違いを比較してみるのも面白そうです。
注意書き
本記事は、公開されている Web サイトを題材に、Claude Design と DESIGN.md を使った UI 再設計の検証手法を紹介するものです。
作成したデザインは、題材サイトの公式デザイン変更案ではありません。また、Apple 公式サイトをコピーする目的でもありません。
あくまで、Apple 風のデザイン原則を参考にした 非公式のデザイン検証 です。
出典
出典：政府統計の総合窓口（e-Stat）
https://www.e-stat.go.jp/
※本記事の再設計サンプルは、上記サイトを参考に筆者が編集・加工した非公式のデザイン検証です。
参考リンク
- awesome-claude-design（GitHub）
https://github.com/VoltAgent/awesome-claude-design - Apple 風 DESIGN.md
https://getdesign.md/apple/design-md - 政府統計の総合窓口（e-Stat）
https://www.e-stat.go.jp/