転職活動の情報サイト

DTPデザイナーとWebデザイナーの違いとは?転職する際に知っておきたい7つのポイント

※当サイトはWeb広告を利用しています

DTPとWeb
印刷物をデザインするDTPデザイナーとWebサイトをデザインするWebデザイナー。

同じデザイナーには変わりありませんが、成果物が異なるため、意識すべきポイントも異なります。

よくDTPデザイナーがWebデザインをして、それをhtml・cssコーディングする場合があります。

しかし、Web特有のポイントを理解していないと、「見た目はいいけど、Webサイトとして機能しない!」ということにもなりかねません。

このページでは、現役Webデザイナーである私が、DTPデザイナーからWebデザイナーに転職したいと考えている人向けに、知っておくと役立つポイントを紹介します。

1.アプリケーションの違い

DTPの場合は、通常Adobe IllustratorやInDesignでデザインを制作、写真の加工が必要なときはAdobe Photoshopを使用するのが一般的です。

一方、Webデザインの多くはAdobe Photoshopでデザインを制作、イラストやロゴなどベクターデータを制作したいときにAdobe Illustratorを使用します。

つまり、主軸となるアプリケーションが異なるのです。

Webの場合、最終的にhtmlコーディングするときは、jpgやgif、pngといった画像データとして書き出します。そのため、はじめから画像編集ソフトであるPhotoshopで制作しておいた方が、効率がいいのです。

Webデザイナーに転職する人は、「Photoshopでデザインする」というスキルを身につけることは必須です。

個人の趣味なら問題ありませんが、仕事としてWebデザインをやる場合は、他の人が作ったデザインデータを修正することもありますし、代理店や他の制作会社とデータのやりとりを行うことは日常茶飯事です。

業界でスタンダードになっているアプリケーションは、扱えるようになっておきましょう。

他にもWeb制作で役立つアプリケーションがあるので、詳しくは、「プロも使用!Webデザインに必要な主流のソフト」にまとめました。

2.色の違い

DTPでは、CMYKの4色で色を表現します。一方、Webでは、RGBの3色で表現します。

両者は、再現できる色域が違うため、注意が必要です。

また、色の再現性でいうと、印刷は紙や刷り方によって色味が変わりますし、一度刷ってしまうとやりなおしが効かないため、色校正に神経を使います。

その点、Webは何度でもやり直しがききますし、それほど気にする必要はありません。

ただし、モニターの種類や色、設定によって異なるため、100%同じにはならないことを頭に入れておきましょう。

3.ブラウザやPCでの見え方の違い

色もそうなんですが、フォントや詰め幅といったレイアウトに関してもDTPとWebでは考え方が異なります。

印刷は紙にそのまま再現されるため、ほぼ1対1のものが出来上がります(紙によりインクののり具合が違うことはある)。

しかし、Webの場合は、デザインしたものをhtmlやcssといったマークアップ言語で、「コーディング」する作業が発生します。

コーディングすることで、1枚の画像に過ぎなかったWebデザインが、Webサイトとして機能するようになります。

そして、それを表示させる役目のソフトウェアが、「ブラウザ」です。有名どころでは、Internet Explorer、Google Chrome、Firefox、Safari‎などが上げられます。

ブラウザは、それぞれ解析方法が異なるため、見え方が微妙に違ったり、表示が崩れしたりすることがあります。

一度、複数のブラウザで同じページを見てみましょう。文字の見え方や詰め幅、ページによっては、マージンも違うと思います。

色と同様に、100%同じものを再現するのは、難しいのです。

また、OS(Mac、Windows)の違いや画面の解像度、ノートパソコン、スマホといったデバイスの違いも意識する必要がもあります。

プログラムの領域になりますが、同じアプリでも機種によって正しく動作しないことがありますよね。それと同じことです。

よくクライアントから「ページの表示がおかしい」という指摘を受けることがあります。、そういうときは、ブラウザの種類やバージョン、OSといった閲覧環境をヒヤリングし、改善するべきかどうかを判断します。

大手のWebサイトでは「対応環境」が、あらかじめ定められていることもあります。

Webデザイナーは、これらのことを考えています。ある程度のパターンがあるので、慣れると起こりうる問題が予測できるようにもなりますよ。

あらゆる環境を再現するため、OSを使い分けたりもしますよ。
Webデザイナーを目指すならMacがいいの?Windowsがいいの?

4.ページ単位ではなくサイトの全体像も考慮する

Webサイトは、ページとページをリンクすることで、様々な情報を見ていきます。そのため、ページ単体ではなく、全体像を考慮した上でデザインしていきます。

例えば、ヘッダーにサイトを表すロゴを入れたり、共通要素(カラーやあしらい)は揃えるなどです。

サイトに統一感が生まれることで、ブランド力や信頼が高まる、といった効果をもたらせてくれます。

全体像を把握するためにサイトマップを使ったり、ページの共通要素を見るためにワイヤーフレームを活用するので、覚えておきましょう。

5.ユーザビリティを意識したデザイン

ユーザビリティとは、「ユーザーにとっての使いやすさ」のことです。

ビジュアルデザインばかり気にしていると、文字が小さすぎて読めない、どれがボタンか分からないといった問題が生じることがあります。

以前、DTPデザイナーから上がってきたデザインに「ナビゲーションがない」ことがありました。「え!?」と思われるかもしれません。私もはじめての時は、唖然としましたが、それからも何度か同じ経験をしました。

確かに、分野の違うデザインなら分からないですよね。「住宅のデザイン」でも、ある程度の形はデザインできても人が生活することまで考えると、何かしらの大きな見落としが発生するでしょう。

Webデザインも、Web特有の使い方があることを意識しておきましょう。

6.動的要素がある

Webサイトには「動き」があります。

一つは、ロールオーバーやスライドショーといったアクションによる動き。DTPにはない要素ですよね。

よく、DTPのデザイナーが作成したデザインデータがWeb制作者に渡るとき「このボタンがロールオーバーしたときの画像はあるの?」とか「スライドショーって何枚スライドするの?そのデザインは?」というやりとりがあります。

このように、見た目だけのデザインだけではなく、アクションを起こした後のデザインも作らなければなりません。

もう一つの「動き」は、ショッピングカートやアンケートフォームの画面遷移、UIといったユーザーフローから発生する動きです。

例えば、お問い合わせフォームの必須項目を入力しなかったときの警告、送信ボタンを押した後のサンクス画面などです。ユーザーが、ストレスなくお問い合わせを完了し、満足させる結果を与えられるかもデザインが、大きく関わってきます。

これらは、あなたがいつものようにWebサイトを見るときに、運営者側の視点で見るようにすると、何気ないデザインがいかに大事かが分かります。

7.html、cssコーディングの勉強もする

Webデザインは、必ずhtmlやcssでのコーディング作業が発生します。

よほど名の知れたWebデザイナーになるか、完全分業制の会社でない限り、デザインとコーディングを兼任するのが普通です。

「ちょっと待って!私はデザインがやりたいの!」と憤りを感じるかもしれませんが、いいWebデザインをするためには、コーディングの知識は不可欠です。

知識を持っていると、コーダーやプログラマーに、デザインの意図を適格に伝えられるようになりますし、コーディングにかかる時間を逆算できるようになり、あなたの考えるデザインが、スケジュールや予算にどう影響するかも理解できます。

また、スマホサイト用のレスポンシブデザイン案件が増えており、その際もワンソースで、PCとスマホサイトの両方を実現できるデザインを組めるようになります。

それに、デザインの段階から画像のスライスやhtmlのマークアップを想定できると効率的です。

このように、いくつものメリットがあるので、スキルとして持っておくと絶対に歓迎されますよ。

まとめ

「覚えること多すぎ!」と難しく感じたかもしれませんが、すぐに慣れます。

DTPデザインができない私からすると、紙サイズやぬりたし、特殊加工(トムソンやラミネート)などの方が難しいです笑。

しかし、デザインの基本は同じなので、DTPで培ってきた経験は必ずいかせます。

ただし、印刷物とWebでは媒体の持っている特性が異なるということ。その辺りを学んでおくと、Webデザインを受け入れやすくなりますよ。

Webデザイナーに強いおすすめの転職サイトランキング

Webデザイナーに転職するには、転職サイトや、キャリアコンサルタントがサポートしてくれる転職エージントに登録するのが一般的です。

しましながら、転職エージェントだけでも1万社以上もあるといわれており、何を基準に選べばいいか分からないですよね。そこで、求人数、実績、サービス内容、評判などを総合的に判断して、Webデザイナーに強いおすすめの転職サイトをランキング形式で紹介します。

また、未経験でWebデザイナーを目指すなら「現役が教えます!未経験でもWebデザイナーになる方法」も合わせて参考にしてみてください。

1位:ワークポート

ワークポートは、IT・インターネット業界専門の人材紹介会社。12年間で1万人もの転職支援実績があります。業界に詳しい専門のコンサルタントは、その知識に加えスピード感があると評判。無料セミナーや転職に役立つ管理ツールも充実しています。IT業界を目指すなら、登録必須といえる転職エージェントです。Webデザイナーにおいては、クリエイター専用のページがあり、デザイナーからディレクターまで、細かく分類されていて、求人を探しやすいです。

2位:レバテックキャリア

IT・Web業界に特化した転職専門サービス。質の高いキャリアコンサルタントと転職先で活躍するエンジニアのネットワークが強み。顧客の目的を叶えるための徹底したサービスで、業界内でも評判がよく、快進撃を続けています。専門だからこそ、業界の傾向と実績を考慮して、Webデザイナーとしてのあなたのスキルを引き出してくれるでしょう。PhotoshopやIllustratorといったソフト別、プログラム言語別でも求人が分類されています。

3位:JAC Recruitment

1988年設立の老舗。東証一部に上場しており、売上規模ではリクルート、インテリジェンスに次いで、業界3位です。名実共に信頼できる人材紹介会社で、私も利用しました。外資系企業のため、海外転職に強いですが、IT・Web業界においては、大手メーカーのWeb担当者やWeb制作会社など、国内でも多くの求人を取り扱っています。親身になって、転職の悩みを聞いてくれたので、終始、好印象でした。

さらに詳しくは「Webデザイナーに強い転職エージェントランキング」もご覧ください。

Webデザイナーだけではなく、Web/IT業界全般の職種に関わる求人なら「IT・Web業界に強い転職エージェントランキング」も参考にしていただけます。