ブログについて
グラフィックデザインと
Webデザインについて
2023.01.26
制作
こんにちは、制作部です。
皆さんはデザインについて深く考えたことはありますでしょうか？
今回は「デザインについて」基本的な部分から、デザインを扱っているとでてくる、「グラフィックデザインとWebデザイン」の違いや、それぞれの特徴についてお話ししたいと思います。
ではまず初めに...
「デザイン」という言葉自体は当たり前に聞きますが、どのようなデザインがあるのか、
デザインの定義とは？といった導入部分から入りたいと思います。
デザインとは
そもそもデザインとは何なのか、という定義についてご紹介します。
デザイン（英:design）とは、「美しさ」や「使いやすさ」などの狙いを実現するために創意工夫すること、および、その創意工夫の成果を反映させた見た目や機能のあり方のこと。多くの場合「図案」「模様」「設計」「造形」「構想」などと言い換えられる意味合いで用いられる。
簡単に言い換えればデザインとは、「使いやすさ」、いわゆる機能面でのデザインと「美しさ」、装飾面でのデザインの2つを指していると考えられます。
デザインの種類
世の中にはデザインの概念は様々な所に存在しています。その中でも「～デザイン」とよく耳にすることのある7つのデザインについてご紹介します。
・グラフィックデザイン
チラシやポスター、雑誌の広告、フライヤー、商品のパッケージなどの紙媒体です。
主に、印刷物のデザインのことを指します。
・Webデザイン
ホームページなどの様々なサイトのデザインです。
Webの見栄えだけでなく、コンセプトに沿っているか、使いやすさ、ユーザーに分かりやすいものか、等を考えてつくられたデザインです。
・UI/UXデザイン
Webサイトやアプリにおいて、ユーザーが快適に利用できるサービスの提供をするためのデザインです。UIデザインは「User Interface」、パソコン・スマートフォンの画面で操作しやすいように工夫した表示や、デザインのことを指します。UX(User experience)デザインは、ユーザーがサービスを利用する上での動線設計や、アプリケーション使い心地のよさを追求するなど、「ユーザー体験」に対するデザインのことをいいます。
・CGデザイン
CGとは、「コンピューターグラフィックス」のことをいいます。コンピューターとCGソフトを使用し、二次元や三次元のグラフィックスを作成したデザインのことです。ゲームやアニメ、映画などの映像作品にも多く使用されています。
・インテリアデザイン
インテリア用品や、部屋の内装コーディネート、設計のことをいいます。
・ファッションデザイン
衣服や、靴、バッグなど、服飾に関するアイテムの色合いや柄、サイズなどを考えて作られたデザインのことです。
・エディトリアルデザイン
雑誌や書籍、新聞などの出版物のデザインのことを指します。エディトリアルというのは、「編集」という意味を持ち、出版物の紙面のデザインや綺麗なレイアウト、読者が読みやすい内容を作成するのもデザインの1つです。
上記のデザインはほんの一例に過ぎないので、皆様もご興味あるデザインがありましたら、色々と調べてみてください！
グラフィックデザインとWebデザインの違い
では続きまして、今回の本題の「グラフィックデザインとWebデザイン」について
- 色の表現方法
- サイズ、表現の幅
- 画像解像度
の3つの観点からそれぞれの良さや特徴を踏まえてお話していきます。
まず初めに、基本的な情報として、Webデザインがホームページなどの様々なWebサイト、ブラウザ上で表示されるデザインのことです。そしてグラフィックデザインは、雑誌やチラシ、ポスターなどの印刷物のデザインのことを指します。
色の表現方法
| グラフィックデザイン | Webデザイン |
|---|---|
| CMYK（減法混色） | RGB（加法混色） |
作成されたデザインがWeb上なのか印刷物なのかで色の表示設定も変わってきます。
C（シアン）M（マゼンタ）Y（イエロー）K（キープレート）のCMYを混ぜた色で表現されるものが、グラフィックデザインです。Kはキープレートの頭文字を取ったものですが、黒色のことをいいます。色を混ぜるほど暗くなるので、印刷物などのインクを使用する際のグラフィックデザインに使用されます。
R（レッド）G（グリーン）B（ブルー）で表現できる色は、約1,677万色程あるといわれています。色を混ぜることで明るい色を表現できるので、ディスプレイ等の表示に使用されます。そのためWebデザインを作成する際は、RGBを使用しましょう。
*CMYKとRGBについての詳しい記事はこちらも一緒にご覧ください
サイズと表現の幅
| グラフィックデザイン | Webデザイン |
|---|---|
| ・A4や、ページ数の制限がある ・静的表現の幅が広い |
・画面上でスクロールできるので制限がなく、デバイスよって表示されるサイズも変わる ・動的表現の幅が広い |
グラフィックデザインは、印刷物でのデザインになるためサイズやページ数に制限があります。そのため表現できる範囲が限られてしまいます。しかし、フォントの制限や、コーディングを考えたデザインをする必要がないので、自由なこだわりを持ってデザインすることが可能です。その一方で、Webデザインは画面をスクロールすることができるので、表示範囲に制限がありません。そして、動きや音楽をつけることも可能なので、動的なデザインを表現することもできます。また、閲覧するデバイスによって、サイズが変わることがグラフィックデザインとの大きな違いだと言えます。その為、デバイスごとにレイアウトを変えた、数種類の見せ方を用意する必要があります。
画像解像度
| グラフィックデザイン | Webデザイン |
|---|---|
| 350ppi | 72ppi |
グラフィックデザインを印刷する際に推奨されている解像度は350ppiです。特に決まりがあるわけではありませんが、300～400ppiを目安に作成しましょう。Webデザインは解像度が高すぎる画像を表示させると、サイトの読み込みに時間がかかってしまいます。これはユーザーにとってストレスになるため、基本的には72ppiを選択しましょう。
まとめ
いかがでしたでしょうか。
デザインについて、グラフィックデザインとWebデザインのそれぞれの特徴など、皆様の知識の足しになりましたでしょうか。デザインを扱っていくうえで結局デザインとは何なのか、という初歩的な疑問にぶつかることがでてくると思います。今回の記事を通し、デザインの定義の捉え方、数多くのデザインの種類や職種が存在することについて理解するためのきっかけになれば幸いです。最後までお読みいただきありがとうございました！