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

この記事は「グラフィックデザイナーからWebデザイナーになれる？」といった疑問にお答えする内容です。

さっそく結論ですが、

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

あらゆるものが電子化されて紙が淘汰されつつある昨今、Webデザインの需要の方が格段にあるのが現実です。

「Webデザインもできた方が良いのでは？」と思った私は、オンラインスクールで専門的なWebデザインを学びました。

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

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

実体験に基づいて紹介するね！

emiki

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

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

スポンサーリンク

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

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

ひとつずつ解説しますね。

①Illustrator・Photoshopが使える

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

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

WebデザインスクールではIllustratorの授業を割愛することもありますが、やはり使えないより使えた方が断然に有利！

ロゴ制作やイラスト作成など、WebデザインでもIllustratorを使うことが多いよ

emiki

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

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

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

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

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

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

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

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

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

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

コネクションがあれば、Webデザインの仕事や就職先を紹介してもらえるよ

emiki

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

デザイナーという職種に疎い人は、グラフィックデザインとWebデザインの境目がわかりません。

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

グラフィックデザインとWebデザインの仕事内容はまったく別物なのに！

emiki

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

確かにIllustrator・Photoshopを使えば他サイトを参考にしながら見よう見まねで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などのブラウザ。

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

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

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

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

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

グラフィックデザインにはない、Webデザイナーならではの労力ですね。

スポンサーリンク

デザイン作業はすべてPhotoshop

グラフィックデザインの場合は、llustrator・Photoshopをベースとして使います。

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

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

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

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

しかし業界的には圧倒的にPhotoshopを使うデザイナーの方が多いのが事実。

データ流用やデータ共有をする場合、Illustratorのデータだと不便と思われてしまう可能性がありますね。

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

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

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

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

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

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

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

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

媒体が違うので、デザインの作り方の根本が違うのですが、慣れるにはちょっと時間がかかりますね。

フォント選び

紙媒体などのグラフィックデザインは、TPOに合わせて自分の好きなフォントを柔軟に選ぶことができます。

カーニングやトラッキング次第で、文字間も自由自在に調整できます。

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

さらに、サイトを閲覧しているパソコンによってフォントが異なって見えてしまうので、デザイナー側で完全にフォントを統一して指定することはできません。

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選