Web素材・原稿の準備｜リニューアル時の遅延を防ぐ情報整理術

「ホームページのリニューアルが決まったけれど、自分たちで何を用意すればいいの？」

「制作会社から『原稿と写真をお願いします』と言われたけれど、どうやってまとめればいいか分からない…」

制作会社に依頼すれば、すべてお任せでホームページが完成すると思われがちですが、自社の強みや専門的な業務内容、現場のリアルな空気感などを一番よく知っているのは、他でもない皆さまご自身です。そのため、原稿の作成はもちろん、撮影をプロに頼む場合の事前準備（撮影場所や対象の選定）や既存写真の収集など、ベースとなる「素材準備」はお客さま側にご協力いただくケースが非常に多いのです。

しかし、通常業務と並行して素材を準備するのは至難の業。「何から手を付ければいいか分からず、後回しにした結果、全体のスケジュールが大幅に遅れてしまった…」というのは、実はWeb制作の現場で最も頻繁に起こるトラブルの一つです。

この記事では、ホームページ制作の全体的な流れの中で、なぜ素材準備がそれほど重要なのかを紐解きながら、デザイナーに意図が伝わりやすい原稿のまとめ方、写真選びの失敗を防ぐポイントを解説します。「自分たちで準備できるだろうか」と不安を抱える担当者さまが、迷わずスムーズにプロジェクトを進めるための情報整理術を、デザイン迷子センターの視点でお届けします。

1.　制作会社の「手が止まる」最大の原因は素材の準備不足

ホームページ制作には、企画・構成の決定、デザイン制作、コーディング（Web上で動くようにするプログラミング作業）、テスト確認、そして公開という大まかな工程があります。この手順の中で、制作会社とお客さまの連携が最も密になり、かつスケジュールが最も遅れやすいのが「デザイン制作の前段階」である素材準備のタイミングです。

1-1.　原稿がないとデザインが作れない理由

「とりあえず仮の文章（ダミーテキスト）でデザインだけ先に進めてもらえませんか？」 担当者さまからこのようなご相談をいただくことは珍しくありません。実際には、大まかなテーマや伝えたい内容が整理されていれば、仮の文章を入れながらデザインを先に進めることもあります。しかし、内容や情報量がほとんど決まっていない状態で進めることは、あまりおすすめできません。なぜなら、Webデザインとは「そこにある情報（文章や写真）を、ターゲットに最も伝わりやすい形に整理して配置すること」だからです。

例えば、「私たちの強み」というコンテンツを作る場合、「国内シェアNo.1」「先端技術でお客さまの課題を解決」「大手メーカーのパートナー」といった大きなテーマやキーワードが決まっていれば、それをもとに制作会社側で文章を仮置きしながら、デザインを進めることもできます。一方で、その強みが「3つの箇条書き」で説明されるのか、それとも「1000文字の熱いメッセージ」として語られるのかによって、最適な見せ方（レイアウトや余白の取り方、文字の大きさ）は全く異なります。ある程度のテーマや原稿の内容やボリュームが分からないままデザインを作ってしまうと、後から本番の原稿が入ったときに「枠に収まりきらない」「スカスカで不格好になってしまう」といった事態が起き、最悪の場合はデザインを一から作り直すことになります。これが、無駄な工数とスケジュールの遅延を生む大きな原因となるのです。

1-2.　「とりあえず」の写真が招く手戻りのリスク

写真については、実際には制作会社側で仮の画像を用意し、デザインの方向性を確認しながら進めることもありますが、基本的には原稿準備と同じです。例えばメインビジュアル（ホームページを開いて最初に目に入る大きな画像）に、「横長で、右側にキャッチコピーを入れるための余白がある写真」を使いたいとデザイナーが考えていたとします。しかし、後からお客さまから提供された写真が「縦長で、被写体が画面いっぱいに写っている写真」だった場合、想定していたデザインに当てはめることができず、構成から考え直さなければならなくなります。

このように、仮の写真でデザインを進めることはできますが、実際に使用する写真の構図や縦横比、被写体の位置などが想定と大きく異なると、デザインの調整や見直しが必要になります。そのため、使用したい写真が決まっている場合は、できるだけ早い段階で制作会社に共有しておくことで、手戻りを減らしながらスムーズに進めることができます。

1-3.　スケジュールを死守するための逆算思考

ホームページ制作の期間を守り、予定通りの公開日に間に合わせるためには、全体のスケジュールから逆算して「いつまでに、どのページの、どんな素材が必要か」を明確に把握することが重要です。制作会社との初回打ち合わせの段階で、「素材の提出期限」を確認し、社内での準備期間をしっかり確保するようにしましょう。少し余裕を持たせたスケジュールを組むことが、質の高い素材を用意するための秘訣です。

▼ ホームページ制作の全体の流れや無理のないスケジュールを組むコツを知りたい方は、こちらの記事もおすすめです！

2.　デザイナーへ渡すWeb原稿の整え方（見出し・箇条書き）

いざ原稿を書こうとWordを開いたものの、真っ白な画面を前にフリーズしてしまう…。そんな担当者さまのために、デザイナーが「この原稿、すごく分かりやすくてデザインしやすい！」と喜ぶ、Web原稿の整え方のコツをお伝えします。

2-1.　「見出し」と「本文」を明確に分ける

Webサイトを訪れたユーザーは、本や雑誌のように文章を最初から最後までじっくり読んでくれるわけではありません。多くの人は、画面をスクロールしながら「自分に関係のある情報はないか」と拾い読みをしています。そのため、Web原稿で重要になるのが「見出し」です。原稿を作成する際は、長々と文章を書き連ねるのではなく、情報のまとまりごとに必ず「見出し」をつけることを意識してみましょう。

▲ おすすめしない原稿の例

弊社は1950年に創業し、長年にわたり地域に密着したサービスを提供してきました。お客様第一主義を掲げ、常にご要望にお応えできるよう努力しております。また、環境に配慮した製品開発にも力を入れており、持続可能な社会の実現に貢献しています。

◯ おすすめの原稿の例

■見出し 　地域と共に歩む。私たちの3つの約束 ■本文 ・創業70年の実績と信頼 　1950年の創業以来、地域に密着したサービスを提供し続けています。  ・お客様第一の姿勢 　常にお客様の声に耳を傾け、細やかなご要望にも柔軟にお応えします。  ・環境への取り組み 　環境負荷の少ない製品開発を通じて、持続可能な社会の実現に貢献します。

このように「見出し」と「本文」という階層構造がはっきりしていると、Webサイトを訪れたユーザーに内容が伝わりやすくなるのはもちろん、デザイナーは「ここは大きく目立たせよう」「ここはアイコンを添えて分かりやすくしよう」と、意図を正確に汲み取ってデザインに落とし込むことができます。

2-2.　箇条書きで情報を整理する

商品の特徴やサービスの流れなどを説明する際は、文章でだらだらと説明するよりも、上のおすすめの原稿例のように「箇条書き」を用いるのが効果的です。箇条書きにすることで、デザイナーにとっては「ここは図解やステップ形式のデザインにすればいいな」という構成のヒントになります。

2-3.　「誰に話しかけているか」を意識したトーン＆マナー

原稿を書く際は、ホームページを読んでくれる「ターゲット」が誰なのかを常に意識しましょう。一般の消費者（BtoC）向けなのか、企業の担当者（BtoB）向けなのかによって、言葉の選び方や専門用語の使い方は大きく変わります。

例えば、専門的な技術を持つBtoB企業の場合、つい社内で使っている専門用語を多用してしまいがちですが、初めてサイトを訪れたお客さまにとっては「難しくてよく分からない」と離脱する原因になってしまいます。そのため、専門用語は必要に応じて噛み砕いだ表現に変更し、初めて読む人にもわかりやすい言葉選び（易しさのレベルが難しい場合には、目安として「中学生が読んでも理解できるくらい」を意識）を心がけることが、結果的に問い合わせを増やすことに繋がります。

2-4.　原稿共有ツールの選び方と「強調したい想い」の伝え方

原稿を提出していただく際は、WordやGoogleドキュメント、またはシンプルなテキストエディタを使っていただくと文字の流し込みがスムーズでおすすめです。もちろん、PowerPointなどの使い慣れたツールを使って、「この画像の横に、このテキストが入る」といったように配置が分かるようにまとめていただくかたちでも全く問題ありません。メールの本文にベタ打ちかつ五月雨に共有すると、反映が漏れてしまうこともあるので、1つのファイルにまとめていただくのが安心です。

また、文字の大きさや色などの具体的なデザイン装飾は、いただいた原稿をもとにデザイナーが行います。そのため、原稿データご支給の段階で、文字の細かな装飾は基本的には不要ですが、「ここは特に強調してほしい」「この言葉は絶対に目立たせたい」といったご希望があれば、文字の色を変えたり、横にメモを添えたりしてお伝えいただくのは大歓迎です。皆さまの「ここを推したい！」という熱意を制作会社に共有することが、良いデザインを作るための最大のヒントになります。

3.　写真・画像素材の集め方と注意点（解像度・著作権・商用利用）

Webサイトの第一印象を大きく左右するのが「写真」です。質の高い原稿が用意できても、添えられた写真が暗かったり、画質が粗かったりすると、企業全体の信頼感やブランドイメージを損なってしまう危険性があります。ここでは、ホームページ制作における写真・画像素材の集め方と、絶対に知っておくべき注意点を解説します。

3-1.　スマホで撮影？プロに依頼？写真手配の判断基準

最近のスマートフォンはカメラの性能が非常に高いため、「スマホで撮影した写真でも大丈夫ですか？」というご質問をよくいただきます。結論から言うと、ブログやSNSの更新、ちょっとしたお知らせの挿絵などであれば、スマホで撮影した写真でも十分に活用できます。

しかし、ホームページの「会社の顔」となるメインビジュアル、代表者の挨拶、主要な製品紹介、社員インタビューといった重要なコンテンツについては、プロのカメラマンに撮影を依頼することを強くおすすめします。プロの技術による適切な照明や構図、会社の空気感や人柄を引き出す写真は、フリー素材や素人の撮影では決して出せない圧倒的な説得力を持っています。予算の範囲内で「どこにこだわるか」の優先順位をつけ、重要な写真はプロに任せるのが、クオリティを担保する秘訣です。

3-2.　失敗しないフリー素材（ストックフォト）の選び方

予算の都合上、どうしても写真撮影が難しく、インターネット上のフリー素材（ストックフォト）を活用する場合は、以下の点に注意して選びましょう。

●「いかにもフリー素材」を避ける

どこかで見たことのあるような、カメラ目線で不自然な笑顔の外国人モデルの写真などは、サイト全体のオリジナリティを下げ、「手抜き感」を与えてしまいます。できるだけ自社のターゲット層に近い自然な雰囲気のモデルや、自社の業務内容にマッチしたリアルなシチュエーションの写真を探すようにしましょう。

● トーン（色調・雰囲気）を統一する

集めた写真の明るさや色合い、テイスト（ポップなのか、クールなのか）がバラバラだと、サイト全体がごちゃごちゃした印象になってしまいます。素材を選ぶ際は、一つのサイト内でトーンが統一されているかを意識することが大切です。

3-3.　「解像度」と「サイズ」の落とし穴

写真や画像を扱う際によく耳にする「解像度」と「サイズ」ですが、簡単に言うと「解像度」は画像の鮮明さを指し、「サイズ」は写真の縦横の寸法（ピクセル数）やデータ容量を表しています。これらが足りていないと、せっかくの良い写真もWebサイト上ではぼやけてしまいます。

お客さまから提供いただいた写真で最も多いトラブルが、この「解像度が低すぎて（画質が粗すぎて）使えない」というものです。例えば、画面横幅いっぱいに広がるメインビジュアルに使用する場合、横幅は1920px程度あることがひとつの目安になります。しかし、制作会社にメールで送る際に自動で縮小されてしまったり、WordやExcelの中に貼り付けた画像を抽出して使おうとしたりすると、画質が著しく低下してしまいます。その結果、PCの大きな画面で写真をきれいに表示するための、サイズ（ピクセル数）が保てず、解像度が下がって画像が粗く見えてしまうのです。

写真素材を制作会社に送る際は、「リサイズ（縮小）加工をしていない元データ」を、ファイル転送サービスなどを利用してそのまま渡すようにしましょう。切り抜きや色調補正などの加工はプロが行うので、手を加えないのが一番安全です。もし、手元にある画像で問題ないか不安な場合には、一度制作会社に送って確認してもらうのもおすすめの方法です。

3-4.　絶対に守るべき「著作権」と「商用利用」のルール

Web上で使用する画像において、最も注意しなければならないのが権利関係です。

● ネットで拾った画像の無断使用は厳禁

Googleの画像検索などで見つけた写真を、勝手に保存して自社のホームページに使うことは、著作権侵害にあたる重大な違法行為です。絶対にやめましょう。

●「フリー素材＝何でもOK」ではない

無料の素材サイトであっても、「商用利用は不可」「クレジットの表記が必要」「Webサイトでの使用はOKだが、商品のパッケージには不可」など、利用規約が細かく定められています。必ず各サイトの規約を確認し、ルールに従って使用するようにしましょう。

● 肖像権への配慮

自社で撮影した写真であっても、写り込んでいる社員やお客さまの顔がはっきりと分かる場合、ホームページへの掲載にあたっては本人の許可を得る必要があります。後々のトラブルを防ぐためにも、口頭だけでなく書面やメールで確認を取っておくのが安心です。

＋α：デザイン迷子センター流：制作を加速させる「素材準備」の社内巻き込み術

Web担当者を任された方の多くが抱える悩みが、「他部署の人が原稿作成や写真撮影に協力してくれない」「催促しても素材が出てこない」という社内調整の難しさです。ここでは、周囲を味方につけ、素材準備をスムーズに進めるための「社内巻き込み術」をご紹介します。

● 「真っ白なフォーマット」を渡さない

各部署の担当者に「事業内容のページの原稿を書いてください」とお願いしても、何をどのくらい書けばいいのか分からず、後回しにされてしまいがちです。依頼する際は、決して「真っ白なWord」を渡してはいけません。「ここに100文字程度で、製品の最大の特徴を書いてください」「ここに箇条書きで3つ、導入のメリットを挙げてください」というように、文字数の目安や構成の枠組みをあらかじめ設定した「穴埋め形式のフォーマット」を用意しましょう。原稿作成のハードルを下げることで、情報収集のスピードは劇的に上がります。

●「インタビュー形式」で引き出す

文章を書くのが苦手な社員に対しては、原稿の執筆を依頼するのではなく、Web担当者が「インタビュアー」となって話を聞き出す方法が非常に効果的です。「〇〇のサービスについて、お客さまから一番喜ばれるポイントは何ですか？」「開発で一番苦労したエピソードを教えてください」と質問し、その答えを録音・メモして、担当者が文章にまとめます。 この方法なら、相手の作業負担を「30分のヒアリング時間」だけに抑えることができ、しかも現場のリアルな熱量を持った、生きた言葉を引き出すことができます。

● 目的を共有し、「自分ごと」にしてもらう

素材の提出が遅れる根本的な原因の多くに、「なぜホームページをリニューアルするのか」という目的が社内で共有されていないことがあります。「社長に言われたから作る」のではなく、「このホームページができれば、営業部の〇〇さんの商談がスムーズになります」「採用活動で、もっと自社にマッチした良い人材が来てくれるようになります」と、協力してくれる人にとっての「メリット」を伝えることが重要です。 プロジェクトの初期段階で社内に目的を周知し、「みんなで作る」という空気感を醸成することが、結果的にWeb制作のスケジュールを加速させる最大の原動力になります。

まとめ：丁寧な素材準備がWebサイトのクオリティを底上げする

ホームページ制作における素材・原稿の準備は、決して「制作会社に丸投げするための単なる作業」ではありません。自社の強みを改めて見つめ直し、誰に何を伝えたいのかという「情報」を研ぎ澄ませていく、非常に価値のあるプロセスです。

質の高い原稿と適切な写真素材が揃っていれば、デザイナーはその魅力を最大限に引き出すレイアウトや装飾に全力を注ぐことができます。つまり、皆さまの丁寧な準備が、完成するホームページのクオリティを直接的に底上げすることに繋がるのです。

もちろん、「原稿のまとめ方が合っているか不安」「どんな写真を用意すればいいかアドバイスが欲しい」という少しでも迷いや行き詰まりを感じたら、ぜひ私たち「デザイン迷子センター」にご相談ください。 私たちは、出来上がった素材を受け取るだけの関係ではなく、どのような言葉や写真を選べば皆さまの魅力が一番伝わるのかを、ゼロから一緒に考え、伴走するパートナーです。担当者さまが一人で抱え込まず、自信を持ってプロジェクトを進められるよう、情報整理の段階からしっかりとサポートさせていただきます。一緒に、会社の想いがまっすぐに届くWebサイトを作り上げましょう。

---

デザイン迷子センターのご紹介

「デザインのことが全然わからない」「何から手を付ければいいか教えて欲しい」。そんな担当者さまに寄り添い、一歩踏み出すためのサポートをするのが「デザイン迷子センター」です。

私たちは、単に「作る」だけではなく、制作の背景にある「目的」や「ゴール」を大切にしています。

創業から約20年、全国700社以上のお客さまのお手伝いをしてきた豊富な実績と経験で、“迷子さん” の不安を「安心」に変える、一番の道しるべになります。

　

ご予算に応じたご提案や、優先順位の整理などについてもご相談に乗れますので、お気軽にご相談ください。