（出典：leonardo.aiより）
●【実は違う】Webデザインvs
グラフィックデザインのお仕事
ごきげんよう
癒し系Webデザイン×イラストレーター
レイです。
知らなくても困らないけど
知っているとWebの世界が楽しくなるよ
シリーズ♪（第二弾）
ご存じでしょうか？子供たちの
可愛いアイドル、サンリオさまのキキとララ
出典：サンリオ公式HPより
この２人はそっくりな双子ちゃんだけど
特技やキャクタ―が違うのね。
かわゆい
ピンクの髪で女の子はララちゃん。
絵や詩を書いたりすることが
大好きでちょっぴり泣き虫。
水色の髪で男の子はキキくん。
発明が得意で好奇心旺盛。
背中の星で空を飛ぶことができます。
私の小学生時代、文房具グッズは、みーんな
キキ＆ララ一色
（歳がバレる）可愛い～
出典：フェリシモ公式HP(キキララちゃんのコレクション2018年）より
Webデザイナーと
グラフィックデザイナーのお仕事、
一般の人から見ると 
サンリオの双子ちゃんのように
そっくりに見えちゃう世界ですが
実は、違います
（笑）
同じだと思ってた・・
一般の方ほとんどコレ
ここでは、パソコンが苦手な
起業はじめて女子さんに
めっちゃ分かりやすいように
超カンタンな説明をさせて頂きますね
1. Webデザインとグラフィック
デザインの違いとは？
Webデザイン
インターネット上でパソコンや携帯から
見られるサイトやバナーのデザイン。
グラフィックデザイン
印刷物やロゴ、ポスターなど、
目に見える形でデザインするもの。
2. 作成に使用する主なソフトは？
2.1 Webデザイン
PhotoshopやAdobe XD、
Figmaが主に使用されます。
2.2 グラフィックデザイン
IllustratorやInDesign、
Photoshopがよく使われます。
3. 色の表現方法
3.1 Webデザイン
RGBカラー（光の三原色）を使用します。
3.2 グラフィックデザイン
CMYKカラー（印刷の四原色）を使用します。
出典：オリジナルパッケージ制作「ハコつく」さまより
4. 必要な解像度
4.1 Webデザイン
通常、72dpi（スクリーン向け）で作成します。
4.2 グラフィックデザイン
通常、300dpi（印刷向け）で作成します。
5. 情報を表示できる範囲
5.1 Webデザイン
デバイスの画面サイズに依存し、
レスポンシブデザインが必要です。
※下で説明あり
5.2 グラフィックデザイン
印刷物のサイズや紙の大きさに
依存します。
6. 表現方法の自由度
6.1 Webデザイン
ユーザーの操作や動きを考慮し、
インタラクティブな表現が可能です。
（※インタラクティブ＝相互作用。対話を
行うように操作を進めていくという形態を指す）
6.2 グラフィックデザイン
静的。紙や画面上で完結する
表現が中心です。
7. デザイン完成後
7.1 Webデザイン
コーディングや開発に進み、
Web上で公開されます。
7.2 グラフィックデザイン
印刷所に送られ、
ポスターやチラシなどが形になります。
8. 納品手順
8.1 Webデザイン
デジタルファイルとして納品し、
公開します。
8.2 グラフィックデザイン
印刷物のデータを納品し、
印刷して完成します。
9. チェックリスト
9.1 Webデザイン
レスポンシブデザイン、
リンク確認、表示速度など。
■レスポンシブデザインとは？
デバイスサイズにあわせて表示を変更する手法
パソコン、スマートフォン、タブレットなど、
デバイスの種類に応じた表示を設定すること。
デバイスの画面サイズに依存しない
Webサイトを構築します。
■表示速度とは？
URLにアクセスしてからブラウザで
表示させるまでの時間のこと。
9.2 グラフィックデザイン
色校正、解像度確認、文字のズレなど。
■色校正とは？
色校正は、出来上がった印刷物の色合いが、
イメージ通りに再現できているかを
本番印刷前に確認することです。
家のプリンタで出力したものと
同じ色のものがそのまま印刷されてくると
思いがちですが、印刷においても、
使うプリンタや印刷機の違い、紙の違い、
インキの使い方の違いで驚くほど
色が変わってくるので注意が必要です。
■解像度確認とは？
画像解像度は、デジタル画像の
細部の鮮明さを示す指標です
解像度が高い画像は、
きめ細かな表現が特徴で
品質の高い印刷となりやすいです。
逆に、解像度が低い場合は画像が
粗く見えやすいです。
印刷物として出力する場合は、
適切な解像度を選ぶ必要があります。
10. まとめ
Webデザインは、インタラクティブで
オンライン、インターネットの世界。
（※インタラクティブ＝相互作用。対話を
行うように操作を進めていくという形態を指す）
グラフィックデザインは、静止画で印刷物、
そう、紙媒体の世界。
それぞれが、
用途に合ったソフトや解像度を使用、
異なる表現方法が求められます。
芸能界でも、歌手と俳優とモデルって
それぞれ求められるスキルが違うよね
そんな感じ～
実は、似てるようで似ていない（！）
細かーいデザインの世界のお仕事
なんとなく、イメージが
伝わりましたでしょうか？（笑）
参考になれば幸いです。
（出典：leonardo.aiより）
デザインで困っていることは
どうぞお気軽にご相談下さいね
優しいナースがサポートします
★⋆⸜知らなくても困らないけど知っていると⸝⋆★
Webの世界が楽しくなるよ♪⸝⋆★シリーズ第一弾⸝⋆★
そもそもWebって何？！人気記事です♪
私が大好きで良く使う囲み枠３選♪
私のデザインメニューです
しっかりヒアリング×カウンセリング致します
▼直接メール送れます
お気軽にどうぞ
*⸜クリックするとフォームが出ます⸝*.
プレゼンスをサポートします。
★⋆⸜起業はじめてさんのWebデザインガイド⸝⋆★
癒し系webデザイン×イラストレーター
レイ
★⋆⸜お願い⸝⋆★
当サイトの内容やテキスト（ブログ）
画像や文章の無断転写、無断使用を
固く禁じます。