01 / THE CHALLENGE
こんなお悩みはありませんか？
スライドを1ページずつクリックしてもらう方式では、サービス紹介や採用案内に合わない場合があります。読み進めたくなる、Webサイトのような表現を使いたい。
02 / THE POSSIBILITY
ふむふむポケットなら
PDFやGoogleスライドを縦スクロールのセクションとして見せるランディングページ型を用意。ページ送りを意識せず流れを追える閲覧体験をつくります。
これまでの資料運用との違い
自由にHTMLを組み立てるLP制作とは異なり、元資料のレイアウトを利用します。スピーディーに資料の見せ方を変えたい場合に適した方式です。
03 / IN YOUR WORK
具体的な活用例
サービス説明会向けの横長スライドを、スマホでも上下に読み進められる資料ページとして公開。最終セクションに問い合わせへの導線を設けます。
利用の3ステップ
- 01 資料を取り込む
- 02 閲覧方法に縦スクロール型を選ぶ
- 03 ページの流れを確認し、必要なアクションを設定する
知っておきたいこと
元のスライド内テキストが小さい場合、スマートフォンでも文字が小さくなります。単に縦スクロール型へ変えれば読みやすさが保証されるわけではありません。
対応する機能ID：A04, A05, B01, B02
関連する「こうしたい」
全15件。機能の状態と制約を確認できます。
モックで確認できること 13件
01 資料のWeb化 資料のWeb化に関する「こうしたい」を探す 4件
縦長のWebページのように資料を見せたい
スライドがLP風の連続コンテンツになる
詳しく見る
スライドがLP風の連続コンテンツになる。PDFの各ページを連続した縦スクロールのセクションとして見せる。 例えば、サービス紹介デッキを縦スクロールで公開。
具体例： サービス紹介デッキを縦スクロールで公開
関連機能： A04 / LP型の縦スクロール表示
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗LPを一から制作する負担を減らしたい
作成済みのスライドをWeb型の表現に転用できる
詳しく見る
作成済みのスライドをWeb型の表現に転用できる。PDFの各ページを連続した縦スクロールのセクションとして見せる。 例えば、採用説明資料をキャンペーンページ風に公開。
具体例： 採用説明資料をキャンペーンページ風に公開
関連機能： A04 / LP型の縦スクロール表示
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗プレゼン資料を1ページずつ集中して見せたい
スライド型で順番に読んでもらえる
詳しく見る
スライド型で順番に読んでもらえる。ページ送りのプレゼン表示に対応し、用途に応じて表示形式を選べる。 例えば、社内の企画説明資料をスライド型で共有。
具体例： 社内の企画説明資料をスライド型で共有
関連機能： A05 / スライド型の閲覧表示
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗相手の閲覧スタイルに合わせたい
同じ資料をスライド型・LP型から選べる
詳しく見る
同じ資料をスライド型・LP型から選べる。ページ送りのプレゼン表示に対応し、用途に応じて表示形式を選べる。 例えば、商談資料とWeb公開用で表示方法を変更。
具体例： 商談資料とWeb公開用で表示方法を変更
関連機能： A05 / スライド型の閲覧表示
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗02 閲覧体験 閲覧体験に関する「こうしたい」を探す 9件
次のページへ自然に読み進めてほしい
Webらしいスクロール操作で閲覧を促せる
詳しく見る
Webらしいスクロール操作で閲覧を促せる。ページの表示アニメーションやスクロール誘導によって連続的に読める。 例えば、採用スライドをストーリーとして縦につなぐ。
具体例： 採用スライドをストーリーとして縦につなぐ
関連機能： B01 / スクロール演出とページ遷移
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗スライドの境界を目立たせたくない
背景色を調整して資料全体に一体感を出せる
詳しく見る
背景色を調整して資料全体に一体感を出せる。ページ端の色と背景を合わせてLPらしい連続感を演出。 例えば、製品ブランドカラーに合わせてLP風に表示。
具体例： 製品ブランドカラーに合わせてLP風に表示
関連機能： B02 / ページ間の背景色のつなぎ
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗資料があとどれくらいか分かるようにしたい
進捗バーで閲覧の位置を把握できる
詳しく見る
進捗バーで閲覧の位置を把握できる。資料全体の進行状況を視覚的に表示。 例えば、長い提案資料を閲覧しながら残り量を確認。
具体例： 長い提案資料を閲覧しながら残り量を確認
関連機能： B03 / 読了位置のプログレスバー
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗長い資料の途中に素早く移動したい
ページナビから目的のセクションへ移動できる
詳しく見る
ページナビから目的のセクションへ移動できる。長いLP型資料でもページ位置を確認して直接移動できる。 例えば、価格説明セクションへ直接移動。
具体例： 価格説明セクションへ直接移動
関連機能： B04 / 右側ページナビ
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗スマホから資料を読んでほしい
外出先でもブラウザから確認してもらいやすい
詳しく見る
外出先でもブラウザから確認してもらいやすい。スマホ幅でも資料と主要操作が扱えるUIを用意。原稿が小さい資料は視認性の確認が必要。 例えば、移動中の商談担当者が資料を開く。
具体例： 移動中の商談担当者が資料を開く
関連機能： B06 / スマホ対応の閲覧
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗読み終えた人に次の行動をしてほしい
末尾にCTAや回答導線を置いて離脱を減らせる
詳しく見る
末尾にCTAや回答導線を置いて離脱を減らせる。資料の末尾などに問い合わせ・ダウンロード・ひとことアクションを表示。 例えば、会社案内の最後に問い合わせを設置。
具体例： 会社案内の最後に問い合わせを設置
関連機能： B07 / 資料末尾の次アクション
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗資料を開く前に目的を伝えたい
専用の表紙で閲覧の導入を作れる
詳しく見る
専用の表紙で閲覧の導入を作れる。資料を開く前にタイトル・説明・画像・開始ボタンを表示する導入ページ。 例えば、採用案内の最初に歓迎メッセージを出す。
具体例： 採用案内の最初に歓迎メッセージを出す
関連機能： B08 / エントランスページ
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗取引先に合わせた見た目で資料を届けたい
エントランスの画像や色を調整し印象を整えられる
詳しく見る
エントランスの画像や色を調整し印象を整えられる。レイアウトやブランドカラー等を調整し資料ごとの導入を演出。 例えば、提案先に合わせてイントロ画像を設定。
具体例： 提案先に合わせてイントロ画像を設定
関連機能： B09 / エントランスの見せ方・色設定
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗資料を読み終えた後も関連情報を見てほしい
関連資料へつなげて回遊を促せる
詳しく見る
関連資料へつなげて回遊を促せる。別の資料や同じ資料セット内の次資料へ遷移できる導線。 例えば、サービス紹介から導入事例へ移動。
具体例： サービス紹介から導入事例へ移動
関連機能： B10 / 関連資料・次資料への導線
現在はモックの操作・表示。サーバー保存／共有の本番動作は未実装。
公開判断：正式版の実動作確認後に訴求
解決方法を詳しく見る ↗stagingで確認・公開版要確認 2件
02 閲覧体験 閲覧体験に関する「こうしたい」を探す 2件
ナビを見ただけでページ内容を想像したい
サムネイルで気になるページを探せる
詳しく見る
サムネイルで気になるページを探せる。大きめのナビ・現在位置のpill表示・hoverやタッチ時のページサムネイル。stagingには実装済み。 例えば、20ページの製品紹介から導入事例ページを探す。
具体例： 20ページの製品紹介から導入事例ページを探す
関連機能： B05 / ナビのサムネイルプレビュー
stagingブランチで確認。mainへの反映・最終動作を要確認。
公開判断：staging確認後に限定訴求（公開版は未確認）
解決方法を詳しく見る ↗小さなナビで操作ミスをしたくない
押しやすいドット・pill形で移動しやすくなる
詳しく見る
押しやすいドット・pill形で移動しやすくなる。大きめのナビ・現在位置のpill表示・hoverやタッチ時のページサムネイル。stagingには実装済み。 例えば、タッチ端末でもページを移動。
具体例： タッチ端末でもページを移動
関連機能： B05 / ナビのサムネイルプレビュー
stagingブランチで確認。mainへの反映・最終動作を要確認。
公開判断：staging確認後に限定訴求（公開版は未確認）
解決方法を詳しく見る ↗よくある質問
Q. 一般的なHTMLのLPと同じですか？
元のPDFページを用いた表示です。自由に文章や画像を再配置するHTML LPとは異なります。
Q. スライド型でも公開できますか？
スライド型と縦スクロール型を選択できます。
Q. スマートフォンからも見られますか？
閲覧UIはスマホ幅に対応する設計ですが、資料そのものの文字サイズや縦横比は別途確認が必要です。