出典: 制作部署マニュアル 画像・素材（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）
画像はサイトの「世界観」を決める
写真の質でブランド印象の半分が決まる。逆に、安っぽい素材を使うと一発でクライアントの格が下がる。
画像の種類
1. 写真（Photo）
- 人物・風景・商品・空間
- リアル感・信頼感を出す
- コーポレート・サービス紹介で必須
2. イラスト（Illustration）
- 抽象概念・サービス特徴
- 親しみやすさ・テック感
- SaaS・スタートアップで多用
3. アイコン（Icon）
- 機能・カテゴリ・操作ボタン
- 視覚的にすぐ理解できる
- UI内・特徴説明で頻出
4. ロゴ（Logo）
5. 動画・GIF
- 動きで惹きつける
- プロダクトの使い方説明・ヒーロー
商用利用可能なフリー素材サイト（おすすめ）
写真（無料・商用可）
イラスト（無料・商用可）
アイコン（無料・商用可）
動画（無料・商用可）
有料素材サイト（クオリティ高い）
→ 高単価案件 or ブランド重視なら有料も検討。低単価ならフリーで十分。
商用利用の注意点
必ず確認すること
- ライセンス：商用利用可・改変可・クレジット要否
- モデルリリース：人物写真は被写体の同意取得済みか
- プロパティリリース：建物・私有地等の権利クリア
- 再配布禁止：素材自体を販売・配布してはダメ
- 商標：ロゴ・商品が写ってる素材は商標権注意
NG例
- Googleで画像検索 → 適当にダウンロード → サイトに使用（著作権侵害・違法）
- 「フリー」と書いてあっても個人利用のみだったケース
- AIで生成した画像を確認せず使用（生成AIの規約違反）
→ 必ず素材サイトの利用規約を確認してから使う。
画像加工の基本
Web向けに最適化（必須）
| 形式 |
用途 |
容量目安 |
| WebP |
ほぼ全用途（推奨） |
JPG の70%サイズで同等品質 |
| JPG |
写真・グラデーション |
300KB以下 |
| PNG |
透過必要・ロゴ・アイコン |
100KB以下 |
| SVG |
アイコン・ロゴ・図形 |
ベクター・拡大しても劣化なし |
| AVIF |
最新形式・最軽量 |
WebP より更に軽い |
推奨サイズ
| 用途 |
推奨幅 |
| ヒーロー画像 |
1920px (デスクトップ) |
| 通常画像 |
1200px |
| サムネイル |
400px |
| アバター |
80-160px |
圧縮ツール（無料）
加工ツール
| ツール |
用途 |
料金 |
| Figma |
UI・バナー・モックアップ |
無料 |
| Canva |
テンプレ豊富・初心者向け |
無料〜 |
| Photoshop |
プロ向け・万能 |
月¥3,280 |
| Affinity Photo |
Photoshop代替・買切 |
約¥1万 |
| Pixlr |
Web上で完結 |
無料〜 |
ヒーロー画像の選び方
良いヒーロー画像
- 解像度高い（1920px以上）
- 被写体が大きく入る（顔・主役が明確）
- 色味がブランドカラーと合う
- テキストが乗せやすい余白がある
- シズル感（食べ物なら美味しそう・人なら笑顔等）
悪いヒーロー画像
- ブレてる・暗い・解像度低い
- 何を見せたいか不明（背景物が散らかってる）
- 文字を乗せるとごちゃつく
- 業種と無関係な写真
- 古臭い（2000年代風のキラキラ加工等）
写真の選び方（業種別）
コーポレート系
- 人物：信頼感のあるビジネス写真・笑顔のプロフィール
- 風景：オフィス内観・東京の朝・スカイライン
- NG：ストックフォト感丸出しの欧米モデル
クリニック・医療
- 人物：医療スタッフ・笑顔の患者
- 風景：清潔感のある待合室・施術室
- 色味：白・青・水色基調
飲食・カフェ
- 写真：シズル感のある料理アップ・店内雰囲気
- ライティング：暖色系・自然光
- NG：暗くて何の料理か分からない
IT・SaaS
- イラスト：抽象的でモダン
- スクショ：プロダクト画面（実際のUI）
- 配色：ブランドカラー統一
美容・サロン
- 人物：施術後のビフォーアフター
- 雰囲気：高級感・清潔感
- 色味：パステル・ベージュ・ホワイト
alt属性（代替テキスト）
画像に必ず alt 属性を入れる。SEO・アクセシビリティの基本。
書き方
| 画像種類 |
alt の書き方 |
| 内容ある画像（写真） |
写ってる内容を簡潔に：「医療スタッフが笑顔で患者を見守る」 |
| ロゴ |
「TERASU」 |
| アイコン |
「メニュー」「検索」「閉じる」 |
| 装飾画像 |
alt="" （空にする・読み上げをスキップ） |
NG例
alt="画像" （意味なし）alt="image_001" （ファイル名そのまま）alt="" （内容ある画像なのに空）- 長すぎる alt（30文字以内推奨）
<img src="/team.webp" alt="チーム全員で記念撮影" width="1200" height="800" loading="lazy">
画像のSEOチェックリスト
- [ ] alt 属性を全画像に設定
- [ ] ファイル名を意味のある英語に（hero-business-meeting.jpg）
- [ ] WebP 化で軽量化（〜300KB目安）
- [ ]
width / height 属性で領域確保（CLS対策）
- [ ]
loading="lazy" で遅延読み込み（首画面外）
- [ ]
decoding="async" で並列デコード
- [ ] 画像サイトマップを送信（多数の画像があるサイト）
動画素材の使い方
ヒーロー動画
- 自動再生・ループ・無音
<video muted autoplay loop playsinline> 必須- ファイルサイズ：5MB以下推奨
- 形式：MP4（H.264）+ WebM（軽量フォールバック）
注意点
- モバイル回線で重い → モバイルでは静止画にフォールバック
- 自動再生は無音じゃないと多くのブラウザでブロックされる
- アクセシビリティ：動きで体調悪くなる人もいる →
prefers-reduced-motion で停止対応
AIによる画像生成
主要ツール
商用利用の注意
- 各サービスの規約を必ず確認（特に商用OKか）
- 著名人や著作物が混入してないかチェック
- 「人物の手」「文字」が破綻してないか目視
- 顧客に納品する場合は、生成AI使用を明示するか判断
画像でやってはいけないNG
| NG |
結果 |
| Google画像検索からDLして使う |
著作権侵害・損害賠償リスク |
| alt属性なし |
SEO・アクセシビリティで不利 |
ファイル名が IMG_001.jpg のまま |
SEO効果ゼロ |
| 5MB超の重い画像 |
表示遅延・離脱 |
| 解像度低い拡大画像 |
ピクセル感丸出し・素人感 |
| ストックフォト感ある欧米モデル |
「コピペサイト感」 |
| 業種に合わない雰囲気の写真 |
ブランド毀損 |
| ロゴをPNG透過じゃなく白背景 |
背景色と合わない |
チェックリスト：画像・素材の完成度
- [ ] 全画像がライセンスクリア（商用利用可）
- [ ] WebP形式で最適化（〜300KB）
- [ ] alt属性を全画像に設定
- [ ] width/height 属性で領域確保
- [ ] loading="lazy" を首画面外に設定
- [ ] ファイル名が意味のある英語
- [ ] ブランドの世界観と合致
- [ ] モバイルで重すぎない
- [ ] 解像度が十分（拡大時に劣化しない）
- [ ] イラスト・アイコンのテイストが統一
参考：画像活用が秀逸なサイト