300ページの講習会テキストを、Webカタログにしました|住宅瑕疵担保責任保険協会 様

KAKERU PageFlow|PDFを送るだけでWebカタログに

一般社団法人 住宅瑕疵担保責任保険協会 様の講習会テキストを、Webカタログとして公開しました。ページ数はおよそ300ページ。自社開発したWebカタログ生成システム「KAKERU PageFlow」で制作しています。

ここでは機能の説明ではなく、そもそもなぜ自分たちで作ることにしたのか、そして実際に300ページのテキストを載せてみて何が分かったのかを書いておきます。

展示会・営業活動・採用活動などWebカタログの活用シーン
紙のカタログをそのままWebで配れるようにした自社ツールです。展示会でQRから渡す、営業先にURLで送る、といった使い方を想定しています。

きっかけは「もっさりしている」という違和感

最初のきっかけは、AIを使った開発の勉強をしていたことでした。PDFを渡すだけで、全自動でWebカタログができる仕組みは作れないだろうか。そんなことを考えていた時期があります。

ただ、既存のWebカタログサービスをいくつか触ってみて、正直なところ引っかかるものがありました。ページをめくる動作がもっさりしていて、表示も重い。スマホで開くと待たされる。そして何より、PDFをそのまま配るのと比べて、何が良くなったのかが分かりませんでした。

トミー

これなら普通にPDFのリンクを貼ったほうが早いのでは、と思ってしまったんです。
お客様に勧める立場としては、それだと胸を張れないなと。

本当に作りたかったのは、めくった先のことでした

カタログを開いている人のことを考えてみると、あの状態はかなり特殊です。その製品や、そのサービスに、いま興味を持って自分から見に来ている。これほど熱量の高い瞬間はそうありません。

それなのに、多くのWebカタログは「読ませて終わり」でした。気になったページで、そのまま問い合わせができたら。気に入った製品を、その場でカートに入れられたら。せっかく熱が高いところまで来ているのに、そこで途切れてしまうのがもったいないと感じていました。

自分たちで作ろうと決めたのは、この部分を自由に設計したかったからです。既存のサービスを借りている限り、めくった先をこちらで決めることはできません。

300ページで、機能の意味が変わりました

住宅瑕疵担保責任保険協会 様には、以前からWebサイトの制作でお付き合いをいただいていました。PageFlowをご紹介したところ気に入っていただき、講習会のテキストで導入していただくことになりました。

そのテキストが、約300ページありました。

約300ページの講習テキストをキーワードで検索している画面
約300ページの講習テキスト。キーワードを入れると、該当する箇所が一覧で出ます。

この規模になると、紙でもPDFでも、目的のページにたどり着くこと自体が大変です。「あの説明はどこに書いてあったか」を探すだけで時間がかかる。実際に載せてみて、テキスト検索としおり機能の意味が完全に変わりました。開発中は「あると便利な機能」のつもりでしたが、300ページでは「ないと使えない機能」でした。

ページ一覧をサムネイルで表示して目的のページへ移動する画面
ページ一覧から目当てのページへ直接飛べます。300ページを順にめくって探すのは現実的ではありませんでした。
トミー

数十ページのパンフレットで試していたときには、正直そこまで実感がありませんでした。
実際の現場のボリュームで動かしてみて、初めて分かったことです。

「動くもの」と「渡せるもの」は、違いました

自分の手元で動いた時点では、まだ半分も終わっていませんでした。実際にお客様の原稿を通してみると、思っていなかった問題が次々に出てきます。

ひとつは、トンボと塗り足しでした。印刷用のPDFは、仕上がりサイズの外側に余白と目印が付いています。それをそのまま画像に変換すると、Webカタログの端にグレーの線と白い帯が写り込む。仕上がりサイズだけを正確に切り抜く処理を、あとから作り直しました。

もうひとつは、写真だけが真っ白に抜ける現象です。デザインソフトから書き出したPDFに使われている画像形式が原因でした。やっかいだったのは、文字と罫線は正常に表示されることです。ざっと見ただけでは気づけません。気づかないまま納品していた可能性があったと思うと、今でも肝が冷えます。

そして、お客様のサーバーで動かないという問題もありました。管理画面をアップロードしてみたら、フォルダの中身が表示されるだけ。自分のパソコンで動くことと、お客様の環境で動くことは、まったく別の話でした。結局、サーバー側の準備が何も要らないように、処理をすべてブラウザの中で行う形に作り直しています。

どれも機能一覧には出てこない部分です。ただ、紙の仕事とWebの仕事の両方をやってきたからこそ気づけた問題でもありました。

お客様の一言で足した機能

いちばん喜んでいただいたのは、意外にも小さな機能でした。

初めてカタログを開いたとき、画面上のどこを触れば何ができるのかを、ツールチップで案内する仕組みです。これはお客様からのご要望でした。「初めて見る人が迷わないようにしたい」と言われて、すぐに対応しました。

初めて開いた人に操作を案内するツールチップ
初回だけ表示される案内。「スキップ」も置いて、必要ない人の邪魔にならないようにしています。

Webカタログを見る人は、操作を覚える気などありません。説明書を読んでから開く人もいません。だから、最初の数秒で「これは触れる」と分かることのほうが、機能の数より大事でした。要望をいただいてすぐ形にできたことも含めて、喜んでいただけたのだと思っています。

トミー

自社で開発しているので、「こうしたい」をその日のうちに反映できます。
既存のサービスを使っていたら、こうはいきませんでした。

紙もWebも、同じ人間が作っています

KAKERUデザインは、もともとカタログやパンフレットといった紙の制作もしています。トンボの話も、画像形式の話も、印刷の現場を知らなければそもそも問題として認識できませんでした。逆にWebの実装ができなければ、気づいたところで直せません。

PageFlowは、その両方をやってきた会社が、自分たちで使いたいものを作った、というだけのものです。特別な発明をしたわけではありません。ただ、実際の案件で300ページを通し、お客様の要望をその場で反映しながら育ててきました。

手元に眠っているPDFがあれば、一度ご相談ください。動きや読み心地は、実際に触っていただくのがいちばん早いと思います。

KAKERU PageFlow|PDFを送るだけでWebカタログに

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA