PDFカタログを電子カタログにするには、印刷用のPDFを読み込んでページめくりで読めるHTMLにエクスポートし、自社のサイトに置いて公開します。エクスポートする前に商品ごとのリンクとGA4の測定IDを入れておけば、どの商品が押されたかまで自社のGA4で確かめられます。
印刷用に作ったカタログのPDFを、そのままサイトに置いている会社は少なくありません。ただ、PDFはスマホでは文字が小さくて読みにくく、開いたあとにどのページが見られ、どの商品に興味を持たれたのかは、通常のGA4の設定ではつかみにくいのが実情です。せっかくカタログを作っても、次の改訂に生かせる手がかりが残らないのが悩みどころです。
この記事では、PDFから電子カタログを作る手順を、商品ごとのリンクの付け方とGA4での確かめ方まで含めて紹介します。作り方の説明には、CodeQuest.workの運営者（ORECTIC・今井政和）が自社で作ったツール「WEBカタログ作成」を使います。自社の製品の紹介であることをあらかじめお伝えしたうえで、できることと注意点をそのまま書いています。製品の内容と料金の考え方は2026年10月26日の公開時点のものです。
電子カタログとは｜PDFをページめくりで読めるようにしたもの
電子カタログとは、紙のカタログやパンフレットをWebページとして公開し、ブラウザ上でページをめくって読めるようにしたものです。デジタルカタログ、WEBカタログと呼ばれることもあり、指しているものはほぼ同じです。
元になるのは、多くの場合、印刷会社に入稿したPDFや、ページごとに書き出した画像です。紙と同じ見た目のまま、スマホやパソコンで開けて、ページの中の商品から商品ページやお問い合わせへ移れるのが紙との大きな違いです。
制作会社に任せる場合の費用の目安や依頼先の選び方は、WEBカタログ制作の費用相場の記事にまとめています。ページをめくる動きそのものをコードで作りたい場合は、ページめくりUIを実装する方法で解説しています。この記事は、手元のPDFからツールで作る場合の手順を扱います。
PDFをそのまま置く場合との違い
PDFをサイトに置くだけでも「カタログを見られる状態」にはなりますが、スマホでの読みやすさと、見られ方が分かるかどうかが大きく違います。主な違いを表にまとめます。
| 比べる点 | PDFをそのまま置く | 電子カタログにする |
|---|---|---|
| 開き方 | ダウンロード、またはブラウザのPDF表示で開く | サイトのページの中で、そのままめくって読める |
| スマホでの読みやすさ | 見開きのまま縮小され、拡大して読むことが多い | 1ページずつ表示して、スワイプでめくれる作りにできる |
| 商品ごとのリンク | PDFの中にもリンクは作れるが、作るには元のデータの編集が要る | 作成画面で、ページの上へリンクを足せる |
| 見られ方の計測 | GA4の拡張計測機能（file_download）で、PDFへのリンクが押されたことを記録できる | 見たページと押された商品リンクを、自社のGA4に送れる |
| 差し替え | PDFを作り直して置き換える | ページを差し替えてエクスポートし直す |
PDFのままで困っていないなら、無理に電子カタログにする必要はありません。PDFへのリンクのクリックは、GA4の拡張計測機能（ファイルのダウンロード）で記録できます。そのうえで、スマホからの閲覧が多い場合や、カタログからどの商品が選ばれているかを知りたい場合に、電子カタログにする意味が大きくなります。
WEBカタログ作成でできること
WEBカタログ作成は、印刷用のPDFや画像から、ページをめくって読めるWEBカタログを作るWebサービスです。2026年10月26日にORECTICが公開しました。CodeQuest.workの運営者が自社で作ったツールで、作った電子カタログは自社のサーバーに置いて公開します。
| 項目 | 内容 |
|---|---|
| 読み込めるもの | PDF（1つ）、またはJPG・PNG・WebPの画像 |
| カタログの機能 | ページめくり、目次、裏表紙、検索（文字の入ったPDFなら自動で探せる。画像から作ったページは、探してほしい言葉をページごとに入れれば検索に出せる） |
| スマホでの表示 | 1ページずつ表示、スワイプでめくる、2本指で拡大 |
| 商品ごとのリンク | 1ページに何個でも付けられる（四角・円）。行き先はWebページ、カタログ内のページ、メール、電話 |
| 計測 | 見たページ（catalog_page_view）と押されたリンク（catalog_link_click）を、自社のGA4・GTMへ送る |
| UTM | Webページへのリンクに、エクスポートするときUTMパラメータを自動で付ける（設定でオフにもできる） |
| 公開のしかた | エクスポートしたフォルダ（HTMLと画像）を自社のサーバーに置く。PHPとデータベースは不要 |
| 作成画面 | パソコンの最新版のGoogle Chrome・Microsoft Edge。Googleアカウントでログイン |
| 料金 | 1回払いの買い切り。編集とプレビューまでは無料で、エクスポートにプランが必要 |
読み込んだPDFや画像は、使っているパソコンのブラウザの中だけで処理され、運営のサーバーには送られません。また、公開したカタログには、このツールの名前もORECTICの名前も入りません。
実際の動きは、デモのカタログで確かめられます。
PDFから電子カタログを作る手順
作り方は、読み込む、リンクを描く、エクスポートして置く、の3段階です。編集とプレビューまでは無料なので、手元のPDFで仕上がりを確かめてからプランを選べます。
- WEBカタログ作成を開き、Googleアカウントでログインする
- 「カタログ一覧」で「＋ 新しいカタログ」を押し、印刷用のPDF、またはページごとの画像（JPG・PNG・WebP）を読み込む
- 「ページ一覧」でページを押し、ページの上をドラッグして範囲を描いて、リンクの行き先を入れる
- 目次と裏表紙を設定する（裏表紙は「ページ一覧」の最後のタイルから）
- 計測したい場合は、設定にGA4の測定ID（G-から始まる）か、GTMのコンテナID（GTM-から始まる）のどちらか一方を入れる（両方入れ、GTMの中にもGA4のタグがあると二重に数えられる）
- Webページへのリンクに付くUTMの値を「設定」で確かめる（初期値のままでも付く）
- プレビューで、めくり方とリンクの動きを確かめる
- プランを選んで「エクスポート」を押し、ZIPファイルを受け取る
- ZIPの中のcatalogフォルダを、自社のサーバーに置いて公開する
GA4やGTMのIDは入れなくても構いません。IDを入れなければ計測はせず、カタログとして普通に動きます。
商品ごとにリンクを付ける
WEBカタログ作成では、1ページの中の商品ひとつひとつに、別々のリンクを何個でも付けられます。見開きに商品が10点並んでいれば、10点それぞれを商品ページへつなげられます。
リンクの形と行き先
リンクの範囲は、ページの上をドラッグして描きます。形は四角と円の2種類で、照明やお皿のような丸い商品には円を使うと、周りの余白を押してしまうことが減ります。
| 行き先 | 使いどころ |
|---|---|
| Webページ | 商品ページ、カート、予約フォームなど |
| カタログの中のページ | 目次や「詳しくは12ページ」のような案内 |
| メール | 問い合わせ用のメールアドレス |
| 電話 | スマホで押すと電話をかけられる番号 |
リンクにUTMを付けてカタログからの訪問を分ける
Webページへのリンクには、エクスポートするときにUTMパラメータが自動で付きます。商品ページ側のGA4で、カタログから来た訪問を参照元・メディア・キャンペーンで分けて見られます。
| パラメータ | 初期値 | 変える場所 |
|---|---|---|
| utm_source | webcatalog | 「設定」 |
| utm_medium | catalog | 「設定」 |
| utm_campaign | 空欄ならカタログ名 | 「設定」 |
| utm_content | リンクを描いたときに link01・link02… の順で入る | リンクごと |
- 付くのはWebページへのリンクだけで、カタログの中のページ・メール・電話には付かない
- URLにもともと utm_ から始まるパラメータがあれば、そのリンクには付けない
- 付けたくない場合は、「設定」のスイッチでオフにする（初期値はオン）
utm_content を商品名などに書き換えておくと、商品ページ側のGA4でも、カタログのどのリンクから来たかを見分けやすくなります。
PDFにもともとあるリンクを使う
PDFを作るときに入れておいたリンクは、読み込んだときに候補として出ます。必要なものを選んで足せるので、同じリンクを描き直す手間が減ります。
画像1枚にリンクの範囲を付けるだけで足りる場合は、クリッカブルエリアジェネレーターで、画像マップのHTMLを無料で作れます。ページめくりが要らないチラシ1枚などはこちらが手軽です。
押されたリンクと見たページをGA4で確かめる
WEBカタログ作成で作った電子カタログは、見たページと押されたリンクを、2つのイベントとして自社のGA4・GTMに送ります。作成元の計測タグは入らないので、データは自社のアカウントにだけ届きます。
| イベント名 | いつ届くか | 付いてくる情報（パラメータ） |
|---|---|---|
| catalog_page_view | ページを開いた・めくったとき | page_numbers（見開きなら「2-3」のようなページ番号） |
| catalog_link_click | ページの上のリンクが押されたとき | page_number（ページ番号）、link_type（行き先の種類）、link_label（リンクの名前）、link_url（行き先。UTMが付く場合は付いたあとのURL） |
パラメータの名前は、2026年10月26日に公開版のデモのコードで確かめたものです。GA4の操作手順は、Google アナリティクス ヘルプ（2026年10月確認）に沿って書いています。
リアルタイム レポートで届いているか確かめる
まずは、カタログを公開したあとに自分でリンクを押し、リアルタイム レポートにイベント名が出るかを確かめます。
- サーバーに置いたカタログをブラウザで開き、ページをめくってリンクを1つ押す
- GA4の左側のメニューから［レポート］を選び、［リアルタイム］を開く
- 「イベント名ごとのイベント発生数」のカードに、catalog_page_view と catalog_link_click が出ているかを見る
Googleによると、リアルタイムのデータは通常数分で反映され、通常のレポートには2〜6時間ほどかかります（リアルタイム レポート、データの更新頻度）。なお、パソコンに保存したカタログをファイルのまま開いた場合は計測しない作りなので、確かめるときは必ずサーバーに置いたURLで開いてください。
DebugViewで1件ずつ確かめる
パラメータの中身まで確かめたいときは、DebugViewを使います。DebugViewは［管理］→［データの表示］→［DebugView］にあり、デバッグモードを有効にした端末のイベントだけが届いた順に並びます（Google アナリティクス ヘルプ「DebugView」）。
デバッグモードは、Tag Assistantのプレビュー モードでカタログを開くと有効になります。GTMを使っている場合は、GoogleタグでGA4の debug_mode を true にする方法もありますが、false にしても無効にはならず、設定ごと外す必要があります。また、同意モードでアナリティクスのCookieに同意していない状態のイベントは、DebugViewに表示されません。
GTMを使う場合はGA4へ送るタグを作る
GTMのコンテナIDを入れた場合、イベントはGTMのデータレイヤーに積まれるだけなので、GA4へ送るタグはGTMの側で作ります。GA4の測定IDを直接入れた場合は、この作業は要りません。
- GTMで［トリガー］を新しく作り、種類に［カスタム イベント］を選んで、イベント名に catalog_link_click と入れる（catalog_page_view も同じように作る）
- ［変数］→［ユーザー定義変数］で種類に［データレイヤーの変数］を選び、link_label など使いたいパラメータの名前で変数を作る
- ［タグ］を新しく作り、種類に［Google アナリティクス: GA4 イベント］を選んで、測定IDとイベント名を入れる
- 2で作った変数をイベント パラメータとしてタグに足し、1のトリガーを割り当てて公開する
トリガーとタグの作り方は、Google タグ マネージャー ヘルプのカスタム イベント トリガーとGA4 イベントの設定で確かめられます。GA4とGTMのどちらで入れるかを迷っている場合は、GA4直接埋め込みとGTM経由の比較を参考にしてください。
どの商品が押されたかを探索で集計する
商品ごとの押された回数を見るには、link_label などのパラメータをカスタム ディメンションとして登録し、探索で集計します。
- ［管理］→［データの表示］→［カスタム定義］を開き、［カスタム ディメンション］タブで［カスタム ディメンションを作成］を押す
- 範囲を「イベント」にして、イベント パラメータに link_label（必要なら page_number や link_url も）を入れて保存する
- ［探索］の［新しいデータ探索を開始］で［自由形式］を選び、イベント名と1で作ったディメンション、指標のイベント数を取り込む
- イベント名を catalog_link_click に絞り込み、リンクの名前ごとの件数を並べる
Googleによると、カスタム ディメンションはデータが送られて作成されてから24〜48時間でレポートに使えるようになります（カスタム ディメンションの作成、自由形式のデータ探索）。集計を始めたい日が決まっているなら、カタログを公開した日に登録しておくと安心です。リンクの名前を商品名にしておくと、集計表がそのまま商品の人気順になります。
GA4を入れたばかりで、計測そのものが動いているか不安な場合は、GA4設置後の動作確認の手順で先に確かめておくと切り分けが楽になります。
自分のサーバーに置いて公開する
エクスポートしたcatalogフォルダは、HTMLと画像だけでできているので、HTMLファイルを置けるサーバーならどこでも公開できます。PHPやデータベースは使いません。
- いま使っているホームページのサーバーやレンタルサーバーに、ファイルマネージャーかFTPでcatalogフォルダをそのままアップロードする（WordPressのサイトでも、WordPressの管理画面からは入れられない）
- 置いた場所のURL（例: https://example.com/catalog/）をブラウザで開いて、めくれるか確かめる
- サイトのメニューや商品ページから、そのURLへリンクする（URLは最後の「/」まで付ける。付けないと、サーバーによっては表示されないことがある）
値段や商品が変わったときは、「カタログ一覧」から元のカタログを開いてページを差し替え、エクスポートし直したフォルダで置き換えます。同じカタログなら、何度エクスポートし直しても追加の料金はかからず、冊数にも数えません。
料金のしくみ｜買い切りでプランはページ数と冊数で決まる
WEBカタログ作成の料金は1回払いの買い切りで、月額の請求はありません。プランはライト、スタンダード、プロ、マックスの4つで、「1冊のページ数の上限」と「作れる冊数」で分かれています。
- 編集とプレビューまでは無料。エクスポートするときにプランが必要
- 冊数が足りなくなったら「1冊追加」を買う（いまのプランのページ数までの1冊）
- ページ数が足りなくなったら、上のプランへ差額でアップグレードする（下のプランへは変えられない）
- エクスポートしたカタログは1冊ずつ冊数に数え、消しても冊数は戻らない
- 支払いはクレジットカード（分割払いも可）、Apple Pay、Link（Stripe）
- 領収書はStripeからメールで届く（適格請求書発行事業者の登録番号入り）
- 返金は原則なし
値段は変わることがあるため、この記事には書き写していません。最新の値段は料金のページで確かめてください。
作る前に確認しておくこと
作り始める前に、作成に使うパソコンと、カタログを置くサーバーの2つを確かめておくと手戻りがありません。
- 作成画面は、パソコンの最新版のGoogle ChromeかMicrosoft Edgeで使う（スマホでは作れない。閲覧はスマホでもできる）
- カタログを置くサーバーは自分で用意する
- 1冊のページ数が、選ぶプランの上限に収まるか
- 計測したい場合は、GA4の測定IDかGTMのコンテナIDを手元に用意しておく
返金は原則として受け付けていないため、プランを選ぶ前に、無料のプレビューで手元のPDFが思いどおりに表示されるかを確かめておくのがおすすめです。
よくある質問
Q. PDFカタログを電子カタログにするには何が必要ですか？
印刷用のPDF（または画像）と、作った電子カタログを置くサーバーの2つです。WEBカタログ作成を使う場合は、パソコンの最新版のChromeかEdgeと、Googleアカウントも必要です。
Q. 電子カタログとデジタルカタログ、WEBカタログの違いは何ですか？
呼び方が違うだけで、指しているものはほぼ同じです。紙のカタログをWebページとして公開し、ブラウザでページをめくって読めるようにしたものを指します。
Q. 電子カタログで、どの商品が押されたかをGA4で調べられますか？
調べられます。WEBカタログ作成では、押されたリンクがcatalog_link_click、見たページがcatalog_page_viewというイベントとして、自社のGA4・GTMに届きます。作成元の計測タグは入りません。
Q. GA4やGTMを使っていなくても作れますか？
作れます。測定IDやコンテナIDを入れなければ計測はせず、ページめくりのカタログとして普通に動きます。
Q. WordPressのサイトにも置けますか？
HTMLファイルを置けるサーバーなら置けます。エクスポートしたcatalogフォルダはHTMLと画像だけでできており、PHPやデータベースは使いません。WordPressの管理画面からは入れられないので、サーバーのファイルマネージャーかFTPでcatalogフォルダをアップロードします。
Q. カタログの内容を差し替えると、また料金がかかりますか？
同じカタログの差し替えとエクスポートし直しは何度でも無料で、冊数にも数えません。別のカタログをエクスポートするときは1冊として数えます。
Q. 読み込んだPDFはどこかに送られますか？
送られません。読み込んだPDFや画像は、使っているパソコンのブラウザの中だけで処理され、運営のサーバーには送られません。
まとめ
PDFカタログを電子カタログにすると、スマホで読みやすくなり、どのページが見られてどの商品が押されたかを自社のGA4で確かめられるようになります。作り方は、PDFを読み込み、商品ごとにリンクを描き、エクスポートしたフォルダを自社のサーバーに置くだけです。
- PDFのままで困っていなければ、無理に変える必要はない
- スマホでの閲覧が多い、商品ごとの反応を知りたい場合に効果が大きい
- 商品ごとのリンクは、1ページに何個でも付けられる
- 計測はGA4の測定IDかGTMのコンテナIDを入れるだけで、入れなくても動く
- WEBカタログ作成は買い切りで、編集とプレビューまでは無料
まずは手元のPDFを1冊読み込んで、無料のプレビューで仕上がりを確かめてみてください。