PDFをページめくり付きデジタルカタログに変換する方法

紙のパンフレットやチラシ、ポートフォリオをPDFにしたものの、「Webサイトに埋め込むとただのPDFリンクになってしまう」「クライアントに見せるときにもう少し見栄えよくしたい」と感じたことはありませんか？

PDFリンクを貼るだけでは、閲覧者はダウンロードして別アプリで開く必要があります。離脱率が高くなる原因です。一方、ページめくりアニメーション付きのデジタルカタログに変換すれば、ブラウザ上でそのまま閲覧でき、紙のカタログをめくるような体験を提供できます。

この記事では、PDFや画像をデジタルカタログ（フリップブック）に変換し、Webサイトに埋め込むまでの手順を解説します。

デジタルカタログが効果的な場面

デジタルカタログは「視覚的に見せたいドキュメント」に向いています。

デジタルカタログ作成の手順

Step 1: PDFまたは画像をアップロードする

デジタルカタログ作成ツールを開き、素材をアップロードします。

対応フォーマット:

• ドラッグ＆ドロップでアップロードできます
• PDFの場合は自動的にページ単位に分割されます
• 画像の場合はファイル名順に並びます（後から並び替え可能）

画像の解像度が高すぎてファイルサイズが大きい場合は、画像リサイズツールで事前にサイズを調整してからアップロードすると、表示パフォーマンスが向上します。

Step 2: プレビューで確認する

アップロードが完了すると、ページめくりアニメーション付きのプレビューが表示されます。

操作方法:

表示モードの切り替え:

• 見開き表示: カタログやパンフレットなど、見開きデザインの資料に最適
• 単ページ表示: 縦長の資料やスマートフォン閲覧時に適切

Step 3: ページを並び替える（必要に応じて）

画像でアップロードした場合、ページの順番を変更できます。サムネイルをドラッグして並び替えるか、後からページを追加することも可能です。

Step 4: HTMLファイルとして書き出す

「HTMLファイルとして保存」ボタンで、自己完結型のHTMLファイルを生成・ダウンロードできます。

このHTMLファイルの特徴:

• 単一ファイル: ページ画像がBase64でHTMLに埋め込まれるため、追加ファイルは不要
• オフライン動作: インターネット接続なしでも動作
• そのまま配布: メール添付やファイル共有で直接送れる

Webサイトへの埋め込み方法

生成したHTMLファイルをWebサイトに埋め込むには、iframeタグを使います。

基本的な埋め込みコード

<iframe
  src="/catalog/my-catalog.html"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

WordPressへの埋め込み

1. HTMLファイルをサーバーにアップロード（メディアライブラリまたはFTP）
2. 投稿・固定ページで「カスタムHTML」ブロックを追加
3. 上記のiframeコードを貼り付け、srcパスを修正

Wix・Shopifyへの埋め込み

1. HTMLファイルを外部ホスティング（サーバー等）にアップロード
2. iframeウィジェットまたはカスタムHTMLブロックにコードを貼り付け

表紙画像の活用

ツールでは表紙画像（1ページ目）を単独でダウンロードできます。この画像は以下の用途に活用できます。

• OGP画像: SNSでカタログページをシェアしたときのプレビュー画像に。OGP画像ジェネレーターでテキストを重ねてより魅力的にすることも可能
• サムネイル: Webサイトのカタログ一覧ページでの表示に
• SNS投稿用画像: カタログの告知投稿に添付

PDFの準備で気をつけること

デジタルカタログの品質はPDFの品質に直結します。

解像度

ファイルサイズが30MBを超える場合は、PDF編集ソフトで解像度を下げるか、画像として書き出してから画像フォーマット変換ツールでWebP形式に変換すると軽量化できます。

ページサイズ

• 横長（ランドスケープ）: 見開き表示と相性が良い。パンフレットやカタログに適切
• 縦長（ポートレート）: 単ページ表示が見やすい。チラシやメニューに適切

フリーランスのポートフォリオ活用例

フリーランスのWebデザイナーやグラフィックデザイナーにとって、ポートフォリオの見せ方は受注率に直結します。

従来の方法と比較:

制作実績をPDFにまとめ、ページめくり形式でポートフォリオサイトに埋め込むと、クライアントがダウンロードなしでスムーズに閲覧できます。名刺やチラシにQRコードを付けてポートフォリオへ誘導する場合にも、QRコードジェネレーターと組み合わせると効果的です。

関連ツールとの組み合わせ

あわせて読みたい

• Markdownで電子書籍（EPUB）を作成・出版する方法 — 電子書籍をKindleで出版したい場合に
• KDP出版前にEPUBファイルを検証する方法 — EPUBの構造チェック・表示確認のワークフロー
• SNS投稿に最適なOGP画像の作り方 — カタログページの共有用画像を作る
• フリーランスがQRコードを名刺・チラシに活用する方法 — ポートフォリオへの誘導にQRコードを活用