目次
企業にとっての広告やコミュニケーションの注力する先が、印刷物からWebなどのデジタル媒体へ徐々に移るにつれて、WebデザイナーやUIデザイナーの数も増加しています。
実際「今はグラフィックデザイナーをやっているけど、Webデザインにも挑戦したい」、「アプリのデザインにも挑戦してみたい」、「このままグラフィックデザインだけをやってていいのか不安だ」などと感じるグラフィックデザイナーの方も多いのではないでしょうか。
この記事では、グラフィックデザイナーとWebデザイナー・UIデザイナーの仕事内容や求められるスキルの違い、それぞれの将来性などについてまとめて紹介します。
Webデザイナー・UIデザイナーとグラフィックデザイナーの違い
WebデザイナーはWebサイトなどパソコンやスマホ上に表示されるデジタルコンテンツをデザインするデザイナーのことを指します。UIデザイナーも同様に、Webサイトやスマートフォンでのサービスやアプリをデザインするデザイナーです。
一方で、グラフィックデザイナーは主に紙に印刷されたポスター、フライヤー、パッケージ、パンフレットなどをデザインするデザイナーのことを指します。
Webデザインとグラフィックデザインの違い
WebデザインやUIデザインはデジタルコンテンツのデザイン、一方でグラフィックデザインは印刷物のデザインであるため、サイズ・規格や仕様、デザインの制作方法などに違いがあります。
サイズなど規格内容の有無（印刷物 or Web）
印刷物でもWebサイトでもサイズの規定はあります。紙はA4といったJIS規格や出稿する広告の場所のサイズに合わせてデザインを制作します。
Webサイトの場合縦幅はスクロールすることができるので、主に横幅のサイズを意識して制作します。
Webサイトの他にWebデザイナーがよく制作するのがバナーやヘッダー、図解、アイコン、アイキャッチ画像だと思います。
それらは媒体にあわせて画像の縦横サイズや、ものによってはフォントのサイズが決まっています。
色・カラーリング
グラフィックデザインは、CMYKという色表現で、紙で見える色です。紙に印刷するため、白に近い薄い色は綺麗に表現しにくくなります。またデザインの過程において、画面に表示されている色がそのまま印刷されるわけではないため、途中でプリントして色味を確認したり、印刷会社に色校正をお願いして調整や確認をするステップがあります。単色でしっかりとした色表現をするためには、特色インク (DICやPANTONE) といった印刷方法で理想の色を実現していきます。
Webデザインは、RGBの色表現を使っているため、パソコンやスマホから見える色が比較的そのまま実現できます。ディスプレイで見える淡い色表現まで可能です。一方で、使用しているモニターの色表現が他の人の色と必ずしも同じ出力になりません。この点の注意はグラフィックデザインとも共通しているでしょう。日常的にデザインをするモニターで様々なWebサイトなどを見ていることで、色の基準ができてくるので、その感覚を養うことが重要です。
フォント・タイポグラフィー
フォント選びですが、グラフィックデザインでは、長年で培われた様々なフォント表現が可能です。欧文フォントや日本語フォントも豊富にありますし、それらをベースに字体を独自に調整した文字デザインをすることも広告デザインの手法で良く見受けられます。こういったタイポグラフィーのデザインは、グラフィックデザインの非常に重要な分野であると言えるでしょう。
Webデザインにおいては、フォントはユーザーが閲覧するデバイス (パソコンやスマホ) の環境にインストールされているフォントが中心になります。それに加えて、近年ではGoogleフォントなど、Webフォントと呼ばれる外部サービスを経由したフォント表示の仕組みを用いて、よりデザインに特徴のあるフォントを使用するケースが広がっています。Webフォントを使用することで、文字を画像化することなく、文字という情報のままWeb上でデザインすることが可能になります。最近ではWebフォントも充実してきており、従来では欧文フォントの指定が中心だったところから、日本語フォントのWebフォントも揃ってきて、少しずつデザインの幅が広がってきています。こういったWebフォントを使用せず、独自のタイポグラフィーを表現したい場合は、PNGやSVGといった画像に書き出す方法が用いられており、グラフィックデザインの手法に接近してきていると言えるでしょう。
Webデザインのコーディング・グラフィックデザインの印刷工程
Webデザインはコーディングをすることで完成します。Webデザイナーがコーディングするか否かは組織の大きさや会社により異なります。近年では分業化が進んでおり、フロントエンドエンジニアが担当することが多くなっています。ただ、WebデザイナーやUIデザイナーもWebサイトをデザインする上で、最低限のコーディングや配慮する点などは理解しておいたほうが良いでしょう。
グラフィックデザインでは、コーディングする工程はありませんが、印刷をする過程があります。前述の理想となる色味の表現、印刷する紙にインクが刷られた際のニュアンスの確認、サイズ感の確認など、印刷の工程で確認すべき点も様々存在します。
使用するデザインツール
グラフィックデザインでは、主にAdobe Illustratorを使用し、写真の編集はAdobe Photoshopを使用するケースがほとんどでしょう。その他エディトリアルグラフィックデザインの分野では、冊子フライヤーや雑誌など複数何ページをも作る場合、Adobe InDesignを使用することが多いです。
WebサイトやアプリのデザインはFigma、Adobe XD、Sketchといったデザインソフトを使用します。繰り返し必要となるパーツを共通化したり、マウスオーバーや画面の遷移を確認できるプロトタイピングが実装されていたりなど、Webサイトやアプリの実装に必要とされる機能が揃っています。こういったデジタル分野のデザインは進化も早く、デザインの現場で必要となる様々なニーズに合わせてデザインツールも進化を続けています。また様々な便利な機能を追加できるプラグインも充実しています。
多くのツールが登場していますが、一つのソフトを熟知し、様々なデザイン表現に使うことができれば、他のソフトも直感的に使うことができることでしょう。こういった面でもグラフィックデザイナーもFigmaなどのWebデザイン・UIデザインツールを使い始めれば、数ヶ月といった比較的短期間で使用方法をマスターすることもできるでしょう。
完成後のメンテナンスや更新有無
グラフィックデザインは、追加の印刷をする場合を除いて、メンテナンスする機会は多くありません。追加印刷の場合によって、前回の印刷から更新された点の文字修正などを行なったり、色味の調整をすることがあります。
一方、WebデザインやアプリデザインはWebサイトの更新、ページの更新、新たな機能追加、操作性の改善などのために、適宜デザインやコーディングをする必要があります。
UI視点でのデザイン
UIとはユーザーインターフェイスの略で、Webサイトやアプリのデザインに使われる言葉です。UI視点でのデザインとは、ユーザー視点でWebサイトやアプリケーションを設計したデザインのことです。優れたUIデザインは、ユーザーが直感的に使用でき、ストレスを与えないため、利用率の向上や離脱率の低減に繋がります。
グラフィックデザイナーがWebサイトなどのUIデザインを行う際に、最も慣れが必要となるのが、文字のサイズ感です。印刷物のデザインの感覚で、文字のサイズを決めていくと、見出しや本文のサイズ感が不自然になるケースが多いです。
ただ、優れたWebサイトのデザインをキャプチャしたうえでトレースするなどして、使用されている文字のサイズ感を掴むことができれば、Webデザインに慣れる近道になるでしょう。
UI視点でのデザインを考えると、避けられないのが数値です。主に利用率や継続率、離脱するポイントを数値で確認し、随時改善します。グラフィックデザイナーよりもWebデザイナー・UIデザイナーの方がデザイン業務におちて数値を意識することが多くなるでしょう。
完成までの工程
グラフィックデザインとWebデザインの完成までの工程はおよそ以下のようになっています。
▼グラフィックデザイン（例：ポスター）
クライアントまたは社内から依頼
デザインの打ち合わせ・方向性の提案
撮影ディレクション
デザイン制作・確認
印刷・色校正
納品
▼Webサイトのデザイン
クライアントまたは社内から依頼
Webサイトのコンセプト提案
デザイン作成・プロトタイピング
ユーザーリサーチ
コーディング・開発
公開
それぞれ、必要とされる期間は様々ですが、2〜5ヶ月程度がひとつの目安になるでしょう。
Webデザイナー・UIデザイナーに求められるスキル
Webデザイナー・UIデザイナーにはデザインスキル以外にも必要なスキルがあります。それらのスキルについて解説していきます。
要件定義やヒアリングスキル
要件定義とは、簡単にいうとどんなWebサイトやアプリケーションを作るのか定義したものです。
ヒアリングスキルとは、クライアントからどんなWebサイトを作るか細かくヒアリングし、どんなWebサイトを作りたいのか、Webサイトによって叶えたいことをヒアリングするスキルです。
これらはWebディレクターがする仕事でもありますが、デザイナーもこのようなスキルがあると良いでしょう。
ユーザ動線を意識したデザインスキル
どのようなアイコンや導線があればユーザーがよりわかりやすくWebサイトを利用できるか考え、デザインできるスキルです。
Webデザインで一番大切なのは、ユーザーが使いやすいデザインを作ることです。日々いろいろなサイトを見て、使いやすいデザインを勉強しましょう。
HTMLやCSSなどのコーディングスキル
会社によってはコーディングは必須ではありませんが、スキルとして身につけておけると良いでしょう。
コーディングを専門に行うフロントエンドエンジニアが社内にいても、会社の規模によってはちょっとしたコーディングの修正はデザイナーが行うこともあります。またコーディングやプログラミングについて多少理解しておくとエンジニアとのコミュニケーションがスムーズに進みます。こういった場合に、基礎的なコーディングスキルのある、WebデザイナーやUIデザイナーは重宝されることでしょう。
Webデザイナー・UIデザイナーの将来性
Webデザイナー・UIデザイナーはWebサイト、スマートフォンアプリ、バナー制作だけでなく、アプリケーションやデジタルサイネージ広告など活躍の幅は広がっています。
またWebデザイナーとして様々な経験を積んだ後のキャリアアップは、下記の様に多くの選択肢があるでしょう。
・Webディレクター
・Webプロデューサー
・アートディレクター
・フロントサイドエンジニア
Webデザイナーとして働きながら、Webのデザインを極めるのか、アプリのデザインに進むのか、マネジメントやクライアントと直接やり取りをするWebディレクターの道に進むのか様々な道を検討しましょう。
グラフィックデザイナーの将来性
印刷物などのグラフィックデザイン自体は、年々少なくなってきてはいますが、完全に無くなることはないでしょう。
グラフィックデザイナーの強みをどう活かすか
もともとグラフィックデザイナーとして、経験を積んだデザイナーは、平面構成力、ビジュアル作成力、写真の合成・レタッチ能力、などが優れていて、これらはWebなどのデジタルの分野でも十分に応用ができ、非常に重宝されます。
グラフィックデザイナーの転職先が減少
一方で、転職を考えた場合には、求人数が年々少なくなってくる現実から目を逸らすことができません。新しいものを取り入れて自身の様々なデザインワークに活かすためには、柔軟性や吸収力が高い若い年代のうちに、Webなどのデジタル分野に挑戦しておくことが重要でしょう。
Webデザイナーがおすすめなのはこんな人
Webデザインはグラフィックデザインと比べて、ディレクター、エンジニアなどのチームメンバーとのコミュニケーションがより必要になってきます。こういったコミュニケーションに苦手意識を持たない人におすすめです。また新しい技術やデザイントレンドが登場してきますので、新しいものを取り入れることの柔軟性を持った人にも適正があるでしょう。
また、WebデザイナーやUIデザイナーはアクセス解析やユーザー調査などのフィードバックをもらうことも多く、グラフィックデザインよりも数値的効果を求められることが多いので、数字に意識を持ちながら仕事ができる人には特におすすめです。
グラフィックデザイナーからWebデザイナーへの転身は可能！
グラフィックデザイナーは、すでに根本となるデザインのスキルがあるのでWebデザイナーへの転身のハードルは高くありません。また紙のデザイナーはWebのデザイナーよりも途中で誤植を発見した場合、修正できない場合が多いので、細かいところまで気が付けるデザイナーとして重宝されます。また先に説明した様に、WebデザイナーやUIデザイナーが要素を使いやすく整理していくデザインであるのに対して、グラフィックデザイナーは平面構成・ビジュアル制作などより視覚的に訴えるデザインを行なっていた強みを持ち合わせています。
今後、WebデザイナーやUIデザイナーを目指す際にはコーディングの基礎知識やUIの考え方について勉強をしておくとより転職しやすいでしょう。
Webデザイナーもグラフィックデザイナーもポートフォリオは必須
Webデザイナーやグラフィックデザイナーとして転職するにはポートフォリオが必須です。
ポートフォリオとは今までどのようなデザインを使ってきたかアピールする資料です。
ポートフォリオを作成することは少々手間ではありますが、BRIK PORTFOLIOでは、クリエイティブなポートフォリオを無料で作成できます。登録することでポートフォリオを見たクライアントや担当者からの案件オファーも届く可能性があります。
これからデザイナーとしてキャリアを考えている方は、ぜひ利用してみてはいかがでしょうか。
またポートフォリオを作成した後には、本格的な転職活動が待っています。BRIKでは、デザイナーをはじめとするクリエイターに向けたウェブ・デザイン・映像・クリエイティブ業界の転職・求人サイト BRIK JOBを運営しますので、こちらも合わせてチェックしてみましょう。
