WEB DESIGN / PHOTO PLANNING / 2026
「ホームページを作るので写真を用意してください」と言われても、何を何枚撮ればよいのか分からない。そう困っていませんか。
きれいな写真をたくさん集めても、制作会社が欲しいのは横長の写真だったり、スタッフの手元が写る写真だったりします。撮影が終わってから「トップページに使える写真がない」と気づくと、撮り直しが必要になることもあります。
この記事では、ホームページ制作に使う写真の候補18項目を、掲載ページと用途別に整理しました。自社撮影・プロ撮影・素材写真の選び方から、撮影指示書、画像の権利、表示速度、SEOの確認までを解説します。
トップページの写真は事業内容を伝えるため、サービス写真は提供内容を具体的に見せるため、スタッフ写真は対応する人を知ってもらうためなど、役割が違います。まず掲載先を決め、写真が必要か、実写が必要か、文字や図で十分かを整理するのが近道です。
Webデザイン全体の考え方は、Webデザインとは？見た目と情報設計・問い合わせ導線の関係でも解説しています。
ホームページの写真は「きれい」だけでなく、何を伝えるかが重要
ホームページのデザインには色・文字・レイアウト・写真などが含まれます。写真は印象づくりに役立ちますが、実際の提供物・担当者・作業現場・来店先を示すことにも価値があります。
例えば「丁寧に対応します」という文章だけでは、どのような対応か想像しにくい場合があります。実際の相談風景や作業の手元があれば、お客様が知りたいことを具体的に伝えられます。
逆に、写真と一緒に載せるべき料金や受付条件を写真内の文字だけで済ませると、読みにくくなったり、更新が難しくなったりします。画像は情報の補助、重要な説明は読める本文テキストでも示すという役割分担が適切です。
ホームページ制作で用意する写真18カット｜ページ別撮影リスト
以下は18種類の候補であり、全店舗・全業種で18枚すべてが必須という意味ではありません。事業の実態とサイトの目的に合うものだけ選び、掲載許可や安全上の問題がないか確認しましょう。写真1種類につき構図違いを複数撮ることもあります。
| No. | 掲載先 | 写真の候補 | 写真の役割 |
|---|---|---|---|
| 01 | トップページ | 仕事の全体像が分かる横長の写真 | 初見で事業内容を伝える |
| 02 | トップページ | 作業中の手元や商品が分かる寄り写真 | 提供内容を具体的に示す |
| 03 | トップページ | 見出し用の余白を残した別構図 | スマホ・PC双方で文字を読ませる |
| 04 | サービス紹介 | サービス提供の実際の工程 | 何をしてもらえるか理解する |
| 05 | サービス紹介 | 設備・道具・提供物の詳細 | 品質・対応範囲を説明する |
| 06 | サービス紹介 | 実際の成果物や仕上がり（許諾済み） | サービス内容と実物を照合する |
| 07 | 会社・店舗紹介 | 代表者の本人写真（掲載同意済み） | 責任者の実在性を示す |
| 08 | 会社・店舗紹介 | 担当スタッフと役割が分かる写真 | 誰が対応するか分かる |
| 09 | 会社・店舗紹介 | 打ち合わせや仕事風景（実景） | 運営の様子を具体化する |
| 10 | 施設・アクセス | 建物外観と目印 | 来店先を迷わず見つける |
| 11 | 施設・アクセス | 入口・受付・動線 | 初回来訪の不安を減らす |
| 12 | 施設・アクセス | 店内・設備・バリアフリー情報を示す写真 | 利用前の条件確認を助ける |
| 13 | 事例紹介 | 事例の対象物・全体像（掲載許可あり） | 具体的な実績を説明する |
| 14 | 事例紹介 | 課題や工程を示す現場写真 | 何を実施したか伝える |
| 15 | 事例紹介 | 完了後の状態を示す写真（条件明記） | 事実に基づく比較ができる |
| 16 | ご利用の流れ | 初回相談や受付方法が分かる場面 | 申し込み前の不安を減らす |
| 17 | ご利用の流れ | 実際の納品・対応の様子 | 手順や支援内容を理解する |
| 18 | お問い合わせ | アクセス・駐車場・相談環境の補足写真 | 問い合わせや来店の判断を助ける |
最初から大量に撮るのではなく、まずはトップページ、サービス紹介、会社・店舗紹介、問い合わせ前の案内の順に必要な写真を選ぶと整理しやすくなります。
トップページは「横長1枚」で終わらせない
メイン画像に文字を重ねる場合、写真の左右どちらかに余白を残しましょう。パソコン用には横長、スマートフォン用には縦に切り取っても内容が分かる構図が必要です。被写体が端で切れないか、実際の画面で確認してください。
スタッフ・施工・お客様の写真は事実と許可が前提
スタッフ写真には実在する担当者、施工事例には許諾を得た実際の対象を使います。外部のモデル写真をスタッフの紹介として掲載したり、別会社の施工写真を自社実績のように見せたりしてはいけません。
自社撮影・プロ撮影・フリー素材・AI画像はどう使い分ける？
| 種類 | 向いている用途 | 確認すべきこと |
|---|---|---|
| 自社で撮影 | 実際の店舗、作業、人物、商品、イベント | 明るさ、構図、写真の利用許可、機密情報の写り込み |
| プロへ撮影依頼 | トップ画像、代表者、商品、重要な実績写真 | 撮影範囲、納品点数、加工、使用媒体、再利用の権利 |
| ライセンス付き素材 | 抽象的な概念、背景、一般的な雰囲気の表現 | 商用利用、加工、クレジット、再配布、人物・施設の権利 |
| AI生成画像 | 概念図、説明用イラスト、実写不要の装飾 | 誤認されない表示、利用規約、権利、実在風人物の扱い |
費用を抑えたい場合も、実際の事業を証明する部分まで素材写真で代用する必要はありません。スマートフォンの写真でも、明るい場所で撮り、背景を整え、複数の角度から確認すれば使える場合があります。
実在しないスタッフ、施工前後の変化、来店客、施設の様子を実写のように見せると、利用者に誤解を与えます。説明用のイメージ画像なら、その性質が分かる形にし、実績・施術結果の証拠とは分けて扱いましょう。
【GPJ独自】撮り直しを減らす「9項目の撮影指示書」
Growth Partners Japanでは、WEB制作を見た目からではなく事業の目的・顧客の判断・問い合わせ導線から考えています。その設計方針を、写真撮影の依頼時にも使いやすいよう、本記事では9項目の指示書に整理しました。
撮影を依頼するときに伝える9項目
- 掲載ページ：トップ・サービス・会社案内・事例など
- 伝えたいこと：何の疑問を解決する写真なのか
- 撮影対象：人物・商品・設備・工程など
- 構図：横長・縦長・引き・寄り、文字用の余白
- 必要なバリエーション：PC・スマートフォン別の切り取り候補
- 事前準備：場所、照明、服装、掃除、小道具
- 公開・利用許可：撮影者・被写体・施設・作品の許諾範囲
- 納品条件：元画像、加工済み画像、形式、ファイル管理
- 確認担当・期限：だれが掲載前に最終確認するか
これはGPJの公開している制作方針を基に作成した記事用のチェックシートです。特定のお客様で効果を検証した数値や、公式の業界標準を示すものではありません。
掲載先：トップページ／スマートフォン版も使用
目的：初めての人に店内の清潔さと施術内容を伝える
対象：実際の施術スペースとスタッフの手元
構図：横長の引き写真を2パターン、手元の寄り写真を2パターン。見出しを重ねる左側に余白を残す
注意：お客様の顔・予約台帳・個人情報は映さず、公開許可を確認する
制作会社と打ち合わせる段階なら、ホームページ制作のヒアリングシート12項目と一緒に使うと、写真の役割とページの目的をそろえやすくなります。
ホームページの写真を公開する前に確認したい画像SEO・表示速度
1．ファイル名とaltは画像の実際の内容を説明する
Google検索セントラルは、画像に関連する周辺テキスト、分かりやすいファイル名、適切な代替テキストを推奨しています。例えば「IMG_0021.jpg」より「fukuoka-salon-entrance.webp」のような内容が分かる名前が適しています。ただし、キーワードを大量に羅列する必要はありません。
代替テキスト（alt）は、画像が見えない人にも意味が伝わる説明にします。写真が「入口を案内するため」のものであれば、「店舗の正面入口と道路沿いの看板」のように、写っている内容を具体的に示しましょう。見出しと同じ宣伝文を毎回繰り返す必要はありません。
2．スマートフォンの切り抜きと読みやすさを確認する
パソコンでは問題のない横長画像でも、スマートフォンでは顔や商品が切れる場合があります。文字を写真の上に置く場合は、背景とのコントラスト、文字サイズ、改行を実画面で確かめてください。
3．表示サイズ・圧縮・読み込み順を調整する
大きな元画像をそのまま配信せず、表示用途に合うサイズやWebPなどの形式を検討します。WordPressではテーマや画像最適化プラグインによって自動生成されるサイズもあるため、まず実際に配信されている画像を確認しましょう。
また、最初の画面で大きく表示される画像がLCPの対象となる場合、むやみに遅延読み込み（loading="lazy"）を設定しないようにします。逆に画面の下にある多数の写真は、読み込みを遅らせる方法を検討できます。どの画像を優先するかはPageSpeed Insightsなどで実測して判断しましょう。
画像の品質、内容と周辺テキストの関連性、読み込み方法を整えることは大切ですが、画像SEOの設定だけで掲載順位やクリックが上がる保証はありません。写真を見た利用者が何を理解できるかを優先してください。
業種別の写真準備例｜美容サロン・BtoB・施工会社
美容サロン：予約前に不安を解消する写真
まず施術スペース・入口・施術の手元・着替えや個室の有無などを整理します。お客様が写る写真は許諾範囲を確認し、施術の効果や結果を誇張して伝えないようにしましょう。
BtoB企業：対応できる業務を伝える写真
代表者・担当者・実際の仕事風景・作業工程・設備を優先します。「どんな人が、どんな仕事を、どこまで担当するのか」が分かる写真は、抽象的なオフィス素材より役立つ場合があります。顧客資料、パソコン画面、ホワイトボードの機密情報に注意してください。
施工会社：実績と対応範囲を示す写真
完成写真だけでなく、工程や使用部材、建物全体との位置関係を整理しましょう。現場の所有者・発注者の許可、位置情報、防犯上の事情、作業中の安全ルールまで考慮してください。
写真を公開する前に確認したい7つの失敗ポイント
- その写真が掲載ページの目的に合っている
- 代表者・スタッフ・お客様の掲載許可を確認した
- 他社の施工・商品・スタッフを自社の実績と誤認させない
- 帳票・画面・住所などの機密情報が写っていない
- PC・スマホの双方で重要部分が切れていない
- 画像のサイズ・alt・周辺テキスト・表示速度を確認した
- 掲載後の差し替え担当者と元画像の保管場所が決まっている
デザインカンプが届いたあとに写真を選び直す場合は、ホームページのデザイン案を確認する15項目チェックリストで、写真の変更が情報の伝わり方や予約・問い合わせ導線に影響しないか確認できます。
ホームページの写真準備についてよくある質問
Q．ホームページ制作には何枚の写真が必要ですか？
A．決まった枚数はありません。まず掲載するページと伝えたい情報を決め、この18項目から必要な種類を選びましょう。重要なのは枚数ではなく、それぞれの写真が何を説明するかです。
Q．スマートフォンで撮った写真でも使えますか？
A．使えます。明るさ、ピント、水平、背景、切り抜き余地が適切であれば実際の仕事を伝える写真になります。大きく使う主力画像や人物撮影はプロへの依頼を検討してもよいでしょう。
Q．フリー素材だけでホームページを作ってもいいですか？
A．利用条件を守れば背景や概念説明に使える場合があります。ただし、自社のスタッフ・施設・施工実績を証明する場所では、実際の写真と混同させないことが重要です。
Q．AIで作った人物写真をスタッフ紹介に使えますか？
A．実在するスタッフの本人写真だと誤認させる使い方は避けましょう。説明用イラストなどに使う場合も、生成サービスの規約、既存著作物との類似、表示内容の正確性を確認してください。
Q．写真のファイル名とaltを設定すればSEOで1位になりますか？
A．なりません。これらは画像の意味を伝える手掛かりで、順位を保証するものではありません。ページ全体の内容、内部リンク、使いやすさなども含めて確認してください。
Q．写真がそろわなくても制作を進められますか？
A．進められる場合があります。ページ構成と仮配置の段階で必要な写真を洗い出し、公開前に実写真と利用許可を確認する進め方も可能です。納期や公開条件は制作会社と相談してください。
まとめ｜写真もWebデザインの一部。必要な情報から逆算して準備する
ホームページの写真を用意するときは、ただ「おしゃれな写真を増やす」のではなく、読み手の疑問を解消する写真を選びましょう。トップ・サービス・人物・実績・アクセスでは、写真の役割がそれぞれ違います。
まずは18種類の候補から必要なカットを選び、撮影目的・構図・利用許可を明確にしてください。Webデザインとは何か、写真と情報設計がどう関わるかも理解しておくと、制作会社との打ち合わせが進めやすくなります。
参考情報・一次資料
- Google検索セントラル｜画像SEOのベストプラクティス：画像の説明・ファイル名・周辺テキスト
- Google検索セントラル｜モバイルファーストインデックス：モバイル表示と画像
- web.dev｜Largest Contentful Paintの最適化：重要な画像の読み込み優先順位
- 文化庁｜著作権：他者の画像利用に関する確認
