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制作

関連記事

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。の続きになり …

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

このお姉さんにあえて漫画調にマーカーネットをアピールしてもらうと… ちょっと面白くて勢いのある効果が生まれますね。 昨今では漫画的な加工を取り入れるWEBデザインも増えてきました。 ですので、今回は写 …

事前に調べよう!2015年ウェブデザイントレンド!

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る機会がここ最近かなり増えて来ました。 かくいうこのブログもレスポンシブ対応しています。 レスポンシブサイトを作る時には デザイン面等でも気を付ける事は幾つかありますが、 今回は …

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

WordPressをインストールするとユーザー名「admin」が自動的に割り振られ 変更できないバージョンもございました。 ハッキングする側はパスワードを当てるだけでログインすることが可能になります。 …