Webと印刷をひとつにするには

HTML/CSSで組版するにあたって必要なことのまとめ

Webと印刷の違い

レイアウトWebレスポンシブウィンドウサイズ可変

伸縮⾃在のボックスを上から順に並べる

紙固定の判型

版⾯を決める

レスポンシブの例

PC/Tabletでの表⽰

スマートフォンでの表⽰

レスポンシブの例

PC/Tabletでの表⽰

スマートフォンでの表⽰

ページ概念Web

スクロール印刷物

ページ

コンテンツの構造Web基本的に階層構造

• ページ間はリンクで移動• 順番は決まっていない

印刷物直線構造

• ページ間は⼿でめくって移動• 順番が決まっている

UI（ユーザインターフェース）Webマウス/タッチ

ナビゲーションで移動

サイトマップ/検索で⽬的のコンテンツを表⽰

印刷物指

指でめくって移動

⽬次/索引を⾒て、⽬的のページを開く

ページ間を移動するにはWebナビゲーション/リンク

印刷物⽬次/索引

コンテンツWeb

さっと読む

⾒出しで内容把握

短い段落構成

概ね論理構造が明確

印刷物

じっくり読む

本⽂を読む

⻑⽂

構造化不要

コンテンツの例Web 印刷物

Wikipediaの「電⼦書籍」ページ より 『万象の訪れ』渡辺京⼆著 より

その他いろいろ⽐較Web 印刷物

⾊ RGB CMYKファイルサイズ ⼩ ⼤ページ移動 リンク ⼿でめくる拡⼤縮⼩ できる 不可能検索 ページ/サイト/Web全体 索引ファイル HTML/CSS InDesign画像 GIF/PNG/JPG/SVG TIFF/EPS閲覧 ブラウザ 紙インタラクティブ要素 フォーム、アニメーション 無しDB連携 やりやすい ⼤変コンテンツ管理システム（CMS）

超⾼額から無料まで様々なCMSがたくさん

⼤規模システムのみ

技術⾯の⽐較Web Vivliostyle 電⼦書籍 印刷物

⾊ RGB RGB RGB CMYK

ファイルサイズ ⼩ ⼩〜⼤ ⼩ ⼤

ページ移動 リンク リンク/指でめくる リンク/指でめくる 指でめくる

拡⼤縮⼩ できる できる できる 不可能

検索 ページ/サイト/Web全体 ページ/サイト/Web全体 本全体/しおり 索引

ファイル HTML/CSS HTML/CSS epub（実体はHTML/CSS） InDesign

画像 GIF/PNG/JPG/SVG GIF/PNG/JPG/SVG GIF/PNG/JPG/SVG TIFF/EPS

閲覧 ブラウザ ブラウザ/紙 電⼦書籍ビューア 紙

インタラクティブ フォーム、動画 フォーム、動画 無し 無し

DB連携 やりやすい やりやすい 無し 無し

コンテンツ管理システム（CMS）

超⾼額から無料まで様々なCMSがたくさん

超⾼額から無料まで様々なCMSがたくさん

静的ファイルのみ ⼤規模システムのみ

使い勝⼿の⽐較Web Vivliostyle 電⼦書籍 印刷物

読む場所 ブラウザ ブラウザ 電⼦書籍ビューア ⼿に持って読むネットワーク 常時必要 常時必要 不要 不要購⼊場所 Webサイト Webサイト オンライン書店 書店（オンライン/店頭）複数端末 使える 使える 使える 1冊のみバックアップ できる できる できる できないここまで読んだ 履歴 履歴 ⾃動記憶 しおりを挟む持ち運び モバイル端末 モバイル端末 電⼦書籍ビューア 本⼤量の持ち運び 問題なし 問題なし 問題なし ⼤変作りやすさ 容易 容易 少々⼤変 ⼤変誌⾯の⾃由度 無制限 無制限 制限⼤（要単純化） 判型依存データ互換性 概ね統⼀ 概ね統⼀ 電⼦書籍ビューア次第 InDesignのバージョン依存印刷 簡易対応 対応 ⾮対応 対応

Vivliostyleについて

Vivliostyleがやっていることブラウザベース→Webの特⻑を活かす

互換性重視→Web標準準拠/W3C活動

CMS連携→⾃動組版の実現

コンサルティング→使えるシステム構築

Vivliostyleで読むページ概念スクロール→ページ

コンテンツの構造階層構造を持ちつつ直線的に読み進められる

Vivliostyleの特⻑Webブラウザさえあれば使える

Webで広く使われているファイル形式の採⽤による汎⽤性

コンテンツ管理システムとの⾼い親和性TeamSite

Oracle WebCenter

! "! "!

印刷物

スマホPC

タブレット

印刷物も様々な画⾯もひとまとめで扱える

印刷の世界と画⾯の世界を⼀元化

印刷

Vivliostyleでワークフローを⼀元化既存の制作フロー

😔

😊

素材作成 レイアウト 校正 修正 再校 再修正 印刷

Vivliostyleの制作フロー 素材登録から校正・修正までを⼀元化

レイアウト作成・微調整

#! $ % %

#! $ '() !

* *

* + 複数で常時レビュー可能

デザイナーが制作 PDF/紙で校正 デザイナーが修正 PDF/紙で再校 デザイナーが修正

素材をCMS（コンテンツ管理システム）へ登録

Webデザイナー・コーダーがレイアウト作成素材管理と並⾏作業が可能 WebサーバまたはPDFでレビュー

Webサーバ上で直接校正・修正可能

素材作成

, -.スマホ・タブレット・Web向けのレイアウトも同時に出⼒可能

, -.スマホ・タブレット・Web向けの画⾯レイアウトは別途制作が必要

😊😊 😊

⾏程ごとに担当者とデータの流れが分断される😔

制作期間短縮コスト削減

修正作業が楽簡潔なプロセス

印刷物の制作コストを半減！ 制作時間短縮！ 作業プロセスもシンプルに！

⼈もデータもプロセスごとに⼊れ替わる複雑なフロー

CMS+Vivliostyleで集中管理、様々なメディア向けに出⼒可能

印刷

制作フローの変化既存の制作フロー 素材作成 レイアウト 校正 修正 再校 再修正 印刷

Vivliostyleの制作フロー 素材登録から校正・修正までを⼀元化

レイアウト作成・微調整

#! $ % %

#! $

'() !

素材の照合が⼿間

レイアウト調整が⼤変

紙の制作しかできない

修正作業が繁雑

作業できるのはデザイナーのみ

受け渡し・管理の悩みを解決！素材は全てCMSへ登録すればOK

素材管理の⼿間を解消！素材整理とレイアウトを並列作業可能！ 校正・修正は全てCMS上で可能！

デザイナーの負荷軽減！バージョン管理で整合性の悩み解消！校正・修正作業はブラウザさえあればOK

素材作成

, -.😊

😔受け渡しが⼤変

管理が⼤変

校正の指⽰・伝達が⼤変

部署間の調整が⼤変

繰り返す修正で整合性が取れなくなる

指⽰をまとめるのが⼤変

修正の巻き戻りが頻発

デザイナーの負荷が⾼い

Webや電⼦書籍を作るには同じプロセスを複数回す必要がある

1つのプロセスで複数の媒体向けの制作が可能！

複雑なプロセスが整理されて制作負荷軽減、データの整合性が著しく向上しチェックの⼿間が減少

こんな⽤途に向いています複雑なプロセスを整理したい！カタログや取扱説明書・マニュアルの印刷を必要とする企業

紙とWebを同時に制作したい！紙とWebで同じ内容なのに制作を別々で⾏っている企業

Webでも本のスタイルでコンテンツを提供したい！教科書、参考書など教育系コンテンツを提供する企業

出版物を⾼頻度で更新したい！書籍を頻繁に更新・出版したい企業

/+ 0 1 234 5* 6 ) #! $89:

制作事例

書籍とカタログの例

Webと印刷をくっつけて⾃動組版

前提InDesignで⼿作業しているワークフローをHTML/CSS⾃動組版に置き換え

印刷物だけでなく、Web版も同時に制作する

重要！• まずはワークフローの現状把握と整理から• いわゆるUX（User Experience）が重要• User=制作者の負荷軽減→コスト削減• 現場のヒヤリングを⼊念に• ⾃動化のメリットが本当に活かせるかどうかは

UXのステップが鍵• 初期構築で⼒尽きず運⽤のことを忘れずに！

必要なもの• CMSのライセンス

• Vivliostyleのライセンス

• Webサーバ

• DB、メディアサーバ（必要に応じて）

必要なメンバー• UXアーキテクト（UXデザイナー）• IA（インフォメーション・アーキテクト）• UIデザイナー• Webデザイナー• HTML5/CSS3コーダー• SIer（システムインテグレータ）

必要な作業1. UXアーキテクト2. IA3. UIデザイナー4. Webデザイナー5. コーダー6. SIer

課題の洗い出し・全体設計情報・データ設計管理画⾯設計紙⾯・画⾯設計HTML/CSSコーディングCMSの設計・実装

1. 課題の洗い出し・全体設計• まずは既存の制作フローの洗い出しから

• 現場の声を拾いまくる

• 理想のワークフローと現実のギャップ

• 少しでも理想へ=改善ポイントの明確化

• ⼤規模な場合は段階的改善を

2. 情報・データ設計• 既存の制作物を徹底分析、パターンを洗い出す

• イレギュラーは維持しなければならない？

• 意外に苦労するのが命名ルール

• どうしても収まらないものを収める⼯夫

3. 管理画⾯設計• CMSの管理画⾯をカスタマイズ

• 紙⾯の⾃由度向上=管理画⾯の複雑化

• ミスをリカバリしやすいUI

4. 紙⾯・画⾯設計• 情報設計に従い、具体的な画像や⽂字、段組な

どのルールを作る

• 基本はWebサイト的な作り⽅

• スクロールではなくページ分割される

• ページをまたぐ場合の処理をどうするか

5. HTML/CSSコーディング• 基本はHTML5/CSS3• レイアウトはCSS Paged Media• ⾼度なことはAdaptive Layout• イレギュラーにどう対処するかが鍵• 媒体別のCSS書き分けは⼿間だが、ワンソース

マルチユース実現の鍵はココ

6. CMSの設計・実装• 使いやすい管理画⾯• 正確なCMSテンプレート化

ご清聴ありがとうございました。