PDFを
インタラクティブなフリップブック

背景

インタラクティブなフリップブックとは?

インタラクティブなフリップブックは、紙の本をめくる体験を再現したデジタル出版物です。リアルなページめくりアニメーション、ズーム、検索、メディアの埋め込みに対応しています。スクロールするだけの静的なPDFと違い、フリップブックは読者の注意を長く引きつけられる本格的な読書体験としてコンテンツを提示します。

PDFとの決定的な違いはここです。フリップブックは「読まれる」ためのものであって、ダウンロードされるためのものではありません。URLに置かれ、どのブラウザでも瞬時に読み込まれ、読者がどの程度関与しているかを正確に教えるアナリティクスを提供します。これはPDFのダウンロードでは絶対に得られないものです。

ステップ1

PDFを準備する

ほとんどのPDFは、まったく準備しなくてもきれいに変換されます。ただ、アップロード前に5分かけてこの3点を確認しておくと、特に多段組レイアウト、独自フォントを含むドキュメント、50ページを超えるものでは、結果が目に見えて良くなります。

解像度と画質

ZenFlipはフリップブックビューア用に各PDFページを高解像度でレンダリングします。出力品質は元PDFの品質で決まります。目安は次のとおりです:

• 最低150 DPI — これより低いとRetina画面でぼやけて見えます
• 150〜300 DPIがちょうど良い — どの画面でも鮮明で、ファイルサイズも肥大化しません
• 印刷品質には300 DPI — アニュアルレポート、カタログ、高品質ブローシャ向け
• 72 DPIの「画面最適化」エクスポートは避ける — ズームすると見栄えが悪くなります

フォントとテキストレイヤー

これはアクセシビリティに関わるもっとも重要な準備ステップです。フリップブックをアクセシブルかつ検索可能にできるのは、PDFから本文テキストを抽出できる場合だけです。

• フォントは必ず埋め込む — InDesign、Word、Google Docsからエクスポートする際は「すべてのフォントを埋め込む」のチェックを入れます。多くのエクスポートダイアログにあります。
• 「画像としてエクスポート」は避ける — テキストがピクセル化されます。スクリーンリーダーが読み取れず、ZenFlipでもアクセシブルにできません。
• スキャンしたドキュメントはテキストレイヤーを得るためにアップロード前にOCR(光学文字認識)が必要です。Adobe Acrobatや無料のOCRmyPDFなどで対応できます。
• PDFを確認 — アップロード前にPDF上でテキスト選択を試してみてください。選択してコピーできれば、ZenFlipはそのテキストをアクセシビリティ用に抽出できます。

ファイルサイズ

ZenFlipは最大1GBまでのPDFを受け付けます。処理を最も速くするには100MB未満を目安にしてください。

ステップ2

PDFを ZenFlipにアップロード

無料アカウントを作成してZenFlipのダッシュボードに入れば、PDFのアップロードはわかりやすい流れになっています。実際に表示されるのは次のとおりです:

ステップ3

フリップブックを カスタマイズ

カスタマイズパネルでは、フリップブックの見た目とアクセスできる人を制御できます。利用できる項目とその効果は次のとおりです:

ブランディング

• ロゴ — ロゴをアップロードします(PNGまたはSVG、透過背景を推奨)。フリップブックのツールバーに表示されます。
• ブランドカラー — ツールバー、進行状況インジケーター、インタラクティブな要素のアクセントカラーを設定します。Hexコードを入力するか、カラーパレットから選択します。
• ZenFlipブランディングの非表示 — Creator以上のプランで利用可能です。ビューアから「Powered by ZenFlip」のクレジットを非表示にします。
• カスタムドメイン — Businessプラン以上で利用可能です。CNAMEレコードで自社ドメインまたはサブドメイン(例: reports.yourcompany.com)をZenFlipの出版物に向けられます。

アクセス制御

• 公開 — リンクを知っている人なら誰でも閲覧できます。マーケティング素材、公開レポート、共有しやすいコンテンツに最適です。
• パスワード保護 — 閲覧時にパスワード入力が必要です。取締役会資料、ドラフト、機密性のある出版物に最適です。
• リードゲート — 閲覧前に氏名とメールアドレスの送信が必要です。獲得したリードはダッシュボードに表示され、CSVでエクスポートでき、Businessプラン以上ではZapierに送信することもできます。

読者体験

• 表紙タイプ — 1ページ目を全面の表紙にするか、見開き2ページから始めるかを選びます。
• めくり方向 — 左から右(デフォルト)または右から左(アラビア語、ヘブライ語、日本語の文書向け)。
• ダウンロードボタンを有効化 — 任意で、読者に元のPDFをダウンロードさせられます。デフォルトはオフです。
• シェアボタン — ビューア内のSNS共有ボタンの表示/非表示を切り替えます。

ステップ4

即時に 公開

プレビューと設定に問題がなければ、公開をクリックします。インタラクティブなフリップブックはそのURLですぐに公開されます。順番待ち、審査、待機時間はありません。

公開すると、ZenFlipは次の3つを提供します:

• 共有用リンク — 例: zenflip.io/view/your-title(またはカスタムドメイン)。コピーしてどこにでも共有できます。
• 埋め込みコード — Webサイトにフリップブックを設置するためのスニペットです(ステップ5で解説)。
• QRコード — 印刷物、イベント、プレゼンテーションで使えます。

公開後のフリップブックは、新しいPDFをアップロードすればいつでも更新できます。URLは変わりません。あなたのリンクをブックマークしたり共有したりした人には、自動的に更新版が表示されます。

ステップ5

フリップブックを Webサイトに埋め込む

ZenFlipのフリップブックをWebサイトに埋め込むと、読者はあなたのドメインを離れることなくアクセスできます。フリップブックビューアは、完全にインタラクティブでレスポンシブな要素としてページ内にレンダリングされます。

方法1 — iframe埋め込み(どんなWebサイトでも動作)

出版物の共有パネルからiframeスニペットをコピーし、フリップブックを表示したい場所のWebサイトのHTML、CMS、ページビルダーに貼り付けます:

方法2 — JavaScript SDK(より細かく制御)

サイズ、イベント処理、アナリティクススタックとの統合をより細かく制御したい場合は、ZenFlipのJS SDKを使ってください:

プラットフォーム別の埋め込み

• WordPress — Gutenbergエディターの「HTML」ブロックにiframeコードを貼り付けるか、「カスタムHTML」ウィジェットを使います。
• Webflow — 「Embed」要素を追加し、iframeコードを貼り付けます。高さは固定ピクセル値にするか、padding-topを使ったCSSラッパーでレスポンシブに調整します。
• Squarespace — 「Code」ブロック(Businessプラン以上で利用可能)を使い、iframeを貼り付けます。
• Wix — 「要素を追加」パネルから「HTML iframe」ウィジェットを追加し、埋め込みURLを貼り付けます。
• HubSpotページ — ページエディターの「HTML」モジュールでiframeコードを貼り付けます。

アクセシビリティ

WCAGアクセシビリティ — ビューアに組み込み済み

ZenFlipのビューアは、すべての出版物でWCAG 2.2 AAを基準に設計されています（サードパーティのオーバーレイ不使用）。多くの組織(行政、教育、医療、会員制団体など)にとって、アクセシビリティはオプションではなく法的要件であり、公開する文書そのものにも左右されます。

ZenFlipが公開される各フリップブックに適用する内容は、まさに次のとおりです:

• キーボード操作 — ユーザーはマウスなしでも、キーボードだけでページめくり、ズーム、検索、すべての操作を実行できます。
• スクリーンリーダー対応 — ARIAロール、ライブリージョン、抽出されたテキストレイヤーにより、スクリーンリーダーが出版物の各ページのテキストにアクセスできます。
• 視認できるフォーカスインジケーター — キーボードで操作すると、インタラクティブな要素にはっきりした高コントラストのフォーカスリングが表示されます。
• カラーコントラスト — ビューアUIは、すべてのテキスト要素で最低4.5:1のコントラスト比を維持します。
• 動きの低減への対応 — OS設定でprefers-reduced-motionが有効なユーザーには、ページめくりアニメーションが無効になります。
• タッチターゲットサイズ — ビューアの操作ボタンはタッチ操作を想定したサイズで、スマートフォンやタブレットでも押しやすくなっています。

アナリティクス

フリップブックのアナリティクスを理解する

フリップブックが公開された瞬間から、ZenFlipは読者の行動の追跡を始めます。これはPDFのダウンロードでは到底得られないデータであり、コンテンツに対する考え方を変えてくれます。

各指標の意味と使い方

• 総閲覧数 — フリップブックがユニークに開かれた回数です。PDFのダウンロード数と比較して、リーチの違いを把握できます。
• 平均読了時間 — 平均的な読者が費やした時間です。文書の長さに対して極端に短いなら、表紙やタイトルが読者を引き込むのに十分魅力的でないということです。
• 完読率 — 最終ページまで到達した読者の割合です。完読率が低い場合はドキュメント中盤のテンポに問題があることが多いです。
• ページヒートマップ(Creatorプラン以上) — どのページに最も時間が費やされたかを示すビジュアルマップです。最も読まれるセクションを発見し、次の文書をそのコンテンツを軸に最適化できます。
• ページごとの滞在時間(Creatorプラン以上) — 個々のページに費やされた平均秒数です。滞在時間が極端に短いページは飛ばされており、極端に長いページは内容が密か、強く惹きつけているかのどちらかで、ヒートマップの文脈と合わせると判断できます。

エキスパートのコツ

より良いフリップブックのためのプロのコツ

FAQ

よくある 質問

関連ガイド

もっと読む