ホームページの写真は、見た目を飾るだけではありません。店舗の雰囲気、商品の質感、スタッフの人柄、作業内容など、文章だけでは伝わりにくい情報を補う役割があります。
「何を撮るか」ではなく、どのページで何を伝えるために使うかを先に決めます。同じ写真でもトップの横長メイン画像とスタッフ紹介の縦写真では必要な構図が違います。
ホームページでよく使う写真
| 写真 | 伝えられること | 主な掲載先 |
|---|---|---|
| 外観・入口 | 場所、入りやすさ、店舗の雰囲気 | トップ、アクセス |
| 内観 | 広さ、清潔感、設備 | 店舗紹介、サービス |
| 商品・サービス | 形、質感、内容、利用場面 | サービス、料金 |
| スタッフ・代表者 | 誰が対応するか、人柄 | プロフィール、会社情報 |
| 作業風景 | 進め方、技術、設備 | 強み、選ばれる理由 |
| 実績・事例 | 完成イメージ、経験 | 実績、事例 |
ページ構成から撮影リストを作る
ページ構成が決まったら、必要な写真を「掲載場所」とセットで一覧にします。写真だけを大量に撮って後から当てはめるより、デザインで必要な向き・余白・被写体の大きさを事前に決めた方が使えるカットをそろえやすくなります。
| 掲載場所 | 撮るもの | 向き | メモ |
|---|---|---|---|
| トップ | 店舗・スタッフ・サービス場面 | 横長 | 見出しを置く余白も撮る |
| サービス | 作業・商品・設備 | 横 / 縦 | 全体と細部の両方 |
| プロフィール | 代表・スタッフ | 縦中心 | 背景・服装・明るさをそろえる |
| アクセス | 建物・入口 | 横 | 利用者が目印を認識できる範囲 |
| 実績 | 完成物・施術例・導入例 | 用途次第 | 同じ条件で比較できる構図も用意 |
サイトに必要なページ自体がまだ決まっていない場合は、先にホームページに必要なページ一覧で構成を整理すると撮影リストを作りやすくなります。
業種別に優先したい写真
| 業種 | 優先しやすい写真 | 理由 |
|---|---|---|
| 飲食・店舗 | 外観、入口、内観、商品、スタッフ | 来店前の雰囲気・場所・提供内容を確認しやすい |
| 美容・サロン | 施術空間、設備、スタッフ、サービス場面 | 清潔感や担当者、利用時のイメージを伝えやすい |
| 士業・コンサル | 代表者、打ち合わせ空間、相談風景 | 誰が対応するか、相談時の印象を補いやすい |
| BtoB | 設備、製品、作業工程、チーム、導入事例 | 対応能力や実際の業務内容を具体化しやすい |
| 建築・施工 | 完成例、工程、細部、担当者 | 成果物だけでなく品質・進め方を説明しやすい |
スマホ撮影前に確認すること
レンズを拭く
指紋や皮脂で光がにじむことがあるため、撮影前にレンズを確認します。
背景を片付ける
段ボール、配線、不要な掲示物、個人情報が見える書類などが写り込まないようにします。鏡・ガラスへの映り込みも確認します。
明るさを確保する
自然光が使える場合は窓の近くなどを検討します。強い逆光や極端に暗い場所では、被写体が見えにくくならないか試し撮りします。
縦・横・引き・寄りを撮る
同じ場面でも横長、縦長、少し引いた構図、細部の寄り写真を残しておくと、デザイン変更時にも使いやすくなります。
トップ画像は文字を置く余白も考える
人物や商品を画面いっぱいに置くと、後から見出しやボタンを重ねにくい場合があります。主役を左右どちらかへ寄せ、反対側に余白がある写真も撮っておくと使いやすくなります。
PCでは横長、スマートフォンでは縦に近い表示になることもあるため、重要な被写体を端へ寄せすぎないカットも用意します。デザイン時のトリミングを前提に、少し広めに撮った原版を残しておくと調整しやすくなります。
人物写真で確認すること
- 掲載について本人の了承があるか
- 退職後の掲載ルールを決めているか
- 名札・書類など不要な個人情報が写っていないか
- 服装・背景が事業イメージと合っているか
顧客・事例写真は掲載許可を確認する
顧客、施工先、車両番号、住宅内など、第三者や個人を特定できる要素が写る場合は、掲載可否を事前に確認します。撮影できることとWeb公開できることは別として扱います。
外部のカメラマンへ依頼する場合も、「撮影できるか」だけでなく、Webサイト、SNS、広告、印刷物など、どの媒体まで利用する予定かを共有し、納品データの利用条件を確認しておきます。
スマホで十分なケース
- スタッフの日常的な作業風景
- 新商品・メニューの更新写真
- 小規模店舗の簡単な内観
- ブログ・お知らせ用の写真
プロ撮影を検討したいケース
- トップページでブランド印象を大きく左右する
- 料理・商品・建築など質感や形を正確に見せたい
- 人物写真を複数人で統一したい
- 撮影時間が限られ、必要カットを確実にそろえたい
- 広告・パンフレットなど他媒体にも使う
外注するときに共有するもの
- サイト構成またはデザイン案
- 撮影リスト
- 各写真の掲載場所
- 必要な縦横比と余白
- 参考にしたい雰囲気
- 撮影場所・時間
- 人物・施設の撮影可否
- 納品形式と利用範囲
撮影後は「原版」と「Web用」を分けて管理する
撮影した高解像度データをそのまま全ページへアップロードすると、必要以上にファイルが重くなることがあります。一方、最初から小さく書き出した画像しか残していないと、後から別レイアウトや印刷物へ使いにくくなります。
元の高解像度データを保管し、Web公開時には表示サイズ・画質・形式を用途に合わせて書き出します。元ファイルへ直接上書きせず、公開用ファイルを別に作る運用が安全です。
画像ファイル名は内容が分かる名前にする
IMG_1234.webpのような撮影時の連番だけで管理すると、後から何の写真か分かりにくくなります。たとえばsalon-interior.webp、service-consultation.webpのように、内容を短く表すファイル名にすると管理しやすくなります。
Google Search Centralも、画像について短く説明的なファイル名を推奨しています。ファイル名だけでSEOが決まるわけではありませんが、サイト運用上も意味のある名前に統一する価値があります。
altは「検索キーワード欄」ではなく画像の説明
画像のaltは、画像が見えない状況やスクリーンリーダー利用時にも内容を伝えるための代替テキストです。Googleも、画像の内容を理解する手がかりとしてaltを利用し、キーワードの詰め込みを避けるよう案内しています。
| 避けたい例 | 分かりやすい例 |
|---|---|
| 美容室 東京 美容室 人気 美容室 おすすめ | 店内のカットスペースと鏡 |
| サービス画像 | スタッフがお客様へサービス内容を説明している様子 |
| 写真1 | 店舗入口と受付カウンター |
装飾目的で内容を伝えない画像など、すべての画像へ長い説明を付ける必要があるわけではありません。画像がページ内でどんな情報を担うかを基準に設定します。
WebPなどの形式とレスポンシブ表示を使い分ける
Google SearchはWebPを含む複数の一般的な画像形式をサポートしています。ブラウザ表示では、1つの大きな画像だけをすべての端末へ配信するのではなく、必要に応じてsrcsetやpictureを使って画面幅に合う画像を選べるようにすると、表示負荷を抑えやすくなります。
レスポンシブ画像を使う場合でも、Googleはimg要素に通常のsrcをフォールバックとして指定することを案内しています。サイト制作側へ画像を渡すときは、原版を残しつつ、用途に応じた複数サイズを書き出せる状態にしておくと対応しやすくなります。
素材サイトの写真だけでよい？
雰囲気を補う背景素材には使えますが、実店舗・実スタッフ・実商品を確認したいページまでイメージ素材だけにすると、利用者が実態を判断しにくくなることがあります。実物を見せる価値が高い場所は自社写真を優先します。
素材写真を使う場合も、実際の店舗・担当者・商品と誤認させる配置になっていないか確認します。サービス説明の文章自体はホームページの文章の書き方と合わせて整理すると、写真と文章の役割を分けやすくなります。
公開後も写真を更新する
スタッフ、設備、商品、料金、店舗レイアウトなどが変わったのに、ホームページだけ古い写真のままだと現状とずれます。公開時だけでなく、次のタイミングで写真を見直します。
- スタッフの入退社
- 店舗・オフィスの改装
- 商品・メニュー・設備の変更
- 制服・ブランドデザインの変更
- 実績・事例が増えたとき
画像の公開前チェック
- ページの目的に合う写真か
- PC・スマートフォンのトリミングで主役が切れないか
- 必要以上に大きな原版をそのまま配信していないか
- ファイル名で内容をある程度判断できるか
- 必要な画像に内容に合うaltを設定しているか
- 権利・掲載許可・利用範囲を確認しているか
- 個人情報や不要な背景物が写っていないか
- 古い店舗・スタッフ・商品写真が残っていないか
まとめ
ホームページ写真は、きれいさだけではなく「何を伝えるか」で準備します。ページごとに必要カットを洗い出し、縦横・余白・背景・権利を確認して撮影します。
撮影後は原版を保管し、Web用に適切な形式・サイズへ書き出し、説明的なファイル名とaltを設定します。撮影とWeb実装を別工程と考えず、サイトで実際に使える状態までを写真準備として計画すると無駄が減ります。