グラフィックデザイナーからWebデザイナーになれる？経験者が解説！

当記事は、

といった疑問にお答えする内容です。

結論から言うと、

です。

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

あらゆるものが電子化されて紙が淘汰されつつある昨今、Webデザインの需要の方が格段にあるので、Webデザインもできた方が良いのではないかと思った私はオンラインスクールで専門的なWebデザインを学びました。

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

私はどちらかというとグラフィック寄りの畑の人間ですが、一応グラフィック・Webデザインの両方の実務経験はあります。

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

「グラフィックデザインとWebデザインの具体的な仕事内容の違いは？」
「グラフィックデザイナーからWebデザイナーに転身できるの？」

という疑問をお持ちの方は、当記事をぜひ参考にしてください。

グラフィックデザイナーからWebデザイナーになると有利に働くこと3つ

グラフィックデザイナーからWebデザイナーになると有利に働くことが3つあります。

①Illustrator・Photoshopが使える

グラフィックデザイナーは、Illustrator・Photoshopの2つのソフトを駆使してデザインを上げていきます。

特にIllustratorに関してはWebデザイナーよりもマニアックに使える人が多く、現場では重宝がられる力となります。

短期集中型のスクールでは、Illustratorの操作を教えないスクールも多いのですが、やはり使えないより使えた方が断然に有利！

すでにIllustrator・Photoshopをプロ並みに使える点は、グラフィックデザイナー出身の大きな武器となります。

②基礎的なデザイン力が備わっている

ジャンルの畑は違いますが、グラフィックデザインの業界で培った基礎的なデザインセンスはWebデザインの現場でも使うことができます。

もちろん各業界の原理原則はあるものの、デザイン全般の基礎はそこまで変わりません。

例えば、配色のセンスや余白(マージン)の取り方など・・・

これらデザインセンスは、一朝一夕で作ることはできないので、グラフィックデザインの力が発揮できます。

③コネクションを持っている

グラフィックデザイナーとして働いていると、業界にそれなりのコネクションができます。

横のつながりを作っておくと、仕事を紹介してもらったり、相談に乗ってもらえたりと何かと便利。

コネも何もなく裸一貫でWeb業界に飛び込む人に比べたら、断然有利な位置からスタートすることができるのです。

グラフィックデザインとWebデザインの違い

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

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

デザインという大きなジャンル分けで分けると似ているように映るのですが、グラフィックデザインができるからと言ってWebデザインができるということは決してありません。（逆も然りです。）

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

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

続いては、グラフィックデザイナーとWebデザインの違いを解説します。

Webデザインは「コーディング」知識が必須

グラフィックデザインは、Illustrator・Photoshopを使って見たままをデザインしていきます。

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

一方、Webデザインでは、Illustrator・Photoshopなどのデザインソフトの操作プラス、HTML、CSS、JavaScriptなどの「コーディング」という専門的な言語を覚えなければなりません。

Webサイトはこれらのコーディング作業によってすべてが構築されています。

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

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

人には向き不向きや、慣れもあるものです。

自分のキャパを超えるコーディングや、不得意な分野は、外注のコーダーの方にお願いするという方法もあります。
サイト構築は外注で、自分はデザインだけに集中するという選択もアリでしょう。

そのほかにも、ワイヤーフレーム作成ツール「Adobe XD」を覚えたり、コーディング補助ツールのテキストエディタ「Dreamweaver」を覚えたりと、新しく学び直す必要があるソフトもあります。

詳しくは以下の記事へ。

>>Webデザイナーになるために必要最低限のスキルと使うソフト

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

Webデザインに関しては、まだまだ経験が浅い私ですが、Webデザインで一番大変だと感じた点は、ブラウザやパソコンのOSごとの見え方の確認作業です。

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

デザイン作業はすべてPhotoshop

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

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

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

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

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

ちなみに最終的にjpgに書き出せるのであれば、Illustratorを使ってでもWebデザインを行ってもOK。
（慣れという部分が大きくて、グラフィック出身者は、PhotoshopよりIllustratorの方が仕事が早くできると思うので）

私もIllustratorで作業を行った方が早いので、イラレを使うことも多々あります。

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

グラフィックデザインとWebデザインは空間作りの根本が違う

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

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

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

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

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

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

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

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

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

フォント選び

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

そのフォント適切？デザイン全体の雰囲気やTPOを考えた選び方の極意

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

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

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

スポンサーリンク

Zの法則とFの法則

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

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

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

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

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

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

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

また、Webサイトの一部(TOP・LPページ)でもZの法則が用いられています。

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

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

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

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

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

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

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

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

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

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

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

「誤字」はデザイナーにとって致命的なミスだ！【失敗談】

グラフィックデザイナーからWebデザイナーになれる？経験者が解説！まとめ

グラフィックデザインーとWebデザイナー両者の違いや、キャリアチェンジの現実についてご紹介しました。

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

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

ただし、グラフィックデザインとWebデザインでは、デザインの手法や考え方が違うので、Webデザインについての研究や勉強もしっかり行っておく必要もあります。

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

また、グラフィックデザイナーがWebデザイナーになるために、短期集中型で「学び直し」できるスクールもあります。

オンライン対応なので全国どこからでも受講可能。

気になる方は、以下の記事をチェックしてくださいね！

>>Webデザインの学び直し(経験者向け)おすすめスクール5選