デザイン向上委員会

グラフィックデザイナーとWebデザイナー【両者のデザインの違い】

こんにちは、emikiです。

私は10年以上、グラフィックデザイナーとして働いてきました。

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

独学よりオンラインスクールでデザインを勉強した方が費用が安いって知ってる?こんにちは、デザイナー歴10年のemikiです。 デザイナーとして仕事をしたい場合、デザインを学ぶ必要があります。 デザインを学...

その後、オンラインスクールで学んだことを活かしながら、本格的にWeb案件の仕事も請け負うことになりました。

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

「グラフィックデザインとWebデザインの具体的な仕事内容は、どのような違いがあるの?」という疑問をお持ちの方は、当記事をぜひ参考にしてみてください。



スポンサーリンク

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

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

まず、前提として述べておきたいのは、グラフィックデザインとWebデザインの仕事内容はまったく別物ということです。

「デザインというジャンル」「Illustrator・Photoshopを使った仕事」という面では、似ているのですが、グラフィックデザインができるからと言って、Webデザインができるということは決してありません。(逆も然りです。)

純粋なデザインだけで良いのなら、グラフィックデザイナーでも他サイトを参考にしながら見よう見まねでWebデザインを行うことも出来ますが、Web業界では常識とされていないことをやらかしてしまう可能性が大。

Webの知識がないことには、正直なところ仕事にならないことも確かです。

 

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

両者はまったく別物なのです。

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

 

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

グラフィックデザイナーだった私が、Webデザインに挑戦してみて感じた、両者の違いについて紹介します。

私自身がグラフィックデザインの畑の人間なので、グラフィックデザイナー寄りの見方になってしまいますが、感じたことを率直に述べたいと思います。

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デザインで一番大変だと感じた点は、ブラウザやパソコンのOSごとの見え方の確認作業です。

Illustrator・Photoshopの使い方に関しては、長年グラフィックデザイナーを行なっていたこともあり、あまり労力を使わなかったことは幸いでしたが、「ブラウザ・パソコンのOSごとの見え方の確認作業」ここに一番の労力を使いました。

 

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

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

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

様々なパソコンやブラウザでサイトを閲覧しにくる人を想定して、それらすべての動作環境を確認する必要があります。

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

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

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

 

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

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



スポンサーリンク

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

グラフィックデザインの場合は、llustratorをベースとして使い、画像関連の編集をPhotoshopで行い、2つのソフトを連動して使います。

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

グラフィックデザイン出身者は、レイアウト作業はIllustratorで行うことが当たり前なので、Photoshopを使ってのレイアウト組みには少し手間取るでしょう。

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

レイヤー数がグラフィック以上に膨大な数になるので、マメなフォルダ分けとレイター名付けは必須なのでしょうね。

 

また、調べてみると、Illustratorを使ってでもWebデザインを行っても良いとのことです。
(慣れという部分が大きくて、グラフィック出身者は、PhotoshopよりIllustratorの方が仕事が早くできると思うので)

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

 

グラフィックデザインとWebデザインは空間作りの根本が違うため、やり方や概念も違う

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

決められた中に必要な情報を簡潔に収めるデザイン。
いわば、引き算のデザインです。

 

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

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

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

このことから、Webデザインは情報更新型の「足し算のデザイン」と言われています。

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

 

決められたスペースに収めていくデザイン(=グラフィックデザイン)と、スペースをさほど気にしなくても良いデザイン(=Webデザイン)。

そもそものフィールドが違うので、デザインの作り方の根本も違って当たり前なのです。

 

フォント選び

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

そのフォント適切?デザイン全体の雰囲気やTPOを考えた選び方の極意 こんにちは、emikiです。 デザイナーは、デザイン全体の雰囲気やTPOに沿ったフォントを選ぶことも大切な仕事です。 も...

 

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

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

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

 

Zの法則とFの法則

デザインをレイアウトしていく上で外せない2つの法則があります。

それは、「Zの法則」と「Fの法則」です。

 

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

「Zの法則」とは、主に紙媒体に用いられるデザインの法則です。


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

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

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

 

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

「Fの法則」とは、主にWeb媒体に用いられるデザインの法則です。

Webページ上では「Zの法則」とは異なり、「F」上に人間の目線が動きます。

まずは左上から右に目線が流れていき、そしてまた左の方に戻っていくという流れです。

全体的に左側へと目線が流れていくので、左側から上部にかけて重要な情報を配置するという方法です。



スポンサーリンク

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

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

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

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

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

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

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

 

▽私がグラフィックデザインでやらかした、失敗談の話はこちらから▽

「誤字」はデザイナーにとって致命的なミスだ!【失敗談】こんにちは、デザイナー歴10年のemikiです。 人間は誰しも失敗をするもの。 仕事での失敗ももちろん付き物です。 デザイ...

 

【最後に】グラフィックデザインをやっていたからWebデザインに活かせたこともあった

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

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

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

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

 

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



スポンサーリンク