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

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

ディレクトリ設計の考え方
publicフォルダの使い方
画像の最適化とフォーマット選択
動画ファイルの扱い方
ファイル命名規則のベストプラクティス
アスペクト比と表示最適化

学習目標

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

適切なディレクトリ構造を設計できる
画像・動画ファイルを最適な形で準備できる
ファイル命名規則を理解し、実践できる
SEOとパフォーマンスを考えたファイル管理ができる
スマホ/PC表示を考えた素材準備ができる

事前準備

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

モジュール2が完了している
Next.jsプロジェクトが作成されている
VSCodeでプロジェクトが開いている

準備する素材

ポートフォリオに掲載したい以下の素材を用意してください：

画像: 作品写真、プロフィール写真など（JPEG/PNG）
動画: 作品動画、デモ動画など（MP4推奨）※任意

まだ素材がない場合は、仮の画像で進めてもOKです。後で差し替えられます。

セクション1: ディレクトリ設計の基本

publicフォルダの役割

Next.jsでは、publicフォルダに置いたファイルは、そのまま公開URLとしてアクセスできます。

例:

public/
  image.jpg     → http://localhost:3000/image.jpg
  logo.png      → http://localhost:3000/logo.png
  video.mp4     → http://localhost:3000/video.mp4

なぜディレクトリ構造が重要なのか

プロジェクトが大きくなると、ファイルが増えて管理が難しくなります。

悪い例:

public/
  image1.jpg
  image2.jpg
  photo.jpg
  pic.png
  video.mp4
  mov.mp4
  ...

→ どれが何の画像かわからない

良い例:

public/
  img/
    works/
      project-01.jpg
      project-02.jpg
    profile/
      photo.jpg
  mov/
    demo-video.mp4

→ 目的ごとに整理されていて探しやすい

ポートフォリオサイト向けのディレクトリ設計

今回は以下の構造を採用します：

public/
├── img/               # 画像ファイル
│   ├── works/         # 作品画像
│   └── profile/       # プロフィール画像
└── mov/               # 動画ファイル
    └── works/         # 作品動画

ディレクトリ名の選び方:

img: imageの略（短く覚えやすい）
mov: movieの略（短く覚えやすい）
半角英数字のみ
小文字で統一（大文字小文字を混ぜると混乱する）

ディレクトリを作成する

方法1: VSCodeのエクスプローラーから作成

左サイドバーのエクスプローラーでpublicフォルダを右クリック
「新しいフォルダー」を選択
imgと入力してEnter
同様にmovフォルダも作成
imgフォルダを右クリック → 「新しいフォルダー」→ works
同様にimg/profile、mov/worksも作成

方法2: ターミナルから作成

# プロジェクトルートにいることを確認
cd C:/portfolio-site  # Windowsの場合

# ディレクトリを一括作成
mkdir -p public/img/works public/img/profile public/mov/works

-p: 親ディレクトリも一緒に作成

作成後の確認

以下のような構造になっていればOK：

public/
├── img/
│   ├── profile/
│   └── works/
└── mov/
    └── works/

サブディレクトリ戦略

基本方針:

目的別に分ける（works, profile, icons など）
深くしすぎない（2-3階層まで）
将来の拡張を考える

拡張例:

public/
├── img/
│   ├── works/
│   │   ├── web/          # Web制作
│   │   ├── design/       # デザイン
│   │   └── photography/  # 写真
│   ├── profile/
│   └── icons/            # アイコン類
└── mov/
    └── works/

ただし、最初はシンプルに始めて、必要に応じて後から細分化するのがおすすめです。

チェックポイント

publicフォルダの役割を理解した
ディレクトリ設計の重要性を理解した
public/img/とpublic/mov/フォルダを作成した
サブディレクトリ（works, profileなど）を作成した

セクション2: 画像ファイルの準備

推奨画像フォーマット

フォーマット	用途	特徴
JPEG (.jpg)	写真	ファイルサイズ小、グラデーション豊富な画像に最適
PNG (.png)	ロゴ、アイコン	透過対応、文字やシャープな画像に最適
WebP (.webp)	全般	次世代フォーマット、高圧縮・高品質（対応ブラウザ確認必要）

基本ルール:

写真 → JPEG
透過が必要な画像（ロゴなど）→ PNG
最新ブラウザのみ対応でOK → WebP

ポートフォリオサイトでは主にJPEGを使います。

画像サイズとアスペクト比

アスペクト比とは？

アスペクト比は、画像の縦横の比率です。

16:9 → 横長（PCモニター、YouTube動画など）
4:3 → やや横長（昔のテレビ画面）
1:1 → 正方形（Instagram投稿など）
9:16 → 縦長（スマホ画面、TikTok、Instagramストーリーなど）

ポートフォリオでの考え方

PC表示とスマホ表示で最適な比率が異なる場合があります。

例: ヒーロー画像

PC: 16:9の横長画像が見栄えが良い
スマホ: 9:16の縦長画像の方がフィットする

解決策:

両方用意する（推奨）
- hero-pc.jpg（16:9）
- hero-mobile.jpg（9:16）
- CSSで画面サイズに応じて切り替え
1枚で対応する
- 正方形（1:1）や4:3など、どちらでも見やすい比率を選ぶ
- トリミングされても問題ない構図にする

このモジュールでの方針: まずは手持ちの画像をそのまま使い、後でレイアウトに合わせて調整します。

画像の最適化

なぜ最適化が必要？

ページ読み込み速度: 大きすぎる画像は表示が遅くなる
SEO: Googleは読み込み速度を評価基準にしている
ユーザー体験: 遅いサイトは離脱率が高い

推奨画像サイズ

用途	推奨幅	ファイルサイズ目安
ヒーロー画像（全画面）	1920px	200-500KB
作品サムネイル	800-1200px	100-300KB
プロフィール写真	500-800px	50-150KB

注意:

高解像度ディスプレイ（Retina等）を考慮して、表示サイズの1.5〜2倍の解像度を用意
必要以上に大きくしない（4000px超えは過剰）

画像圧縮ツール

無料で使える画像圧縮ツール：

TinyPNG (https://tinypng.com/)
- ブラウザで使用
- ドラッグ&ドロップで圧縮
- 品質を保ちながら70%程度圧縮
Squoosh (https://squoosh.app/)
- Google製
- 圧縮前後を比較できる
- WebP変換も可能
ImageOptim (Mac)
- アプリ版
- バッチ処理可能

手順例（TinyPNG）:

https://tinypng.com/ を開く
画像をドラッグ&ドロップ
圧縮完了後、「Download」をクリック
圧縮済み画像をプロジェクトに配置

SEOを考えた画像最適化

1. ファイル名を意味のあるものにする

❌ 悪い例:

IMG_1234.jpg
DSC_5678.jpg
photo.jpg

✅ 良い例:

web-design-portfolio-2024.jpg
profile-photo-designer.jpg
project-ecommerce-site.jpg

ファイル名に含まれるキーワードは、SEOに影響します。

2. alt属性を設定する（コード側で実施）

画像にはalt属性（代替テキスト）を設定します。

<img src="/img/works/project-01.jpg" alt="ECサイトのデザイン作品" />

これは後のモジュールでClaude Codeに依頼します。

縦横別ファイル戦略

同じ画像でも、PC用（横長）とスマホ用（縦長）を別々に用意するテクニックです。

例:

public/img/hero/
  hero-desktop.jpg   # 16:9（横長）
  hero-mobile.jpg    # 9:16（縦長）

CSS/Reactでの切り替え:

<picture>
  <source media="(min-width: 768px)" srcSet="/img/hero/hero-desktop.jpg" />
  <img src="/img/hero/hero-mobile.jpg" alt="ヒーロー画像" />
</picture>

これにより、デバイスに最適な画像を表示できます。

チェックポイント

画像フォーマット（JPEG/PNG）を理解した
アスペクト比の概念を理解した
画像圧縮の重要性を理解した
SEOに配慮したファイル名の付け方を理解した

セクション3: 動画ファイルの準備

推奨動画フォーマット

フォーマット	ブラウザ対応	推奨度
MP4 (H.264)	すべて	⭐⭐⭐⭐⭐
WebM	Chrome, Firefox	⭐⭐⭐☆☆
OGG	Firefox, Chrome	⭐⭐☆☆☆

結論: MP4を使えば間違いなし

動画ファイルサイズの目安

長さ	推奨サイズ	備考
〜30秒	5-10MB	サムネイル動画
1-3分	20-50MB	作品紹介動画
3分以上	外部ホスティング推奨	YouTube埋め込み

重要:

Vercel（デプロイ先）には100MBのファイルサイズ制限があります
大きな動画はYouTubeやVimeoにアップロードして埋め込む方が良い

動画の最適化

FFMPEGでの圧縮（後のモジュールで詳しく解説）

動画が大きすぎる場合、FFMPEGというツールで圧縮できます。

# 例: 動画を圧縮
ffmpeg -i input.mp4 -vcodec libx264 -crf 28 output.mp4

これはモジュール7（デプロイ編）で詳しく説明します。

外部ホスティング vs ローカル

ローカル配置（publicフォルダ）

メリット:

サイト内で完結
外部サービスに依存しない
再生プレイヤーを自由にカスタマイズできる

デメリット:

ファイルサイズ制限（100MB）
帯域幅を消費する
ストリーミング配信ではない

外部ホスティング（YouTube/Vimeo）

メリット:

ファイルサイズ無制限
ストリーミング配信
帯域幅を消費しない
自動で最適な画質に調整される

デメリット:

YouTubeロゴや関連動画が表示される
サービスに依存する
カスタマイズに制限

推奨:

短い動画（〜1分、10MB以下）→ ローカル
長い動画（3分以上）→ YouTube埋め込み

YouTube埋め込みの方法（参考）

YouTubeで動画をアップロード
「共有」→「埋め込む」をクリック
埋め込みコードをコピー

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/動画ID"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

これをReactコンポーネントに貼り付けるだけでOKです。

チェックポイント

動画フォーマットはMP4が推奨であることを理解した
ファイルサイズ制限（100MB）を理解した
外部ホスティングという選択肢を知った
YouTube埋め込みの方法を理解した

セクション4: ファイル命名規則

命名規則の重要性

悪い例:

public/img/
  IMG_0001.jpg
  写真.jpg
  my photo.png
  DSCF1234.JPG

問題点:

何の画像かわからない
日本語ファイル名は文字化けリスク
スペースはURLで%20に変換される（見にくい）
大文字小文字が混在して混乱

良い例:

public/img/works/
  web-design-ecommerce-2024.jpg
  branding-logo-cafe.jpg
  photography-landscape-01.jpg

ファイル命名のルール

1. 半角英数字とハイフンのみ

- ✅ project-name.jpg
- ✅ profile-photo.png
❌ プロジェクト.jpg（日本語NG）
❌ project name.jpg（スペースNG）
❌ project_name.jpg（アンダースコアは可だがハイフン推奨）

2. 小文字で統一

- ✅ hero-image.jpg
❌ Hero-Image.jpg
❌ HERO-IMAGE.jpg

Windowsはファイル名の大文字小文字を区別しませんが、Linuxサーバーでは区別されます。トラブル防止のため小文字で統一します。

3. 意味のある名前をつける

- ✅ profile-photo-2024.jpg（何の写真かわかる）
❌ img001.jpg（何かわからない）

4. 日付や連番を使う

複数の類似ファイルがある場合:

project-website-01.jpg
project-website-02.jpg
project-website-03.jpg

または:

event-photo-2024-01-15.jpg
event-photo-2024-02-20.jpg

5. 長すぎない名前

- ✅ ecommerce-product-page.jpg（適度）
❌ my-awesome-ecommerce-website-product-listing-page-screenshot-final-version-2.jpg（長すぎ）

目安: 50文字以内

実践例

プロフィール写真:

public/img/profile/
  profile-main.jpg          # メインのプロフィール写真
  profile-casual.jpg        # カジュアルな写真
  profile-thumbnail.jpg     # サムネイル用（小さいサイズ）

作品画像:

public/img/works/
  web-design-portfolio-site.jpg
  web-design-ecommerce-shop.jpg
  logo-design-coffee-shop.jpg
  photography-landscape-hokkaido.jpg

動画:

public/mov/works/
  demo-web-animation.mp4
  timelapse-illustration-process.mp4

チェックポイント

ファイル名は半角英数字とハイフンのみ
小文字で統一
意味のあるファイル名をつける
適度な長さ（50文字以内）

セクション5: 実際に素材を配置する

手順1: 素材を準備する

自分のパソコン内から、ポートフォリオに掲載したい画像・動画を集めます。

まだ素材がない場合は、以下の無料素材サイトから仮画像をダウンロードできます：

Unsplash (https://unsplash.com/) - 高品質な写真
Pexels (https://www.pexels.com/) - 写真・動画
Pixabay (https://pixabay.com/) - 写真・イラスト

手順2: ファイル名を変更する

ダウンロードした画像のファイル名を、命名規則に従って変更します。

例:

IMG_1234.jpg → profile-photo.jpg
DSC_5678.jpg → work-website-design.jpg

手順3: 画像を圧縮する（任意だが推奨）

TinyPNG (https://tinypng.com/) などで圧縮します。

手順4: プロジェクトに配置する

方法1: ドラッグ&ドロップ

エクスプローラー（Finder）で画像ファイルを選択
VSCodeのpublic/img/works/フォルダにドラッグ&ドロップ

方法2: ファイルを直接コピー

エクスプローラーで C:\portfolio-site\public\img\works\ を開く
画像ファイルをコピー&ペースト

手順5: 配置を確認する

VSCodeのエクスプローラーで以下のような構造になっていることを確認：

public/
├── img/
│   ├── profile/
│   │   └── profile-photo.jpg
│   └── works/
│       ├── project-01.jpg
│       ├── project-02.jpg
│       └── project-03.jpg
└── mov/
    └── works/
        └── demo-video.mp4

手順6: ブラウザで確認する

開発サーバーが起動している状態で、ブラウザで以下のURLを開いてみてください：

http://localhost:3000/img/works/project-01.jpg

画像が表示されればOKです！

URLの規則:

public/img/works/project-01.jpg → /img/works/project-01.jpg
public/以下のパスが、そのままURLになる

チェックポイント

素材ファイルを準備した
ファイル名を命名規則に従って変更した
プロジェクトのpublicフォルダに配置した
ブラウザで画像URLにアクセスして表示を確認した

まとめ

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

publicフォルダの役割とディレクトリ設計
画像フォーマット（JPEG/PNG）の使い分け
画像最適化とSEO対策
動画ファイルの扱い方と外部ホスティング
ファイル命名規則（半角英数字・小文字・ハイフン）
実際に素材をプロジェクトに配置する方法

重要ポイントの復習

項目	内容
ディレクトリ構造	`public/img/`, `public/mov/`
画像フォーマット	写真→JPEG、透過→PNG
ファイル命名	半角英数字・小文字・ハイフン
画像サイズ目安	ヒーロー:200-500KB、サムネイル:100-300KB
動画サイズ制限	100MB以下（Vercel制限）
URL規則	`public/img/a.jpg` → `/img/a.jpg`

次のステップ

素材の準備ができたので、次は実際にUIを構築していきます。

モジュール4: 基本UIの構築 に進んでください。

参考資料

画像最適化ツール

TinyPNG - PNG/JPEG圧縮
Squoosh - Google製画像圧縮ツール
ImageOptim - Mac用アプリ

無料素材サイト

Unsplash - 高品質写真
Pexels - 写真・動画
Pixabay - 多様な素材

動画関連

FFMPEG公式 - 動画変換ツール
Vimeo - 高品質動画ホスティング
YouTube - 動画ホスティング

よくある質問

Q: 画像が多すぎてサイトが重くなりませんか？ A: Next.jsの<Image>コンポーネントを使えば自動で最適化されます（モジュール4で使用）。また、遅延読み込み（Lazy Loading）も自動で適用されます。

Q: WebP形式を使うべきですか？ A: 可能であればWebPがおすすめですが、JPEGでも十分です。Next.jsの<Image>コンポーネントが自動でWebPに変換してくれます。

Q: 動画は必須ですか？ A: 必須ではありません。静止画だけでも十分魅力的なポートフォリオは作れます。

Q: Retinaディスプレイ対応はどうすればいいですか？ A: 画像を表示サイズの2倍の解像度で用意してください。Next.jsの<Image>コンポーネントが自動で適切なサイズを配信します。

Q: ファイル名に日本語を使うとどうなりますか？ A: ブラウザによっては文字化けしたり、URLが%E3%81%82のようにエンコードされて見にくくなります。必ず半角英数字を使ってください。

Q: アンダースコア(_)とハイフン(-)、どちらを使うべきですか？ A: どちらでも動作しますが、ハイフン(-)が推奨です。SEO的にもハイフンの方が単語の区切りと認識されやすいです。

前へ: モジュール2: Next.jsプロジェクトの初期設定次へ: モジュール4: 基本UIの構築

素材の準備とファイル管理

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

学習目標

目次

事前準備

準備する素材

セクション1: ディレクトリ設計の基本

publicフォルダの役割

なぜディレクトリ構造が重要なのか

ポートフォリオサイト向けのディレクトリ設計

ディレクトリを作成する

方法1: VSCodeのエクスプローラーから作成

方法2: ターミナルから作成

作成後の確認

サブディレクトリ戦略

チェックポイント

セクション2: 画像ファイルの準備

推奨画像フォーマット

画像サイズとアスペクト比

アスペクト比とは？

ポートフォリオでの考え方

画像の最適化

なぜ最適化が必要？

推奨画像サイズ

画像圧縮ツール

SEOを考えた画像最適化

1. ファイル名を意味のあるものにする

2. alt属性を設定する（コード側で実施）

縦横別ファイル戦略

チェックポイント

セクション3: 動画ファイルの準備

推奨動画フォーマット

動画ファイルサイズの目安

動画の最適化

FFMPEGでの圧縮（後のモジュールで詳しく解説）

外部ホスティング vs ローカル

ローカル配置（publicフォルダ）

外部ホスティング（YouTube/Vimeo）

YouTube埋め込みの方法（参考）

チェックポイント

セクション4: ファイル命名規則

命名規則の重要性

ファイル命名のルール

1. 半角英数字とハイフンのみ

2. 小文字で統一

3. 意味のある名前をつける

4. 日付や連番を使う

5. 長すぎない名前

実践例

チェックポイント

セクション5: 実際に素材を配置する

手順1: 素材を準備する

手順2: ファイル名を変更する

手順3: 画像を圧縮する（任意だが推奨）

手順4: プロジェクトに配置する

方法1: ドラッグ&ドロップ

方法2: ファイルを直接コピー

手順5: 配置を確認する

手順6: ブラウザで確認する

チェックポイント

まとめ

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

重要ポイントの復習

次のステップ

参考資料

画像最適化ツール

無料素材サイト

動画関連

よくある質問