Engineer Course - Next.jsポートフォリオ講座

このモジュールで学ぶこと

デザインシステムの基本的な考え方
カラースキームの変更手法
ベンチマークサイトの分析方法
Claude Codeへの効果的なプロンプトの書き方
デザインの言語化トレーニング
コンポーネント化の基礎

学習目標

このモジュールを終えると、以下のことができるようになります：

デザインシステムの考え方を理解できる
モノトーン戦略などのカラースキームを選択できる
参考サイトを分析してデザインを言語化できる
Claude Codeに効果的な指示を出せる
自分でUIを改善・カスタマイズできる
トライ&エラーを繰り返して理想のデザインに近づけられる

セクション1: デザインシステムの考え方
セクション2: カラースキーム変更
セクション3: ベンチマーク分析
セクション4: プロンプトエンジニアリング
セクション5: コンポーネント化の基礎
セクション6: 演習
まとめ
参考資料
よくある質問

事前準備

以下が完了していることを確認してください：

モジュール5が完了している
基本的なポートフォリオサイトが動作している
VSCodeとClaude Codeが使える状態になっている

このモジュールの重要性

**これまでのモジュール（1-5）**では、Claude Codeに指示を出しながら、基本的なポートフォリオサイトを作成してきました。

このモジュール6は、講座全体の中で最も重要なモジュールです。

なぜ重要なのか？

KGI（最終目標）を思い出してください：

動画も含めたポートフォリオサイトがNext.jsで作れる → モジュール1-5で達成
⭐ UIを自分で改善・カスタマイズできるようになる → このモジュール6で達成

つまり、このモジュールを通じて、**「言われた通りに作る」から「自分で考えて改善する」**へとステップアップします。

セクション1: デザインシステムの考え方

デザインシステムとは？

デザインシステムとは、Webサイト全体のデザインを統一するためのルールや原則のことです。

なぜ必要？

サイト全体に一貫性を持たせる
見た目がプロフェッショナルになる
後から修正しやすくなる

デザインシステムの4つの柱

1. カラーパレット

サイト全体で使う色を決めます。

基本的な構成:

メインカラー: サイトの主役になる色（1色）
アクセントカラー: 強調したい部分に使う色（1-2色）
ベースカラー: 背景や文字に使う色（白・黒・グレー）

例:

メインカラー: ネイビー (#1a202c)
アクセントカラー: ゴールド (#fbbf24)
ベースカラー: 白 (#ffffff), グレー (#f3f4f6), 黒 (#000000)

2. タイポグラフィ

フォントとその使い方のルールです。

考えるべきこと:

見出し: 大きく、太く、目立つフォント
本文: 読みやすいフォント
サイズ: h1, h2, h3などの階層

例:

見出し (h1): 48px, 太字
小見出し (h2): 32px, 太字
本文: 16px, 通常

3. スペーシング

余白のルールです。

なぜ重要？

余白がないと窮屈に見える
余白がありすぎるとバラバラに見える

基本ルール:

セクション間: 大きめの余白（80-120px）
要素間: 中くらいの余白（20-40px）
文章の行間: 小さめの余白（1.5-1.8倍）

4. 一貫性

サイト全体で同じルールを適用することです。

例:

すべてのボタンが同じスタイル
すべてのセクションが同じ余白
すべての見出しが同じフォント

モノトーン戦略の天才性

講義の中で、受講者が選んだ「モノトーン戦略」は非常に効果的でした。

モノトーン戦略とは？

すべての画像を**白黒（グレースケール）**で表示
クリックするとカラーに切り替わる

なぜ天才的？

デザインがまとまる
- どんな色の画像でも、モノトーンにすることで統一感が生まれる
- プロフェッショナルでスタイリッシュな印象
インタラクティブ
- クリックでカラーになる → ユーザーが楽しめる
- 「見せたい写真」を強調できる
SEO的にも有利
- 初期表示は軽いモノトーン画像
- クリック後に高解像度カラー画像を表示（オプション）

実装例（モジュール5で既に学習済み）:

// クリックでモノトーン↔カラー切り替え
const [colorImages, setColorImages] = useState(new Set());

const toggleImageColor = (imagePath) => {
  const newSet = new Set(colorImages);
  if (newSet.has(imagePath)) {
    newSet.delete(imagePath);
  } else {
    newSet.add(imagePath);
  }
  setColorImages(newSet);
};

チェックポイント

デザインシステムの4つの柱を理解した
モノトーン戦略のメリットが分かった
自分のサイトに一貫性があるか確認した

セクション2: カラースキーム変更

CSS変数の活用

CSS変数を使うと、サイト全体の色を一箇所で管理できます。

CSS変数とは？

色やサイズなどを「変数」として定義し、サイト全体で使い回せる仕組みです。

メリット:

色を変更したいとき、1箇所を変えるだけで全体が変わる
デザインの統一が簡単

CSS変数の書き方

定義する場所: globals.css または tailwind.config.js

例（globals.css）:

:root {
  /* メインカラー */
  --color-primary: #1a202c;

  /* アクセントカラー */
  --color-accent: #fbbf24;

  /* ベースカラー */
  --color-background: #ffffff;
  --color-text: #000000;
}

使い方:

.button {
  background-color: var(--color-accent);
  color: var(--color-background);
}

モノトーン戦略の実装

モジュール5で既に実装しましたが、おさらいしましょう。

モノトーン表示

Tailwind CSSの場合:

<img
  src="/img/photo-01.jpg"
  className="grayscale hover:grayscale-0 transition-all duration-300"
/>

grayscale: 画像をモノトーン（白黒）にする
hover:grayscale-0: マウスを乗せるとカラーになる
transition-all duration-300: 0.3秒かけて滑らかに切り替わる

クリックでカラー切り替え

<img
  src={image.path}
  className={colorImages.has(image.path) ? '' : 'grayscale'}
  onClick={() => toggleImageColor(image.path)}
/>

アクセントカラーの選び方

アクセントカラーは、ボタンやリンクなど「押してほしい場所」に使います。

選び方のコツ

メインカラーと対照的な色
- メインが青系 → アクセントはオレンジ系
- メインが黒系 → アクセントはゴールド系
目立つ色
- 明るい色（イエロー、オレンジ、ピンク）
- 彩度が高い色
使いすぎない
- アクセントカラーは全体の10%程度

Claude Codeへの指示例

現在のデザインに、アクセントカラーとしてゴールド（#fbbf24）を追加してください。
ボタンとリンクにこの色を適用してください。

チェックポイント

CSS変数の概念を理解した
モノトーン戦略の実装方法が分かった
アクセントカラーの選び方が分かった

セクション3: ベンチマーク分析

ベンチマークサイトとは？

ベンチマークサイトとは、自分が「こんなデザインにしたい！」と思う参考サイトのことです。

なぜ重要？

ゼロから考えるより、良いものを参考にする方が早い
プロのデザインから学べる
言語化の練習になる

参考サイトの見つけ方

1. 同じジャンルのサイトを探す

ポートフォリオサイトの例:

デザイナーのポートフォリオ
フォトグラファーのポートフォリオ
クリエイターのポートフォリオ

検索キーワード:

"portfolio website design"
"photographer portfolio"
"minimalist portfolio"

2. ギャラリーサイトを使う

プロのデザインが集まっているサイトです。

おすすめサイト:

Awwwards: https://www.awwwards.com/
Dribbble: https://dribbble.com/
Behance: https://www.behance.net/
Pinterest: https://www.pinterest.com/

3. 「好き」を見つける

たくさん見て、「これいいな」と思ったサイトを集めます。

ポイント:

最低3-5サイトは見る
スクリーンショットを撮っておく
「なぜ好きか」をメモする

デザインの分解

参考サイトを見つけたら、なぜ良いのかを分解します。

開発者ツールの使い方

手順:

参考サイトを開く
開発者ツールを開く
- Windows: F12 または Ctrl + Shift + I
- Mac: Cmd + Option + I
要素を選択
- 左上の矢印アイコンをクリック
- サイト上の気になる部分をクリック
情報を確認
- 色: color, background-color
- フォント: font-family, font-size
- 余白: margin, padding
- レイアウト: display, flex, grid

例:

見出しの色: #1a202c
フォントサイズ: 48px
フォント: 'Inter', sans-serif
余白: margin-bottom: 32px

言語化の練習

デザインの分解ができたら、それを言葉にします。

言語化の3ステップ

ステップ1: 全体の印象

まず、パッと見た印象を書きます。

例:

「シンプルで洗練されている」
「写真が大きくて迫力がある」
「余白が多くて読みやすい」

ステップ2: 具体的な要素

次に、具体的にどの部分が良いのかを書きます。

例:

「ヒーローセクションに動画が使われている」
「見出しが大きくて太い」
「モノトーンで統一されている」

ステップ3: Claude Codeへの指示に変換

最後に、それをClaude Codeに伝える言葉にします。

例:

ヒーローセクションに、全画面で動画を表示してください。
動画の上に、大きく太い見出し（48px, 太字）を中央配置してください。
サイト全体をモノトーン（白・黒・グレー）で統一してください。

言語化の実例（講義ログより）

講義では、こんな言語化がありました：

受講者の指示:

「スタイリッシュな感じで」

講師のアドバイス:

「分かるは分かるけど、Claude Codeの言うスタイリッシュと私たちの言うスタイリッシュが、必ずしも一致するかどうかは何とも言えない。違ったら違ったって言ってやりゃいいから。」

ポイント:

抽象的な言葉（スタイリッシュ、かっこいい）でも、まずは試してみる
思った通りでなければ、具体的に修正を指示する

チェックポイント

参考サイトを3つ以上見つけた
開発者ツールで色やフォントを確認できた
デザインを言葉で説明できる

セクション4: プロンプトエンジニアリング

プロンプトエンジニアリングとは？

プロンプトエンジニアリングとは、AIに対して効果的な指示を出す技術のことです。

このセクションが最重要:

良い指示 → 理想のデザインに近づく
悪い指示 → 何度もやり直し

効果的な指示の出し方

1. 具体的に書く

悪い例:

おしゃれにしてください。

良い例:

ヒーローセクションに全画面の動画を配置し、
その上に白い大きな見出し（48px）を中央配置してください。

ポイント:

何を（ヒーローセクション）
どうする（全画面の動画を配置）
詳細（白い、48px、中央配置）

2. セクション名を活用する

サイトは「セクション」の集まりです。セクション名を使うと、Claude Codeが理解しやすくなります。

よく使うセクション名:

セクション名	意味
ヒーローセクション	サイトのトップ（最初に見える部分）
アバウトセクション	自己紹介・会社紹介
ギャラリーセクション	作品・写真の一覧
サービスセクション	提供しているサービス
コンタクトセクション	お問い合わせフォーム
フッター	サイトの一番下

例:

ヒーローセクションの背景色を黒にしてください。
アバウトセクションを2カラムレイアウトにしてください。

3. 1つずつ指示する

一度に複数の指示を出すと、Claude Codeが混乱します。

悪い例:

ヒーローセクションを変えて、アバウトセクションも変えて、
ギャラリーも3カラムにして、フォントも変えてください。

良い例:

【1回目】ヒーローセクションの背景を黒にしてください。
【確認後】
【2回目】アバウトセクションを2カラムレイアウトにしてください。

ポイント:

1つの指示 → 確認 → 次の指示
少しずつ理想に近づける

4. 参考画像・URLを貼る

言葉で説明しにくいときは、参考画像やURLを貼ります。

方法1: URLを貼る

このサイトのヒーローセクションを参考に、
似たデザインにしてください。
https://example.com

注意:

Claude CodeはURLを見に行きますが、画像は読み取れないことがあります
テキスト情報（構造、レイアウト）は読み取れます

方法2: 開発者ツールでコピー

もっと確実な方法は、開発者ツールでHTMLをコピーすることです。

手順:

参考サイトで開発者ツールを開く（F12）
気になる部分を右クリック → 「検証」
HTMLコード上で右クリック → 「Copy element」
Claude Codeに貼り付け

この部分のデザインを参考にしてください：

<section class="hero">
  <h1 class="text-5xl font-bold">Welcome</h1>
  ...
</section>

注意: Claude Codeのグラデーション問題

講義ログから重要な注意点が見つかりました。

グラデーションを多用する傾向

講師のコメント:

「クロードの傾向は、スタイリッシュとか、なんか、かっこいいとかいう表現を使うと、グラデーションを使いたがり。それをすると、だいたい俺にぶち怒られるっていつも。」

問題:

「スタイリッシュ」「かっこいい」と言うと、Claude Codeは異色のグラデーションを多用する
紫→ピンク、青→緑など、派手なグラデーションになりがち
プロフェッショナルに見えないことが多い

対策

方法1: グラデーションを禁止する

スタイリッシュなデザインにしてください。
ただし、異色のグラデーションは使わないでください。
単色またはモノトーンで統一してください。

方法2: 同色グラデーションならOK

背景に、ネイビーから黒への同色グラデーションを使ってください。

方法3: 具体的に色を指定

背景色: 白 (#ffffff)
テキスト色: 黒 (#000000)
アクセント色: ゴールド (#fbbf24)

イテレーション（試行錯誤）

イテレーションとは、何度も繰り返し改善することです。

イテレーションの流れ

1. 指示を出す
   ↓
2. Claude Codeが実装
   ↓
3. ブラウザで確認
   ↓
4. 気になる部分を修正指示
   ↓
5. 繰り返し

重要:

完璧を最初から求めない
少しずつ理想に近づける
違ったら「違う」と伝える

プロンプト例集

実際に使えるプロンプトをまとめました。

ヒーローセクション

動画背景:

ヒーローセクションに、/mov/hero-video.mp4を全画面で表示してください。
動画の上に、白い見出し「Welcome」を中央配置してください。
見出しのサイズは48px、太字にしてください。

スライドショー:

ヒーローセクションに、/img/フォルダの画像を使った
スライドショーを実装してください。
4秒間隔で自動切り替えしてください。
すべての画像をモノトーン表示にしてください。

レイアウト

2カラム:

アバウトセクションを2カラムレイアウトにしてください。
左側に画像、右側にテキストを配置してください。

グリッド:

ギャラリーセクションを3カラムのグリッドレイアウトにしてください。
PCは3カラム、タブレットは2カラム、スマホは1カラムにしてください。

色・スタイル

モノトーン:

サイト全体を白・黒・グレーのモノトーンで統一してください。
アクセントカラーとしてゴールド（#fbbf24）を使ってください。

ダークモード:

背景を黒（#000000）、テキストを白（#ffffff）にして、
ダークモードのデザインにしてください。

チェックポイント

具体的な指示の出し方が分かった
セクション名を使って指示できる
グラデーション問題を理解した
イテレーションの重要性が分かった

セクション5: コンポーネント化の基礎

コンポーネントとは？

コンポーネントとは、再利用可能なパーツのことです。

例:

ボタン
カード（画像+テキストのセット）
ナビゲーションメニュー
フッター

なぜコンポーネント化するのか？

メリット1: 再利用できる

同じデザインのボタンを10個作るとき、コンポーネント化すれば1回書くだけです。

コンポーネント化しない場合:

<button className="bg-blue-500 text-white px-4 py-2 rounded">ボタン1</button>
<button className="bg-blue-500 text-white px-4 py-2 rounded">ボタン2</button>
<button className="bg-blue-500 text-white px-4 py-2 rounded">ボタン3</button>

コンポーネント化した場合:

<Button>ボタン1</Button>
<Button>ボタン2</Button>
<Button>ボタン3</Button>

メリット2: 修正が楽

ボタンの色を変えたいとき、コンポーネント化していれば1箇所を変えるだけです。

コンポーネントの例

カードコンポーネント

Before（コンポーネント化していない）:

<div className="bg-white shadow-lg rounded-lg p-6">
  <img src="/img/photo-01.jpg" className="w-full h-64 object-cover rounded" />
  <h3 className="text-xl font-bold mt-4">プロジェクト名</h3>
  <p className="text-gray-600 mt-2">説明文</p>
</div>

これを何度も書くのは大変です。

After（コンポーネント化）:

// components/Card.tsx
export default function Card({ image, title, description }) {
  return (
    <div className="bg-white shadow-lg rounded-lg p-6">
      <img src={image} className="w-full h-64 object-cover rounded" />
      <h3 className="text-xl font-bold mt-4">{title}</h3>
      <p className="text-gray-600 mt-2">{description}</p>
    </div>
  );
}

// 使うとき
<Card
  image="/img/photo-01.jpg"
  title="プロジェクト名"
  description="説明文"
/>

Claude Codeにコンポーネント化を依頼する

指示例:

ギャラリーセクションのカード部分を、
再利用可能なコンポーネントとして分離してください。

componentsフォルダにCard.tsxを作成し、
画像、タイトル、説明文を受け取れるようにしてください。

Claude Codeがやってくれること:

src/components/Card.tsx を作成
カードのデザインをコンポーネント化
ギャラリーセクションで使えるようにする

コンポーネントの分割基準

いつコンポーネント化すべき？

,[object Object],:
同じデザインを2回以上使う
複雑なパーツ（ナビゲーション、カードなど）
今後も使いそうなパーツ

❌ コンポーネント化しなくて良い場合:

1回しか使わない
非常にシンプル（<p>タグだけなど）

チェックポイント

コンポーネントの概念を理解した
コンポーネント化のメリットが分かった
Claude Codeにコンポーネント化を依頼できる

セクション6: 演習

演習の目的

これまで学んだことを使って、自分のポートフォリオサイトを改善します。

演習1: ベンチマーク分析（10分）

やること:

ポートフォリオサイトを3つ見つける
開発者ツールで色・フォントを確認する
「良いと思ったポイント」をメモする

メモのフォーマット:

【サイトURL】
https://example.com

【良いと思ったポイント】
- ヒーローセクションに大きな写真
- モノトーンで統一されている
- 余白が多くて読みやすい

【参考にしたい要素】
- 見出しのフォントサイズ: 48px
- 背景色: #f3f4f6
- 余白: セクション間 80px

演習2: プロンプト作成（10分）

やること: 演習1でメモした内容を、Claude Codeへの指示に変換します。

例:

ヒーローセクションに、/img/hero.jpgを全画面で表示してください。
画像の上に、白い見出し「Portfolio」を中央配置してください。
見出しのフォントサイズは48px、太字にしてください。

サイト全体の背景色を#f3f4f6に変更してください。
各セクション間の余白を80pxにしてください。

演習3: 実装とイテレーション（10分）

やること:

Claude Codeに指示を出す
ブラウザで確認
気になる部分を修正
繰り返し

ポイント:

1つずつ指示する
毎回確認する
違ったら修正する

修正の例:

【1回目】
ヒーローセクションの見出しを48pxにしてください。

【確認】→ 大きすぎる

【2回目】
見出しを36pxに変更してください。

【確認】→ ちょうど良い！

演習のゴール

以下のいずれかができたら成功です：

ヒーローセクションのデザインを変更できた
サイト全体の色を変更できた
ギャラリーのレイアウトを変更できた
自分なりのカスタマイズができた

完璧を求めない:

最初から理想通りにはなりません
少しずつ改善していくプロセスが重要です

まとめ

このモジュールで学んだこと

デザインシステムの考え方（カラーパレット、タイポグラフィ、スペーシング、一貫性）
モノトーン戦略（統一感とインタラクティブ性を両立）
ベンチマーク分析（参考サイトの見つけ方、開発者ツールでの分析、デザインの言語化）
プロンプトエンジニアリング（具体的な指示の出し方、セクション名の活用、グラデーション問題の回避、イテレーションの重要性）
コンポーネント化（再利用可能なパーツの作成）

次のステップ

このモジュールが終わったら:

何度も練習する
- ポートフォリオサイトを10個作れば、かなり慣れます
モジュール7へ進む
- サイトをインターネットに公開します（デプロイ）
自分のスタイルを見つける
- 何度も作っていくと「自分の癖」が見えてきます
- それが「あなたのスタイル」になります

重要なマインドセット

講師のコメント（講義ログより）:

「結構結局やってくとわかると思うけどひらめきなのよ。何回か作っていくと、俺の癖だったらこうなるなみたいなのが見えてくるって感じ。」

つまり:

経験を積むことが最重要
最初から完璧を求めない
トライ&エラーを楽しむ

参考資料

よくある質問

Q1: 参考サイトのデザインをそのままコピーしてもいいですか？

A: デザインのアイデアは参考にしてOKですが、完全なコピーはNGです。

良い例:

「ヒーローセクションに大きな写真を使う」というアイデアを参考にする
色やフォントは自分で選ぶ

悪い例:

HTMLやCSSをそのままコピペする
デザインを完全に真似る

Q2: Claude Codeが思った通りのデザインを作ってくれません

A: それは正常です。何度もイテレーションしてください。

コツ:

1つずつ指示する
毎回確認する
「もっと大きく」「もっと余白を」など、具体的に修正指示を出す

Q3: モノトーン以外の戦略はありますか？

A: もちろんあります！

例:

ビビッドカラー: 鮮やかな色を使う
パステルカラー: 優しい色合い
ダークモード: 黒背景+白文字
グラデーション: 同色グラデーション（青→水色など）

選び方:

作品の雰囲気に合わせる
ターゲットユーザーの好みを考える

Q4: コンポーネント化は必須ですか？

A: 必須ではありませんが、推奨です。

小規模サイト（ポートフォリオなど）:

コンポーネント化しなくても問題ない
ただし、カードなど繰り返し使う部分はコンポーネント化した方が楽

大規模サイト（ホームページ、Webアプリなど）:

コンポーネント化は必須
保守性・拡張性が格段に上がる

Q5: デザインセンスがないのですが…

A: デザインセンスは後天的に身につきます。

方法:

たくさん見る: 良いデザインをたくさん見る
真似る: 良いデザインを真似てみる
繰り返す: 何度も作る

講師のコメント:

「何回か作っていくと、俺の癖だったらこうなるなみたいなのが見えてくるって感じ。」

Q6: どれくらい練習すればできるようになりますか？

A: 個人差がありますが、目安は以下の通りです。

3ヶ月:

ポートフォリオサイトを8-10個作る
基本的なカスタマイズができるようになる

6ヶ月:

ホームページが作れるようになる
自分のスタイルが確立される

1年:

Webアプリケーションに挑戦できる

重要: 量をこなすことが上達の近道です。

お疲れ様でした！モジュール6はこれで終了です。

次はモジュール7: デプロイと公開で、あなたのポートフォリオサイトを世界に公開します！

UI改善とカスタマイズ

このモジュールで学ぶこと

学習目標

目次

事前準備

このモジュールの重要性

なぜ重要なのか？

セクション1: デザインシステムの考え方

デザインシステムとは？

デザインシステムの4つの柱

1. カラーパレット

2. タイポグラフィ

3. スペーシング

4. 一貫性

モノトーン戦略の天才性

チェックポイント

セクション2: カラースキーム変更

CSS変数の活用

CSS変数とは？

CSS変数の書き方

モノトーン戦略の実装

モノトーン表示

クリックでカラー切り替え

アクセントカラーの選び方

選び方のコツ

Claude Codeへの指示例

チェックポイント

セクション3: ベンチマーク分析

ベンチマークサイトとは？

参考サイトの見つけ方

1. 同じジャンルのサイトを探す

2. ギャラリーサイトを使う

3. 「好き」を見つける

デザインの分解

開発者ツールの使い方

言語化の練習

言語化の3ステップ

言語化の実例（講義ログより）

チェックポイント

セクション4: プロンプトエンジニアリング

プロンプトエンジニアリングとは？

効果的な指示の出し方

1. 具体的に書く

2. セクション名を活用する

3. 1つずつ指示する

4. 参考画像・URLを貼る

注意: Claude Codeのグラデーション問題

グラデーションを多用する傾向

対策

イテレーション（試行錯誤）

イテレーションの流れ

プロンプト例集

ヒーローセクション

レイアウト

色・スタイル

チェックポイント

セクション5: コンポーネント化の基礎

コンポーネントとは？

なぜコンポーネント化するのか？

メリット1: 再利用できる

メリット2: 修正が楽

コンポーネントの例

カードコンポーネント

Claude Codeにコンポーネント化を依頼する

コンポーネントの分割基準

チェックポイント

セクション6: 演習

演習の目的

演習1: ベンチマーク分析（10分）

演習2: プロンプト作成（10分）

演習3: 実装とイテレーション（10分）

演習のゴール

まとめ

このモジュールで学んだこと

次のステップ

重要なマインドセット

参考資料

デザインギャラリーサイト

カラーパレットツール

フォント