スマホで読みやすい電子カタログの作り方|見開き・文字サイズ・リンクのコツ

スマホで読みやすい電子カタログの作り方|見開き・文字サイズ・リンクのコツ

自社のカタログやパンフレットを電子カタログにしてWebで公開したとき、「パソコンでは見やすいのに、スマホだと文字が小さくて読めない」という声はよくあります。スマホで読みやすくするコツは、特別な作り込みではなく、スマホでの見え方に合わせて元のPDFを整えることに尽きます。この記事では、押さえるポイントを順に説明します。

結論
– スマホでは見開きが自動で1ページずつになるので、1ページ単体で読める文字サイズで作る
– 目次(しおり)と全文検索を効かせ、狭い画面でも目的ページにすぐ着けるようにする
– 電話・メール・URLは、指でタップして反応するリンクとして埋め込む
– 仕上がりは無料プランでスマホ実機で確認する(¥0・1冊)

スマホでは自動で1ページずつになるから、まずはそこに合わせて作るのがコツだよ!

この記事は、自社のカタログやパンフレットをWebで見せたい事業会社の販促担当の方に向けて書いています。

なぜスマホだと読みにくくなるのか

紙のカタログは、開いた状態(左右2ページの見開き)でデザインされていることがほとんどです。この見開きをそのままスマホの縦長の画面に映すと、1ページ分がとても小さくなり、文字が読めなくなります。

そこで多くの電子カタログツールは、スマホなど画面の狭い端末では、自動的に1ページずつの表示に切り替えます。MEKURU(メクル)も、PCでの見せ方を「見開き(2ページ)」と「1枚ずつ」から選べますが、スマホなど狭い画面はこの設定に関わらず、元から1枚ずつの表示になります。

つまりスマホでの読みやすさは、「1ページ単体で見たときに読めるか」でほぼ決まります。ここを起点に、以下のポイントを整えていきます。

ポイント1:1ページ単体で読める文字サイズにする

まず一番大切なのが文字サイズです。見開き全体を1つの大きな図版として作った紙面は、スマホで1ページに割ると、文字が半分の面積に縮み、読みにくくなります。

  • 見開きをまたいで小さな文字を敷き詰めた紙面は避ける
  • 伝えたい情報は、1ページの中で意味が完結するように配置する
  • 価格表や仕様表など細かい文字が多い紙面は、行間・余白を広めにとる

「見開きでも、1ページ単体でも意味が通る」作りにしておくと、パソコンでもスマホでも破綻しません。紙面を新しく作れる場合は、この考え方で組んでおくと後がラクです。

見開き前提で小さい文字を敷き詰めると、スマホで読めなくなりがち。ここが一番のつまずきどころだよ。

ポイント2:目次と全文検索で目的ページにすぐ着けるようにする

スマホは画面が狭いぶん、目当てのページを探すのが大変です。だからこそ、探さずにたどり着ける導線が効きます。

MEKURUのビューアには目次パネルと全文検索があり、どちらもスマホで使えます。ただし、効かせるにはPDF側の準備が要ります。

  • 目次パネルは、PDFに埋め込まれた「しおり(ブックマーク/アウトライン)」から自動で作られます。しおりが入っていないPDFでは、目次パネルが出ません。InDesignなどで見出しにしおりを付けてから書き出しておきましょう。
  • 全文検索は、PDF内のテキストから作られます。文字が画像になっているPDF(紙をスキャンしただけのPDFなど)では検索が効かないため、テキストを持ったPDFで書き出すのがポイントです。

なお、PDFの目次ページに「〇〇は3ページへ」といったページ内リンク(同じPDF内の別ページに飛ぶ内部リンク)を作り込んでおくと、電子カタログでもそのままクリックで移動できます。上のしおりから作られる目次パネルとは別に使えるので、両方用意しておくと、紙面から押したい人にも目次パネルを開く人にも届きます。

ポイント3:電話・メール・URLはタップできるリンクにする

スマホならではの強みが、指でタップするとそのまま行動につながることです。MEKURUは、PDF内に埋め込まれたリンクを元の位置のまま反映します。反映されるのは、電話番号(tel)・メール(mailto)・外部サイトのURL(http/https)を持つリンクです。

  • 電話番号をタップ → スマホの発信画面が開く
  • メールアドレスをタップ → メール作成画面が開く
  • 「詳しくはこちら」のURL → 自社サイトの該当ページが開く

問い合わせ先の電話番号やメールを、ただの文字ではなくリンクとしてPDFに設定しておくと、読んだ人がその場で連絡できます。紙のカタログにはできない、電子カタログならではの見せ場です。

ポイント4:背景や余白でスマホでも見やすく整える

MEKURUは、ビューアの見た目をブック設定で調整できます。テンプレート5種(デフォルト/クール/ポップ/和/北欧)や配色、フォントに加えて、背景画像をPC用とスマホ用で別々に設定できます。

パソコンでは横に余白が広く出るため、装飾的な背景がきれいに見えますが、スマホでは余白が少なく、背景が濃いと本文が見づらくなることがあります。スマホ用にはあっさりした背景を選ぶと、紙面そのものに集中してもらえます。

スマホでの見え方を確認する手順

作ったら、必ず自分のスマホで確かめます。全体で3ステップ、あわせて15分ほどで確認できます。仕上がりはPCのプレビューだけでは分からないので、実機で見るのが一番確実です。

STEP1: スマホの実機でビューアを開く

書き出したPDFをアップロードし、公開URL(またはQRコード)を自分のスマホで開きます。

  • 何をするか:スマホのブラウザで電子カタログを実際に表示する
  • どこを見るか:1ページずつの表示になっているか、最初のページ(表紙)から始まっているか
  • 失敗するとどうなるか:PCのプレビューだけで判断すると、スマホでの文字の小ささに気づけません

STEP2: 文字・リンク・目次を指で確かめる

実機で、読む人と同じ操作をひととおり試します。

  • 何をするか:本文が拡大せず読めるか、電話・メールのリンクがタップで反応するか、目次と検索で目的ページに飛べるかを確認する
  • どこを見るか:一番細かい文字の紙面(価格表・仕様表など)で読めるかどうか
  • 失敗したときどうなるか:拡大しないと読めない紙面があれば、その紙面は文字サイズを見直します

STEP3: 直したPDFを入れ替える

気になった点をPDF側で直し、もう一度アップロードして確認します。

  • 何をするか:文字サイズや背景を調整したPDFを書き出し、差し替える
  • どこを見るか:直した紙面がスマホで読みやすくなったか
  • 失敗したときどうなるか:まだ読みにくければSTEP2に戻り、紙面ごとに原因を切り分けます

MEKURUは無料プランなら¥0で1冊・100ページまで試せます。公開して自分のスマホで見え方を確かめる用途にちょうど使えます。本番で1冊を長く公開する場合は買い切り¥9,900/冊で、MEKURU上での公開期間は1年間です(延長は¥3,300/年。「買い切り=永年公開」ではありません)。なお、契約が有効なうちにZIPを書き出して自社サーバーに置けば、その設置分は期間を気にせず公開し続けられます(ZIP設置版では閲覧パスワードと公開/非公開の切り替えの2つが使えない点だけ、先に押さえておいてください)。

よくある質問

Q. スマホでも見開き(左右2ページ)で見せられますか?
A. スマホなど画面の狭い端末は、見開き設定に関わらず1ページずつの表示になります。見開きは横長で文字が小さくなるため、これはスマホで読みやすくするための自動的な切り替えです。見開きで見せたい紙面も、1ページ単体で意味が通るように作っておくと安心です。

Q. スキャンした紙のカタログでも、スマホで検索できますか?
A. 全文検索はPDF内のテキストから作られるため、文字が画像になっているスキャンPDFでは検索が効きません。検索を使いたい場合は、テキストを持ったPDFで書き出してください。

Q. カタログの電話番号を、スマホでタップして発信できるようにできますか?
A. できます。PDF内に電話番号のリンク(tel)を設定しておくと、その位置のまま反映され、スマホでタップすると発信画面が開きます。メール(mailto)や外部サイトのURLも同様にタップで反応します。

まずは無料プランで1冊公開して、自分のスマホで見てみるのが近道だよ!

まとめ

スマホで読みやすい電子カタログは、凝った作り込みではなく、スマホでの見え方に元PDFを合わせることで作れます。ポイントは4つです。

  1. スマホは1ページずつ表示になるので、1ページ単体で読める文字サイズにする
  2. 目次(しおり)と全文検索を効かせ、目的ページにすぐ着けるようにする
  3. 電話・メール・URLは、タップで反応するリンクとして埋め込む
  4. 背景はスマホ用を控えめにし、最後は必ず実機で確認する

まずは手元のPDFを無料プランで1冊公開し、自分のスマホで見え方を確かめてみてください。電子カタログ全体の作り方は、関連記事でも解説しています。

関連記事
– Webカタログの作り方(基本の流れ)
– 電子ブックの作り方(基本の流れ)
– 見開き(スプレッド)で見せる電子ブックの作り方
– 電子ブックに向くPDFの作り方(解像度・フォント埋め込み)
– 電子ブックが重い・遅いときの直し方


出典:料金・仕様は各サービスの公式サイト等の一次情報に基づく(MEKURU: https://mekuru-pdf.com/ /2026-08時点)。PDFやスマホ表示に関する記述は、各DTPソフトおよびビューアの一般的な仕様に基づく。

執筆:中谷 友紀(ノトサク)

← 記事一覧へ