写真・画像の選び方と加工

デザインにおける画像の力は絶大です。ユーザーが最初に目にするのは文章よりも画像であり、わずか数秒でサービスの印象を決定します。本レッスンでは、写真選びの基準から画像フォーマットの知識、基本的な加工テクニック、そして法的に安全な素材の活用方法まで、実践的な画像活用術を学びます。

---

写真がデザインに与える影響力

第一印象の7秒ルール

ユーザーはWebページを開いてから約7秒以内に「このサービスを使うかどうか」を判断すると言われています。この瞬間に最も大きな影響を与えるのが、ヒーロー画像（トップビジュアル）です。

写真の3つの役割

1. 信頼性の担保

実際のオフィス・スタッフ・製品の写真は、ストックフォトより圧倒的に信頼感を高めます。Webユーザーはストックフォトを見分ける目を持っており、「よく見るモデルの写真」は逆に信頼性を損なうことがあります。

2. 感情の喚起

笑顔の写真は親近感を、広大な風景は解放感を、洗練されたプロダクト写真は上質感を伝えます。写真の感情的トーンはブランドイメージに直結します。

3. 情報の補完

複雑なサービスや製品も、適切なスクリーンショット・図解写真があれば一目で理解できます。「百聞は一見にしかず」の効果をデザインに活用します。

---

ストックフォトの選び方：5つの基準

基準1: ブランドトーンとの一致

写真のトーン（明度・彩度・雰囲気）が、ブランドの色彩設計と合っているかを確認します。

✅ 良い例: 淡いパステルカラーのブランドに、明るく柔らかい自然光の写真を使う ❌ 悪い例: ミニマルなブランドに、ごちゃごちゃした背景の写真を使う

基準2: 多様性と包摂性

現代のデザインでは、人物写真の多様性（年齢・性別・国籍・体型）への配慮が重要です。特定のステレオタイプを強化する写真は避け、ユーザーが自分を投影できる写真を選びます。

基準3: 自然さ・リアリティ

過度にポーズを取ったモデル写真よりも、自然な日常の一コマを切り取った写真の方が現代のユーザーに響きます。

基準4: テキストオーバーレイのしやすさ

見出しや説明文を写真上に重ねる場合、単色の空間（空・壁・床など）がある写真を選ぶと文字が読みやすくなります。

基準5: 解像度とアスペクト比

使用する場所のサイズに応じた解像度の写真を選びます。ヒーロー画像は2000px以上の幅が必要です。また、16:9・4:3・1:1などの比率を用途に合わせて選択します。

---

画像フォーマットの使い分け

画像フォーマット比較表

JPEG（Joint Photographic Experts Group）

写真・グラデーション・複雑な色彩に最適です。非可逆圧縮のため、何度も保存を繰り返すと画質が劣化します。

``` 使用場面: ブログのアイキャッチ・商品写真・人物写真 推奨品質: 75〜85%（品質と容量のバランス） 注意点: 透過不可・アニメ不可 ```

PNG（Portable Network Graphics）

可逆圧縮で透過（アルファチャンネル）に対応しています。ロゴ・アイコン・スクリーンショットに最適です。

``` 使用場面: ロゴ・UI素材・透明背景が必要な素材 注意点: ファイルサイズが大きくなりやすい ```

WebP

GoogleがJPEGとPNGの両方を置き換えるために開発した次世代フォーマットです。同等品質でJPEGより約30%、PNGより約25%ファイルサイズが小さくなります。

```html

<!-- pictureタグでフォールバック対応 --> <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="説明文"> </picture> \`\`\`

AVIF（AV1 Image File Format）

WebPより更に優秀な圧縮率を持つ最新フォーマット。同品質でWebPより20〜30%小さくなりますが、ブラウザの対応状況はWebPより劣ります。

💡 推奨戦略: メインはWebP、フォールバックにJPEG/PNG。AVIFも主要ブラウザの最新版で対応が進んでいるため、さらに軽量化したい場合は追加を検討。`<picture>`タグでフォーマットを使い分けるのがベストプラクティスです。

SVG（Scalable Vector Graphics）

ベクター形式のため解像度に依存しない点が最大の特徴です。どんなサイズに拡大・縮小しても鮮明に表示されます。

``` 使用場面: ロゴ・アイコン・図表・インフォグラフィック ファイルサイズ: 単純な図形なら数KB〜数十KBと非常に軽量 注意点: 複雑な写真にはSVGは不向き ```

---

画像の最適化とパフォーマンス

なぜ画像最適化が重要か

Webページの転送量のうち、画像が占める割合は平均して**50〜70%**です。画像を最適化するだけで、ページの読み込み速度を劇的に改善できます。

圧縮ツール

遅延読み込み（Lazy Loading）

ページを開いた時点で表示エリア外にある画像は、後から読み込む遅延読み込みが有効です。

```html

<!-- HTML の loading 属性 --> <img src="image.jpg" loading="lazy" alt="説明文"> <!-- Next.js の Image コンポーネント（自動最適化） --> <Image src="/image.jpg" width={800} height={450} alt="説明文" /> \`\`\`

✅ Next.jsの`<Image>`コンポーネントは、WebP自動変換・遅延読み込み・サイズ最適化を自動で行う非常に便利なツールです。Next.jsプロジェクトでは必ず使いましょう。

srcset と sizes による最適配信

```html <img srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" src="image-800.webp" alt="説明文"

```

---

基本的な画像加工テクニック

トリミング（クロッピング）

写真をトリミングするときは、被写体の配置を意識します。

アスペクト比の標準値：

• ◆`16:9` — ヒーロー画像・YouTubeサムネイル
• ◆`4:3` — ブログアイキャッチ・商品写真
• ◆`1:1` — プロフィール画像・SNSアイコン・Instagramグリッド
• ◆`2:3` — ポートレート・書籍カバー

明るさ・コントラスト調整

写真の明るさを調整するだけで、ブランドトーンに合わせることができます。

```css /* CSSフィルターによる基本調整 */ .hero-image { filter: brightness(1.1) contrast(1.05) saturate(0.95); } ```

---

写真の構図：3つの基本ルール

写真構図3パターン

三分割法（Rule of Thirds）

画面を縦横それぞれ3等分するグリッドを引き、その交点に被写体を配置します。人間の目は中央よりも「少しずれた」場所に注目しやすい性質があり、三分割法はその本能に従った構図です。

適用場面：

• ◆風景写真（地平線を上1/3または下1/3の線に合わせる）
• ◆ポートレート（目を上1/3の横線に合わせる）
• ◆商品撮影（商品を左または右の交点に配置）

対角線構図

被写体を画面の対角線上に配置します。動きや躍動感・緊張感を生み出す構図です。

適用場面：

• ◆スポーツ・アクション写真
• ◆インテリア写真（奥行きを強調）
• ◆料理写真（テーブルの対角に食器を配置）

リーディングライン

道路・川・手すり・視線など、被写体を特定の方向へ視線を誘導する線を画面内に取り込む構図です。奥行きや遠近感を強調できます。

適用場面：

• ◆建築・都市写真（道路や廊下）
• ◆自然写真（川・海岸線）
• ◆ポートレート（被写体の視線・指の方向）

---

画像とテキストの組み合わせテクニック

オーバーレイ（重ね合わせ）

写真の上に半透明の色を重ねることで、テキストを読みやすくしつつ写真の雰囲気も保持できます。

```css /* 単色オーバーレイ */ .hero { position: relative; }

.hero::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); /* 黒40%オーバーレイ */ }

.hero-text { position: relative; z-index: 1; color: white; } ```

グラデーションオーバーレイ

単色より自然な印象で写真の邪魔をせず、テキストが置かれるエリアだけを暗くできます。

```css .hero { background-image: linear-gradient( to bottom, transparent 30%, rgba(0, 0, 0, 0.7) 100% ), url('hero.webp'); background-size: cover; } ```

✅ グラデーションオーバーレイは、下部にテキストを配置したヒーローセクションで特に効果的です。写真の迫力を活かしながら、テキストのコントラスト比を確保できます。

ぼかし（Blur）背景

インタフェースデザインでよく使われるすりガラス効果（glassmorphism）です。

```css .glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; } ```

---

フリー素材サイト紹介

写真素材

アイコン・イラスト

---

画像の著作権とライセンス知識

ライセンスの種類

CC0（パブリックドメイン）

著作権を完全に放棄したコンテンツです。商用利用・改変・再配布が無条件で可能です。なお、Unsplash・Pexelsの写真はCC0ではなく、各サイト独自のライセンス（商用利用可・帰属不要。ただし未加工のまま販売するなどの禁止事項あり）で提供されています。

CC BY（表示）

著作者の名前を表示すれば自由に使えます。クレジット表記が必要です。

CC BY-NC（表示・非営利）

非商業目的のみ利用可能。商用サービスへの使用は不可です。

⚠️ 「無料素材サイト」でも全て商用利用可とは限りません。必ずライセンスページを確認してください。また、人物写真には別途「肖像権」の問題があります。ストックフォトサービスでは、モデルからの同意（モデルリリース）取得済みの写真を使うことが安全です。

AIが生成した画像の著作権

AIが生成した画像の著作権については、現在も各国で議論が続いています。

• ◆日本: AI生成画像は原則として著作権が発生しない
• ◆商用利用: 利用するAIサービスの利用規約を必ず確認する
• ◆人物の肖像: 実在人物に似たAI生成画像は肖像権問題が発生しうる

⚠️ 商用プロジェクトでAI生成画像を使用する場合は、弁護士や法務部門に確認することを強く推奨します。

---

画像のアクセシビリティ

画像はビジュアル要素であるため、視覚に障害のあるユーザーへの配慮が欠かせません。

alt テキストの書き方

`alt`属性は、スクリーンリーダーが画像の内容を読み上げるために使います。適切なaltテキストはSEOにも効果があります。

```html

<!-- ❌ 意味のないalt --> <img src="photo.jpg" alt="画像"> <!-- ❌ ファイル名そのまま --> <img src="img_001.jpg" alt="img_001"> <!-- ✅ 内容を説明するalt --> <img src="team.jpg" alt="笑顔でミーティングをする5名のチームメンバー"> <!-- ✅ 装飾的な画像は空のalt（スクリーンリーダーがスキップ） --> <img src="decorative-wave.svg" alt=""> \`\`\`

altテキスト作成の4ルール：

1. ◆画像が伝えるべき情報を具体的に書く
2. ◆「〜の画像」「〜の写真」という記述は不要（スクリーンリーダーが自動で「画像」と付加するため）
3. ◆装飾目的の画像は alt="" （空）にする
4. ◆重要なテキストが画像内に含まれる場合は、そのテキストをaltに含める

画像の色とコントラスト

アイコンや図解画像を使う際も、テキストに準じたコントラスト比の確保が重要です。グレーアイコンが薄すぎて見えない、というケースは頻繁に起きます。WCAG 2.1のガイドラインでは、UIコンポーネントと画像グラフィックのコントラスト比は3:1以上が求められます。

---

画像ディレクトリとファイル命名規則

プロジェクトを長期間管理するには、画像の整理と命名規則が重要です。

推奨ディレクトリ構造

``` public/ images/ heroes/ # ヒーロー画像（ページトップのメインビジュアル） thumbnails/ # ブログ・カードのサムネイル icons/ # SVGアイコン avatars/ # ユーザーアバター products/ # 商品・サービス画像 og/ # OGP（SNSシェア用）画像 ```

ファイル命名規則

```

❌ 悪い例

image1.jpg 新しい写真.png Photo 2024-03-15.jpg

✅ 良い例

hero-top-page.webp blog-thumbnail-seo-guide.webp icon-arrow-right.svg og-image-home.png ```

命名規則のポイント：

• ◆全て小文字のアルファベットを使う
• ◆単語区切りは**ハイフン（-）**を使う（アンダースコアはSEO上不利な場合がある）
• ◆内容を説明する語を含める（数字連番は避ける）
• ◆フォーマットは末尾で判断できるように拡張子を統一する

---

Next.js での画像最適化実践

Next.jsはビルトインの`Image`コンポーネントで自動的に画像を最適化します。

```jsx import Image from 'next/image';

// 基本的な使い方 <Image src="/images/hero.jpg" alt="サービスのヒーロー画像" width={1200} height={630} priority // LCP画像にはpriority属性を付ける />

// fill レイアウト（親要素いっぱいに広がる）

<div style={{ position: 'relative', height: '400px' }}> <Image src="/images/background.jpg" alt="背景画像" fill style={{ objectFit: 'cover' }} sizes="100vw" /> </div> \`\`\`

Next.js Image コンポーネントが自動で行うこと：

• ◆WebP・AVIF への自動変換
• ◆画面サイズに応じた適切なサイズの画像を配信（srcset生成）
• ◆遅延読み込み（priority指定なし時）
• ◆プレースホルダーの表示（blur効果も設定可能）
• ◆Core Web Vitals の LCP/CLS 改善

💡 Next.jsプロジェクトでは、`<img>`タグの代わりに必ず`<Image>`コンポーネントを使いましょう。パフォーマンス・SEO・アクセシビリティの全てで恩恵を受けられます。

---

🏋️実践ワーク

1. ◆

   画像分析: UnsplashやPexelsで、自分が制作したいサービスのテーマに合う写真を10枚選んでください。選んだ理由（トーン・構図・被写体）をメモし、ブランドイメージとの一致度を評価してください。

2. ◆

   フォーマット変換: 同じ写真をJPEG・PNG・WebPの3種類でエクスポートし、ファイルサイズと画質を比較してください。Squooshを使うと簡単に比較できます。

3. ◆

   オーバーレイ実践: ヒーローセクションを作成してください。背景写真の上に黒のグラデーションオーバーレイを重ね、その上に白い見出しテキストを配置します。コントラスト比チェッカー（Colour Contrast Analyser等）でWCAG AAをクリアしているか確認してください。

4. ◆

   構図実践: スマートフォンで5枚の写真を撮影し、三分割法・対角線構図・リーディングラインのいずれかを意識して構図を組んでみてください。撮影後、構図の意図をチームメンバーに説明できるかを確認しましょう。

---

📝まとめ

• ◆写真はユーザーの第一印象を左右する最重要デザイン要素のひとつ
• ◆ストックフォト選びはブランドトーン・多様性・自然さ・テキスト重ね・解像度の5基準で行う
• ◆フォーマットは写真=WebP（フォールバックJPEG）、透過素材=PNG、アイコン=SVGが現代の基本
• ◆画像最適化はページ速度とSEOに直結する重要な作業。遅延読み込みとWebP変換から始める
• ◆構図の基本は三分割法・対角線・リーディングラインの3パターンを押さえる
• ◆テキストと画像の組み合わせにはオーバーレイ・グラデーション・ぼかしを活用する
• ◆無料素材でもライセンスを必ず確認し、商用利用可能かチェックする
• ◆AI生成画像の著作権は現在も変動中。商用利用前に必ず利用規約と法律を確認する
• ◆altテキストは内容を具体的に説明し、装飾画像には空のaltを設定してアクセシビリティを確保する
• ◆ファイル命名は小文字・ハイフン区切り・内容説明語を原則とし、プロジェクト全体で統一する
• ◆Next.jsでは**`<Image>`コンポーネント**を必ず使用し、自動最適化の恩恵を最大限活用する
• ◆画像ディレクトリはheroes・thumbnails・icons・ogなどカテゴリ別に整理する習慣をつける