WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

DTPからWEBデザイナーに転職するための具体的アドバイス

DTPからWEBデザイナーになる

スマホの普及やWEBサービスの増加に伴い企業の広告手段はWEBに偏っていっています。そういった背景のもとDTPでグラフィックデザインをしているデザイナーがWEBデザイナーへと転職をするケースが増えています。

グラフィックデザインの経験者であれば純粋なデザインセンスは十分持っています。それをWEBデザインにアジャストさせていくことでWEBデザイナーへの転職は難しくはないと思います。

しかしDTPデザインの経験がないWEBデザインチームの人たちはグラフィックデザイナーはWEBサイトの画面デザインはできるものだと思いこんでいる現場が多くあります。

DTPデザイナーと仕事をしてきた経験からこれからWEBデザイナーになるグラフィックデザイナーの方へのアドバイスです。

WEBデザインできるというDTPデザイナーの困ったケース

お小遣いを稼ぐためにWEBサイトの画面デザインのみを外注として仕事を受けているDTPデザイナーの方がいます。私が所属していた会社のWEBディレクターが書いたワイヤーフレームを送りデザインが上がってくるのを待ちました。

Illustratorのaiファイルで納品された

個人ですべてを完結させない限りWEBデザインはPhotoshopで制作するのがスタンダードです。WebデザイナーからするとWEBデザインの作業をIllustratorで行なうこと自体が想定の範囲外でした。上がってきたデザインをどのように書きだしてHTML・CSSでコーディングしようと途方に暮れました。

Photoshopファイルで納品して欲しいと差し戻した

もしかしたらIllustratorでインスピレーションを高めてPhotoshopで清書するスタイルなのかもしれない。こちらの「使い物にならないからもう一度すべて作りなおして」という暗喩を読みとてってくれるかも知れない。そういう淡い期待を抱いて差し戻しました。

結果、illustratorで追うジェクト全体をコピーしたものをPhotoshopにスマートオブジェクトとして貼り付けられたPSDファイルが納品されました。最終的にこちらのチームで全部作りなおすことになりました。

DTPデザイナーはWEBデザインのことを知らないケースが多い。

すべてのDTPデザイナーではありませんがWEBデザインができるかも、という感覚値でWEBデザインをすると、このように現場では使い物にならないものを納品してしまうことがあります。DTPデザイナーからWEBに仕事を変えるときはこの認識に差を埋める必要があります。

WEBデザイナーに転職するためには何をすれば良いのかをこの外注失敗経験や、DTPデザイナー出身の人の教育経験からまとめます。

Illustratorでデザイン作業をしない

WEBデザインでIllustratorは使用しない
 
WEBデザイナーになるとillustratorは使用しません。フリーのベクターデータを開いてPhotoshopに貼り付けるためだけの専用ツールになります。

WEBデザイナーとしての経験値があがってくれば特定のケースでIllustratorでWEBサイトを作るようなこともありますが、WEBデザイナーに転職するのでしたらデザイン作業のほぼすべてをPhotoshopで行なわなければなりません。

どれだけ美しいデザインができてもチームで仕事をしますので、本人しか扱えないデザインデータは現場の人が困ります。

Photoshopでのデザインスキルを覚える

DTPデザイナーでIllustratorのみでデザインをしてきた方はPhotoshopの扱い方に最初は戸惑うと思います。アプリケーション操作は参考書をみればわかりますので私が注意して欲しいことはこのようなことです。

ラスターとベクター画像の区別

ラスターデータとベクターデータ

Illustratorのファイルは拡大・縮小に酔って画質が変わりません(画像はdpiがかわります)。DTPはこの特性を活かして文字と画像のバランスを取りながらレイアウトを組んで行きます。

対してPhotoshopは縮小した画像を拡大したら画像が劣化して使い物になりません。レイヤーをスマートオブジェクトに変換すればIllustratorと同じように拡大縮小の回数制限はありませんが、Illustratorのようにリンクに画像を読み込むことができないため、ファイルサイズが重たくなるなります。

基本的に画像をスマートオブジェクト化することはしません。これがIllustratorとPhotoshopでのデザイン作業の違いの大きな1つです。

スライスとパーツ管理

ウェブサイトはコーディングに合わせてJpegやPngファイルにパーツを切り分けます。切り分ける領域を正確に判断するためにはHTMLとCSSの知識が必要です。

スライス

Photoshopのスライス

Photoshopで作ったデザインカンプに書き出す領域をスライスツールとガイドを使って切っていきます。複雑なデザインしており、ヘッダー・フッターで別のPSDにするとフィルタの影響でデザインが崩れる場合によく使います。この手法はDTPデザイナーの人にも扱いやすいものです。

デザインカンプは大容量になるので細かい修正に時間がかかるのと、バージョン管理で複数ファイルになるとファイル容量が大きくなるためデザイン環境に優しいファイル管理とは言えません。

パーツ切り分け

素材のパーツ分け

2つ目が書き出すパーツをすべて個別のPSDファイルにしてしまうやり方です。ウェブサイトを更新性を増すため可能な限りパーツを分けます。

デザインカンプを作り上げてからさらに一手間かかるのでレベルの高いWEBデザインスキルと言えます。

フォントはヒラギノ角ゴかメイリオを使う

ヒラギノ角ゴとメイリオ

DTPデザイナーのみなさんはフォントに対するこだわりはWEBデザイナーの比ではありません。彼らの前でフォントを語ること自体が失礼になると思うくらい熟知しています。

画面の美しさという点ではWEBデザイナーよりもグラフィックデザイナーであると個人的には感じていますが、それゆえにウェブサイトデザインでもフォントの美しさを求めてしまうことがあります。

ウェブデザインはバナー意外では綺麗なフォントを使用することができません。下手に綺麗なフォントを使用して文字組をするとクライアントが誤解することがありますので、カンプであれウェブサイトデザインではMacではヒラギノ角ゴ、Windowsではメイリオを使うことが暗黙のルールです。

HTMLをCSSを意識して縦横のグリッドでデザインする

グリッドを基準にデザインする

ウェブデザインでコーディングありきのデザインになります。グラフィカルな要素の強いランディングページやプロモーションのウェブデザインではグラフィックデザイナーの経験が遺憾なく発揮されますが、90%は縦横のグリッドの長方形のを組み合わせたボックスの中に要素を配置します。

WEBサービスの開発現場に入るとほぼ100%の形でグリッドデザインになります。DTPの基本スキルであるフォントを斜めに配置したり、左右の要素をまたぐ背景を入れたりするデザインはWEBデザインでは相性が悪いです。

カンプ通りにコーディングすることは考えない

WEBサイトのデザインカンプ通りにコーティングすることはまず不可能です。閲覧するブラウザによって見え方が変わることと、ウェブサイトの拡大率も任意で変更することができるためです。そのためにDTPデザイナーがWEBデザインを勉強する上で知っておくべきことがあります。

文字組

エディトリアルでいう箱組のような文字組の技術は使えません。禁則処理も上手く機能しませんのでDTPデザイナーから見るとまとまりのないデザインに見えます。この部分は構造的に解決することができないため受け入れるしかありません。

デザインカンプもそれを想定したものを作成しておかないと後々クライアントからイメージと違うと差し返されることになります

ドロップシャドウは使わない

DTPでは背景に合わせて文字の可読性を上げるためにドロップシャドウ・光彩・境界線を使いますがWEBデザインでは使用しません。一部分のみにシャドウを入れることはできますが、メインのテキストや見出しでこのような処理を行なうことはありません。

またレイアウトボックスにシャドウを使うとスライスできなくなるため、コーディングのことを考えて使わないのが一般的です。

Javascriptで画面が動くことを念頭におく

紙のデザインとの決定的な違いが画面に動きがある点です。クリックして浮き上がる入力フォームなどを想定して作るウェブサイトもあるため、不自然に隙間が空いたり、狭いボックスの中にテキストを無理やり詰め込んだりもします。WEBサービスの開発現場ではワイヤーなしにいきなりコーティングから入り、あとからデザインするスキームを取るプロジェクトもあります。

最終的にユーザーがどのように使うのかを想定したデザイン設計の考え方が必要です。

HTMLとCSSでのコーディング

グラフィックデザイナーがWEBをデザインを勉強するときに真っ先に勉強して欲しい言語です。コードがわかないと、今までまとめてきたWEBデザインの特徴が理解できず、どのようにデザインすればいいのかがわからないからです。

デザインの技術や知識は申し分ありませんのでコーディングを覚えてしまえばほぼ即戦力です。コーディングでブラウザ上にワイヤーだけ作り、それに対してPhotoshopでどのように画像を作ればいいのか逆算するとWEB制作の工程を最短で覚えることができます。

コーディング経験がまったくない人は未経験者がWEBデザインを学ぶ手順のコーディング部分だけ勉強すればよいかと思います。

WEBデザイナーになりたい未経験者の人が最初の1歩を踏み出そうとしても具体的に何をすれば良いのかわからないと思います。まずは実務経験なしでも求人募集してるWEBデザイナーと

DTPデザイナーはWEBのルールを覚えれば転職の敷居は低い

専業でDTPデザイナー専門でやってきた人がWEBデザイナーに転職するには、アプリケーションの使い方をWEBに合わせることと、HTMLとCSSのコーディングを覚えることです。

グラフィックデザインをしていたのでしたらデザインのレベルは問題無いかと思います。DTP経験をしっかりとWEBに落とし込めるのでしたらHTMLやCSSも高いレベルは要求されないと思います。javascriptなどは現場に入ってから覚えるくらいの気持ちで問題ありません。

WEBデザイナーへと転向を検討している人は周りの経験者の体験談を聞くか、デザインやIT・WEBに強い転職エージェントに一度相談してみると具体的な方向性が見つかると思います。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST