Webデザイン

【よくわかる】Webデザインとグラフィックデザインの違いを徹底解説

この記事は次のような方のために書いています。

・Webデザインとグラフィックデザインの違いが曖昧でよくわからない

・Webデザインとグラフィックデザインのどちらの方が職業としておすすめか知りたい

この記事では、ウェブデザインとグラフィックデザインの違いをしっかりと解説していって、デザイナーとしての役割をよく頭に入れていただきたくて、書きました。

どうぞ最後までご覧になってください。

Webデザインの仕事

 

先生
先生
Webデザインの仕事とは、Webページをデザインして、構成やレイアウトを考える仕事なんだ。

Webデザイナーが考えたデザインをコーダーやプログラマーがコーディングして、デザインをWebで見せたり動かしたりするように、Webサイトを作ります。

先生
先生
Webサイトは解像度が低い画像が使われていて、動きがあるのが特長だよ。

印刷物と比べると複雑な仕組みになっていて、Webデザインの仕事は、作品を作る、というよりも設計するという方が近くて、印刷物と比べて、新鮮な情報を的確かつ広角的に伝える力が求められる仕事です。

Webデザインってどんな仕事?仕事の流れや必要なスキルも紹介しますこの記事は次のような方に向けて書いています。 ・Webデザイナーになりたい人 ・Webデザインの仕事内容を知りたい人 ...

グラフィックデザインの仕事

先生
先生
グラフィックデザインとは、印刷物を媒体としたデザインだよ。

文字、写真、イラスト、図などの材料を組み合わせてデザインすることの相性をグラフィックデザインと呼んでいて、ポスターや新聞、書籍、雑誌、パッケージなど、いろいろあります。

グラフィックデザインの仕事では、高解像度の画像で印刷に耐えられる画像を扱うのが特長だよ。

先生
先生
Webの世界で働くグラフィックデザイナーというものもいて、主にウェブ上に載せるグラフィックを書くことが仕事で、印刷物のようにレイアウトや編集を行うことはないんだ。

また、Webデザイナーと兼ねることもあって、Webデザイナーは、デザインに関するクリエイティブな経験が乏しいことがあるので、印刷物の経験が豊富なグラフィックデザイナーが重宝される傾向です。

【初心者デザイナー必見】グラフィックデザインの仕事の紹介と仕事の流れ グラフィックデザインの仕事をしたいと思うんだけれど、どんな仕事なのかわかっているのかというと、まだ全然わかっていない感じだし、漠...

Webデザインとグラフィックデザインの作成に使うソフトの違い

先生
先生
デザインを作るときに使うソフトはたくさんあって、Webでもグラフィックの場合でも複数のツールを使い分けながら作業することが一般的なんだ。

ここではWeb、グラフィックで、メインでどのソフトを使うのかということを比較していきたいと思います。

Webデザインの作成に使うソフトはPhotoshop

先生
先生
一般的にWebデザインをするときに使うソフトは基本的にPhotoshopで行うことが多いんだ。

Photoshopでページデザインをしながら、写真の加工もPhotoshopで行えるので、作業がスムーズにできます。

先生
先生
そして、Webサイトが表示されるディスプレイはラスト形式で表現されるんだけれど、Photoshopもラスタ画像で画像を扱うので、Webサイトのデザインをするのは、Photoshopでした方がいいのは、よくわかる話だよね。

デザインを作った後のコーディングの時のことも考えると、Webサイトやバナーを作るときに使用するのは、Photoshopで行うのが相性が良いと言えます。

ラスタ形式とは

先生
先生
ここで話に出たラスタ形式というのは、画像を色のついた点の集合体で表現する形式のことを言うんだ。

ラスタ形式は、写真などのきめ細やかなグラデーションや微妙な色味の変化を表現するのに向いています。

ここに拡大縮小すると画像がどんどん荒くなっていきますが、ベクタ形式のデータよりも処理の負荷は少ないところが特長です。

【おすすめ】Webデザインの新ツールAdobe XDの使い方や機能この授業は次のような方におすすめです。 ・最近Webデザインの仕事でAdobe XDを使うことになったけれどまだよくわからない...

グラフィックデザインの作成に使うソフトはIllustrator

先生
先生
グラフィックデザインをするときには、基本的にIllustratorを使います。

Illustratorで描いたデータはベクタ形式でなので、拡大縮小の影響を受けないところがポイントです。

先生
先生
だから、A4サイズで作ったチラシをA4サイズよりも大きなサイズに変更したい、といった場合にも、データが劣化することを心配せずに拡大することができるんだ。

ベクタ形式とは

出典:NatsukiMemo

先生
先生
ベクタ形式と言うのは、線や点やテキストなどの情報を数値で保持する形式のことを言うんだ。

写真の微妙な色の差を表現するのには向いていませんが、そのぶん、サイズの変更に強いところがポイントです。

しかし、1枚で出来るポスターや少ないページのパンフレットであったらIllustratorで十分ですが、ページの多い雑誌などにはInDesignを使った方が効率がいいです。

Webデザインとグラフィックデザインのそれぞれの解像度

先生
先生
デザインの媒体がモニターであるか、それとも紙であるかで、必要になる解像度が違ってくるんだ。

そして、ラスタ形式であるかベクタ形式で作成するかによっても、設定方法が変わっていきます。

Webデザインの解像度は72ppi

先生
先生
Webデザインを作るときの解像度は基本的に72ppiなんだ。

高い解像度で設定すると、Webサイトを開くときにテキストや画像の読み込みを行うときに、データが重くて読み込みに時間がかかってしまうからです。

先生
先生
解像度があまり低すぎても画像が汚く見えてよくないけれど、72ppiに設定しておくと、問題ありません。
【疑問解消】Webデザインに最適な画像解像度はどうして72dpi?この記事は次のような疑問を持っている方に向けて書いています。 ・どうしてWebデザインの画像の解像度は72dpiなのかを知りた...

グラフィックデザインの解像度は350ppi

先生
先生
グラフィックデザインの解像度は、厳密に数値が決まっているわけではないけれど、一般的には300~400ppiの範囲内なんだ。

特に推奨されている解像度は350ppiなので、350ppiに設定しておくと良いでしょう。

グラフィックは解像度が低いとぼやけた画像になってしまいますが、逆に高すぎても印刷できる解像度には限界がありますので、印刷した見た目は400ppiくらいでそんなに変わりませんが、データが重いので、印刷するときに時間がかかってしまいますので注意が必要です。

【疑問解消】Webデザインに最適な画像解像度はどうして72dpi?この記事は次のような疑問を持っている方に向けて書いています。 ・どうしてWebデザインの画像の解像度は72dpiなのかを知りた...

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

Webデザインとグラフィックデザインは、サイズがあるかないかも大きく違います。

Webデザインは主にパソコン画面のサイズ、グラフィックデザインでは印刷物のサイズになります。

Webデザインの画像サイズについて|リサイズや画像を軽くする方法もこの記事は次のような方に向けて書きました。 ・Webデザイン制作で画像を使うときに適したサイズを知りたい ・画像を簡単に...

Webデザインではサイズに制限がない

先生
先生
Webデザインは、表示範囲に制限がないんだ。

横幅は、デバイスごとに決まっていますが、縦幅はスクロールしていくことで、どこまででも情報を表示することができます。

デザイニャー
デザイニャー
横のサイズさえ気にすれば、縦はちょうどいいところまでできるので、やりやすいんだニャン。

ただ、デバイスごとにサイズが変わってきますので、レイアウトを開けたスマホ用のデザインをまた別に作成する必要がありますし、改行する位置が変わったりすることも考えながら作業をしていく必要があります。

先生
先生
そこを考えながら作成しないと、コーディングするときにコーダーさんが困ることになるので、考えながらデザインを作っていこうね。
Webデザインの画像サイズについて|リサイズや画像を軽くする方法もこの記事は次のような方に向けて書きました。 ・Webデザイン制作で画像を使うときに適したサイズを知りたい ・画像を簡単に...
【Webデザイン制作で迷わない】最適な画面サイズとレイアウトの種類この記事は次のような方に向けて書きました。 ・見やすく操作しやすいWebサイトを作りたい ・Webデザインをするときの推...

グラフィックデザインではサイズに制限がある

先生
先生
一方、グラフィックデザインでは表示範囲に制限があるんだ。

紙に印刷するので、チラシや名刺など媒体ごとに決められているサイズでデザインを作る必要があるからです。

文章量が少ない場合は、画像やイラストを大きめに載せることでスペースをうまく調整することもできますが、文章量が大きい場合だと、フォントサイズや一つ一つのイラストのサイズも考えながら作らなければなりません。

デザイニャー
デザイニャー
それだとページ数が多い冊子なんかは大変そうだニャン。

ページごとに文章量は異なる中で、全体のルールは合わせる必要があるので、フォントのサイズなども統一する必要があります。

先生
先生
そのためにルールを明確にして、情報ごとのまとまりを考えながら各ページの構成段階からきちんと考えておくことが大切なんだ。

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

作成するデザインがパソコンのモニターに表示されるのか、それとも紙などに印刷してつかわるかによって、制作するときの色の設定が変わってきます。

先生
先生
前もって適切に設定していないと、完成したときに、作っていたときに考えていた色と違うということもありますので、注意が必要なんだ。
Webデザインの印象を左右!カラーの基本知識と便利な配色ツールとはこの記事は次のような方のために書きました。 ・Webデザインを制作したいだけれど、配色で迷ってしまうので知識を知りたい ...

WebデザインではRGB

先生
先生
Webデザインでは必ずRGBで設定しましょう。

RGBとは、Red(赤)・Green(緑)・Blue(青)と言う光の三原色を混ぜて色を表現する方法で、加法混色と呼ばれています。

これら3色を混ぜれば混ぜるほど色が明るくなって、液晶ディスプレイなどのコンピュータやテレビに表示などに使われています。

先生
先生
なので、Webデザインをするときには必ずRBGを使おう!

グラフィックデザインではCMYK

先生
先生
グラフィックデザインでは必ずCMYKに設定しよう。

CMYKとは、Cyan(シアン)・Magenta(マゼンタ)・Yellow(イエロー)・Key plate(キー・プレート)の色の三原色と黒を混ぜて色を表現するもので、減法混色と呼ばれています。

この4色を混ぜれば混ぜるほど色が暗くなり、インクを使った印刷物を作るときに使用されます。

デザイニャー
デザイニャー
なので、グラフィックデザインをするときには必ずCMYKを使用するんだニャン。

ただ、CMYKはRGBよりも色の幅が狭いので、金色や銀色や蛍光色を表現することができません。なので、その時は特色を使いましょう。

Webデザインの印象を左右!カラーの基本知識と便利な配色ツールとはこの記事は次のような方のために書きました。 ・Webデザインを制作したいだけれど、配色で迷ってしまうので知識を知りたい ...

Webデザインとグラフィックデザインの表現方法の自由度

先生
先生
Webデザインとグラフィックデザインには、どちらにも色々な制約があるから、表現できる範囲が違ってくるんだ。

Webデザインでは、動的表現の自由度が高く、グラフィックデザインでは静的表現の自由度が高いと言う特徴があります。

WebデザインではコーディングできないものはNG

先生
先生
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デザイナーになることだよ。

お店の開業と同時にWebサイトを作りたいというクライアントもよくいるのですが、そのときに、お店のオープンの案内チラシも作れますよというと、喜ばれますし、収入も増えます。

もしもカフェだったら、Webサイトとメニューやコースター、と言うように、Webと印刷物のデザインをセットにして提案ができるようにしておくと、仕事を受注しやすくなります。

このようにフリーランスのデザイナーは、ちょっとした気遣いができることで仕事が集まりやすくなります。

このように気を利かせて提案ができるデザイナーになることが望ましいです。

まとめ

先生
先生
この授業では次のようなことを学んだよ。

・Webデザインの仕事

・グラフィックデザインの仕事

・Webデザインとグラフィックデザインの作成に使うソフトの違い

・Webデザインの作成に使うソフトはPhotoshop

・ラスタ形式とは

・グラフィックデザインの作成に使うソフトはイラストレーター

・ベクタ形式とは

・Webデザインとグラフィックデザインのそれぞれの解像度

・Webデザインの解像度

・グラフィックデザインの解像度

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

・Webデザインではサイズに制限がない

・グラフィックデザインではサイズに制限がある

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

・WebデザインではRGB

・グラフィックデザインではCMYK

・Webデザインとグラフィックデザインの表現方法の自由度

・WebデザインではコーディングできないものはNG

・Webデザインとグラフィックデザインの給料や待遇の違い

・これから始めるならグラフィックデザインも少しできるWebデザイナーになるのがおすすめ

デザイニャー
デザイニャー
今まで曖昧だったWebデザインとグラフィックデザインの違いがよくわかったニャン。

先生
先生
これからはWebデザインの方が伸びてくる職業だけれど、グラフィックデザインの経験もあったほうが重宝されるからね。

私たちは頑張るあなたを応援しています。