ホームページ制作の写真・原稿の準備｜素材の集め方と入稿チェックリスト

ホームページ制作の素材は、写真を一つのフォルダに集めれば準備完了、というわけではありません。どのページで使うのか、何を伝える写真か、掲載してよいか、原稿の内容は誰が確認したかまで分かると、制作を具体的に進められます。最初からすべてを完成させる必要はありませんが、用意できる物と確認中の物を区別することが大切です。

この記事では、ホームページ制作を依頼する企業の担当者に向けて、原稿・写真・ロゴ・制作事例の集め方、掲載条件の確認、ファイル整理、受け渡しと公開前の確認を解説します。文化庁、Google、W3C、WordPressの一次資料と、英国Home Officeが公開した設計例を参照しています。具体的な記入例は説明用の架空例です。読み終えたら、手元の資料から素材一覧を作れる構成にしています。

素材集めは、ページごとの「伝えること」を決めてから始める

会社案内や現在のサイトを、素材の候補として集める

最初に集めるのは、新しく書き起こした文章だけではありません。現在のサイト、会社案内、営業資料、商品カタログ、よく受ける質問、社内で使っている説明資料も材料になります。内容が古くても、必要な項目を洗い出す参考にはできます。ただし、参考資料と、そのまま掲載してよい確定原稿は分けてください。古い価格や終了したサービスが混ざることを防ぎます。

資料を集めるときは、情報を持つ部署と確認者も記録します。営業資料は営業担当、会社概要は管理部門、商品の仕様は事業担当など、内容によって確認先が違います。制作会社が分かりやすく文章を整える場合でも、社内の事実を外部だけで確定することはできません。どの情報を誰に聞けばよいか分かるだけでも、準備は進みます。

必要な素材は、ページの目的に結び付ける

トップページ、サービス紹介、会社情報、制作事例、採用情報では、写真や原稿の役割が異なります。トップに大きな写真が必要だから何かを探す、という順番では、見た目は埋まっても説明したいことが伝わらない場合があります。「実際の担当者を知ってほしい」「作業の流れを理解してほしい」のように、素材を置く理由を決めてから選びます。

足りない素材は、撮影・取材・確認に分けて予定を立てる

不足している物を全部「素材待ち」にすると、誰が何をすれば進むのか分かりません。写真がないなら撮影が必要なのか、社内の別担当が持っているのか、掲載許可だけ未確認なのかを分けます。原稿も、情報自体がない場合と、箇条書きはあるが文章に整っていない場合では、依頼する仕事が違います。足りない理由まで書いてください。

初回公開に必要な物と、後から追加できる物を分けることもできます。会社の連絡先やサービス条件など、判断に欠かせない情報は先に確定します。事例の追加取材を公開後に回す場合は、誰がいつ進めるかを予定へ残します。写真が揃わないために全体を止める前に、どのページと工程に影響するのかを制作会社と確認しましょう。

原稿は、完成した宣伝文より「確認できる情報」から作る

サービスの対象・範囲・条件を、箇条書きで渡す

文章を書くのが得意でなくても、誰のどんな相談に対応するか、提供する作業、対応しない範囲、依頼後の流れを箇条書きにできます。「高品質」「丁寧な対応」だけでは、制作会社も具体的な説明を作りにくくなります。納品する物、確認する工程、相談できる窓口など、読者が判断に使える内容へ置き換えてください。

例えば架空の設備点検サービスなら、「法人向けの定期点検」「対象設備は別表に記載」「訪問前に型番と設置状況を確認」「修理費は点検料に含まない」といった材料が考えられます。この段階では美しい文章にしなくても構いません。条件が未定なら、決まっているように書かず、何を確認すると確定できるかを添えます。

英語など複数の言語で掲載する予定がある場合は、多言語サイトの原稿と運用の準備も確認してください。翻訳する範囲、用語・数値の確認担当、各言語の更新方法までを制作前に整理できます。

料金や実績の数字には、条件・期間・確認者を付ける

「月額」「一式」「対応件数」といった数字は、何を含むかで意味が変わります。料金なら税の扱い、対象範囲、追加費用になる条件、実績なら集計期間、件数の単位、自社が担当した範囲を確認します。営業資料の数字をそのままコピーせず、現在の条件と一致しているかを確認してください。資料の作成日だけでは、その中の情報の確認日までは分かりません。

成果を紹介する場合は、比較前後の条件や記録も必要です。問い合わせボタンのクリック増加と実際の相談件数は異なります。確認できる資料がない数字を、見栄えのために作り足さないようにします。数値がなくても、何を調べ、何を制作し、どの状態まで確認したかを説明できれば、依頼範囲を理解する材料になります。

見出しとリンク先を整理し、画像だけの原稿にしない

原稿は、ページ名、大きな話題、小さな説明という順番で整理します。文章の見た目だけを太くするより、「この節では対応範囲を説明する」と内容が分かる見出しを付けると、制作会社もページへ組み込みやすくなります。リンクは「こちら」だけでなく、料金表、資料、問い合わせ先など、開く内容が分かる名前で渡してください。

W3CのWeb原稿のガイドも、内容を伝える見出し、分かりやすいリンク文言、明確な説明を扱っています。原稿を画像化したPDFやスクリーンショットだけで渡すと、文章の修正や確認がしにくくなります。可能なら編集できる文章と、配置を説明する参考画面を別に用意し、表の数値も文字データで渡します。

写真は、撮影する前に使う場所と伝える内容を決める

必要な場面を撮影リストにする

「会社の雰囲気が分かる写真を撮る」だけでは、必要な場面が抜けやすくなります。外観、入口、作業場所、担当者、製品、設備、打ち合わせの様子などを挙げ、掲載先と伝えたい内容を付けます。すべてを撮る必要はありません。ページで説明する内容に合う物を選び、準備する人、撮影可能な時間、立ち入りできる場所を確認します。

例えば設備の紹介であれば、全体の配置が分かる写真と、説明する部分を寄って撮った写真では役割が違います。採用向けなら、完成品だけでなく仕事の過程が必要な場合があります。撮影担当へ「この一枚で何を伝えたいか」を共有し、必要な道具や制服、清掃、被写体の手配まで決めておくと、その場で素材を探す負担を減らせます。

横長・縦長と、切り取ってよい範囲を相談する

パソコンでは横長、スマートフォンでは縦に近い枠になるなど、同じ写真でも使う場所で切り取り方が変わります。顔や商品が端に寄りすぎていると、画面幅によって重要な部分が切れることがあります。撮影前に大まかな掲載位置を確認し、主役の周囲に余裕のある写真と、必要に応じた別の構図を残します。

人物写真では頭や手元、商品では輪郭や重要な部品、建物では入口や看板など、切れてほしくない部分を伝えます。写真の上に文字を載せる予定があるなら、文字を置く位置も相談してください。後から無理に広げたり背景を作り足したりする前に、別の写真や配置で解決できるかを検討します。現実の設備や商品を示す写真は、加工後も事実を正しく伝える必要があります。

実物の写真と、説明用のイメージを区別する

素材写真や生成画像は、概念や雰囲気の説明に使える場合があります。一方、自社の担当者、拠点、設備、製品、納品した成果物の証拠として見せる写真は、実物と一致している必要があります。イメージ画像を使う場合は、読者が実際の現場と誤認しない見出しや説明を添えます。生成した人物を実在する社員の紹介に使うような見せ方は避けます。

写真が不足しているからといって、すべてをイメージで埋める必要はありません。担当範囲を文章で明確にする、工程を図にする、公開できる実物の一部分を見せるなど、別の説明方法もあります。どこまでが実際の状態で、どこからが説明用の表現かが分かる方が、依頼を検討する人にとって判断しやすい情報になります。

掲載条件は、素材を渡す前に記録しておく

入手できたことと、使ってよいことを分ける

画像検索で見つかる、取引先から資料を受け取った、以前のサイトに載っているというだけでは、新しいサイトで使える条件が確認できたことにはなりません。撮影者、提供元、利用規約、過去の契約や許可を確認します。文化庁の他人の著作物を利用する場合の案内では、許諾の要否に加え、肖像権など別の権利や利用条件の確認にも触れています。

著作権には保護対象や例外などの条件があるため、「すべての画像は必ず許可が必要」「出典を書けば何でも使える」と一律には判断できません。実務では、どこから取得し、どの用途で使えると確認したかを素材一覧へ残します。利用条件が不明な素材は確認中に分け、個別の判断が難しい場合は権利者や適切な専門家へ確認してから掲載を決めます。

人物・顧客名・画面に写る情報も確認する

写真の撮影条件だけでなく、写っている人や取引先の情報にも目を向けます。社員の紹介、顧客名、ロゴ、取引先の施設、画面に表示された案件情報などは、掲載する目的と範囲を関係者に確認します。ウェブサイトへの掲載と、広告やSNS、印刷物への転用で条件が違う場合もあります。用途を曖昧にしたまま素材を配らないようにします。

掲載許可の確認では、会社名を出せるか、顔を出せるか、どのページに載せるか、修正や終了時の連絡先を具体的にします。これは本記事で個別の法的結論を出すものではなく、確認漏れを防ぐための整理です。撮影後は、名札、書類、モニター、ホワイトボードなども拡大して見直し、公開してよい情報だけになっているかを確認してください。

許可の記録は、写真ファイルと対応付ける

メールで許可をもらっていても、どの写真への許可か分からなければ、後から判断しにくくなります。素材に管理番号を付け、確認したファイル、用途、日付、確認者、参照する記録を一覧で結び付けます。別の写真へ差し替えたり、広告で再利用したりする場合は、前の確認内容で足りるかを見直します。

許可の記録そのものに個人情報や契約情報が含まれる場合は、公開素材のフォルダへ混ぜず、必要な担当者が確認できる場所で管理します。制作会社へは掲載条件が分かる形で伝え、不要な個人情報まで渡さないようにします。確認できない画像を使わないと決めた場合も、判断理由を残しておけば、別の担当者が再び候補へ戻すことを防げます。

画像は、原本を残してから公開用の状態へ整える

ファイル形式と大きさは、用途と入稿条件に合わせる

写真、ロゴ、図解では、必要な形式や大きさが異なります。写真は撮影時の元ファイル、ロゴや図は可能なら編集できるデータも残します。提出前に、制作会社が受け取れる形式、必要な縦横比、掲載する大きさを確認してください。大きな画像を小さく使うことと、小さな画像を拡大することでは、残せる情報が違います。見た目の幅だけで判断しないようにします。

一律に「すべて同じピクセル数」「すべて一定容量以下」と決めるより、使う場所ごとに必要な品質を確認します。画面全体の写真、一覧の小さな写真、細部を読む図解は条件が違います。入稿用の原本と、サイトへ掲載する軽量な画像を分け、公開用の変換や圧縮を誰が行うか決めます。写真を受け取る担当者が、独断で原本まで上書きしないことが大切です。

明るさや切り取りは、説明したい事実を変えない範囲で調整する

暗くて対象が分からない写真は、明るさの調整や別写真への変更を検討します。傾きや不要な余白の整理も役立ちますが、製品の色、設備の配置、実際の作業状態などを誤って伝える加工には注意が必要です。担当者の顔や建物が不自然になるほど補正する前に、撮り直せるか相談します。調整前の原本と、採用する画像を対応付けて残します。

WordPressのメディア編集の公式説明では、回転、縮小、切り取りや、タイトル・キャプション・代替テキストの管理が案内されています。ただし、自社の画面や使い方はテーマ・プラグインによって異なります。メディア一覧を修正しただけで挿入済みの画像の情報まで変わるとは限らないため、実際に掲載されるページで確認します。

ファイル名は識別しやすくし、公開画面で読み込みを確かめる

撮影時の連番だけでは、原稿にどの写真を使うか伝えにくくなります。管理番号と対象が分かる短い名前を付け、素材一覧にも同じ名前を書きます。例えば架空の素材なら、photo-012-workshop-entrance.jpgのような名前が考えられます。名前の変更で元の写真が分からなくならないよう、元ファイル名との対応を残してください。機密の顧客名や個人情報は名前へ入れない運用ができます。

Googleの画像に関するガイドも、画像の説明、周辺の文章、ファイル名などを扱っています。検索キーワードを大量に入れるより、内容に合う説明を付けます。品質と読み込みの両方を確認し、公開後はスマートフォンでも画像が表示されるか、図の文字を読めるか、必要な部分が切れていないかを点検してください。

写真や図には、「何を理解してほしいか」が伝わる説明を添える

代替テキストとキャプションは、役割を分けて用意する

キャプションは画像の近くに表示する説明文で、撮影場所、対象、注目する点などを補えます。代替テキストは、画像を見られない場合などに意味や機能を伝えるための情報です。「写真1」「記事イメージ」だけでは内容が分かりません。同じ写真でも、会社の雰囲気を示す場合と、入口の場所を案内する場合では、必要な説明が変わります。

W3Cの代替テキストの判断フローは、画像が伝える情報や機能から扱いを決める参考になります。装飾だけの画像は空の代替テキストとする場合があり、説明のある画像すべてに長文を入れることが目的ではありません。担当者は「この画像で伝えたいこと」を渡し、制作会社と周辺の文章やリンクの役割に合わせて整えます。

複雑な図やグラフは、短い代替テキストだけで内容を伝えきれないことがあります。工程、数値、条件を本文や表にも記載し、図だけを読まないと判断できない状態を避けます。図を更新したときは、その説明文や元の数値も同時に確認してください。ウェブ全体の点検項目は企業サイトのアクセシビリティ改善ガイドで整理しています。

公開設計例：書類のどこを見るかを画像で案内する

英国Home Officeの書類内の情報を案内する設計パターンでは、書類の番号や必要な面を見つけるための画像例が公開されています。資料には、パスポート更新などの一般向けサービスで使われた例であることも記されています。画像を飾りとして置くのではなく、利用者が作業を進めるために使う公開例です。

民間のサイトへ応用するなら、製品の型番を確認する位置、見積もり前に撮影してほしい箇所、持参する書類の種類などが考えられます。例えば架空の機器修理サービスで「型番を送ってください」と書くだけでは分かりにくい場合、どの位置を見るかを説明する図と文章を用意できます。これは応用の考え方であり、同じ画像を使えば問い合わせが増えるという成果予測ではありません。

実物の書類や機器を説明する図では、向き、比率、注目する位置が正しいかを実物と照合します。個人情報や実際の顧客データを消した説明用サンプルを使うなど、伝える情報と公開できない情報を切り分けます。利用者に近い人が、その説明を見て必要な物を準備できるか確認すると、素材が役に立つかを判断しやすくなります。

制作会社には、素材一覧と最新版が分かる状態で渡す

フォルダは、原本・採用候補・確定で整理する

素材の置き場所を決め、各担当者が同じ一覧を参照できるようにします。一例として、ページごとのフォルダの中に、原本、採用候補、掲載確定という区分を設けられます。整理方法を複雑にしすぎると運用が止まるので、担当者が迷わず使える範囲にします。確定フォルダに入れる条件と、入れてよい担当者を決めてください。

例えばサービス紹介ページに写真が三枚必要なら、写真の管理番号、原稿の位置、採用状況、掲載条件を一覧にします。使わない候補を制作会社へ大量に渡して選択を任せる場合は、選定作業も依頼範囲に含むかを確認します。素材の整理や選定を誰が担当するかで、必要な時間と費用が変わることがあります。

原稿の修正は、変更した場所と版が分かるようにする

「最終」「最終修正」「本当の最終」といったファイル名が増えると、どれを使うか判断しにくくなります。日付や版番号を付け、現在使う版を一覧へ記載します。修正時は、対象ページ、変更する見出しや段落、変更前後の内容、確認者を伝えます。全文の差し替えなのか、一箇所だけの訂正なのかも明確にします。

共同編集の文書を使う場合は、提案中のコメントと確定した本文を区別し、制作へ渡す時点の版を残します。制作会社が実装を始めた後に別の担当者が原稿を変える場合は、変更したことを知らせてください。文書の保存が完了したことと、サイトに反映されたことは別です。反映後のページで修正内容が一致しているか確認します。

共有リンクは、相手が必要なファイルを開けるかまで確認する

共有リンクを送る前に、閲覧・ダウンロードに必要な権限、リンクの有効期限、ファイルの欠けがないかを確認します。社内の自分だけが開けるリンクでは受け渡しが終わりません。誰へ何を渡すかを絞り、必要に応じて社外共有用のフォルダを用意します。アカウントのパスワードや、制作に不要な顧客情報を素材一式へ混ぜないでください。

受け渡し後は、制作会社に不足や破損、読み込めない形式がないかを確認してもらいます。大きなファイルが途中までしか届いていない、文書の中に貼った画像の原本がないといった点は、早めに分かる方が対応しやすくなります。送付日だけを記録するのではなく、受領確認と、追加で必要な物が分かる状態にします。

入稿前と公開前のチェックリストで、素材の取り違えを防ぐ

素材一覧に必要な項目を揃える

次の項目を表計算や共有文書へコピーすると、素材の確認表として使えます。一つのファイルに一行を基本とし、原稿と写真が同じページのどこに対応するか分かるようにします。記入例は架空です。実際の会社名や担当者、条件に置き換え、未確認の欄を推測で埋めないでください。

• 管理番号とファイル名：例「写真012／作業場入口」。
• 掲載先と用途：例「会社情報／来訪者が入口を確認する」。
• 説明文の材料：写っている対象、見てほしい部分、撮影時期。
• 原本の場所と採用する版：編集前のデータと、掲載用候補を区別。
• 内容の確認者と確認日：部署、担当者、確認した範囲。
• 掲載条件：使える媒体、必要な表記、未確認事項、参照記録。
• 素材の状態：収集中、確認中、修正待ち、掲載確定など。
• 不足している物と期限：撮影、原稿確認、許可の回答など。
• 制作会社への受け渡し日と受領確認：追加依頼も同じ行へ記録。

入稿時は、内容とファイルの両方を見る

ファイルを送る前には、原稿が編集できるか、写真の原本があるか、ロゴの形や色が正しいか、掲載条件が分かるかを確認します。本文内で「次の写真」と書いた箇所に、対応する画像があるかも見ます。料金表や事例の数字、拠点の住所、電話番号など、業務に関わる情報は内容を知る担当者が確認します。

素材が一部足りない場合は、不足リストと提出予定を添えて渡します。制作会社は構成や別ページの作業を先に進められる場合がありますが、どこまで進行できるかは実際の素材と工程次第です。確認中の画像を仮置きに使うなら、公開用と混ざらない管理方法を決め、公開前に確実に差し替える担当を置いてください。

公開前の画面で確認し、更新するときの担当も決める

入稿データが正しくても、ページに組み込んだ状態で意図どおりに伝わるかは別に確認します。パソコンとスマートフォンで、人物や製品が切れていないか、原稿と違う画像を使っていないか、図の文字を読めるか、リンク先が合っているかを見ます。写真の説明と本文が食い違っていないか、変更した料金が関連する箇所へ反映されているかも確認します。

公開後は、料金、担当者、サービス内容、写真が変わったときに誰へ知らせるかを決めます。素材一覧を一度限りの納品資料にせず、差し替えや掲載終了にも使える形で残します。担当する制作会社そのものを変える場合は、素材の準備に加えて権限やデータの引き継ぎが必要です。その範囲は制作会社を変更するときの引き継ぎガイドをご確認ください。

素材の準備で迷う場合は、完成原稿を待たず、現在の資料と用意できる写真を整理して相談できます。Acquaのホームページ制作・リニューアルの対応範囲を確認し、原稿や写真の準備を含めて相談することができます。最初に必要なのは大量の素材より、何を伝え、何が確定し、何が足りないかが分かる情報です。

一次資料の確認日：2026年9月9日。公開された設計例と、説明用の架空の記入例を区別しています。