ブログ

グラフィックデザインとウェブデザインの違い

2019.11.12 : Semba Hideki
Design

はじめに

デザインと一言で言ってもそれの意味するところは幅広く、ひとそれぞれでしょう。ウェブデザイン、グラフィックデザイン、建築デザイン、サイン…

その中でも今回は比較されることの多いグラフィックデザインとウェブデザインの違いについて書いてみようと思います。

グラフィックデザインとウェブデザインとの違いとは、ズバリなんでしょう。
グラフィックデザインとは主に紙などの手に取れるものに印刷された状態で見られるデザインのこと。ウェブデザインとは一般にはPCやモバイル端末などの画面の中で閲覧するデザインのことというのが一般的な認識でしょうか。

グラフィックデザイナーかウェブデザイナーか

もしあなたがウェブサイトを作ろうと考える場合、グラフィックデザイナーに依頼しますか?それともウェブデザイナーを探しますか?

その時の状況にもよるとは思いますが、もしその時チラシや名刺などのデザインを依頼して繋がりのあるグラフィックデザイナーが既にいてそのデザインがとても気に入っている場合、手っ取り早くそのグラフィックデザイナーにウェブデザインもお願いしよう、と思う方もおられるかもしれません。

しかしちょっと待ってください。その考えはちょっと間違っているかもしれません。

グラフィックデザインとウェブデザインの違い

グラフィックデザインとウェブデザイン、同じ「デザイン」という呼び方で、形や情報を整える、という意味では同じように感じられるかもしれませんが、実は両者には決定的な違いがあります。

グラフィックデザインは紙に印刷された状態で、それを見る、もしくは書き込んだり折ったりちぎったりということはできますが、それ自体を操作することはできません。逆にウェブデザインはそれ自体を押したり引っ張ったり、ボタンを押して次の画面に移動したり、それ自体を操作することができます。

それ自体を操作することができるかどうか

これがグラフィックデザインとウェブデザインの決定的な違いなのです。
グラフィックデザインとウェブデザイン、目で見える形は同じように感じられますが、この一点で両者には決定的な違いが出てくるのです。

ウェブデザイン≒ゲーム画面設計?

これはあくまでも個人的な意見ですが、両者の違いを説明する際に私はよく「ウェブデザインはゲームの画面を設計するのに似ている」と説明しています。
ゲームの画面には様々な情報を含まれます。特典やメッセージ、ストーリーの説明やユーザーのステータスなどの情報、操作のためのボタンなど、様々の情報が一つの画面に収まっています。押すことができるボタンは押すことができるようなデザインと配置に、メッセージは読みやすい位置に読みやすい大きさで…

ウェブデザインの場合というと、メインビジュアルには会社のメッセージや意味を持たせたり、幅の狭い限られてスペースに操作のためのボタンを配置して、情報の流れの中でストーリーを説明する。まさにゲームの画面設計と同じではないでしょうか。

ウェブデザインはウェブデザイナーに依頼すべし

グラフィックデザイナーがデザインしたウェブサイトの場合、しばしば操作性に問題があったり辻褄が合わなかったり、視認性が悪かったりといった問題が発生します。それはそうです、グラフィックデザイナーそもそもユーザーが操作する前提でのデザインはしてきていないのです。考えてみれば当たり前の話ですね。

同じ「デザイン」と呼ばれるものだからと他のデザイン物のついでにグラフィックデザイナーにウェブデザインも依頼すると、見た目はそれっぽいけれど効果の出ないホームページが出来上がる可能性が高くなります。そこは餅は餅屋、専門的な知識と経験を持ったウェブデザイナーに依頼するのが安心でしょう。

あなたが企業のウェブ担当者でもし既にグラフィックデザイナーと契約をしていて、そのデザインを活かしたウェブ展開をしたい場合は、ウェブデザイナーにしっかりそのことを伝えた上でサイト設計をしてもらい、グラフィックデザイナーには全体の監修やトンマナの管理、キービジュアルの作成を依頼するのが正解です。

もしあなたがグラフィックデザイナーでクライアントからウェブサイトの構築を依頼された場合、腕のいい信頼のできるウェブデザイナーを探して協力してもらうのが良いでしょう。

株式会社ナナサンではグラフィックデザイナーとの連携の実績も多数ありますので、上記のような案件にも柔軟に対応させていただきます。
どのようにウェブサイトを構築するかお困りのウェブ担当者様も、ウェブサイト構築の相談をされてお悩みのグラフィックデザイナー様もお気軽にお電話(0899614166)またはお問い合せフォームからお問い合わせください。

アーカイブ

資料ダウンロード 制作依頼・ご相談
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談