大阪でパンフレットを手がけるDTPデザイナーの方へ。「この雰囲気のまま、Webサイトもお願いしたい」と顧客から相談され、どこまで引き受けられるか迷っていませんか。紙面の色、写真、余白、書体を熟知していても、ページをどう分けるか、スマートフォンで何を先に見せるか、公開後に誰が更新するかは別の設計です。完成した冊子のPDFから相談を始めることはできます。当社が残したい表現を伺い、Webでの並び方や機能、更新方法を一緒に考えます。
当社は冊子の意図を伺い、パンフレット要素とWeb機能・更新の変換表を作ります。紙のブランド表現として残す要素、画面幅や操作に合わせて設計し直す要素、公開後に顧客が更新する要素を、当社と分けて考えます。写真や書体をWebで使う許諾、原稿の承認者、DTP側とWeb側の担当工程も同じ表で確認します。この記事では、当社へ仕様相談、Web向けのデザイン調整、実装、公開後の更新を依頼するときの進め方を説明します。必要に応じた顧客へのヒアリングやディレクションも、担当範囲を相談できます。大阪での価格や制作成果は推測しません。
残したい紙の表現を、スマホでも伝える
パンフレットは決まった判型とページ順を前提に、視線の流れを細かく作れます。Webでは画面幅が変わり、閲覧者が検索結果や共有リンクから途中のページへ入ります。見開きの左ページで前提を説明し、右ページで答えを見せる構成は、スマートフォンで順番が縦に変わると意味が伝わらないことがあります。紙面の完成度を守るには、固定した配置を守るより、何を先に理解してほしいかを言葉にする必要があります。
W3CのReflowに関する解説は、狭い表示幅や拡大時にも情報と機能を失わず、行を再配置する考え方を示しています。印刷の見開きを一枚の画像として貼ると、縮小された文字を拡大して横に動かす必要が生じます。当社はWebで読みやすい本文、見出し、図を作るため、文章と画像を分け、幅が変わっても順序を保つ画面を設計します。表や図など、二方向の配置が必要な部分は個別に表示方法を検討します。
紙の表現を消す必要はありません。色の体系、写真の雰囲気、図形の扱い、言葉の調子は、Webでもブランドの連続性を作ります。残す対象は「この位置にこの写真を置く」という座標より、「この写真が何を伝えるか」「この色がどの役割を持つか」です。当社へは完成PDFだけでなく、残したい表現の意図と使う条件を渡します。打合せで一緒に確認でき、Webの仕様を先に決めておく必要はありません。
冊子の素材から、ページ構成を一緒に考える
当社がDTPデザイナーと冊子を確認するとき、素材の候補にするのは、ロゴ、色、書体、写真、図版、見出し、本文、表、問い合わせ先です。それぞれに「ブランド表現」「情報」「操作」の役割を付け、Webでの扱いを当社から提案します。ロゴや色は共通の表現として残せても、印刷向けの細い文字や背景との低いコントラストは画面で調整が必要な場合があります。写真も、横長の表紙に合う構図が縦長のスマートフォンに合うとは限りません。
当社は紙面にある複数の情報を、Webでは閲覧者の目的別に分けて構成します。会社紹介、商品・サービス、事例、採用、問い合わせを一つの長い見開きから切り出すとき、どのページから入っても必要な前提が分かるようにします。冊子の目次をそのままサイトのメニューにする前に、顧客が実際に更新する項目や、閲覧者が探す順序を確認します。ページの数や名称はDTP側だけで決めず、顧客と当社で検討します。
紙の原稿は文字量が紙面の幅に合わせて編集されていることがあります。Web向けに文章を短くした際に、条件や注記が抜けていないか確認します。価格、仕様、対応地域など変わる情報は、紙面の写真内に埋め込むより文字として管理したほうが更新しやすい場合があります。反対に、完成したブランドストーリーや取材写真は、適切な許諾のもとでWebの資産になります。何を固定表現にし、何を更新情報にするかを分けます。
Webの知識がなくても、仕様から相談できる
最初に当社がパンフレットの原稿と素材を拝見し、DTPデザイナーとWebへ移す候補を一覧にします。次に、当社が画面幅、ページ構造、操作、更新の条件を提案し、顧客と確認します。その後、写真・イラスト・書体のWeb利用を確認し、最後にデザイン、実装、原稿、検証、公開後の更新について担当を分けます。見た目の再現を最初に約束するのではなく、残したい意図と機能を先に共有する順序です。
印刷の完成データをブラウザで見られる形にする方法もあります。AdobeのPublish Onlineの説明は、InDesign文書をオンラインで公開する機能を案内しています。ただし、冊子をオンラインで読むことと、企業サイトとして検索、導線、問い合わせ、更新を設計することは目的が異なります。顧客が望むのがデジタル冊子か、事業情報を継続して更新するサイトかを、当社も初めに伺います。ボタンなどを使った冊子内の操作も選択肢にし、必要な使い方から制作範囲を相談します。
大阪で取材した印刷物の素材を使う場合、撮影場所が大阪であることとWeb掲載が許されることは別です。撮影者、モデル、施設、顧客から得た許諾の利用範囲を確認します。追加撮影や取材が必要なら、場所、同席者、日程、費用負担を案件ごとに決めます。「大阪の案件だから必ず訪問できる」といった一律の約束をせず、Web制作会社の対応範囲を個別に確認します。
残す表現と作り直す機能を、当社と決める
次の変換表は、当社と残したい表現や必要なWeb機能を確認するための例です。紙面で果たした役割をWebでどう再現するか、誰が更新するかを決める資料です。下の項目は協業前の設計例で、具体的な実装や権利を確定するものではありません。当社が顧客の原稿、ブランド基準、更新体制と照合しながら、DTPデザイナーと確認します。ご相談前に表や素材台帳を完成させる必要はありません。今ある冊子から、追加で確認する情報を一緒に整理します。
表は左右にスクロールして確認できます。
| パンフレットの要素 | Webで残す表現 | 設計し直す機能・構造 | 更新の確認 |
|---|---|---|---|
| 表紙・見開き | 色、写真の方向性、主な言葉 | 狭い画面での順序と見出し | 季節や事業変更時 |
| 商品・サービス欄 | 説明の調子、写真の扱い | 商品別ページ、比較、問い合わせ先 | 仕様・価格・提供範囲 |
| 図表 | 図の論点と色の役割 | 画面幅、文字の説明、操作 | 数値と参照元 |
| 取材写真 | ブランドの雰囲気 | 切り抜き、代替テキスト、配置 | Web利用許諾と差替え |
| 問い合わせ先 | 呼びかけの文体 | フォーム、電話、受付後の案内 | 担当・受付時間 |
当社との打合せで、DTP側が最終判断する表現と、当社が技術面を設計する箇所を、変換表の一行ごとに記します。たとえば色と写真のトーンはDTPデザイナーの意図を残し、スマートフォンでの並び順やフォームの動作はWeb制作側と検証します。原稿の正確性やサービス条件は顧客の確認が必要です。「デザイン一式を渡す」「コーディングを頼む」だけでは、情報構成と公開後の更新が担当不明になりがちです。
表を作る過程で、冊子に存在しない情報も見つかります。よくある質問、問い合わせ後の案内、採用応募の条件など、Webで必要になった情報をDTP側が確認なしに作らないようにします。顧客へ追加取材するか、Web制作会社がヒアリングを担うかを決めます。当社が顧客へのヒアリングを担当する場合も、参加者と確認する内容を事前に相談します。冊子から転用できない情報は、新たに制作するものとして見積や工程に含めます。
写真と書体は、Web利用の条件を確かめる
パンフレットの制作で写真やイラストを使う許可を得ていても、Web掲載が含まれるとは限りません。文化庁の著作権契約マニュアルの例は、印刷物での利用とインターネット上の掲載を区別して記載する例を示しています。具体的な許諾の範囲は個別契約や権利者の回答で確認します。当社も「紙に使えたからネットにも使える」と推測して進めないようにします。
確認する素材には、写真、イラスト、アイコン、地図、書体、文章、図表が含まれます。印刷会社へ渡したデータの中に第三者が提供した素材がある場合、その出所と使用条件を一覧へ記します。元データを保有していても、Webで利用する権利があるとは限りません。素材ごとに「Web掲載可」「追加確認」「差し替え」の状態を付け、当社は確認前の素材を本番ページへ組み込まない手順にします。未確認の素材がある段階でも、確認先と代替案から相談できます。
書体も紙とWebで同じファイルを配布できるとは限りません。当社はWebフォントの利用契約を確認し、代替書体での見え方、文字の太さと読みやすさをDTPデザイナーと確かめます。ロゴは正式データの利用条件を守りつつ、背景色やサイズごとの表示を試します。印刷の細かな文字間をそのまま固定すると、狭い画面で文字が重なることがあります。ブランドを守るための調整として、画面の検証を工程へ入れます。
デザインから更新まで、必要な工程を相談する
協業の打合せでは、DTPデザイナーが残す表現、顧客が承認する内容、Web制作会社へ依頼する設計と実装を、当社と三列で整理します。DTP側が画面デザインまで担当するなら、Web側が必要とする画面幅、状態、部品の違いを相談します。当社が情報構成や原稿を支援するなら、既存パンフレットのどの要素を判断の基準にするかを伝えます。窓口が複数ある場合は、顧客への質問と修正依頼を誰がまとめるか決めます。
引き渡すデータは、完成PDFだけでなく、編集できる原稿、正式なロゴ、利用を確認した写真、色と書体の指定、取材時の説明を整理します。元ファイルを丸ごと渡せない場合は、何が不足し、誰が再制作するかを記します。データの共有先と版を決めないと、印刷用の古い写真とWeb用に許諾を得た写真が混ざります。素材台帳に出所、利用先、最終確認者、差し替えの要否を記録しておくと、実装側が判断を推測しなくて済みます。
動きのある部品は紙に対応物がありません。開閉するメニュー、フォームの入力エラー、送信後の表示などは、平面のデザイン画だけでは分からない状態です。DTPデザイナーがその表現を担当するか、当社が設計して確認を求めるかを決めます。色や余白の基準を共有しつつ、操作できる状態ごとの見え方を確認します。仕上がりの確認資料には、通常画面だけでなく長い文章や画像がない場合も含めます。
公開後の更新も最初から役割を分けます。当社は顧客が追加する事例や変更する情報を伺い、WordPressなどの更新画面と、DTPデザイナーが確認する範囲を相談します。新しい事例を追加する人、画像を選ぶ人、本文を校正する人、ブランドの表現を確認する人が同じとは限りません。更新できる項目を顧客が把握できるようにし、テンプレートに入れる写真の比率や見出しの長さを決めます。冊子の一号だけを美しく再現しても、次の事例が同じ品質で追加できなければ運用が続きません。
素材を差し替えたときは紙面の原本とWebの公開画像の両方を確認します。更新のたびにDTPデザイナーへ確認を依頼する箇所と、顧客が日常的に更新できる箇所を分ければ、承認待ちで情報が古くなることを避けやすくなります。
大阪の顧客案件でも、取材、撮影、校正、実装確認をすべて対面にする必要はありません。何を現地で確認するか、何をオンラインで確認できるかを案件の資料と条件で決めます。印刷物の取材先を再訪するなら、追加素材が必要な理由と許諾の範囲を顧客に説明します。地域名だけで対応工程や費用を推測せず、Web制作パートナーの案内で示す支援内容を基に、当社が参加する工程と個別の相談条件を確認します。
関連するWebデザイナーがDTPを行う記事は、Webから紙へ進む際の観点を扱います。紙のブランド制作をすでに担い、Webの構造と運用を協業で補いたい方には、当社が仕様相談から支援します。デザインの優劣を決めるのでなく、冊子のどの意図を残し、どの機能を新しく設計するかを変換表で共有します。
当社は公開前に、DTPデザイナーと紙のブランド意図が保たれているか、スマートフォンで文章と画像の順序が分かるか、問い合わせが機能するか、顧客が更新できるかを別々に確認します。承認者が一枚のトップ画像だけでサイト全体を判断しないよう、主要なページと操作状態を共有します。修正の連絡先を一本化し、紙とWebの両方で使う素材に変更があったとき、どちらの管理表を更新するかを決めます。
