chrome.google.com
DTPデザイナーがWebを覚えるのは苦難の連続だったが、なんとかなった話
石川 洋平
2018/11/23
DTP・グラフィックデザイナーの仕事は減る
ひと昔前、デザイナーと言えばDTPデザイナーでした。しかし、DTPを経由せずWebデザイナーにいきなりなる人がどんどん増え、DTPデザイナーは時代に取り残されつつあります。よく耳にする話ですが、紙がなくなることはないが、確実に減っていっています。
それはまるで、大した知識がなくても印刷データが作れるDTPが世を圧巻したように、今度はDTPが駆逐される番です。まさに、Video kills Radiostarです。
ここでは、DTP畑にがっつりいたデザイナーがある程度大きい会社のWebの仕事を受注できるまでをご説明します。
DTPばかりで大丈夫か？俺は。
わたしは広告代理店のデザイナーやディレクターとして約15年勤めました。DTPだけではなく、３Dもムービー作成も業務として行いましたが、メインはDTPおよびグラフィックデザインでした。特に最初の10年は、POPやカタログや折込チラシ、パンフレットなどの作成が主な業務でした。
元々はWebがやりかたったのですが、いつのまにかDTP漬けの毎日を送っていました。大口の太い顧客から延々と次はチラシ！次はPOP！と黙々とこなすだけ。
日常的にこんなにWebが溢れているのに、なぜDTPばかりをやっているんだ、このままではやばい、このままでは食えなくなると思いました。Webができないことにコンプレックスを持つ様になりました。
会社員デザイナーの辞めどき
デザインというのは、ある種の型にはめてしまえば、慣れてくると手癖だけで作れます。歌を歌いながらでもテレビを見ながらダラダラと作成していても、いつのまにか完成しています。
また、会社ではデザインに限らずあらゆる業務が、そこまで気張って仕事をしなくても、結果がでるようになっていました。通常運転で結果が出せるとは、つまり伸びしろがもうない証であり、もう早く辞めたほうがいいなと思うようになりました。歳も３０半ばにさしかかっており決断をしました。
会社員からフリーランスのデザイナーに
会社を辞めて転職も少し考えましたが、フリーランスになることにしました。フリーランスだと自分で案件の舵取りができるからです。さぁ、Webをやっていくぞ！と思ったわけです。
「Webなんて俺はいつだってできるよ」あんなの一緒だろ？って。思っていました。しかし、今まで貯めた経験値が認められて仕事が来るんで、来る仕事、来る仕事、DTPやグラフィックデザインの案件ばかり。気づけば会社員時代の下請け業務のようなことばかりをやっていました。
Webで勉強した方法
とにかくWebの仕事がしたくて、最初はとにかくバナーを作らせてくれとか、ECサイトの登録だけさせてくれとか、とにかくWebのプロジェクトの一員として色んな人に声をかけて、少しでもWebに関連した仕事を無理やり安請負いでやっていました。
それと独学ですね。DTP案件を複数動かしながら、無理やり独学の時間を取るのはしんどかったです。だいたい夜の１２時から１日２時間とかいった感じで決めてやっていました。フリーランスは目の前のお金が欲しくなるので、お金だけでいったら楽に作れるDTPをずっとやっていたかったのですが。
Webページのスクリーリーンショットを取って模写をする
スマホでもPCでもそうなのですが、DTPデザイナーにとって非常に邪魔な感覚がPC上で見る感覚は印刷の感覚と合致しているということです。A4で印刷したらこのぐらいのサイズ、A3だとこのぐらいのサイズみたいなDTP感覚がいつまでもつきまといます。
この感覚があるうちは、Webデザインを作成しても、ブラウザで表示すると、なんだか大きすぎたり小さすぎたり、感覚が狂うのです。Webで表示される１６pxはブラウザではどのぐらいのフォントサイズ？とかそういった感覚がないのは致命的です。
最初のうちは、有名サイトを模写していました。全年齢の人が対象であろうNTTドコモのサイトの本文のフォントサイズ14pxでできているとか、前人が築いた「Webの当たり前」を身に付けようと思いました。
デザイン系はChromeの拡張機能を利用する
クロームの拡張機能はずっと使いますが、特にDTPデザイナーにおすすめしたいです。
MeasureIt
ウェブのサイズを物差しで測るツール。どのぐらいのサイズでウェブができているか測るのに最適
WhatFont
選択してどのフォントが使われているかを調べる
FireShot
スクリーンショットを撮れる。
SEO META in 1 CLICK
Descriptionから、socialの設定からh1などの見出し構造がワンクリックでできる。サイトの日々のチェックや自作サイトで設定されている時にチェックがカンタンにできます。
コーディング系は有料サービス
Progate
コーディングはとにかくここが一番勉強になりました。作ったらすごく表示されるので、1ヶ月だけ有料で登録して、暇があったらやっていました。ドットインストールとか見るだけのものよりも、手を動かせるので、良いと思います。
Schoo
最近あまり聞かなくなったけど、初期はここのコーディング講座をよく見ていました。これを見るよりはProgateで勉強した方がいいと思います。
各種コーディング本
入門編みたいな本はだいたい４日ぐらいで１冊終わらせるみたいな感じでやっていました。
一番勉強になるのは案件を請け負うこと
いくら机上でお勉強したって、１案件に勝る勉強方法はありません。納期が切られて勉強をするので、デザインもコーディングも死に物狂いでやります。いまの実力ではちょっと厳しい案件も受けてから考えましょう。サポートのデザイナーやコーダーもつけておくと最悪の失敗がないので、リスクも担保しつつ、受けてしまうのが良いです。
というのも、上記の勉強はほとんどが初心者の最初の１歩をグルグルと回っているだけです。ここをずっと頑張っていても時間ばかりかかります。そう、DTPデザイナーは暇じゃないんです。フリーランスは目の前の仕事に飛びついて生活費を稼ぐ必要があります。
レイアウトがIllustratorじゃないとできないのがDTPデザイナー
これもどうなのか良くわかりませんが、ウェブデザインはsketchやPhotoshopで作る人がおそらく多いと思います。DTPあがりは、Illustratorでしか作れません。
Photoshopでの作成に何度も挑戦しましたが、DTPデザイナーからするとPhotoshopはあくまでレタッチなどのツールであって、レイアウトを作るソフトではないんですよねー。コーディングを外注するときに、psdデータでくださいとか常に言われるので、本当はPhotoshopで作った方が良いんでしょうけど。Illustratorのpsd書き出しっていうのが、本当に使えない書き出しなので、すごく苦労しました。
Illustratorはレイヤー構造を階層を分けてつくれないので、psd書き出しには向いていません。Adobeにはなんとかしてほしい。おそらく、Adobe XDなんかに力をいれているので、Illustratorのウェブの機能を強めて行く可能性はすごく低いです。
もし、Illustratorからキレイにpsd書き出しができるのであれば、DTPデザイナーからWebデザイナーへの転身はすごくハードルが下がります。
Webで失敗したすべて
Webの仕事を得るために、たくさん失敗しました。失敗は成功の糧なんですが、DTPで稼いだお金をWebで損をするみたいなことを初期はたくさん経験しました。たくさん謝罪しました。
ASPのECサイト作成での失敗談
ECサイトを無理して受けたのは本当に失敗でした。単純にカートに入れるだけの商品なら良いんですが、少し複雑なオプションが必要なサイトだったりすると、ASPのサービスを熟知していないと厳しいんですよね。
ASPのサービスはどのサービスを利用するかによって、機能が随分異なります。まして、複雑なECサイトなら当たり前なのですが、各種設定や何ができて、何ができないといったことが一覧できるものがなく、こちらもまた失敗しました。後になってこれができません！とクラアイントに謝罪をたくさんしました。
noindexの失敗談
サイトを正式公開して、良かったできあがった、無事納品ができたと喜んでいるのも束の間、サイト公開から随分経って、サイトがnoindexのままでグーグルにインデックス登録がされていませんでした。こちらも随分と謝罪しました。
OGPの失敗談
ogp設定を詳しく知らなかった時です。htmlやcssといった見た目を作るというところまでは、ある程度できるようになっていたのですが、ogpといった見た目以外の部分についての知識が乏しく、ogpの設定がされていないというクレームで謝罪しました。
コーディングを外注したときの失敗談
こちらが素人なので、コーディングを外注したら、画像コーディングだらけだったり。メタディスクリプションやOGPの設定がされていなかったり、知らないって罪だなと今になって思います。高い授業料を払いました。
WebのUIがわかってない失敗談
UIの考え方は人それぞれという側面はあれど、Webがまるでわかっていない、「DTPのカタログ」みたいなデザインだと指摘を受けたことがありました。あまりにも図星で、数日寝込みました。。
サーチコンソール／アナリティクスの設定ミスの失敗談
作るところまで出来ても、解析ツールをいれるとか、ogpの設定なんかもそうなんですけど、机上でのお勉強ってことのあたりのフォローが薄いんですよね。本当は一番大事なところなのに、やはりデザイナーは見た目がよければOK！みたいな癖があって、これも後になって設定できておらず、謝罪するということがありました。
たくさんのWeb制作の失敗を糧にして
勉強も兼ねて無理して案件を取るので、たくさん失敗しましたが、案件をこなす度に技術や知識がついてきました。会社員時代に、手癖でDTPデザインをやっていたときとは真逆でした。
今でもまだ満足できるレベルには達していませんし、数百ページの巨大サイトのディレクションができるかといったら、厳しいレベルですが、少しづつ大手のWeb案件も受注できるようになってきました。
成長を希望して会社員デザイナーを退職した人間からすると、一つ小さな壁をクリアしたような気分になっています。
現在、私はフリーランスを卒業して、会社をおこして、Web案件に携わっています。
DTP力で培った能力はWebに必ず役に立つ
DTPデザイナーがWebデザインを身につけるまで、非常に苦労しました。
生まれた時からプレイステーションの３Dポリゴンが動いていた子供の感覚は、ファミコンを経由して、３Dポリゴンのゲームに感動した世代とは異なるでしょう。DTPを経由せずにWebデザインからスタートするデザイナーとの感覚もまた異なるでしょう。
Webの上から情報を積み重ねていけば、それでOKみたいな構造では、人の心を掴むのは難しいです。どういう構造で一つの制作物を作るといった感覚はカタログをたくさん作ってきたDTPデザイナーの方がおそらく強いです。
文字間や、行間など文字の読みやすさにこだわりが強いDTPデザイナーは、読みやすさ・見やすさにこだわるでしょう。
ジャンルは違えどデザインはデザイン。一度Webの感覚を身につければDTPデザイナーはきっと強いはずです。
さいごに
DTPから、抜け出せない優秀なデザイナーをたくさん知っています。フリーランスになるのが近道かどうかはわかりません。また知識がない中で、クライアントになるべく迷惑をかけずに、保険をかけながら仕事を受託するのは、なかなか難しいものもあります。ただ案件が成長の促進になるのは間違いありません。Webに詳しい人を周りの仲間につけながら、少しづつ転身の機会をはかっていきましょう。
石川 洋平
普通の４大在籍中に、美大などに憧れを持ちつつ、コピー機を使ったコラージュなどでデザインに目覚める。DTP、ムービー、Web、３D、一通り経験したのち、最終的に作ることから、ウェブマーケティングで売ることにジョブチェンジする。
コメント5件
-
田中 より: 納得
-
くっきい より:
フリーランスのグラフィックデザイナーです。勉強不足知識不足での失敗多数で、最近はwebの案件が来るのが怖くてしょうがなかったんですが、このマガジン読んで考え方が変わりました。今日から頑張るぞ！ありがとうございます。記事楽しみに読ませていただきます。
-
嬉しいです！ありがとうございます。
-
-
You より:
DTPデザイナーです。Webの壁を高く感じていましたが
とても励みになり、ためになりました！ありがとうございます。-
お互いがんばりましょう。
-
コメントを投稿する