スポンサーリンク
※ 当サイトではアフィリエイト広告を利用しています。
先生
この授業は次のような方におすすめだよ。
・これからデザイナーになりたいのだけれど、グラフィックデザインとWebデザインの違いがわからない方
・これから目指すならグラフィックデザインとWebデザインのどちらが良いのか迷っている方
デザイニャー
この授業を受けていただくと、上のような疑問が解消して、社会で活躍できるデザイナーになることができるんだニャン。
先生
どうぞ最後までご覧になってください。
Contents
グラフィックデザインとWebデザインとは
先生
グラフィックデザインとWebデザインとは、大まかに次のようなものなんだ。
・グラフィックデザイン：ポスターやチラシといった印刷物のデザイン。
・Webデザイン：パソコンやスマホなどのWebブラウザに表示するコンテンツのデザイン。
先生
ここでは次の2つのことについてお話ししていくよ。
・グラフィックデザインの仕事
・Webデザインの仕事
グラフィックデザインの仕事
デザイニャー
グラフィクデザインというのは、印刷物のデザインのことを指すんだけれど、「紙モノのデザイン」とも呼ばれているんだよニャン。
先生
グラフィックデザインとは、図やイラストなどの要素を組み合わせてデザインをすることの総称で、次のようなものを作る仕事なんだ。
・ポスター
・新聞
・雑誌
・書籍
・看板
・パッケージなど
デザイニャー
Webの世界で働くグラフィックデザイナーもいるけれど、その仕事は主にWeb媒体に載せるグラフィックを描くことなんだよニャン。
先生
そうだね。紙モノのようにレイアウトや編集を行うことはないんだ。
グラフィックデザイナーはWebデザイナーと兼任することも多いですが、Webデザイナーよりもクリエイティブな経験があまりないことがありますので、紙モノの経験が豊富なグラフィックデザイナーの方が重宝されることが多いと言われています。
デザイニャー
グラフィックデザインとはについては、次の授業で詳しくお話を聞いたニャン。
>>グラフィックデザインとはどんな職業?求められるスキルと勉強法を解説
>>グラフィックデザインの仕事内容ってどんななの｜仕事の流れ4STEP
Webデザインの仕事
デザイニャー
Webデザインとは、Webページをデザインしたり、レイアウトや構成などを考える仕事なんだよニャン。
先生
そうだね。Webサイト（ホームページ）を作る仕事なんだ。クライアントからの要望や目的に沿ってデザインを作って、それをパソコンやスマホなどの媒体に表示できるようにするための作業（マークアップ）をする仕事なんだ。
デザイニャー
イラストを作成したり、写真の加工、文字などのコンテンツを配置するということに関しては、Webデザインもグラフィックデザインも似たような作業だよニャン。
先生
Webサイトには顔増度が低い画像が使われていて、動きがあるのが特徴なんだ。
Webデザインは、グラフィックデザインと比べて複雑な仕組みになっていて、Webデザインの仕事は、作品を作るというよりも、「設計する」という感覚で、新鮮な情報を的確かつ効果的に伝えられるスキルが求められます。
デザイニャー
Webデザインとはについては次の授業で詳しくお話を聞いたニャン。
>>【Webデザイナー志望の方へ】Webデザインとはについて簡単に解説
グラフィックデザインとWebデザインの違い16個
先生
グラフィックデザインとWebデザインの違いについて次の16個を挙げてみたよ。
・求められるスキルの違い
・お給料の違い
・学習法の違い
・作成に使うソフトの違い
・色の違い
・サイズの違い
・解像度の違い
・情報表示の範囲の違い
・アクションがあるかどうか
・閲覧者の違い
・出力環境の違い
・触感があるかないか
・ストーリーとランディング
・表現方法の自由度の違い
・デザイン完成後の違い
・納品手順の違い
求められるスキルの違い
デザイニャー
Webデザイナーにもグラフィックデザイナーにも必須な資格はないと言われているんだよニャン。
先生
そうなんだけど、身につけておくべきスキルはあるんだ。ここでは次の2つのことについてお話ししていくね。
・グラフィックデザイナーに求められるスキル
・Webデザイナーに求められるスキル
グラフィックデザイナーに求められるスキル
デザイニャー
グラフィックデザイナーには、デザイン力と、それを形にするIllustratorやInDesignなどのツールのスキルが求められるんだよニャン。
先生
そうだね。グラフィックデザイナーにとって大事なのは、おしゃれでかっこいいデザインができることよりも、クライアントの商品やサービスが売れるデザインをすることなんだ。
売れるデザインを作るには、日頃から身の回りにあるポスターや広告をみて、世の中の流行をチェックして、消費者の心理を理解することが大事です。
デザイニャー
グラフィックデザイナーに必要なスキルについては、次の授業で詳しくお話を聞いたニャン。
>>【未経験でも大丈夫】グラフィックデザインに必要なスキル12個を解説
Webデザイナーに求められるスキル
デザイニャー
Webデザイナーは、Webサイトのデザインや広告の画像を作って、それが正しく動くように設定をするのが仕事なんだよニャン。
先生
そのためには、デザインスキルが必要なんだ。Webデザイナーが作ったWebページを見て、買いたいと思ってもらうために、魅力的な商品やサービスに見えるデザインスキルを鍛えることが必要なんだ。
デザイニャー
Webデザイナーとしてやっていくためには、Photoshopのスキルが必要なんだよニャン。
先生
確かにPhotoshopを使えるスキルは必要だけれど、それよりも大事なのはデザインスキルなんだ。
デザイニャー
そしてデザインスキルに加えて、HTMLやCSSといったコーディングスキルも、Webデザイナーには求められるんだよニャン。
先生
コーディングまでできるようになると、Webデザイナーとして困ることもほとんどなく食べていくことができるんだ。
デザイニャー
次の授業でWebデザインのスキルについて、詳しいお話を聞いたニャン。
>>【独学で学びたい方必見】Webデザインに必要な11個のスキルを解説
お給料の違い
先生
ここでは次の2つの違いについてお話ししていくよ。
・グラフィックデザイナーのお給料
・Webデザイナーのお給料
グラフィックデザイナーのお給料
デザイニャー
グラフィックデザイナーの平均年収は、勤務先によっても大きく違うこともあるけれど、大体300万円から500万円くらいなんだよニャン。
先生
大きな会社になれば年収1000万円も可能だよ。
大手でも能力やキャリア次第で年収は変わります。グラフィックデザインのスキルを磨いていったり、色々なキャリアを積み上げるほど高い年収をもらえることも可能かもしれません。
デザイニャー
グラフィックデザインのお給料については、次の授業で詳しくお話を聞いたニャン。
>>グラフィックデザイナーが年収UPする方法｜年収1000万円も可能!?
Webデザイナーのお給料
デザイニャー
対してWebデザイナーの平均年収は、300万から400万円くらいだと言われているんだニャン。
先生
WebディレクターやWebプロデューサーにまでなればもっと高い年収をもらうこともできるんだ。
デザイニャー
つまり、Webデザインの仕事の幅が広がれば年収もその分挙げられるということなんだよニャン。
先生
会社員に限らず、副業やフリーランスで働いているWewbデザイナーも、能力が高いほどWebデザイナーとしての価値が高くなって、年収も高くなるということなんだ。
デザイニャー
Webデザイナーの年収については、次の授業で詳しくお話を聞いたニャン。
>>Webデザインの平均年収｜年収1000万稼ぐこともできるかも!!
学習法の違い
デザイニャー
グラフィックデザインもWebデザインも同じデザインの仕事なんだけれど、仕事の内容は違うから、学習法は違ってくるんだよニャン。
先生
ここでは、どうやって学べば良いのか、次の2つのことについてお話ししていくよ。
・グラフィックデザインの学習法
・Webデザインの学習法
グラフィックデザインの学習法
デザイニャー
グラフィックデザインは、大学や専門学校で基礎を学ぶことが普通なんだよニャン。
先生
デザイン系の専門学校では、次のような技術を身につけられるんだ。
・広告デザイン
・色彩
・レイアウトの理論と技術
・Illustrator、Photoshop、InDesignなどの技術
先生
美大や芸大などでは、専門学校で学べることに加えて次のようなスキルを身につけることもできるんだ。
・描写力や造形力を磨くためのデッサン
・造作
・マーケティング
先生
フリーランスで仕事をしていくためには、上にも挙げたマーケティングの知識もより必要になるから、早い段階で学んでおいた方がベターなんだ。
デザイニャー
グラフィックデザインの勉強方法については、次の授業で詳しくお話を聞いたニャン。
グラフィックデザインの勉強方法3つとは?独学のポイントを詳しく解説 ・グラフィックデザイナーになりたいんだけれど、何から勉強したら良いのかわからない方。 ・グラフィックデザインの勉強にお...
Webデザインの学習法
先生
Webデザインは、独学でも身につけられるけれど、専門学校やスクールなどで学んだ方が、現場で使えるスキルを効率的に身につけられるよ。
デザイニャー
Webデザインを制作するには、PhotoshopやIllustratorなどを学ぶ必要があるんだよニャン。
先生
でもスクールの中には、ツールは使えるようになったとしても、デザイン力が身に付かなかったというところがあるみたいだから、事前に何を学べるのかを調べることが大事だから気をつけよう。
デザイニャー
コーディングやWebマーケティングなどの知識を身につけたらよりレベルの高いWebデザイナーになれるし、仕事の幅が広がりそうだニャン。
先生
通信講座やオンラインなどだったら、自分のペースで学べるし、また専門学校だったら、みっちり学習できるスクールもあるから、自分にあったところで学ぶことが大事だよ。
作成に使うソフトの違い
Adobe Illustrator icon by Icons8Adobe Photoshop icon by Icons8
デザイニャー
デザイン制作で使われるソフトについてもう少し深く知りたいんだニャン。
先生
ここでは次の2つのことについてお話しして行くよ。
・グラフィクデザインで使うソフト
・Webデザインで使うソフト
グラフィクデザインで使うソフト
デザイニャー
グラフィックデザインをする時に使うソフトは主に次のソフトを使うんだよニャン。
・Illustrator
・InDesign
・Photoshop
先生
Illustratorで描いたデータは、ベクター形式で扱われるから、拡大したり縮小したりしても画像が劣化しないんだ。
ベクター形式とは
線や点、テキストなどの情報を数値として保持する形式のことをベクター形式といいます。ラスター形式と違って、写真の微妙な色の差を扱うのには向いていませんが、サイズの変更に関しては強いのがベクター形式の特徴です。
先生
それに、1枚で作れる名刺やポスター、2〜3ページくらいのパンフレットだったら、Illustratorだけでも間に合うけれど、何ページも続く冊子などだったら、InDesognというソフトを使った方が効率が上がるよ。
デザイニャー
Photoshopは、画像の加工や修正によく使われているけれど、それだけではなく、バナーやサムネイルなどのWebサイトで表示されているグラフィックデザインを作る時にも使われているんだ。
先生
Illustratorがベクター形式なのに対して、Photoshopはラスター形式のデータだから、Webサイトのデザインで使われるデザインとの相性が良いんだ。ラスター形式については、次の章で紹介するね。
Webデザインで使うソフト
デザイニャー
Webデザインを作る時には、Photoshopを使うことが多いんだよニャン。
先生
Photoshopでページデザインをしながら、写真の加工などもPhotoshop内でできるから、スムーズに作業することができるんだ。
デザイニャー
それに、Webサイトが表示されるディスプレイ自体がラスター形式で表現されるから、ラスター形式で画像を厚角Photoshopを使った方が何かと便利なんだニャン。
ラスター形式とは
色のついた点が集まった形で表現する形式のことをラスター形式と言います。写真などによくあるきめ細かいグラデーションや微妙な色合いの変化を表現するのには、ラスター形式が向いています。拡大縮小すると画像がどんどん荒くなってしまうので注意が必要ですが、ベクター形式よりもデータの処理の負荷が少ないのがラスター形式の特長です。
先生
デザインを作った後のコーディングの時のことも考慮すると、Webサイトやバナー制作に使うのであれば、Photoshopの方が向いているよ。
デザイニャー
そして最近ではAdobe XDを使っている人も増えてきているんだニャン。
先生
Adobe XDは、UIのデザインに特化されていて、プロトタイピング（スクロールアニメーションホバーの試作モデルの検証）やリピートグリッドを使えるUIデザインに向いている機能を持っているのがAdobe XDの特長なんだ。
デザイニャー
それに、Adobe XDでは、共同作業ができるんだニャン。
先生
クラウドドキュメントとして保存しておけば、自分以外のデザイナーやエンジニアとリアルタイムに作業することができるんだ。
デザイニャー
Web制作では色々なポジションの人たちが関わっているけれど、そういったことにおいては、本当に便利なツールなんだニャン。
先生
Adobe社以外のUIデザインツールには他にも色々あって、SketchやFigma、StudioやInVisionなど、所属している会社や環境によって使うツールが変わることもあるんだ。
デザイニャー
最近ではさらに動画を作ったり動画を編集することも求められることが増えてきているから、Premiere ProやAfter Effectsという動画編集ツールが使えると、Webデザイナーの仕事の幅が広がって諜報がられるようになるだよニャン。
色の違い
デザイニャー
作るデザインを表示するのが紙などの印刷物なのか、それともパソコンやスマホなどのモニター上なのかによって、制作する時の色の設定も違ってくるんだよニャン。
先生
それは、印刷とモニターとでは色の表現方法が違うからなんだ。
デザイニャー
適切な設定ができていないと、トラブルが発生することもあるから注意しないといけないんだニャン。
先生
ここでは次の2つのことについてお話ししてくよ。
・グラフィックデザインの色の表現方法
・Webデザインの色の表現方法
デザイニャー
次の授業で色の組み合わせについてのお悩みが解決できる方法について、詳しくお話を聞いたニャン。
>>おしゃれなデザインの色の組み合わせが簡単にできるようになる7つのコツ
グラフィックデザインの色の表現方法
デザイニャー
グラフィックデザインでは必ずCMYKで色を作成するんだよニャン。
先生
CMYKの意味は次の通りだよ。
・Cyan（シアン）
・Magenta（マゼンタ）
・Yellow（イエロー）
・Key plate（キー・プレート）
デザイニャー
これらを混ぜて色を表現する方法で、減法混色と呼ばれていて、混ぜればなぜるほど色が暗くなるんだよニャン。
先生
インクを使った印刷物などの表示に使われているから、グラフィックデザインを行うときはCMYKで必ず色を使うんだ。
デザイニャー
ただ、CMYKはRGBと比べて色の幅が狭くて、金色や銀色、蛍光色などは作ることができないんだよニャン。
先生
そんな時には特色を使う方法があるんだ。
特色とは
特色（DIC）というのは、印刷物の色を作る時にCMYKを混ぜてできない色を表現するためにあらかじめ調合されたインクのことです。
CMYKの印刷では、制作中にモニターに映っている色と現物での色の違いが出てしまうことがあります。この色にしたいという色がある場合は、特色を使った方が、思った通りの色で印刷することができます。
先生
ただ、特色を使うとほとんどの印刷会社では追加料金を取られることになるので、特色を使う前にはその費用についてクライアントと相談することが大切だよ。
Webデザインの色の表現方法
デザイニャー
Webデザインで色を作る時には必ずRGBで作るんだよニャン。
先生
RGBの意味は次の通りだよ。
・Red（赤）
・Green（緑）
・Blue（青）
デザイニャー
この色の三原色を混ぜて色を作るもので、加法混色と呼ばれているんだよニャン。
先生
CMYKとは逆に、混ぜれば混ぜただけ色が明るくなるもので、液晶ディスプレイなどのテレビやコンピューターに表示されているんだ。
デザイニャー
だからWebデザインをする時には必ずRGBを使うんだニャン。
先生
Adobe XDをつかう場合は、XDはUIデザインに特化されているツールで、RGBしか使えないから設定する必要はないんだ。
デザイニャー
これは、間違いも出なくて便利だニャン。
先生
Webデザインの大変なところは、自分のパソコンで作ったものではこの色だと思っていても、別の人のパソコン画面ではそれとは違った色で表示されるところなんだ。
デザイニャー
えっ、これはどういうことなのかニャン?
先生
液晶モニターの性能や発光する方法が異なっているために起こるものだから、自分ではコントロールできないんだ。
デザイニャー
自分のパソコン画面でどんなに完璧にできたと思っても、見る人全員のパソコン画面にそのままの色を見せることができないのは、Webデザインの難しいところなんだニャン。
先生
また、RGBは、CMYKと比べて色の表現領域が広いから、RGBで作ったものをCMYKに変換すると、CMYKで表現できる最も近い色に変換されて、くすんだ感じの色に変わるんだ。
デザイニャー
一度RGBからCMYKに変換してしまったデータは、元のRGBで作った状態には戻せないということだニャン。
先生
だからその際には、データの取り扱いに注意することが必要なんだ。
サイズの違い
先生
ここではサイズの違いについて、次の2つのことを話していくね。
・グラフィックデザインのサイズ
・Webデザインのサイズ
グラフィックデザインのサイズ
先生
グラフィックデザインは、ポスターやパンフレットなどを表現できる範囲が決まっているんだ。
デザイニャー
紙に印刷するから、どうしても縦横の収まりを気にしながらデザインを作っていくことが必要だよニャン。
先生
文章量が少なかったら、イラストや画像を大きめに載せてうまくスペースを調整するのもアリだけれど、文章量が多い場合は、フォントサイズやイラストのサイズのことも考えながらデザインをしていかなければならないんだ。
デザイニャー
ページが続く冊子になると大変なんだ。ページごとに文章量が違う中で、全体のルールは合わせないといけないから、フォントのサイズも統一していかなければいけないのは当然だよニャン。
先生
だから、ルールを明確にして情報ごとのまとまりを考えながら、各ページの構成をする段階から考えながら作っていくことが大事なんだ。
Webデザインのサイズ
デザイニャー
Webデザインはグラフィックデザインと違って、表示する範囲に制限がないんだよニャン。
先生
横幅は媒体ごとに決まっているけれど、横幅はスクロールすることができるから、どこまででも情報を載せられるんだ。
デザイニャー
横の収まりだけ気をつけて、縦はちょうどいいところでカットすればいいから、やりやすいんだニャン。
先生
ただ、デバイスによってサイズが変わってくるから、レイアウトを変えたスマホ用のデザインを、パソコン用のとは別に作る必要があるし、改行位置が変わることまで考えながら、作業しないといけないんだ。
デザイニャー
そういうことを考えながらデザインを作らないと、コーダーさんがコーディングする時に困ってしまうことになるから、そのことも考慮しながらデザインする必要があるニャン。
必要な解像度の違い
デザイニャー
印刷物であるかモニターであるかによって、解像度も違うんだよニャン。
先生
ラスター形式なのかベクター形式なのかによっても、解像度は違ってくるよ。ここでは次の2つのことについてお話ししていくね。
・グラフィックデザインの解像度と設定方法
・Webデザインの解像度と設定方法
グラフィックデザインの解像度と設定方法
デザイニャー
グラフィックデザインは、これという数値が明確に決まっているわけではないけれど、大体300〜400ppiの解像度で作成するんだよニャン。
先生
推奨されている解像度は350ppiなんだ。特に理由がなかったら、350ppiに設定しておくといいよ。
グラフィックデザインも、解像度が低いと画像がぼやけてしまします。
デザイニャー
グラフィックデザインは、印刷するから、何度も読み込みをする必要がないし、解像度が高くても読み込みに時間がかかることはないんだよニャン。
先生
でも、解像度が高すぎると、印刷機のスペックによってはそこまで鮮明に印刷できないこともあるし、出力に時間がかかってしまうこともあるから、適切な解像度で作成することが大切だよ。
Webデザインの解像度と設定方法
デザイニャー
Webデザインの解像度は基本的に72ppiなんだよニャン。
先生
そうだね。Webサイトを開くたびに、画像やテキストの読み込みをするから、あまり高い解像度の画像を表示させたりしたら、データが重くて読み込みに時間がかかってしまうんだ。
デザイニャー
そうなるとユーザーはストレス感じちゃうんだよニャン。
先生
かといって、あまり低すぎても画像が汚く見えてしまって良くないけれど、72ppiだったら、ちょうどいいと言われているんだ。
アクションがあるかどうか
先生
グラフィックデザインとWebデザインにおいてアクションがあるかどうかという違いがあるんだ。ここでは次の2つのことについて詳しくお話ししていくよ。
・グラフィックデザインのアクション
・Webデザインのアクション
グラフィックデザインのアクション
デザイニャー
グラフィックデザインの中でも、印刷物の場合は、ページをめくるようなアクションはあるけれど、Webサイトのように、ボタンをクリックしたりスクロールするようなアクションはないよニャン。
先生
印刷物には、直接的にボタンなどを配置できないから、ユーザーにWebで検索してもらうとか、お問合せをしてもらうというグラフィックデザインの作品から離れた場所でのアクションを示唆することが必要なんだ。
デザイニャー
その点Webサイトなどに表示されるバナーや動画のサムネイルの場合は、それ自体がユーザーにその先のページに移動いてもらうためのボタンのような役割を果たしているんだニャン。
先生
画像のデザインによってクリック率が左右されるから、用途やターゲットに合わせて、ユーザーがクリックしたくなるような配色やレイアウト、キャッチコピーなどを工夫することが必要なんだ。
Webデザインのアクション
デザイニャー
さっきお話を聞いたけど、Webサイトでは、スクロールする、ボタンをクリックする、それからお問合せフォームを使ってメッセージを送信するというアクションをユーザーするんだよニャン。
先生
そうだね。Webサイトの訪問してくれた人のうち、購入やお問い合わせなど、そのWebサイトの最終成果まで到達した件数（コンバージョンCV）や割合（コンバージョン率/CVR）をそのWebサイトの指標にすることがあるんだ。
デザイニャー
いくらデザインやその内容が良かったとしても、ページが重くて操作しにくかったりして、使いにくいとユーザーが感じるサイトだったら、コンバージョンに至る途中で離脱してしまうことになるんだよニャン。
先生
だから、そう言ったことにならずに、快適にユーザーが使うことができるWebサイトを目指しながらデザインしていくことが大切なんだ。
表現方法の自由度の違い
先生
グラフィックデザイナーでも、Webデザイナーでも、求められるデザインをすることが大事なんだけれど、制作する際に、それぞれ制約が異なることがあるんだ。
デザイニャー
それを知らないで制作していると、実際に形にするときにうまくいかないこともあるから注意た必要だというワケなんだニャン。
先生
そういうわけで、ここでは次の2つのことについてお話していくよ。
・グラフィックデザインの表現の自由度
・Webデザインの表現の自由度
グラフィックデザインの表現の自由度
デザイニャー
グラフィックデザインは、紙で表示するもののため、動画や動き、音楽をつけることはできないんだニャン。
先生
そうだね。色の表現でも説明したとおり、特色を使わないと表現できないということもあったりするんだ。
デザイニャー
そういうわけで表現の幅が狭くなるように感じるんだニャン。
先生
でもその代わり、グラフィックデザインではコーディングをする必要がないから、静的表現の面では比較的自由にデザインを作成することができるんだ。
デザイニャー
同じ要素の繰り返しなど、ある程度明確なルールを持たせなければいけないWebデザインと比べて、グラフィックデザインの場合は、わざとレイアウトを崩すことで、おしゃれに見えることもあるニャン。
先生
だから、Webデザインと比べてグラフィックデザインでは、そういう面を気にしないといけないということは少ないんだ。
Webデザインの表現の自由度
デザイニャー
Webデザインでは、コーディングで再現できないデザインというのは、基本的にNGなんだよニャン。
先生
そうなんだ。だから、どこまでの表現ができるのかということを知っておくことが必要なんだ。それに、ブラウザごとに効くCSSと効かないCSSがあったりするから、気にしておいた方が良いよ。
デザイニャー
それに、デバイス上で使えるフォントにも制限があったりするから、フォントを選ぶことから気をつける必要があるんだよニャン。
先生
それでもどうしてもWebで表示できないフォントを使いたいという場合は、画像化して表示するという方法もありはするけれど、SEO的な面を考えると、できるだけテキストはテキストとして表現することが望ましいから、あまり多用するのは避けた方が良いよ。
デザイニャー
Webデザインには細かい制約が多いけれど、良い点を言えば、ブラウザ上で音楽や動画を流すことができるんだよニャン。
先生
そうだね。それにJavaScriptを使ったら、背景を動かすことができたり、画像を切り替えたりするなど色々な表現をすることができるんだ。
デザイニャー
デザインを作ったらそれで完成ではなくて、その後ユーザーの操作や使い方を含めて一つのデザインが成り立つということなんだニャン。
デザイン完成後の違い
デザイニャー
デザインを作成した後の工程は、グラフィックデザインとWebデザインでは全然違うんだよニャン。
先生
ここがグラフィックデザインとWebデザインの最大の違いになるんだ。ここでは、次の2つのことについてお話しするね。
・グラフィックデザインの完成後
・Webデザインの完成後
グラフィックデザインの完成後
先生
グラフィックデザイン、つまり印刷物の制作手順は次の通りだよ。
①ワイヤーフレーム（構成案）
②デザイン
③印刷
④完成
デザイニャー
完成した後に修正が出たら困難なことになるんだよニャン。
先生
そうなんだ。だから印刷会社に入稿する前に、誤字脱字などのおかしなところがないかよく確認しておこう。
Webデザインの完成後
先生
Webデザインの制作手順は次の通りだよ。
①ワイヤーフレーム
②デザイン
③コーディング
④システム
⑤完成
デザイニャー
Webでは、デザインを作った後にコーディングをするんだよニャン。
先生
だから、デザインが完成して終わりじゃなくて、他の工程が続くんだ。
デザイニャー
Webサイトって随時更新されていくものだから、後から新しい項目を増やして修正することがあるんだよニャン。
先生
誰かが作ったデザインをあとで別のデザイナーが修正することもよくあるから、どこを修正すればいいのかがわかりやすいように、PSDデータのレイヤーは常に整理整頓しておこう。
納品手順の違い
デザイニャー
デザインを作成して納品する前に、何をすればいいのかを知りたいニャン。
先生
ここでは作品が完成した後の、次のことについてお話ししていくね。
・グラフィックデザインの納品手順
・Webデザインの納品手順
グラフィックデザインの納品手順
デザイニャー
デザインが完成したら、納品方法にかかわらず、テキストをアウトライン化するようにしよう。
アウトライン化とは
アウトライン化とは、テキストを図形の情報に変換して、印刷をする時にフォントが変わらないようにすることです。
デザイニャー
アウトライン化したら、印刷してクライアントにデザインや色味を確認してもらわないといけないニャン。
先生
クライアントに確認してもらってOKがもらえれば、納品完了だよ。修正を依頼されることもあるから、その時は修正してから提出しよう。
Webデザインの納品手順
デザイニャー
デザインが完成したら、作ったデザインに問題がないかをクライアントに確認してもらうんだよニャン。
先生
デザインとコーディングを一人でする場合は、そのままコーディングをして、クライアントに再度確認してもらうことが必要なんだ。
デザイニャー
その一方、別の人がコーディングをする場合は、クライアントに提出する前に完成品を自分で確認する必要があるんだよニャン。
先生
もし何かおかしい部分があったら、コーダーにおかしい点を直してもらう必要があるからね。デザインとコーディングの両方が完成してから、クライアントに提出するんだ。
グラフィックデザインとWebデザインを学ぶならWebデザインがおすすめ
デザイニャー
仕事の幅を広げたかったり、予算や時間に余裕があるんだったら、両方学びたいけれど、どちらか一つに絞るならどちらを選んだ方がいいのか迷っているんだよニャン。
先生
その場合はWebデザインの方がおすすめだよ。
デザイニャー
やっぱり仕事の数と将来性が決めてなのかニャン。
先生
デジタルハリウッドというオンラインスクールでは、「グラフィック経験者プラン」というコースがあって、グラフィックデザインやDTPデザインを経験していて、Webデザイナーに転向したいと思っている方におすすめなんだ。
デザイニャー
やっぱりWebデザイナーに転向したいと思っている方が増えてきているからなんだニャン。
先生
紙媒体のグラフィックデザインの仕事は、ペーパーレス化ば進んでいっているから減少傾向にあるからね。
グラフィックデザイナーからWebデザイナーになるには
デザイニャー
ここまでグラフィックデザイナーとWebデザイナーの違いについて、お話を聞いてきたニャン。
先生
では、グラフィックデザイナーからWebデザイナーになるには次の3つのステップを踏んだらいいよ。
①Webデザインを学ぶ
②ポートフォリオを作る
③転職活動をする
①Webデザインを学ぶ
先生
Webデザインを学ぶには、まずは基礎知識からおさえておこう。
デザイニャー
Webデザインの仕事を自分一人で全部やるには、HTMLやCSSを学ぶことも大切なんだよニャン。
先生
でもWebデザイナーになるためには、どんなデザインが求められるのか、どんな表現方法があるのかといった、デザインの基礎を学んで、実際にデザインができるようになることが大切なんだ。
デザイニャー
Webデザインを学ぶには、前にもお話ししてもらったようにスクールでも学べるし、独学でも学べるんだよニャン。
先生
効率的に短い時間で学びたかったり、一人では勉強を続けるモチベーションが保てるかわからないと不安を感じている方はもちろん、スクールで学ぶことがおすすめだよ。
デザイニャー
現場でWebデザイナーとして活躍するために必要なこと学ぶにはやっぱりスクールが良いということなんだニャン。
②ポートフォリオを作る
先生
Webデザインの基礎を身につけたら、ポートフォリオを作成しよう。
ポートフォリオとは
ポートフォリオとは、自分が作れる作品をアピールする作品集のことです。あなたの実力をポートフォリオで証明しましょう。
デザイニャー
ポートフォリオには、紙とWebの2種類があって、どちらも用意しておくことがおすすめなんだよニャン。
Webデザイナーの転職活動の時には、サイト上の動きを確認できるWebのポートフォリオを求められることがおいけれど、対面での面接の時には、インターネットに繋がらずに見てもらえなということもありますが、紙のポートフォリオを用意しておくと、冷静に対応できます。
③転職活動をする
先生
Webデザインの基礎を勉強して、ポートフォリオが完成したら、転職活動をしよう。
デザイニャー
Webデザインの求人を見つけるには、転職サイトに登録しておくののも良いけれど、一人で転職活動を進めるのは不安だニャン。
先生
そんな時は、転職エージェントを利用するのもおすすめだよ。
転職エージェントとは
転職エージェントとは、キャリアカウンセリングを受けられたり、自分に合った求人を厳選してくれるサービスです。ポートフォリオの指導をしてもらえることもありますので、ぜひ登録してみてください。
先生
おすすめのエージェントは次の2つだよ。
マイナビクリエイター
マイナビが運営していてポートフォリオ指導があります。
doda
Webデザイナー以外のデザインの仕事も紹介されています。
フリーランスになるにはどうしたらいい?
先生
先生が一番おすすめなのは、グラフィックデザインも少しできるWebデザイナーになることなんだ。
デザイニャー
そうなんだ。お店を開く時にWebサイトを作りたいというお客さんがよくいるんだけれど、その際にご案内のチラシも作れますよというと、お客様から喜ばれるし、収入もその分アップするんだよニャン。
先生
ブティックならWebサイトと手提げ袋、カフェならWebサイトとメニュー表やコースターといったように、Webサイトと紙のデザインをセットにして提案できるようにしておいたら、仕事を受注しやすくなるんだ。
デザイニャー
ちょっとした気遣いができると仕事が集まりやすくなるというわけなんだニャン。
Webデザイン・グラフィックデザインの両方が活かせる共通のスキル
先生
Web出会いんとグラフィックデザインの両方が活かせる共通のスキルは、Webサイトのパーツ制作で、例えば次のようなものがあるよ。
・アイコン
・ボタン
・イラスト
・地図
・チャート
・タイトル画像
・アイキャッチ画像など
先生
このようなWebデザインとグラフィックデザインの両方のスキルを活かせるデザイナーのことをWebグラフィックデザイナーと言うんだ。
フリーランスの初心者Webグラフィックデザインのお仕事3つ
先生
フリーランスになりたてのWebグラフィックデザイナーにおすすめの仕事は次の3つなんだ。
・ロゴデザイン
・画像制作
・アイコンやピクトグラム
先生
これらの仕事はクラウドソーシングサービスで実際によく募集されているお仕事だから、登録すればいつでも閲覧することができるよ。
デザイニャー
登録無料だから、登録してみてみるとモチベーションがアップしそうだニャン。
まとめ
先生
この授業では次のようなことについてお話ししてきたよ。
・グラフィックデザインとWebデザインとは
・グラフィックデザインの仕事
・Webデザインの仕事
・グラフィックデザインとWebデザインの違い16個
・求められるスキルの違い
・お給料の違い
・学習法の違い
・作成に使うソフトの違い
・色の違い
・サイズの違い
・解像度の違い
・情報表示の範囲の違い
・アクションがあるかどうか
・閲覧者の違い
・出力環境の違い
・触感があるかないか
・ストーリーとランディング
・表現方法の自由度の違い
・デザイン完成後の違い
・納品手順の違い
・グラフィックデザイナーからWebデザイナーになるには
①Webデザインを学ぶ
②ポートフォリオを作る
③転職活動をする
・doda
・フリーランスになるにはどうしたらいい?
・Webデザイン・グラフィックデザインの両方が活かせる共通のスキル
・フリーランスの初心者Webグラフィックデザインのお仕事3つ
私たちは頑張るあなたを応援しています。
