検証！DTP to WEB
DTP to WEB
DTPのプロはWEBのプロになれるか
DTPできる人はWEBもできます説の検証
ゼットラボのお客様にはDTPデザイン制作屋さんやWEBデザイン制作屋さんがいらっしゃるのですが、両者の業務内容を聞いてると共通項多すぎで実に面白いわけです。両者ともPCで仕事してるし、企画から始まりボリュームに応じた予算を決め販促物としての成果物を納品することも同じ。制作には全く同じAdobeのソフトをバリバリ使うこともソックリ。どちらもクライアントのワガママ「良いものつくりたいオーラ」に振り回されるのも同様ですねｗ
私見としては表題のテーマの答えはYES。この記事ではその理由を書いていこうと思います。DTPプロの方（以下DTPerと表記）はWEB制作のスキルをトンデモなく誤解してるだけな気がしてなりません。それではDTPな人目線でWEB制作を考察してみようと思います。
DTPerが誤解してそうなコト
WEB制作の不安点は下記でしょうか。
１.エイチティーエムエルとか呪文を覚えないといけないんでしょ？
２.ジャバとかイロイロなプログラムできないとダメなんでしょ？
３.サーバー構築っていわれても無理だけど？
４.エスイーオーとかアクセスログ解析っていわれても？
５.用紙サイズ概念が無いのにどうやってレイアウトするんだ？
この疑問に対する答えは下記ですね。
１.【回答】たしかにWEBページはHTMLとCSSというページ記述言語で構成されます。でもDTPやってる貴方はPostScript言語を直接書いてます？例えばIllustrator InDesignは結果的にはPostScriptというページ記述言語を書き出しますが、現実には意識したことないでしょう。同様にWEBの世界でもイラレやインデザのような便利なツールがあるんです。今はWordPress（無償）とそれに追加するテーマやプラグイン（無償が多い）が主流ですね。
２.【回答】一般的なWEBサイトやLP（ランディングページ）ではJavaScriptなどの知識は不要。動きのあるスライダーなどのデザイン表現や動的な記事レイアウト生成なら前述のプラグインが代わりに解決してくれます。特別に高度な機能が必要になるとWEBアプリケーションの開発が必要になりますが、それって数百万円とかの大規模予算になります。
３.【回答】一般的なレンタルサーバーで普通のWEBサイト作るなら手順にしたがって設定するだけで動いちゃいます。もしも本格的なサーバー構築が必要なら印刷工程でいうとプリプレス以降の専門工程という感じで外部業務案件です。
４.【回答】簡単な解析なら識別値を一行だけコピペするとあとはGoogleが勝手に始めます。本格的なSEOとかアクセス解析となるとそれはWEBデザインではなく、マーケティング手法。もしもSEO施策やるなら別途予算をとってマーケティング担当とすすめるべきでしょう。施策すべき手法が決まったらWEBページにコピペで文字列を貼りこむ簡単作業だけは必要ですが。
５.【回答】仕上がりサイズが明確に決まってないことについて不安になる気持ちわかります。でも実は現実のDTPだって受注案件で、名刺からポスターやパンフレットなど異なるサイズ展開を作ることありますね。あれと同じで、掲載する要素を整理しスマホ、タブレット、PCで要素の可変配置（レスポンシブ）を考えるだけなんです。最新のWordPressは基本的に自動レスポンシブしてくれますし細かい設定もできるようになっています。（※最初は戸惑うでしょうけどプログラムコード的な知識は不要）
ココまでのまとめ
一般的なWEBサイトなら高度なプログラムやサーバー知識は不要。適切なWordPress環境を用意できれば、HTMLとCSSは知らなくてもページは作れる。高度なSEOや解析はデザイン制作じゃなくマーケティングだと言い切ってよい。
DTPerにとっての最大の強みは、イラレとフォトショはすでにガチプロであること。組版、写真補正、配色などの美しさについては場数踏んでるのでこれは強力な武器。最大の課題は自動可変するサイズ（レスポンシブ）だが、慣れて理解するとたいしたことではない。
ワークフローの比較
DTPとWEBの標準的なワークフローを比較してみましょう。便宜上、受注から納品までの全工程を掲載してますが、制作の観点でいうとツールは違えど、素材加工と配置と配色と同じことやってることがわかります。
標準的DTP制作ワークフロー
①企画
②ページ割り
③デザイン
④レイアウト
⑤入稿データ
⑥色校正
⑦印刷
⑧納品
紙媒体を前提として、「何を なぜ 誰に いつ どこで どのように いくら」を確定する工程ですね。ここが曖昧だったり、あとでブレると制作は変更と修正の嵐に遭遇しますね（笑）
ベタに言えば、【課題】【動機】【対象】【時期】【場所】【手段】【規模】【費用】それぞれを最初で明確にしてねということでしょうか。そこまでちゃんとした企画を見たことないのは私だけ？（笑）
企画にもとづいた見積が承認され、複数ページならページ割りが必要ですね。掲載コンテンツ内容をざっくり考えながら知識と経験が必要な工程ですね。
会社によっては、DTPerはこれをやらないかもしれませんが、初期段階のデザインや方向性を共有するための工程ですね。
決定したサイズ・枚数などの仕様に従ってPhotoshop Illustrator InDesign大活躍の場面。素材は新規のイラストや撮影が必要なら外注など別工程で同時作業でしょうか。素材に対して写真補正加工、グラフィックパーツ作成およびレイアウトの作業ですね。
文字やデザイン校正が完了したら、次工程である印刷工場へ引き渡す最終データの作成業務ですね。ここも知識と経験が必要でしょう。
データ入稿後はDTPerにとっては業務完了なので管轄外となりますよね。マサカの色校正後の文章変更や写真変更は無い設定で（笑）
標準的WEB制作ワークフロー
①企画
②サイトマップ
③ワイヤーフレーム
④デザイン
⑤コーディング
⑥サーバー準備
⑦納品
⑧運用
WEB媒体を前提として企画しますが、決めることは紙媒体と全く同じで、【課題】【動機】【対象】【時期】【場所】【手段】【規模】【費用】を確定します。当然、WEB媒体の特性や機能をある程度知っていなければなりませんね。機能性で例えると紙媒体は2次元、ネットは3次元とも表現できますが、【対象】である視聴者目線で使いやすい設計をするだけです。
紙媒体同様に、ペラなのか複数ページなのかを設計します。標準的なサイトマップは表紙であるトップページの配下にコンテンツに応じた複数のページが並びます。ページの量が多ければ、コンテンツの種類ごとにグループ分け（カテゴライズ）し整理していきます。企画見積の段階である程度ページ数は決まってるはずなのですが、いざサイトマップを作ってみると数量が増加することもあります。妥協するか追加予算検討かの判断が必要になります。
紙媒体のラフデザインに相当する工程ですが、前述のように紙媒体と違いWEBは3次元的な機能があるためちょっとだけ注意が必要です。他のページに遷移するメニューボタンやリンクボタンなどの機能の配置（UI／UX）がそれです。好き勝手に配置することもできますが、使い勝手を考えると大きく3種類の王道にいきつくしかないので、慣れれば優等生的な設計ができるようになります。
ワイヤーフレームをもとに実際の仕上がりに近づけるデザイン作業です。Photoshop Illustrator 大活躍の場面。素材は新規のイラストや撮影が必要なら外注など別工程で同時作業ですね。素材に対して写真補正加工、グラフィックパーツ作成などの作業が主です。
紙媒体のレイアウトに相当する工程です。WordPressを使わなければ、HTMLとCSSのプログラムコードを入力しながらレイアウトを仕上げていきます。文字装飾と写真の配置作業ですね。
この工程は紙媒体でいうところの印刷工場分野なのでデザインの管轄外ですが、作業としては、zlab.biz などのドメインの取得とレンタルサーバーの契約手続および初期設定が主ですね。サイト制作者が代行してやってしまう場合もありますが、外部業者との契約行為が含まれるので判断が必要です。
ここまでの制作作業はすでにWEBサーバー上で行っているので、完成したのなら公開ボタンをポチっと押すだけで納品となります。アッサリすぎて紙媒体の納品と比べると拍子抜けしますが、納品した瞬間に全世界デビューという責任は忘れずに。
紙媒体は成果物の印刷物を指定場所に届けたら業務終了という売切り型のビジネスですが、WEBは納品後に商品などの掲載コンテンツの更新やページの追加、デザインの改訂などある継続型ビジネスといえるでしょう。あとで更新がしやすいような作り方を目指すべきですね。
WordPressが変えるコーディングの世界
ここまで標準的なワークフローの比較を記載しました。この記事の最終的なマトメとなりますが、何度か出てきたWordPressというツールの進化によって、WEB制作は特別なスキルがなくても作ることができるようになりました。
一般的なWEB制作ワークフローでは【⑤コーディング】がDTPerにとって障壁でしたが、最新のWordPressとツールの登場でコーディング不要となったのですね。実例として今ご覧のこのサイトもHTMLコードを書いていません。
どうやらDTPerがWEB制作もできることがアタリマエな時代に突入したようです。美しいページを作れるノウハウをWEBページにも生かせる時代が来ました。
もっと詳しく知りたい！実際の操作画面を見たい！など興味をお持ちの方はぜひゼットラボへお問合せを。ご要望に応じZoomでオンラインレクチャーも可能ですよ～