WEBデザイン WEB制作

Webデザインと 紙媒体のデザインコンセプトの違いってあったりすると思いますか?いや、あるんだな・・という話。

投稿日:2024年8月26日 更新日:

その昔は、紙媒体のデザイナーも、WEBのデザイナーも、イラストレータが使えれば「デザイナーなら、なんだって作れるじゃん!」なんて言われて無茶振りされるような仕事ってたくさんありました。今も、まだそんな雰囲気はあったりもしますが・・・いやいやWEBデザイナーは、WEBのことばっかり考えているからWEBデザイナーなんだぜ?ってことをご案内しながら、使っている脳みそが全然違うんだよってことを皆様に知ってもらいたいと思います。

そもそも、メディア特性が全然違います。

Webの場合は、 動的でインタラクティブな表現が可能です。ユーザーが探しているものに応えるのがWEBというメディアです。
紙媒体の場合は、一次元の表現となります。順番にめくっていくというのも特徴ですが、兎に角、動かない!それが紙媒体です。

閲覧環境の違い

Web: 多様なデバイス(PC、スマホ、タブレットなど)で閲覧されますので、レスポンシブデザインが現代では必須となりました。電波が届かないところでは見れないというのも考慮しなくてはなりません。(電池切れとかも)
紙媒体: 印刷された状態を見るのが大原則です。ある紙に印刷されたものを、他の誰かに手渡したら、誰しもが同じサイズと形状で閲覧される。それが紙媒体の環境。そこには電波の悪さも電気も不要です。そう考えると紙媒体も結構良いものですね。WEB屋ですけども。

情報の更新性

Web→ある: リアルタイムでの更新が容易。常に最新の情報を提供できます。
紙媒体→まず無い: 一度印刷されると、内容の変更が困難です。

ここまで読んで、「全然別物じゃん!」と思っていただけた方は素直な方です!ありがとう。
でも、別物と言っても、考え方の根幹は同じだよね?ってところもあったりします。

 

共通するデザインコンセプトの考え方

上述のように、Webと紙媒体には大きな見られ方・役割の違いがありますが、いつの時代も、共通する普遍的なコンセプトの考え方は存在します。

1. ターゲットの明確化

誰に何を伝えたいのかを明確にする。
ターゲットの年齢、性別、興味関心などを考慮する。

2. 目的の明確化

デザインによって何を達成したいのかを明確にする。
情報伝達、ブランドイメージ向上、購買促進など、目的によってデザインは大きく変わる。

3. 情報の重みづけ

重要な情報を目立たせ、情報の優先順位をつける。

根幹は同じなんだけど、例え話にするとやっぱり別のものを考える行為なんだよということが
以下でわかります。何をデザインの力でどう達成しようとしているのか?を皆さんも想像してみてください。

お題:
ファッション好きの20代の女性に、苦くてとっつきづらいけど、美容に良い野菜ジュースを、
毎日飲んでもらえるためのデザイン・・・をWEBで!
アイデア:人気の美容系youtuber100人が苦いけど良い効果があるとインタビューで語る特集サイト。
youtuber経由で初めて知った人に対して、次に何をお知らせしてあげれば良いのか?をしっかり考え
デザインに落とし込む。(まぁ普通に考えて、自分の推してるyoutuberの記事を読みたいよね?)
これ、絶対夜寝る前にぼんやりyoutube見ている時に操作してますね!
優しく、ボリュームのある夢見心地なふんわりとしたWEBサイトのデザインが必要だ!

お題:
ファッション好きの20代の女性に、苦くてとっつきづらいけど、美容に良い野菜ジュースを、
毎日飲んでもらえるためのデザイン・・・を紙媒体で!
アイデア:電車のポスターに綺麗な女性と効果がありそうなコピーを添えて、電車ジャック!
渋谷の駅前で、ひたすら新商品ビラを配る!
こっちは朝だな。朝の駅前で1枚ペラで映えるシャキッとしたデザインが必要だ!

 

まとめ

お題に対するアイデアが擬音まみれになりましたが、何となくご理解いただけたのではないかと思います。
そうなんです、デザインは、単なる視覚的な表現だけでなく、そのデザインを受け取った方とのコミュニケーションツールです。
効果的なデザインコンセプトを策定することで、より多くのユーザーに情報を届けられるはずなのです。
なんとなく、かっこいいやつ!とか、赤いビビッドなやつ!とかがデザインコンセプトということではなく
メディアの特性と、その情報が受け取り手に伝わる瞬間まで思いを巡らして、デザインコンセプトを考えてみたいよね
というお話でした!

-WEBデザイン, WEB制作

関連記事

Bamboo PadであなたのPCもタッチジェスチャーで意のままに!

Bamboo PadであなたのPCもタッチジェスチャーで意のままに!

PC使用時に画面上の画像などを拡大したい時、 思わず画面に親指と人差し指を添えて必死にズームしようとしたり、 スクロールしたい時に画面に指をスイッと滑らせたりして、 あ、これタッチできないんだ…とザン …

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-1-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-1-

こんばんは、デザイナーのOです。 実は私はグラフィックデザイナー出身で、約1年半前にWeb業界に入りました。 Webについてまだまだ勉強中の自分ですが、 実際にWeb制作に携わって感じた、グラフィック …

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …