デザイン向上委員会

グラフィックデザイナーからWebデザイナーへ 〜両者のデザインの違い〜

こんにちは、emikiです。

私はこれまで、グラフィックデザイナーを職業としてきました。

しかし、現代社会はインターネットを駆使したデザインの需要が格段にあるので、
Webデザインもできた方が良いのではないかと思い、
デジハリオンラインスクールで、Webデザインを学びました。

その後、本格的にWeb案件の仕事も請け負いました。

今回、グラフィックデザイナーだった私がWebデザインをしてみて感じたこと、
グラフィックデザイナー(紙・DTP)との違いなどをまとめてみました。



スポンサーリンク

世間一般の人に思われているデザイナーという仕事

Webの情報はどんどん新しいものに更新され、情報の流れも早く、
Webサイトやシステムにも流行り廃りがあります。

もちろんグラフィック業界でも流行りデザインなどもあるので、
常に最新のデザイン情報をインプットしておくことは、デザイナーの仕事でもあります。

「グラフィックデザインの仕事をしています」というと、
「じゃあこのホームページ作れる?」と、
Webデザインの仕事もできるかのように、たまに勘違いされることもあります。

純粋にデザインだけで良いのなら、
他サイトを参考にしながら見よう見まねで出来ることは出来ます。

しかし、Web業界では常識とされていないことをやってしまったり、
Webの知識がないと正直なところ仕事にはならないことも確かです。

 

デザインに精通しない人からすると、「デザイン」と肩書きがついていると、
グラフィックデザイン(紙・DTP)もWebデザインもできると思われてしまうのですが、

両者はまったく別物。

それでは、どういった点が違うのを具体的にまとめていきたいと思います。

 

グラフィックデザイン(紙・DTP)とWebデザインの違い

コーディングという未知の世界

グラフィックデザインは、
Illustrator(イラストレーター)・Photoshop(フォトショップ)を使って、見たままをデザインしていきます。

デザインセンスは別として、Illustrator・Photoshopの機能を覚えさえすれば、
視覚的に操作もできるので簡単です。

※『Illustrator・Photoshopの機能を覚えさえすれば、視覚的に操作もできるので簡単 』と述べましたが、前提に言っておきたいのは、Illustrator・Photoshopの操作に慣れているから「視覚的に操作もできるので簡単」という意味で使っています。
実際は、Illustrator・Photoshopを短期間でマスターするのは困難です。

一方、Webデザインでは、Illustrator・Photoshopなどのデザインソフトの操作プラス、
HTML、CSS、JavaScriptなどの「コーディング」というシステム的なものを覚えなければなりません。
Webサイトはこれらのコーディング作業によってすべてが構築されています。

デザイン云々の前に、HTMLやCSSなどの知識を詰め込まないことには、
何もデザインができないのです。

HTML・CSSまでは、私も楽しく覚えられたのですが、
JavaScriptが・・・
英数字の羅列の意味がまったく理解できず、文系の私の脳みそはパンクしそうでした(笑)。

人には向き不向きや、慣れもあるものです。
自分のキャパを超えるコーディングや、不得意な分野は、外注のコーダーの方にお願いするという手もあります。

 

ブラウザやパソコンごとに動作確認をすることが大変

Webデザインをするうえで、ブラウザやパソコンごとの見え方の確認作業が一番労力を使いました。

グラフィックデザインは、できたものを印刷すれば、まったく同じものが何枚も刷り上がるので、入稿データさえきちんと作れば、デザイン自体の仕事はほぼ完了したようなものです。

しかし、Webデザインは、サイトが完成したからといって終わりではありません。

様々なWeb環境で、その完成したサイトにたくさんの人が閲覧しに来ます。

最新のパソコン、10年前のパソコン、Windows、MAC。
Internet Explorer(IE)、Google Chrome、safariなどのブラウザ。

それらすべての動作環境を確認する必要があります。

その確認作業はとても大切で、
環境が違うだけで、サイトのレイアウトが崩れたり、制作者サイドが意図しない表示になってしまうこともあるからです。

もちろんすべての動作環境を確認するのは限界があるので、例えば古いバージョンのパソコンは表示バグがあっても対応しないなど、案件によって対応範囲も異なることもあります。

この動作確認作業が本当に大変で、デザイン以上に時間を取られました。

熟練のコーダーの人なら、ここのコーディングが違うから、こういう表示になってしまうと、すぐに解決できるかもしれませんが、コーディング覚えたての私には、どこのコードが違うか分からず、時間をかなり費やしました。

 

こちらも、外注のコーダーさんにお願いすれば、自分の手間(デザインする時間)を取らないので、慣れないうちは外注のコーダーさんにお願いするのも手です。

 

デザイン作業はすべてフォトショップ

紙媒体のデザインは、llustratorをベースとして使い、
画像関連の編集をPhotoshopで行い、2つのソフトを連動して使います。

しかし、WebデザインはすべてPhotoshopを使用します。

特にレイアウト作業はIllustratorでの作業に慣れていたので、
Photoshopで行うとIllustratorで行うよりも時間がかかってしまいました。

 

本職WebデザイナーさんのPhotoshopのレイヤー構造を見ると、
丁寧にフォルダ分けがしてあったり、すべてのレイヤーに名前がついていたり、マメさに関心しました。

レイヤー数がかなり膨大になるので、マメなフォルダ分けとレイター名付けは必須なのでしょう。

調べによると、
Illustratorを使ってでもWebデザインができるようなので、
私はそっちの方が向いているのかなと思います。

(慣れという部分が大きくて、PhotoshopよりIllustratorの方が仕事が早くできると思うので)

しかし、業界的には圧倒的にPhotoshopを使うデザイナーの方が多いと思うので、
データ流用やデータ共有をする場合、Illustratorのデータだと不便かもしれませんね。



スポンサーリンク

紙とWebは空間作りの根本が違うため、デザインのやり方や概念も違う

紙媒体などのグラフィックデザインは、すでに完成サイズは決められており、
その決められた大きさの範囲内でデザインを行なっていきます。

決められた中に必要な情報を簡潔に収めるデザイン。

いわば、引き算のデザインです。

 

一方Webデザインは、スクロール次第で縦に画面を伸ばすことができます。

制限がないので、必要であれば無限に情報(空間)を増やせます。

(※制限なく情報が増やせるが、あまりダラダラと情報量が多いサイトはユーザビリティーの観点からあまりよくはないので、簡潔にまとめる必要もある。)

まさに、正反対のデザインのやり方です。

決められたスペースに収めていくデザインと、スペースはさほど気にしなくても良いデザイン。デザインの作り方の根本から違うのではないかと思います。

 

フォント選び

紙媒体などのグラフィックデザインは、TPOに合わせて自分の好きなフォントを選ぶことができます。
そして、カーニングやトラッキング次第で文字間の調整も自分の思い通り、自由自在です。

一方、Webデザインは、可視性の観点からほぼ「ゴシック体」を選ぶ必要があります。

さらに、サイトを閲覧しているパソコンによって、ゴシック体の中でもフォントが異なってしまうので
(例:Windows→小塚ゴシック、MAC→ヒラギノゴシックなど)
デザイナー側で完全にフォントを統一して指定することができません。

Webフォントを使うという手もありますが、Webフォント未対応の環境の人がサイトに訪れることも十分にあえるので、やはり完全なフォント指定は難しいのです。

 

Zの法則とFの法則

「Zの法則」:紙媒体のデザイン


人間が無意識のうちにとる目線の動かし方を考えたデザイン手法を「Zの法則」といいます。

左上→右上→左下→右下と「Z」字のように目線を動かしていく特性を利用して、
通過する動線に重要な情報を配置していきます。

おもに、紙媒体の印刷物の他にも、自動販売機やコンビニなど商品の陳列にも活用されています。

 

「Fの法則」:Web媒体のデザイン

Webページでも同じ「Zの法則」で目線を動かしているのかというと、
実は違います。

おもにWebページでは「Fの法則」が主流です。

まずは左上から右に目線が流れていき、そしてまた左の方に戻っていくという流れです。
全体的に左側へと目線が流れていくので、左側から上にかけて重要な情報を配置するのがおすすめです。

 

カラーモードと画像解像度

カラーモードと、画像解像度は
グラフィックデザインとWebデザインではまったく違うので
注意する必要があります。

グラフィックデザインなどの紙媒体におけるカラーモード:CMYK
Webにおけるカラーモード:RGB

グラフィックデザインなどの紙媒体における画像解像度:300dpi以上
Webにおける画像解像度:72dpi

設定を間違えるとエラーが起きたり、
仕上がりを見て悲惨な結果になったりするので、注意する必要があります。

特に、紙媒体は一度印刷してしまうと、やり直しはきかないので要注意です。

カラーモードと画像解像度の設定は
基礎中の基礎なので、デザイナーとして絶対に間違えてはいけないポイントでもあります。

 

◎私がグラフィックデザインでやらかした、失敗談の話はこちらから◎
デザイナーとして絶対にやってはならないこと【失敗談】

 

グラフィックデザインをやっていたから基礎的なデザイン力に苦労することはなかった

以上、グラフィックデザインーとwebデザイナー両者の違いをあげてみました。

グラフィックデザイナーからwebデザインをやってみて最大のメリットは、グラフィックデザインをやっていたから基礎的なデザイン力に苦労することはなかったことです。

グラフィックデザインとWebデザインはデザインのやり方が違うので、厳密にはWebデザインの研究や勉強も必要なのですが、基礎的なデザインに関しては、グラフィックデザイナーとし仕事をしてきた分「デザイン力」の蓄積はあるため、その部分はショートカットできます。

そして、Photoshopなどのソフトをいちから覚える必要がなく、ソフトの機能をある程度熟知した状態からスタートできるのも大きなメリットです。

両者ともに、違う畑のデザインかもしれませんが、Webデザイナーをまったくの素人からスタートするよりも、グラフィックデザイナーとしての知識と経験を活かせた方が圧倒的に有利なことは確かです。



デザイナーの人材派遣【マスメディアン】
デザイナーの仕事に特化した「派遣求人」サイトです。
求人数も多いですよ!



【マイナビクリエイター】
Webだけじゃなくて、グラフィックデザイナーの求人も多数あります!!



スポンサーリンク

関連記事はこちら