この記事は次のような方のために書いています。
・Webデザインとグラフィックデザインの違いが曖昧でよくわからない
・Webデザインとグラフィックデザインのどちらの方が職業としておすすめか知りたい
この記事では、ウェブデザインとグラフィックデザインの違いをしっかりと解説していって、デザイナーとしての役割をよく頭に入れていただきたくて、書きました。
どうぞ最後までご覧になってください。
Webデザインの仕事
Webデザイナーが考えたデザインをコーダーやプログラマーがコーディングして、デザインをWebで見せたり動かしたりするように、Webサイトを作ります。
印刷物と比べると複雑な仕組みになっていて、Webデザインの仕事は、作品を作る、というよりも設計するという方が近くて、印刷物と比べて、新鮮な情報を的確かつ広角的に伝える力が求められる仕事です。
グラフィックデザインの仕事
文字、写真、イラスト、図などの材料を組み合わせてデザインすることの相性をグラフィックデザインと呼んでいて、ポスターや新聞、書籍、雑誌、パッケージなど、いろいろあります。
グラフィックデザインの仕事では、高解像度の画像で印刷に耐えられる画像を扱うのが特長だよ。
また、Webデザイナーと兼ねることもあって、Webデザイナーは、デザインに関するクリエイティブな経験が乏しいことがあるので、印刷物の経験が豊富なグラフィックデザイナーが重宝される傾向です。
Webデザインとグラフィックデザインの作成に使うソフトの違い
ここではWeb、グラフィックで、メインでどのソフトを使うのかということを比較していきたいと思います。
Webデザインの作成に使うソフトはPhotoshop
Photoshopでページデザインをしながら、写真の加工もPhotoshopで行えるので、作業がスムーズにできます。
デザインを作った後のコーディングの時のことも考えると、Webサイトやバナーを作るときに使用するのは、Photoshopで行うのが相性が良いと言えます。
ラスタ形式とは
ラスタ形式は、写真などのきめ細やかなグラデーションや微妙な色味の変化を表現するのに向いています。
ここに拡大縮小すると画像がどんどん荒くなっていきますが、ベクタ形式のデータよりも処理の負荷は少ないところが特長です。
グラフィックデザインの作成に使うソフトはIllustrator
Illustratorで描いたデータはベクタ形式でなので、拡大縮小の影響を受けないところがポイントです。
ベクタ形式とは
出典：NatsukiMemo
写真の微妙な色の差を表現するのには向いていませんが、そのぶん、サイズの変更に強いところがポイントです。
しかし、１枚で出来るポスターや少ないページのパンフレットであったらIllustratorで十分ですが、ページの多い雑誌などにはInDesignを使った方が効率がいいです。
Webデザインとグラフィックデザインのそれぞれの解像度
そして、ラスタ形式であるかベクタ形式で作成するかによっても、設定方法が変わっていきます。
Webデザインの解像度は72ppi
高い解像度で設定すると、Webサイトを開くときにテキストや画像の読み込みを行うときに、データが重くて読み込みに時間がかかってしまうからです。
グラフィックデザインの解像度は350ppi
特に推奨されている解像度は350ppiなので、350ppiに設定しておくと良いでしょう。
グラフィックは解像度が低いとぼやけた画像になってしまいますが、逆に高すぎても印刷できる解像度には限界がありますので、印刷した見た目は400ppiくらいでそんなに変わりませんが、データが重いので、印刷するときに時間がかかってしまいますので注意が必要です。
Webデザインとグラフィックデザインのサイズの違い
Webデザインとグラフィックデザインは、サイズがあるかないかも大きく違います。
Webデザインは主にパソコン画面のサイズ、グラフィックデザインでは印刷物のサイズになります。
Webデザインではサイズに制限がない
横幅は、デバイスごとに決まっていますが、縦幅はスクロールしていくことで、どこまででも情報を表示することができます。
ただ、デバイスごとにサイズが変わってきますので、レイアウトを開けたスマホ用のデザインをまた別に作成する必要がありますし、改行する位置が変わったりすることも考えながら作業をしていく必要があります。
グラフィックデザインではサイズに制限がある
紙に印刷するので、チラシや名刺など媒体ごとに決められているサイズでデザインを作る必要があるからです。
文章量が少ない場合は、画像やイラストを大きめに載せることでスペースをうまく調整することもできますが、文章量が大きい場合だと、フォントサイズや一つ一つのイラストのサイズも考えながら作らなければなりません。
ページごとに文章量は異なる中で、全体のルールは合わせる必要があるので、フォントのサイズなども統一する必要があります。
Webデザインとグラフィックデザインの色の違い
作成するデザインがパソコンのモニターに表示されるのか、それとも紙などに印刷してつかわるかによって、制作するときの色の設定が変わってきます。
WebデザインではRGB
RGBとは、Red（赤）・Green（緑）・Blue（青）と言う光の三原色を混ぜて色を表現する方法で、加法混色と呼ばれています。
これら3色を混ぜれば混ぜるほど色が明るくなって、液晶ディスプレイなどのコンピュータやテレビに表示などに使われています。
グラフィックデザインではCMYK
CMYKとは、Cyan（シアン）・Magenta（マゼンタ）・Yellow（イエロー）・Key plate（キー・プレート）の色の三原色と黒を混ぜて色を表現するもので、減法混色と呼ばれています。
この4色を混ぜれば混ぜるほど色が暗くなり、インクを使った印刷物を作るときに使用されます。
ただ、CMYKはRGBよりも色の幅が狭いので、金色や銀色や蛍光色を表現することができません。なので、その時は特色を使いましょう。
Webデザインとグラフィックデザインの表現方法の自由度
Webデザインでは、動的表現の自由度が高く、グラフィックデザインでは静的表現の自由度が高いと言う特徴があります。
WebデザインではコーディングできないものはNG
なので、コーディングにおいてどこまでの表現ができるのかをよく理解しておくことが必要です。
また、ブラウザによっても効くCSSと効かないCSSもありますので、その点も気にしておいた方がいいです。
そしてデバイス上で使えるフォントにも制限がありますので、使うフォント選びからよく考える必要があります。
それでも、どうしてもWebで表示できないフォントを使いたいときには、フォントを画像化して表示する方法もありますが、SEO的にテキストはテキストとして表現する方が良いので、あまり多用することは避けた方がいいです。
また、デバイスに表示させるには、最小のフォントサイズは10pxと決まっているので、それ以下でデザインを作らないようにしましょう。
このようにWebデザインでは細かな決まり事がたくさんありますが、Webならではの色々の要素と組み合わせることで動きを活かしたデザインを表現することができます。
また、JavaScriptで背景を動かしたり、画像を切り替えたり色々な表現をすることができます。
Webデザインとグラフィックデザインの給料や待遇の違い
グラフィックデザイナーの年収は300万円から500万円くらいですが、努める会社の規模やキャリアによっても大きく違います。
大手広告代理店では、30代で1000万円を超えることもあり、実力次第で能力給をあげることも可能です。
しかし、中小の制作会社ではそこまで高い収入を得られないことが多いです。
一方、Webデザイナーが主に働く制作会社は中小規模なところが多くて、平均年収は300万円から400万円くらいとされていますが、キャリアアップしてWebディレクターやWebプロデューサーになると、それよりも高い給料を見込めます。
そして経験を積んで独立すれば、会社勤めのデザイナーよりも収入が多くなることも不可能ではありません。
これから始めるならグラフィックデザインも少しできるWebデザイナーになるのがおすすめ
最近では、グラフィックデザインはWebデザインへの移行が進んでいってグラフィックデザインの業界全体が縮小していっているので、今後はグラフィックデザイナーもWebデザインのスキルを求められることになると予想されます。
お店の開業と同時にWebサイトを作りたいというクライアントもよくいるのですが、そのときに、お店のオープンの案内チラシも作れますよというと、喜ばれますし、収入も増えます。
もしもカフェだったら、Webサイトとメニューやコースター、と言うように、Webと印刷物のデザインをセットにして提案ができるようにしておくと、仕事を受注しやすくなります。
このようにフリーランスのデザイナーは、ちょっとした気遣いができることで仕事が集まりやすくなります。
このように気を利かせて提案ができるデザイナーになることが望ましいです。
まとめ
・Webデザインの仕事
・グラフィックデザインの仕事
・Webデザインとグラフィックデザインの作成に使うソフトの違い
・Webデザインの作成に使うソフトはPhotoshop
・ラスタ形式とは
・グラフィックデザインの作成に使うソフトはイラストレーター
・ベクタ形式とは
・Webデザインとグラフィックデザインのそれぞれの解像度
・Webデザインの解像度
・グラフィックデザインの解像度
・Webデザインとグラフィックデザインのサイズの違い
・Webデザインではサイズに制限がない
・グラフィックデザインではサイズに制限がある
・Webデザインとグラフィックデザインの色の違い
・WebデザインではRGB
・グラフィックデザインではCMYK
・Webデザインとグラフィックデザインの表現方法の自由度
・WebデザインではコーディングできないものはNG
・Webデザインとグラフィックデザインの給料や待遇の違い
・これから始めるならグラフィックデザインも少しできるWebデザイナーになるのがおすすめ
私たちは頑張るあなたを応援しています。
