【2019年版】

デザイン業務でのDTPとWebのデータ共有
Webデザイナー

はじめにメディアとして紙媒体とWebは別々に存在しにし やま西山いち ろう一郎

デ ザイン業務での
DTPとWebのデータ共有の
目的・メリット・デメリット【目的１】媒体としての相互補完ているわけではなく，適度な距離でつながってい

そもそも，何らかのメッセージを，その送り手ると考えます。ともにメッセージを伝える手段から受け手に伝えるのがコミュニケーションであで，組み合わせて使いこなす方がよい効果を出しり，媒体の役割です。その媒体を制作する手段とやすいからです。当然ながら両者の作業の進め方して，現在主流となっているのが，DTP（紙媒には使用するデータの流用のしやすさが影響して体など）とWebデザインです。

きます。

日常生活のコミュニケーションや企業のマーケ

そこで，DTPとWebのデザインの現場で，デーティング活動で，DTPとWebデザインのどちらタ共有をいかに無駄なく進めるかがテーマになりか一方が機能して利用できる状態であれば，活動ます。その手法は一度決めてしまえばずっと通用を円滑に進めることができると考えています。さするのではなく，少しずつ変化していきます。こらにもう一方が代替手段で補完していけば，よりの変化を左右する要因には，以下の項目が考えら効率的にコミュニケーションやマーケティング活れます。

動が実を結んでいくのではないでしょうか。

・メディア（送り手と受け手の進化）・考え方（品質やコストなどの価値，優先順位） 【目的２】スマートフォンなどの出現による
・IT技術（ソフトウエア，ハードウエア，ネットワークなどの専門化と融合）

顧客行動や媒体特性の変化
スマートフォンなどのモバイル端末の普及とア・作業環境（簡単に国境を越える働き方）

プリケーションの拡張性によって，いつでもどこそこで，本稿では，2019年時点でのデータ共でもコミュニケーション活動が可能になり，これ有の動向を，次のような４項目にまとめました。

まであった時間と場所の制約が減りました。そし・前提（目的，メリット，デメリット）て，その結果，媒体間の敷居も低くなりました。

・基本的な考え方

例えば，全てではありませんが書籍を書店に買い・作業事例（基本編，応用編）に行かなくても，データをダウンロードすればそ・作業者の変化（分散化）の場で読み始めることが，普通にできるようにこの中で，データ共有作業を効率良く行い，媒なっています。かつては，確立されたマス媒体と体として高い効果を上げるために，できることをそれらを補完するWebという図式がありました

具体的に探ります。例えば，Webデザインの管が，現在はやはり相互補完の状態です。

理（更新）を効率化する方法として定着している

また，スマートフォンを含むモバイル端末の普CMS（コンテンツ管理システム）が，DTPとど及と通信インフラの整備が進み，さらに仕事のやのようにデータを共有するべきか，その手段をごり方と仕事をする場所に対する考え方も変わって紹介していきます。

きました。DTPとWebデザインの作業でも時間

前文–6 印刷料金’19

00_3_新_前文特集6-10_CC2017.indd

6

2019/01/09

21:26:21

や場所にとらわれない，いわゆるテレワークがより広がっていくことが予想されます。

【メリット】

データ共有の基本的な考え方
DTPとWebデザインの基本的な違いとは？

メッセージの送り手のメリットは，手段が増え諸説ありますが，DTPとWebデザインのデーたことで活動の効果を上げやすくなったことであタの違いは，両者のルールの違いに集約され，さると考えます。Webでは時間や場所，作業者のらにルールが生まれた次の事例１～４のような利制限が緩くなりました。そしてより詳しく，より用環境などへの理解が重要と考えています。なお

わかりやすく伝えることができるようになりまし

利用環境には通信などのインフラのほかに，技術た。またPayPal（ペイパル）をはじめとした少上の仕様や利用するための機器（パソコンやス額決済の普及とそのセキュリティ対応もメリットマートフォンなど）があります。

として挙げることができるでしょう。
一方，メッセージの受け手あるいは利用者のメ【事例 1 】写真データの解像度リットとしては，時間の有効利用と，高度な情報画像についてより鮮明さを求めるDTPデザイを比較的低コストで世界中から入手できることなンに対して，PCモニターへの表示スピードを優どがあります。文字情報を補完する動画の普及先させるWebデザインと対比することができまや，Webで利用できるサービスとしてのSNSもす。ブロードバンドではない頃の名残ともいえま

この流れを加速しています。

す。

【デメリット】【事例 2 】媒体自体のサイズ

作業者のデメリットは，紙面などとWebのデータ共有により作業負担が増えることです。DTP個々の書籍などのサイズ（タテ×ヨコ）内に収めることがDTPデザインの条件です。とWebデザインで同じまたは補完する内容（コ一方，Webデザインの場合は利用する機器（デンテンツ）を制作する場合，その手順は意外と複バイス）によって，表示サイズが変わります。

雑です。
特に，同じ作業をできる限り繰り返さず，PCモニターの場合もあれば，スマートフォンや効率的で正確にデータを共有または活用できるかタブレット機器の場合もあるでしょう。大画面のどうかは作業効率に大きな影響を与えます。

スマートテレビも想定しなければなりません。

DTPもWebデザインもともにパソコンに専用

ただし，複数の機器での利用を想定する場合でソフトウェアを入れて作業をするものなので，も，機器の種類ごとにWebページを用意する必

データ共有は簡単そうに思われます。ところが実要はありません。一つの基本データがあれば大丈情はそんなに単純ではありません。

夫です。表示サイズが変わった場合には，レスポ次章からは，それぞれのデータの特徴やデータンシブデザイン（responsive design）という手を作成するための作業内容の違いなどを整理し，法で，Webページのレイアウトを調整するファ手順の複雑さを解消する具体的な方法についてまイルで見せ方を制御するからです。そのファイルとめていきます。

をCSS（カスケーディング・スタイル・シート）と呼びます。
【事例 3 】リンク
ごく自然なことですが，WebデザインのみにHTMLなどで実現するリンク機能があります。
印刷料金’1900_3_新_前文特集6-10_CC2017.indd

7

前文–7

2019/01/09

21:26:21

Adobe Dreamweaver CC

Adobe InDesign CC

JavaScript などのプログラム

図表１

データ共有事例（1）

このリンク機能はWebサイトの閲覧者に，より作業のポイント多くのWebページをできるだけ負担なく閲覧し基本的なルールに沿って進めることが，やはりてもらうことが目的です。またこの機能でページ結果的には効率化につながると考えています。図レイアウトをすれば，一つのページ内にテキスト

表２は，データ変換のおおまかな作業内容です。

とともに，写真や動画などのデータを掲載するこまた，図表３はデータ変換に使用するソフトウェとが可能になります。

アの例です。

【事例 4 】関連技術の影響の受けやすさ
特にWebデザインの場合は，既存の技術の向上や新たに出現した技術に柔軟に対応していかなければなりません。例えば事例１で取り上げた写真などの画像の場合，スマートテレビ用には高解

図表2 データ変換のおおまかな作業内容
作業の対象

DTPでの状態

テキスト

画像
レイアウト

ソフトウェア上で配置

メニューなしここまでデザイン業務におけるDTPとWebのヘッダー

デザインに含むデータ共有の目的と，それぞれの違いについて整フッター理をしてきました。次章からはデータ共有の考え

プログラム

像度のデータが必要になります。

方と，その作業事例の説明に移ります。基本編と応用編に分けて，実際に行う作業内容やその実現Webへの移行作業

・HTMLファイル作成
ソフトウェア上で配置 ・専用フォルダーにCSSファイルを保管と装飾・pタグなどを付けCSSファイルで配置と装飾
・必要に応じて解像度を調整
高解像度データで配置 ・専用フォルダーに画像を保管
・HTMLファイルからリンクデザインに含む※なし

CSSファイルに記述
新規作成（HTMLファイルとCSSファイルなど使用）
新規作成（HTMLファイルとCSSファイルなど使用）
新規作成（HTMLファイルとCSSファイルなど使用）
専用フォルダーにJavaScriptファイルなどを保管※プログラムについて
この場合Webサイトをより使いやすくすることを目的に，動きのあるページを実現する手段を指しています。具体的にはJavaScriptファイルなどを使用して，利用者のマウスの動きにより制御されます。のためのツールもご紹介します。
図表3 データ変換に使用するソフトウェアの例
分類

共 有事例（1） 基本編（手作業）
まずは紙面で配布する会社案内のデータをWebサイト用のデータに変換する事例を取り上げます。図表１はデータ共有のおおまかなイメー

テキスト

DTP
Web

用途

画像の加工

DTPとWeb共用

レイアウト

DTP
Web

ソフトウェアの名称（一例）
Adobe InDesign CC，Adobe Illustrator CC
Adobe Dreamweaver CC，各種エディター
Adobe Photoshop CC，Adobe Illustrator
CC
Adobe InDesign CC，Adobe Illustrator CC
Adobe Dreamweaver CC，各種エディター

ヘッダー

Web

Adobe Dreamweaver CC，各種エディター

フッター

Web

プログラム

Web

Adobe Dreamweaver CC，各種エディター
制作者が配布するものをダウンロードやリンクして利用ジです。
前文–8 印刷料金’19

00_3_新_前文特集6-10_CC2017.indd

8

2019/01/09

21:26:22

各WebページにPDFデータを掲載すれば，印刷用途にも対応できます。通常の場合，Webサ
イトをそのまま印刷すると余分な情報まで印刷されたり，レイアウトが崩れたりします。CSSでもある程度は解決できますが，PDFデータの方が共有事例（2） 応用編（CMS）
続いて，WebデザインのCMSを利用したDTPとWebのデータ共有についてまとめます。

効率的で，見栄えは良いことが多いのではないでWebデザイン管理の主流とは？

しょうか。

前章でご説明したHTML+CSSを進化させた方ソフトウェアの機能の活用法がCMSで，より効率的なWeb管理ができるよ

Adobe InDesign CCを 利 用 し て い る 場 合 にうになりました。CMSの仕組みはページを典型

は，書き出し機能によりそのデータをHTML化的なパーツに分解して，共通部分を抜き出して集することが可能です。詳細は下記のAdobe公式

中管理するソフトウェアで，プログラム言語のマニュアルをご参照ください。

PHPとデータベースにより実現しています。

https://helpx.adobe.com/jp/indesign/
kb/7040.html
https://helpx.adobe.com/jp/indesign/

CMSの中で最も普及しているのがWordPress（ワードプレス）です。

DTPとCMSデータ共有の問題点と限界
HTML+CSSの作業方法を，そのままCMSにusing/export-content-html-cc.html

は使うことができません。より複雑なPHPのプ
それでも希望のレイアウトにするためには，多少ログラムで対応することが必要で難易度は高く，の修正が必要であるなど，注意すべき点もあります。

通常はコーダーなどソフトウェア開発の専門家にここまで基本編として，紙面で配布する会社案

依頼します。いっそのこと共有は諦め，作業は分内用のDTPデータを，Webサイトのデータに変けた方が手っ取り早いのかもしれません（専用シ換する事例をまとめました。次章では応用編に移ステムを開発し利用できる場合は除きます）。

ります。

Adobe InDesign CC のアドオン（iziExport）

Adobe InDesign CC

図表4

データ共有事例（2）

印刷料金’1900_3_新_前文特集6-10_CC2017.indd

9

前文–9

2019/01/09

21:26:22

DTPとCMSをつなぐ手法
Adobe InDesign CCの場合ではアドオン（拡張プログラム）により，データをWordPressでDTPソフトで，そのアドオンの開発者も同様です。今回ご紹介したiziExportは，スペインの開発者によるものです。

利用可能なファイルとして移管可能になりました。 こ れ でAdobe InDesign CCの デ ー タ をWordPressで共有することができます。やはり微調整は必要ですが，大幅な作業時間の短縮につながります。詳細は下記のWebサイト（英語）をご覧ください。

資 源の有効利用と分業体制によるデータ共有
最後にDTPとWebデザインのデータ共有を，作業者の観点で考えてみたいと思います。
DTPでもWebデザインでも，作業の体制は，アドオン名 : iziExport

企業中心から専門家の小集団へとますます移行し（開発者サイト）ています。この動きにより，データの共有作業の

http://www.iziexport.com/

取り組みに関する課題も，より柔軟な考え方で解（製品版）決ができる可能性が出てきたと考えています。

https://www.adobeexchange.com/

具体的には，まずさまざまな資源を有効活用すcreativecloud.details.15737.html

るシェアリングプラットフォームの動きです。次（トライアル版）に，一つの場所に集まらずクラウドを活用したテ

https://www.adobeexchange.com/

レワークやクラウドソーシングといった仕事のやcreativecloud.details.101081.html

り方です。適切な情報セキュリティ管理のもと，国境さえも越えて，今後もこの流れは進展していAdobe InDesign CCは世界中で使われているくものと予想しています。

前文–10 印刷料金’19

00_3_新_前文特集6-10_CC2017.indd

10

2019/01/09

21:26:22