グラフィックデザインとWEBデザインの違い【5つのポイント】

webデザイン

プログラミングは無理だけど、見た目のWEBデザインだけならできるかも・・・
そんなふうに考えるグラフィックデザイナーさん、いると思います。
イラレ、フォトショを使ってデザインする点は同じなのですが、グラフィックデザインとWEBデザインは全く違うものと思ってください。

WEBデザイナーである筆者は、元々グラフィックデザイナーでしたので、なぜ全く違うのかをわかりやすく説明ができると思います。

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

最初にデザイン提案を行う際は、グラフィックと同じくAdobe IllustratorやPhotoshopを使ってデザインをしますが、グラフィックデザインとWEBデザインとでは大きく異なります。

見た目のデザインのみを請け負う場合もありますが、現在のWEB制作では装飾やレイアウトをCSSを使ってデザインしますので、実際にHTMLやCSSを使ってWEBページをコーディングするまでがWEBデザイナーの役割となることが多いです。

HTMLコーディングができないとしても、以下の5つのポイントはグラフィックデザインとWEBデザインの違いについて最低限必要な知識ですので、覚えておきましょう。

最低限覚えておくべき5ポイント

1.CMYKとRGB【紙とモニター】

グラフィックでは必ずCMYKですが、WEB(モニタ)はRGB。
グラフィックでは色校まで出してしっかり色合わせをしますが、WEBの場合は、各デバイスのモニター(ディスプレイ)によって色が変わるので厳密に調整できません。WindowsかMacか、iphoneかAndroid端末か、またどのメーカーの端末か等々。閲覧環境によってかなり色が変わります。

色比較

左:iphone 右:Android端末 で同じ画像を比較

サンプルの比較画像は本当にこのくらい差があり調整していません。Android端末は機種によってホワイトバランスの調整などをしないとこんな色になってしまいます。
じゃあどうするかというと、人それそれだと思います。私の場合は、パソコンはWindowsとMac、両方見ながら調整。スマートフォンはシェアの多いiphoneを基準にします。私たちはMacのクオリティに慣れていますが、AndroidもWindowsも作っているメーカーが多すぎて中には酷い色のディスプレイ製品も多々あるのです。

写真のRGBとCMYKについては版下制作時に変換をするので、グラフィックデザイナーは知っていると思いますが、以下の記事では色の基礎知識を掲載していますので、読んでみてくださいね。

5分でわかる!RGBからCMYKへの変換【色の基礎知識】

2.ピクセルとmm

グラフィックデザインの紙面やオブジェクトなどの単位はmm(ミリメートル)。紙面のサイズは決まっているし、フォントは自由自在に、どんなフォントでも使えます。

一方、WEBデザインの単位はpixel(ピクセル)。横幅はデバイスのサイズに合わせて可変させる作り方が主流です(レスポンシブデザインと言います)。また縦サイズも限度はありますが制限はありません。
イラレでデザイン案を制作する際も、新規ドキュメントをWebにしてピクセルでデザインします。グラフィックでは、線の太さは0.35pt以上で・・みたいな指定がありますが、WEBは少数点は無く最小値は1ピクセルです。

ピクセルプレビュー

イラレでデザインするときは表示をピクセルプレビューで

3.フォント

フォント指定

フォントは指定したところで見る人の環境によって変わってしまいます。それぞれのパソコンのデフォルトフォントを想定してデザインします。
WEBフォントといって、どんな環境で見ても同じフォントを表示させる方法もありモリサワフォントも使えますが、表示スピードがかなり遅くなるので今はおすすめできません。

BtoBサイトの場合、クライアント含めWEBサイトのユーザーはWindowsPCで閲覧する場合がほとんどです。Windowsでの見え方を優先しなければなりません。メイリオや遊ゴシックなど、Windowsのデフォルトフォントが良いと思います。

明朝体にするとしても大きめの見だしに使い、本文はゴシックにしましょう。

フォントサイズ

本文のフォントサイズは16ピクセルが推奨(現在ではemやremという単位を使います)、小さくても12ピクセル。これも環境により変わるので、グラフィックのように微調整は無意味です。

BtoCサイトの場合は、ほとんどのアクセスがスマートフォンからなので、そこまで拘っても意味がないです。WEBサイトでは、すべてが環境によって変わるということを意識してデザインしてください。

4.レイアウト

レスポンシブデザイン

レスポンシブ

レスポンシブデザインとは、 パソコン・モバイル・タブレットなど、あらゆるデバイスサイズに応じてレイアウトを切り替え、ひとつのhtmlで複数の見せ方をする制作手法です。Googleも、検索結果をスマホサイトを優先的に表示させるというモバイルファーストインデックス(MFI)を開始するとしているので、現在はSEO的にも有利なレスポンシブデザインが主流です。

BtoBサイトの場合は、PCからのアクセスが多いですが、BtoCサイトの場合は、8割以上がスマートフォンからのアクセスで占められるほど、スマホ時代になっています。どこでスマートフォンサイズに切り替わるのか、メインイメージはどうなるのか、フォントサイズはどうなるのかを想定しながらデザインします。

本文について

本文はテキストが続くので、重要部分をボールドにしたり、アンダーラインを引いたり、メリハリを付け読みやすくすることがあります。どこで段落をつけるか、改行するか、グラフィックのような細かい調整ができません

たとえば、例をあげてみますと、

パソコンで改行位置を指定してしまうと…

誤:パソコンの改行

スマホサイズではこんな事に…

誤:スマホの改行

ではどうするかというと、読みやすい文章量を見極めながら段落で改行します。

正:パソコンの改行

正:スマホの改行

5.テンプレートについて

template

ブルーのエリア=共通エリアがテンプレートです

WEBサイトでは、ロゴとナビゲーション(リンクメニュー)を配置しているヘッダー、コピーライトやサイトマップなどが入るフッター、下層ページのナビゲーションなどがはいるサイドバー(この呼び方ははっきりした規定があるわけではないです)があり、これらの全てのページに共通するエリアをテンプレートと言います

現在ではほとんどの場合、CMSを利用してWEBサイトを制作しますが、その場合は、この形が基本となります。

※ Contents Management System(コンテンツマネジメントシステム)の略。WEBサイトを構成するテキストや画像、レイアウト(テンプレート)などを一元的に保存・管理するシステムです。

CMSを使ったサイト全体のデザインを依頼されることもあるので、CMSの仕組みについても理解が必要です。たとえば、ページタイトルが並ぶ一覧ページは、手作業で入力するわけでなく、関連する全てのページを自動的に読み込む仕組みになっています。CMSで何ができるかだけでも、調べておきましょう。

まとめ:WEBサイトをデザインするなら

グラフィックデザインとWEBデザインの違いについてざっと紹介してみました。もし今後WEB案件の依頼がきたときは、思い出してみてください。

実はグラフィックデザイナーならではの強みもあります。冒頭、今はイメージ写真以外、ほぼウェブページのスタイルを指定するための言語でデザインするとお話しましたが、ランディングページの中には、チラシのようなデザインをするほうが効果的なケースも一部あります。インパクトのあるビジュアルをデザインし、画像を書き出してコーディングしますので、実は、その場合はグラフィックデザインのスキルを活かすことができます。

※ランディングページとは、商品やサービスに特化したWEBページで、リスティング広告やバナー広告などをクリックした際のリンク先になります。

グラフィックデザイナーがコーディングもできれば、プログラミングから入ったWEBデザイナーよりも有利だと思います。

そこで、おすすめするがスクールで勉強すること。もちろん独学でも可能ですが、コーディングの仕事を受けることができるようになれば、受講料は1案件で回収できてしまいます。

たとえば、TECHACADEMYはオンラインで学べるスクール。グラフィックデザイナーが勉強するのに適したコースを選んでみました。

【短期で学習したい方】

2週間でHTML/CSSを基礎から学び習得できるHTML/CSSトレーニング

2週間(40時間目安)49,000円で基礎ができるので、グラフィックデザイナーがとりあえず勉強するにはぴったり。CSSでグラデーションを作ったり、アニメーションも勉強できてすごくコスパが良いと思います。

【Webデザイナーになりたい方】

Webデザインコース

こちらのコースで本格的に勉強すれば、WEBサイトが自分で作れるようになります。受講期間内に40〜50時間目安で149,000円ですが、WEBサイト制作の仕事を受ければ1案件で充分回収できてしまうので、お得だと思います。

どうしても不安だという人は、無料体験もあります。

自宅にいながらプログラミング無料体験

Webサイトの仕組みや、HTML・CSSなどのプログラミングの基礎を学習し、簡単なWebアプリケーションを作成するという内容です。

グラフィックデザイナーがWEB制作もできれば、仕事の幅が大きく拡がりますよ。チャレンジしてみましょう!