採用サイトや人物を中心にしたWebサイトでは、撮影、インタビュー、原稿作成、デザイン、実装、CMS構築を別々に進めると、後の工程で必要な素材が不足しやすくなります。
撮影が終わってからデザインを始めた結果、スマートフォンで使える縦長の写真がない。インタビュー原稿が完成してから写真を当てはめようとしても、文章の内容に合う表情や仕事風景がない。CMSへ登録すると、想定より長い職種名や原稿によってレイアウトが崩れる。このような問題は、撮影や実装それぞれの品質だけでなく、工程同士の接続が決まっていないことで起こります。
私たちが担当した制作にも、撮影日が先に決まっているもの、社員インタビューと応募フォームを同時に設計するもの、公開後も募集情報を更新するものがありました。撮影前の打ち合わせで「何を撮りますか」だけを聞くと、あとで使えない写真が生まれます。「どのページで、どの画面幅で、どの情報と組み合わせて使うか」まで一緒に決めます。
最初に決めるのは、撮影内容ではなくページの役割
撮影カットを先に考えると、「会議風景」「仕事中の様子」「社員の集合写真」といった被写体の一覧になりがちです。しかし、Web制作で必要なのは写真の種類だけではありません。
まず、各ページで利用者に何を理解してほしいかを整理します。
- 会社や事業の全体像を伝えるページ
- 具体的な仕事内容を説明するページ
- 働く人の考え方や雰囲気を伝えるインタビュー
- 募集要項や応募フォームへ進むための導線
- 公開後に追加・更新される職種や社員情報
ページの役割が決まると、必要な写真も変わります。メインビジュアルには文字を置く余白が必要ですが、社員インタビューでは表情や視線が重要です。仕事紹介では、人物だけでなく、何をしている場面なのか分かる情報が必要になります。
撮影前の段階で、ページ構成、仮の見出し、写真の掲載位置まで確認できるラフを用意すると、撮影担当、取材担当、デザイナー、実装担当が同じ完成像を共有できます。
PCとスマートフォンでは、必要な構図が同じとは限らない
横長の写真をスマートフォンで中央トリミングすれば使えるとは限りません。人物が複数いる、左右に重要な情報がある、背景を含めて仕事の状況を見せたい、といった写真では、縦長表示によって伝えたい内容が欠けることがあります。
複数案件では、撮影前に次の項目を確認しました。
- PCでは写真のどこに文字を置くか
- スマートフォンでは人物をどこまで切り取るか
- 横長と縦長を別カットで用意する必要があるか
- 一覧用の小さな画像でも内容を判別できるか
- 将来、別ページや別職種でも利用する可能性があるか
- 写真の焦点、余白、背景に変更できない要素がないか
すべての写真をPC用とスマートフォン用に二重撮影する必要はありません。重要なのは、流用できるカットと、用途別に撮り分けるカットを事前に区別することです。
インタビューと写真を、同じメッセージから設計する
社員インタビューの質問と撮影内容を別々に決めると、文章と写真の役割が重複したり、反対に必要な説明が抜けたりします。
例えば、仕事の専門性を文章で詳しく説明するのであれば、写真は実際の作業環境や人との関わりを補う役割にできます。文章で人柄を伝えるのであれば、写真では表情だけでなく、その人がどのような場所で働いているかを見せる方法もあります。
取材前には、質問、回答を掲載するページ、必要な写真、関連する仕事紹介を対応させます。取材後に初めて構成を考えるのではなく、仮説を持って取材し、実際の回答を受けて構成を調整する進め方です。
デザイン確定前に、実装とCMSの条件を確認する
撮影と取材が中心のサイトでも、公開後に誰が何を更新するかによって、デザインと実装は変わります。
募集職種、社員インタビュー、募集要項などをCMSで追加する場合は、次の状態を想定します。
- 職種名や見出しが想定より長い
- 写真を用意できない記事がある
- インタビュー本文の長さが人によって異なる
- 募集区分が後から増える
- 応募先やフォーム項目が変更される
- 一覧に掲載する件数が増減する
完成時の一件だけに合わせたデザインでは、更新時に崩れます。撮影素材をきれいに配置するだけでなく、素材がない場合、文章が長い場合、項目が増えた場合をデザイン段階で確認します。
応募フォームや募集要項のように実装条件が強い要素は、デザイン完成後に実装担当へ渡すのではなく、項目、入力順序、スマートフォン表示、バリデーション、納品先の仕様を先に確認します。
撮影日が先に決まっている場合の進め方
撮影場所や出演者の都合により、Webサイトの構成より先に撮影日が決まることがあります。この場合、すべての原稿とデザインを完成させてから撮影することは現実的ではありません。
その代わり、撮影前に最低限、次を決めます。
- サイト全体のページ構成
- 各ページで写真が担う役割
- メインとなるページのラフ
- 撮影場所、人物、服装、必要な道具
- PC・スマートフォンで必要な構図
- インタビュー質問と写真の対応
- 撮影後に確定する事項と、その確認期限
撮影当日は、用意したカットを消化するだけでなく、ページの目的に合っているかを現場で確認できる体制を作ります。デザイナーが同席できない場合も、判断できるラフや撮影指示を共有しておく必要があります。
この進め方が有効な場合
- 人物や仕事風景がサイトの中心になる
- 撮影日や公開日を動かしにくい
- 取材内容を複数ページで利用する
- PCとスマートフォンで写真の使い方が大きく異なる
- 公開後も社員情報や募集職種を追加する
- CMS、応募フォーム、既存サイトとの接続を含む
別の進め方が適する場合
既存の写真素材だけで構成する小規模ページや、写真が装飾的な役割に限られる場合は、撮影を中心に工程を組む必要はありません。また、取材内容を編集せず全文掲載する方針や、CMSでの追加更新がない場合は、必要な確認範囲も変わります。
重要なのは、すべての案件で大きな撮影計画を作ることではありません。撮影・取材・デザイン・実装・更新のうち、どの工程が互いに影響するかを先に確認し、必要な部分だけを一つの計画として扱うことです。
制作前チェックリスト
- 各写真の掲載ページと役割が決まっているか
- PCとスマートフォンの構図を確認したか
- 文字を置く余白やトリミング範囲を共有したか
- インタビュー質問と写真の役割が対応しているか
- 撮影後に確定する原稿と期限が明確か
- CMSで増える項目と変わる文字量を想定したか
- 写真がない場合の表示を決めたか
- フォームや表組みを実装担当が事前確認したか
- 公開後の追加・更新担当が明確か
