初めてのモダンアプリ - UIデザイン
初めて洗練されたデザインの製品ページを目にしたときの気持ちを覚えていますか？機能は同じはずなのに、他人のページはどうしてこんなに「高級」に見えるのでしょう：配色がすっきりしている、余白が心地よい、ボタンの角丸が絶妙にすれている。思わずこう考えてしまいます——「彼らはどうやってデザインしているんだろう？私たちにもこんなページが作れるだろうか？」
この「他人がどうやってやっているのかを知りたい」という気持ちこそ、フロントエンドデザインの最高の出発点です。実際に手を動かす前に、これまでに身につけた能力を振り返ってみましょう：
- 前のレッスンでは、NanoBanana でデザイン素材をまとめて生成し、プロンプトの「スタイル」が最終アウトプットにどう影響するかを理解しました；
- Figma と MasterGo といったプロのデザインツールを知り、デザイン稿がどのように構成されるかを学びました；
- デザイン稿からフロントエンドコードへの変換プロセスも見てきました。
しかし、自分のプロジェクトのために本格的なページを作ろうとすると、やはり手が止まってしまうかもしれません：ツールは使える、素材は生成できる、それでも「良い」がどういう形か分からないし、優れたページをどう分解して模倣すればいいのかも分からない。でも大丈夫、このレッスンはまさにその問題を解決するためのものです。
前後の内容をつなげるために、いくつか小さな問題を考えてみましょう：
- モダンな Web ページは通常どのような区画で構成されるのでしょうか？
- 「良い」は主観的な感覚なのでしょうか、それとも数値化できる数字（色値、フォントサイズ、間隔、角丸）なのでしょうか？
- ある Web サイトのビジュアルスタイルを模倣しろと言われたら、どこから手を付けますか？
これらの問題にまだ明確な答えがなくても問題ありません——まさにそれこそがこのレッスンで教えることです。操作中に理解しにくいステップがあれば、いつでも現在のページのスクリーンショットを大規模モデルに送って質問してください。大胆に試してみてください。失敗を恐れる必要はありません。すべての試みは学習と成長のチャンスです。
🎯 核心的な問い
美しくデザインされた APP や Web ページを目の前にしたとき、それがどうデザインされたのかを分析し、AI デザインツールを使って「本物と見まごう」レベルまで模倣するにはどうすればよいか？
このレッスンで学ぶこと
- 「デザインを見る」ことを学ぶ：ページを手にしたら、何を見るべきか、どう分解するかを知る
- 入門の方法論を身につける：参考を探す → 分析 → 模倣 → 似せる → 入門
- 2 つのデザイン手法を理解する：Figma/MasterGo と Claude Design/Open Design（UI design Skills を含む）
- 実践的な模倣：実際の Web ページを選び、0 から高再現度の納品まで模倣する
- デザインシステムを定着させる：大手企業のデザイン規範を、自分自身のものにする
📚 前提知識
このチュートリアルは、AI プログラミングツール（Trae など）を既に使える、プロジェクトにフロントエンドのビジュアル能力を補いたい開発者に適しています。まず画像生成の感覚を身につけたい場合は、NanoBanana 素材生産を先に学ぶことをおすすめします。デザインツールを深く学びたい場合は、Figma と MasterGo 入門とあわせて学習できます。
第 1 章：フロントエンドデザイン入門、「真似」から始める
前の節では 3 つの問題を提起しました——ページはどの区画で構成されるか、良いとは何か、どう模倣するか。この節ではまず方法論から始めます：フロントエンドデザインの第一課は、創造ではなく複製です。
書道を学ぶならまず手本を臨書し、絵画を学ぶならまず石膏像を描くように、なぜ「真似」なのでしょうか？
- デザインの「良さ」は数値化できる——色値、フォントサイズ、間隔、角丸、シャドウはすべて数字です
- 成熟したデザインをピクセル単位で複製すると、その背後にあるすべての決定を理解せざるを得なくなります
- 「似せられる」ようになると、次に似た場面に遭遇したとき、「どの方向に真似すればいいか」が分かります
💡 一言でまとめると：良い製品を模倣できる＝フロントエンドデザインの基礎力が身についたということ。その上でアレンジできる＝もう一人前になったということです。
1.1 なぜ模倣が最速の入門方法なのか
「人のものを真似しているけれど、それで本当に学べるのか？」と心配する人もいるでしょう。答えは、学べる、しかも最速の道です。その理由は、模倣は結果をそのまま写すのではなく、過程を自分に再現させることだからです：
- すべての間隔を測ることを強いられ、それによって「余白がどうやって呼吸感を生むのか」を理解する
- すべての色値を調べることを強いられ、それによって「この配色がなぜ調和して見えるのか」を理解する
- すべての階層を比較することを強いられ、それによって「重要な情報と補足情報がどう並べられるのか」を理解する
優れたページを「パラメータレベル」まで分解してから再構築できるようになれば、デザインに対する理解は、ただ「感覚」で判断するだけの多くの人を上回っています。
1.2 大手企業も「参考」している、これは秘密ではない
デザイナーの働き方には自然と参考が含まれています：Pinterest でインスピレーションを探し、Dribbble でトレンドを見て、競合分析で構造を学ぶ。AI 時代にはこれがより顕著になりました——ツールが「参考」を直接実行可能な能力に変えたからです：
- Claude Design はお気に入りの参考サイトをインポートし、そのスタイルに沿って初稿を生成できます
- Open Design は 151 セットのオープンソースデザインシステムを内蔵し、ワンクリックで自分のプロジェクトに適用できます
- さまざまな UI design Skill が「大手企業のビジュアル規範」を AI が実行可能な指示にパッケージ化します
つまり、あなたの問いは「真似できるか」ではなく、「どうプロに、どう合法的に、どう自分のオリジナルに真似するか」ということです。
参考をどこで探す？まずこれらのサイトをブックマークしよう
参考の第一歩は「参考ライブラリ」を蓄積することです。以下のサイトは用途別に分類されています。すべてブックマークして、必要なときに活用しましょう：
| サイト | 用途 | 何を探すのに適しているか |
|---|---|---|
| Awwwards | Web デザイン界の「オスカー」 | トップクラスのクリエイティブ、動き、インタラクション、「天花板」の姿を学ぶ |
| Recent（旧 Godly） | 高品質 Web ページインスピレーション集 | AI、Web3、ポートフォリオサイトの先駆的なデザイン |
| Landbook | ランディングページデザインの厳選 | 業界・配色別に公式サイト、料金ページ、ファーストスクリーンのレイアウトを絞り込む |
| Lapa Ninja | 7300+ ランディングページスクリーンショット集 | 要素別にナビゲーション、特徴紹介、顧客評価を検索 |
| Mobbin | 実際の App インターフェース集 | Uber、Notion などの製品の実際のページとフローを研究 |
| Dribbble | デザイナーコミュニティ | 配色、アイコン、イラストスタイル、マイクロインタラクションのインスピレーション |
| Behance | 完全なプロジェクト事例集 | デザインの考え方、リサーチプロセス、完全なポートフォリオを見る |
これらのサイトはどんな見た目か？ひと目で確認しましょう（画像クリックで拡大できます）：
💡 自分だけの参考ライブラリを作ろう
心が動くページに出会ったら、すぐにスクリーンショット + リンクを保存し、「ランディングページ / コンポーネント / 配色 / 動き」で分類してアーカイブしましょう。模倣するときはこのライブラリから直接ターゲットを選ぶと、その場でネット検索するよりはるかに速いです。
1.3 参考 vs パクリ：明確な線引き
| 観点 | 参考（推奨 ✅） | パクリ（危険 ❌） |
|---|---|---|
| 対象 | レイアウト構造、ビジュアルスタイル、デザイン規範 | ブランド Logo、専用アイコン、オリジナルイラスト |
| 方法 | 理解した上で作り直し、自分の製品に組み込む | 素材、コード、画像を直接コピー |
| 結果 | スタイルは似ているが、内容は完全に異なる | コピー、配色、素材まで完全に同じ |
| リスク | 低 | 著作権・ビジネスリスクが高い |
第 7 章で著作権の境界を詳しく説明します。まず一言だけ覚えておいてください：「ルール」を真似するのは OK、「結果」を真似するのは危険。
第 2 章：見る目があってこそ、デザインできる——ページを分解する
「似せる」前提は「見て理解できる」ことです。この章では、汎用的なページ分解フレームワークを教えます。
2.1 構造を見る：ページはどの区画で構成されるか
大多数のモダンな Web ページは 4 つの大きなブロックに分解できます：
┌─────────────────────────┐
│ ① ナビゲーションバー Nav │ Logo · メニュー · ログイン/CTA
├─────────────────────────┤
│ ② ファーストスクリーン Hero│ メインタイトル · サブタイトル · メインボタン · 製品画像
├─────────────────────────┤
│ ③ コンテンツエリア Sections│ 特徴カード · データ表示 · 評価 · 料金
├─────────────────────────┤
│ ④ フッター Footer │ リンク · 著作権 · 購読
└─────────────────────────┘ページを見るときは、まず細部は気にせず、目で「骨格図」を描くことから始めましょう：どこがナビゲーションか、どこがファーストスクリーンか、中央が何段に分かれているか、各段にいくつの要素があるか。
2.2 ビジュアルを見る：4 つの数値化できる要素
| 要素 | 何を見るか | どう記録するか |
|---|---|---|
| 色彩 | メインカラー、背景色、文字色はそれぞれ何か | カラーピッカーで直接 Hex 値を取得 |
| フォント | 見出し/本文がどんなフォントか、何ポイントか、どれくらい太いか | ブラウザの DevTools で font-family/size/weight を確認 |
| 間隔 | ブロック間、カード内部の余白 | よく使う 8 / 16 / 24 / 48 px のリズムを記録 |
| 角丸とシャドウ | カード、ボタンの角丸半径とシャドウの強さ | DevTools で border-radius / box-shadow を確認 |
💡 フロントエンドデザインの生まれながらの強み
あなたはフロントエンド開発者です。DevTools こそがあなたのデザイン分析器です。 右クリック → 要素を検査すれば、どんなページの色値、フォントサイズ、間隔、角丸もすべて丸見えになります。これはデザイナーが夢見る、開発者にだけ生まれながらに備わっている能力です。
よく使うカラーピッカー：Chrome DevTools のカラーピッカー、color-picker 系の拡張機能。スクリーンショットをマルチモーダル大規模モデルに投げて、デザイン規範を抽出してもらうこともできます。
2.3 コンポーネントを見る：「再利用可能な部品」を切り出す
ページを一つずつのコンポーネントに分解し、各コンポーネントのスタイルパラメータを記録します：
ボタン Primary Button
- 背景：#4F46E5
- 文字：#FFFFFF，14px / 600
- 角丸：8px
- 内側余白：12px 24px
- シャドウ：0 2px 8px rgba(79,70,229,0.3)
カード Card
- 背景：#FFFFFF
- 角丸：16px
- ボーダー：1px solid #E2E8F0
- シャドウ：0 4px 12px rgba(15,23,42,0.08)3〜5 個のページを分解し終えると、手元には「コンポーネントスタイルライブラリ」が揃います——これがあなた自身のデザインシステムの原型です。
2.4 「見たデザイン」を「AI が理解できる言葉」に翻訳する
AI ツールで模倣するには、ビジュアルを構造化された記述に翻訳する必要があります。細かく見るほど、翻訳が正確になり、AI の模倣もより似たものになります。
このランディングページのスタイルを参考に、同型のページを作ってください：
- 構造：ナビゲーション + ファーストスクリーン(Hero) + 特徴カード 3 枚 + 料金エリア + フッター
- 配色：メインカラー Indigo #4F46E5，背景 #F8FAFC，文字 #0F172A
- フォント：見出し Space Grotesk 700，本文 Inter 400
- 間隔：ブロック 96px，カード内 24px，グリッド 24px
- 角丸：カード 16px，ボタン 8px
- シャドウ：0 4px 12px rgba(15,23,42,0.08)第 3 章：AI 時代のフロントエンドデザインツール全景
「彼らはどうやってデザインしているのか？」その答えはますます多様化しています。以下は 2 つの代表的な手法で、「手動で細かく制御」から「対話式の自動生成」までをカバーします。
3.1 手法一：Figma / MasterGo——専門のデザイン稿ツール
必要なのが編集可能・協業可能・ピクセル単位で制御できるデザイン稿なら、Figma（国際的主流）または MasterGo（国産、より手軽に始められる）を使いましょう：
- キャンバスでレイアウトを組み、コンポーネントを調整し、インタラクションプロトタイプを作る
- Figma Make / MasterGo AI などの機能で生成と一括調整を支援
- 最終的にフロントエンドがデザイン稿に沿って実装するか、プラグインでコードに変換する
適している：厳格なデザイン稿の納品、チーム協業、複雑なインタラクションが必要なシーン。ツール操作の詳細は Figma と MasterGo 入門を参照してください。
3.2 手法二：Claude Design / Open Design——対話式デザインキャンバス
これらのツールの共通点は、自然言語で直接インタラクティブなデザインプロトタイプを生成することです（静的画像ではなく）。代表的なツールが Claude Design と、そのオープンソースの代替である Open Design です。
Claude Design：公式の対話式デザインキャンバス
Claude Design は Anthropic が発表した AI デザイン製品です（入口 claude.ai/design）：
- 一言の要件を入力すると、デフォルトで 3 つのデザイン変種を生成し、ランディングページ、ワイヤーフレーム、プレゼンテーションなどをカバー
- デザインシステムのインポートに対応（GitHub リポジトリ、Figma エクスポート、Web サイトスクリーンショット、ブランドファイル）。色・フォント・コンポーネントを自動抽出
- キャンバス内で直接コメントして修正、ドラッグで微調整し、最終的に HTML / PDF / PPTX をエクスポート、または Claude Code に引き継いで実コードとして実装できる
代表的な使用シーン：
① 参考スクリーンショットから直接ハイファイページを再現（最もよく使う）
製品の説明とスタイルの参考を入力すると、Claude が完全なランディングページを自動生成します——左側にプロンプトと生成過程の対話記録、右側にキャンバスで結果をリアルタイムにレンダリングします。
Create a high-fidelity landing page designed to raise $500,000 from angel investors
for "雾屿咖啡 Mist Island Coffee" - a boutique specialty coffee shop that combines
premium coffee, quiet workspaces, and warm community events.
Tone should feel warm, premium, calm, and trustworthy - think a mix of Blue Bottle
Coffee + Apple Store + minimalist lifestyle design.
② デフォルトで 3 つのデザイン変種を生成し、方向を選んでから精修する
Claude Design は 1 つの解答だけを返すのではなく、デフォルトで複数の方向を生成して選択させます——エディタ風、ミュージアム風、Zine 風など。クリックしてさらに詳細化します。
③ インタラクティブなプロトタイプを生成（静的画像だけではない）
生成されたページは実際にクリック可能・入力可能な HTML です——ボタンには hover 効果があり、フォームは入力でき、データはリアルタイムで計算されます。
④ 製品プレゼンテーション/PPT を作る
Web ページだけでなく、完全なスライド（複数ページ、ナビゲーション付き、PDF/PPTX エクスポート可能）も生成できます。
⑤ アニメーションビデオを生成する
"From template" を通じてアニメーション付きの HTML ビデオを作成できます——絵コンテシナリオ + 実際にレンダリングされるアニメーション画面、再生コントロールバー付き。
⑥ 既存デザインをイテレーション（キャンバス上で直接コメント）
プロトタイプ生成後、プロンプトを書き直す必要はなく、Comment ボタンをクリックして要素を選択してコメントを書けば、Claude が部分修正します。
⑦ モバイルアプリのページデザイン
デバイスサイズ（iPhone など）の指定に対応し、デバイスフレーム付きのモバイル UI プロトタイプを生成します。
適している：デザイン背景がなく、Figma の学習曲線をスキップして、迅速にインタラクティブなプロトタイプを手に入れたい人。
Open Design：Claude Design のオープンソース代替
サブスクリプションを避けたい、またはデータプライバシーを重視するなら、Open Design（nexu-io のオープンソースプロジェクト）を試してみてください。これは Claude Design と同じ手法です：対話式でデザインプロトタイプを生成。違いはローカル優先、BYOK（モデル Key 持込）、どの Agent にも縛られないことです。
Open Design には 2 つの中心的な概念があります：
| 概念 | 説明 | あなたへの価値 |
|---|---|---|
| Skills（スキル） | 16 個の指示型デザインスキル（コピー、配色、クリエイティブ指導、ブレインストーミング…） | 1 つのスキル = 1 つの専門タスクテンプレート |
| Templates（テンプレート） | 288 個の実行可能なテンプレート（プロトタイプ、スライド、動き…）。すべて example.html 付き | fork してデータを差し替えるだけで納品できる |
| Design Systems（デザインシステム） | 151 セットの移植可能なデザインシステム（色板、フォント、動き、文風） | 一言で大手企業のビジュアル規範を適用 |
ローカルのコーディング Agent（Claude Code、Codex、Cursor、Qwen、Kimi など、公式では 21 種類サポート）を検出し、「デザインエンジン」として使います——あなたの既存の Agent がデザイナーになるのです。そのほか、Claude Code などのツールエコシステムにある UI design Skill（frontend-design など）も、デザイン規範を AI が実行可能な指示にパッケージ化し、AI が規範に従って出力できるようにします。
代表的な使用シーン：
① 新規プロジェクト：Skill + デザインシステム + 精度を選択
プロトタイプ作成時、ワイヤーフレームまたはハイファイを選択し、ターゲットプラットフォーム（レスポンシブ Web / モバイルなど）を指定し、内蔵の 150+ デザインシステムから 1 セットをビジュアルの土台として選べます。
Open Design を使って、Linear のデザインシステムを適用し、SaaS 製品のランディングページ HTML を生成してください
② Studio ワークスペース：対話駆動、リアルタイム生成
左側は会話パネル（AI の思考ステップ、Todo リスト、Write 操作を表示）、右側は iframe キャンバスで生成結果をリアルタイムにレンダリング——Claude Design に似ていますが、下部にローカルでどの CLI Agent（Claude Code、Codex、deepseek など）を呼び出しているかが表示されます。
③ デザインシステムを適用してスライド/PPT を生成
Slide deck タイプを選択し、テーマを入力するだけで完全な複数ページのスライドを生成できます。下の図は、コミュニティユーザーが Open Design を使って生成した中国語のスピーチスライドです。
④ ハイファイのモバイルアプリプロトタイプを生成
マルチスクリーン同時プレビューに対応し、iPhone デバイスフレームを自動生成。Tab バー、カードレイアウト、プログレスバーなどのコンポーネントもすべて揃っています。
⑤ UI design Skill で AI の出力を規範化する
Claude Code / Cursor に frontend-design のような Skill をインストールすると、AI がページを書くときに自動的にデザイン規範に従います：
# Claude Code での呼び出し
/frontend-design ログインページを実装してください
→ 自動的に Skill 内蔵のデザイン規範に従って出力：
- 色：メインカラー #4F46E5，成功 #10B981，エラー #EF4444
- 間隔：8px 基準グリッド
- コンポーネント：アクセシビリティ基準に適合した Button / Input / Form
- レスポンシブ：モバイル / タブレット / デスクトップの 3 端末対応⑥ ローカルプライベートプロジェクトはネットに出ない
社内プロジェクト、機密データを含む製品デザインは、すべてのファイルがローカルで処理され、モデルはローカルデプロイまたは BYOK で実行できます：
# Open Design をローカルで起動し、モデルはローカルデプロイの Qwen を使う
OPENAI_API_KEY=your-local-key OPENAI_BASE_URL=http://localhost:8000/v1 \
opendesign
# すべてのデザインファイルはローカル ~/.open-design/ に保存され、第三者サーバーを経由しない
適している：データプライバシーを重視し、既にコーディング Agent を持ち、デザインプロセスを完全に管理したい開発者。
3.3 2 つの手法をどう選ぶか
| 比較項目 | 手法一：Figma / MasterGo | 手法二：Claude Design / Open Design |
|---|---|---|
| 位置づけ | 専門のデザイン稿ツール | 対話式 AI デザインキャンバス |
| 代表ツール | Figma、MasterGo | Claude Design（公式）、Open Design（オープンソース代替） |
| 成果物 | 編集可能なデザイン稿 | インタラクティブな HTML プロトタイプ |
| 習得難易度 | ⭐⭐ 中 | ⭐ 低 |
| コスト | 無料版利用可 | Claude Design はサブスクリプション必要；Open Design はオープンソース無料（BYOK） |
| 適している | 厳格な納品と協業 | 迅速なプロトタイプ検証、プライバシー優先 |
💡 現実的な組み合わせ使い方
参考 → デザイン → 納品 の全過程で混在できます：Claude Design / Open Design で素早く方向とプロトタイプを出し → 定稿後に Figma/MasterGo にインポートして精修 → Claude Code に引き継いでコードを書く。各手法の長所を組み合わせて補い合います。
第 4 章：実践一：「他人の Web ページ」を似せるまで模倣する
目標は具体的です：好きな実際の Web ページを選び、「似せる」まで模倣する。 ここではランディングページを例にします。
Step 1：ターゲットを決める
構造が明確で、興味のあるランディングページ（SaaS 公式サイト、製品紹介ページなど）を選びます。そのスクリーンショットとリンクを保存します。
Step 2：第 2 章のフレームワークで分解する
ブラウザで右クリック → 検査し、4 ステップで記録します：
ターゲット：某 SaaS 公式サイトのランディングページ
① 構造：ナビゲーション(Logo/メニュー/CTA) → Hero(タイトル/サブタイトル/ボタン/スクリーンショット) → 特徴カード 3 枚 → 料金(3 段階) → フッター
② 色彩：メインカラー #0F172A ダーク、アクセント #6366F1、背景 #FFFFFF / #F8FAFC
③ フォント：見出し Inter 800 48px、本文 Inter 400 16px
④ コンポーネント：ボタン 角丸 8px/ベタ塗り、カード 角丸 16px/薄グレー背景/ボーダーなしStep 3：AI デザインツールに渡して、初版を生成する
分解結果を Claude Design / Open Design に投げ、この規範に沿って生成させます：
以下のデザイン規範に従って同型のランディングページを生成してください：
[Step 2 の分解記録を貼り付け]
製品：私のプロジェクト（用途を一言で説明）
要件：上記の色彩、フォント、間隔、角丸の規範をピクセル単位で厳守すること初版は通常「神は似ているが形は似ていない」状態です——構造は合っているが、細部にズレがあります。これは失敗ではなく、次にどこを調整すべきかが分かる良い材料です。
Step 4：区画ごとに突き合わせ、イテレーションして修正する
参考スクリーンショットと生成結果を並べ、区画ごとに突き合わせ、「修正指示」で近づけます：
| 見つかった問題 | 修正指示 |
|---|---|
| メインカラーが明るすぎる | 「メインカラーを #0F172A、アクセントカラーを #6366F1 に変更」 |
| ボタンの角丸が違う | 「すべてのボタンを 8px 角丸、ベタ塗り背景に統一」 |
| 間隔が狭すぎる | 「ブロック間隔を 96px、カード内側余白を 24px に変更」 |
| フォントが違う | 「見出しを Inter 800、本文を Inter 400 に変更」 |
| 装飾要素が多すぎる | 「背景の装飾を削除し、コアコンテンツだけを残す」 |
Step 5：受入れ基準——「似ている」
自分が入門したかどうかをどう判断するか？客観的な基準を自分に設定しましょう：
- [ ] 2 枚のスクリーンショットを撮る：元の Web ページ vs 自分の模倣版
- [ ] 2 枚を並べて拡大し、ピクセル単位で比較する
- [ ] 色値、フォントサイズ、間隔、角丸が肉眼でレイアウト差を判別できない
- [ ] 50% に縮小して再比較しても、どちらがオリジナルか判別できない
💡 「似ている」ことが目的ではなく、手段です。 2〜3 個のスタイルが完全に異なる Web サイトを模倣すると、自然と「デザイン感覚」が蓄積されます：いつ大きく余白を取るか、いつ高彩度にするか、いつ角丸を控えめにするか。その頃には新しいページを模倣する速度が格段に速くなっています。
第 5 章：実践二：デザインからコードへ
模倣したデザイン稿/プロトタイプは、最終的に製品の実際のページになる必要があります。2 つの引き継ぎ経路があります：
5.1 経路 A：AI デザインツール → フロントエンドコード
- Claude Design：キャンバスで定稿後、
/design-syncで Claude Code に同期し、デザインから直接コードを続けて書く。スクリーンショットからやり直す必要はない - Open Design：HTML を直接エクスポートでき、Agent に渡してプロジェクトコンポーネントに作り変える
- Figma/MasterGo：プラグインまたは MCP で React / Vue コードをエクスポート
5.2 経路 B：スクリーンショット → マルチモーダル大規模モデルで再現
最もシンプル：模倣したデザインのスクリーンショットをマルチモーダル大規模モデルに直接投げ、「React コンポーネントに再現」して、区画ごとに実装する。
3 つの「デザインからコードへの変換」経路の詳細な比較は、デザインプロトタイプからプロジェクトコードへを参照してください。コンポーネントレベルのエンジニアリング効率化を求めるなら、モダンコンポーネントライブラリで UI を更新もあわせてご覧ください。
第 6 章：大手企業のデザインシステムを自分自身のものにする
3 個のページを模倣すると気づきます：良いページの背後には、安定した「デザインシステム」がある。 ゼロから自分で作るより、巨人の肩に乗る方が賢いでしょう。
6.1 「移植可能なデザインシステム」とは何か
Open Design はデザインシステムを DESIGN.md ファイル（Linear、Vercel、Stripe、Apple、Cursor、Figma…）として作り、Claude Design はコードリポジトリ/デザインファイルから自動抽出します。本質的には同じものです：
DESIGN.md = カラートークン + フォント規範 + 間隔リズム + コンポーネントスタイル + 使用約束実際のサンプル構造：
# Design System: Linear
## Colors
- background: #08090A
- primary: #5E6AD2
- text: #F7F7F8
## Typography
- heading: 22px / 600, letter-spacing -0.4px
- body: 14px / 400
## Radius
- card: 8px
- button: 6px
## Spacing
- 4 / 8 / 12 / 16 / 24 / 32 px
## Do / Don't
- Do: 大量に余白を取り、色は控えめに使う
- Don't: グラデーションを使わない、シャドウを重ねない6.2 3 ステップで自分だけのデザインシステムを作る
- 土台を選ぶ：認めた大手企業のデザインシステムを適用する（Linear の控えめなダーク、Apple の余白など）
- パラメータを変える：メインカラーを自分のブランドカラーに差し替え、角丸と間隔を調整する
- ファイルに保存する：
DESIGN.mdまたは Skill として保存し、AI が毎回生成するときに自動的に従うようにする
6.3 発展：UI design Skill でスタイルを固定する
デザインシステムを Skill にカプセル化すると、一言で呼び出せます：
my-brand スキルのデザイン規範を使って、3 つの機能ページのファーストスクリーン案を生成してくださいSkill の作成・使用方法は、LLM と Skills で画面を美しくを参照してください。
第 7 章：著作権と倫理
模倣の能力が高くなるほど、境界を守ることが重要です：
ルールを真似し、結果は真似しない。 レイアウト、配色、間隔といった「ルール」は学習できます；Logo、アイコン、イラスト、コピーといった「結果」は直接コピーしないでください。
商用プロジェクトは慎重に。 商業納品前に確認してください：素材の著作権、フォントのライセンス（商用フォントは購入が必要）、参考サイトの利用規約。
AI 生成コンテンツの帰属。 プラットフォーム（Claude Design、Open Design など）によって規約が異なるため、商用前にサービス規約を確認してください。
AI の関与を明記する。 一部のプラットフォーム/規制では、公開コンテンツが AI 生成であることを示す必要があります。
最終的なチェック。 ブランドシンボル、広告素材など機微なシーンは必ず人工によるレビューを行ってください。
💡 提案
学習とプロトタイプの段階では模倣を自由に行いましょう；商業納品に入るときは、「参考」を「自分自身のデザインシステムによる再創作」に変え、生成記録を残してください。
まとめ
この章では「フロントエンドデザイン入門」を実行可能なパスに落とし込みました：
- マインドセット：フロントエンドデザインの入門は「真似」から始まり、ルールを真似し、結果は真似しない
- 見る：構造（4 大ブロック）+ ビジュアル（色彩/フォント/間隔/角丸）+ コンポーネントの 3 層でどんなページも分解できる。DevTools があなたの分析器
- ツール：2 つの手法——Figma/MasterGo（精密なデザイン稿）、Claude Design / Open Design + UI design Skills（対話式プロトタイプ）
- 模倣：ターゲットを選ぶ → 分解 → 生成 → 区画ごとにイテレーション → ピクセル単位で比較して受入れ
- 定着：大手企業の DESIGN.md を自分のデザインシステムに改造し、さらに Skill で固定する
💡 次のアクション
今日は完全な模倣練習を 1 回行いましょう：
- 「真似したい」ランディングページを探し、DevTools でその色彩/フォント/間隔/角丸を分解する
- Claude Design または Open Design で初版を生成し、区画ごとに「似せる」まで修正する
- 定稿を AI に渡してコードにし、ついでに自分の DESIGN.md も保存する