本文へスキップ
  1. TOP
  2. Web制作
  3. 実務知識
  4. PDFを残す・HTML化する・両方持つ境界をどう決めるか

02 / THINK

考えるフェーズの実務知識

PDFを残す・HTML化する・両方持つ境界をどう決めるか

検索、閲覧、印刷、保存、更新の目的から公開形式を選ぶ

案内施設で冊子とスマートフォンの情報を見比べる利用者

PRACTICAL KNOWLEDGE 実務知識

WRITTEN BY

FHW制作チーム

反省会と日々の制作記録をもとに、担当スタッフが実際に迷い、確認し、判断した過程を整理しています。

会社案内、製品資料、申込要項、報告書。すでにPDFがあると、「これをWebに載せればよい」と考えやすくなります。PDFは印刷しやすく、配布時の形を保てる便利な形式です。一方で、スマートフォンでは読みづらい、検索結果から古い版へ直接入れる、内容を更新しても差し替え忘れる、といった問題も起きます。

私たちの制作でも、PDFをダウンロード資料として残した案件、内容をHTMLへ分解した案件、両方を使い分けた案件がありました。どれが正解かは、資料の見た目ではなく、利用者がその後に何をするかで変わります。

ここでは、PDFを残す、HTML化する、両方を持つ判断と、公開後に古い資料を残さない管理方法を整理します。

形式ではなく、読んだ後の行動から決める

最初に「PDFかHTMLか」を選ぶのではなく、誰が、どこで、何を知り、次に何をするかを確認します。

  • 検索から一部の情報だけを探したい
  • スマートフォンで読み、フォームや詳細ページへ進みたい
  • 印刷して会議や店頭で配りたい
  • 決まった版を保存・提出したい
  • 表や図を含む全体を同じレイアウトで見たい

検索、閲覧、操作が中心ならHTMLが向きます。配布、印刷、保存する版が重要ならPDFに意味があります。

HTMLへ出した方がよい情報

更新頻度が高い情報、検索される情報、他ページとつながる情報、利用者の行動につながる情報はHTMLで持つと扱いやすくなります。

  • 営業時間、料金、募集要項、連絡先など変更される情報
  • 製品名、仕様、施設情報など検索入口になる情報
  • 問い合わせ、申込、予約へ続く説明
  • 見出しやリンクを使って必要箇所へ移動したい長文
  • 読み上げ、文字拡大、翻訳など利用環境へ合わせたい情報

紙面を一枚の画像として貼るのではなく、文字、表、画像、注記、リンクへ分け、スマートフォンで読む順序を組み直します。

PDFを残す意味がある情報

PDFは、内容とレイアウトを一つの版として配布・保存する用途に向きます。提出書類、印刷用案内、詳細な報告書など、ページ単位の形に意味がある場合です。

ただし、ダウンロードリンクには資料名、対象、改訂日、容量、形式を添えます。「資料はこちら」だけでは、開く前に内容と新しさを判断できません。

両方持つなら、どちらが正かを決める

概要はHTML、保存・印刷用はPDFという組み合わせもあります。その場合、同じ情報を二重に手で更新すると差分が生まれます。

  • HTMLとPDFのどちらを元データとするか
  • 価格、日付、連絡先など両方へ出る項目は何か
  • 更新時に誰がもう一方を確認するか
  • 旧版を削除・保管・転送するルール
  • 同じ内容を自動生成できる範囲

完全に同じ内容を二形式で持つ必要があるかも見直します。HTMLは最新情報、PDFは特定時点の正式版など、役割を分けると管理しやすくなります。

ページから消しても、PDFのURLは残る

リンクを外しただけでは、検索結果、メール、SNS、他サイト、QRコードから古いPDFへ入れることがあります。差し替えや終了時には、ファイルURLそのものを確認します。

新しい版へ転送する、終了案内を出す、公開を止める、記録として保管するなど、資料ごとに判断します。ファイル名を毎回変える場合も、古いURLの扱いを忘れないよう一覧に残します。

PDFのアクセシビリティも、別の確認として残す

PDFで公開する場合も、文字が画像だけになっていないか、読み順、見出し、代替テキスト、リンク、文書タイトルなどを確認します。HTMLページに概要や問い合わせ先を用意することで、PDFを開けない環境への入口も作れます。

「PDFだから元の紙面どおり」で終わらせず、Webで公開する資料として、探せる、開ける、読める、次へ進める状態を確認します。

PDFとHTMLを決めるチェックリスト

  • 利用者が読んだ後に何をするか確認したか
  • 検索・更新・操作が必要な情報をHTMLへ出したか
  • 印刷・保存・提出する版としてPDFを残す理由があるか
  • 両方持つ場合、元データと更新担当を決めたか
  • 資料名、対象、改訂日、容量をリンク付近へ示したか
  • 古いPDFの直接URLと検索結果を確認したか
  • 終了・差し替え時の削除、転送、保管を決めたか
  • PDFを開けない・読みにくい環境への代替があるか

PRACTICAL KNOWLEDGE 同じフェーズの実務知識

私たちが別の制作で得た判断や確認方法を、同じ制作フェーズからご覧いただけます。

撮影機材とCMS画面を並べて制作工程を確認するデスク

撮影・取材・CMS更新を一つの制作工程として設計する

撮影、取材、原稿、デザイン、CMS実装を別々に進めず、素材の用途と公開後の更新まで含めて一つの制作工程として整理する方法をご紹介します。

既存システムの資料とデータ構造を重ねて確認する作業机

仕様書が残っていない既存システムを、どう安全に改修するか

現在の画面やコードだけでは判断できない業務ルールを、実際の操作、データ、通知、担当者の使い方から復元し、安全に改修する方法を整理します。

画面部品と配色、キーボード操作の確認範囲を話し合う制作チーム

自動検査で点が取れれば、アクセシビリティ対応済みと言えるか

アクセシビリティを最終検査だけに任せず、構成・デザイン・実装の各工程へ分けて確認し、自動検査で分かることと人の操作で確かめることを整理します。

撮影現場で写真と色、公開条件を確認する制作チーム

支給写真・動画・ロゴ・原稿を「公開に使える素材」としてどう確認するか

写真、動画、ロゴ、原稿、PDFについて、最新版と利用条件、使う画面、Web向けの技術要件、仮素材、公開後の差し替え方法を確認する手順を整理します。

複数の案内図から目的地を探す公共施設の利用者

サービス・地域・目的など複数の探し方を、一つの情報へどうつなぐか

サービス、地域、目的など複数の入口を用意するとき、同じ情報を複製せず、分類、検索、詳細、相談までを一つの情報構造として設計する方法を整理します。