「紙っぽいデザイン」の特徴を盗め!イベントポスター事例から学ぶ、紙っぽいデザインの特徴。

blog

quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね!みなさま仕事の進捗はいかがでしょうか。

 

webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。

webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。

またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙(ポスター、雑誌)のような完成図をイメージされることが多いのではないのでしょうか。(特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ!)

それで今回はLPやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するために、webにはない紙独自のデザインを、参考を元に紐解いていければと思います。

山ほどストックを溜め込んであるので早速いきましょう。今回もサーバーが落ちたらすみません。

文字を写真に少しだけ重ねる手法

6577dfb16c990699da865d02de6f8cd7
9452637daa51a5cc3fc3af2b6f815b4abba12a863daa2686fdf996c25139d030

写真に文字を少し重ねる手法です。最近ではwebでも結構みられます。
たとえばこれとか(http://kyu-plus.jp/info/shop.html

当院のご紹介|灸PLUS 北海道札幌円山のお灸・はり治療室

写真の淡い色の箇所に黒文字で引っ掛けるようにのせたり、こちらのポスターのように色を逆転してもナイスですね。デバイスフォントでやるのは結構難易度高いです。

蛍光(淡い)文字を背景に敷いちゃう手法

19fe74e7e93b8ecc2cba4570bbc27ab1
80cc1cee0daff6eecce1f490855231b4
540f016b9990e0b46ad925bf9cb95723
03a77ca6a3a2a0ddef6351230536791a
c1b098a9b7ee5e713b1f8eddbf395f79
0827cc738121220c4f7f846ca63d265e
8dfe62e3027a2683e3affb3f15da7590
78a9ed04d38e1899a81c24ee043116e3

淡い色または蛍光色のタイポグラフィーをダイナミックに背景に設置する手法です。webでやる場合はメインコピーやH1文言を英語にして柄のようにドーンと配置しても面白いかもしれません。
文字のサイズが既に大きいので目立ちすぎる色ではなく、埋もれるような色にするのが多分ポイントです。

5071ae1875f9a98396160c218824b88d
ff45a195837f6e534df075971ce97aa1

×などの記号を背景にしいてもいいかもしれません。

 

縦組みをアグレッシヴに取り入れる手法

2bbd87eb061bda888f1b0a5dc4ba51f5
18b7668841df931f98eaca04cf76f735
56f8e158bf3084058ae276827e8d68d6

3bf55fb1491a4508ec74f172845fe976

webのデザイナーは縦書きにビビりすぎです。場合によっては縦書きをドーンと入れてみたり、キャプションを縦書きにしてみたり、してみてもいいかも。。?場合によるけど。これとか縦書きがいい感じにはいっとります。

http://www.rakuten.ne.jp/gold/sparkler/about.html
生せっけんについて  無添加・馬油せっけんのラトリエ ド カンフリエ

 

文字を改造しちゃう手法

5d55846fd800121a0beb759784d78e88

57e1d822b9e7e0fa7df7a1c01436db57
47259db7cdc5b4eb7276530a902d8a6d
f93b2ce6e99ebb41b3c2aa4a648ce77b
07e10054f941f953fc19dda9dbd91b29
8de022c8255fdefca747e3a025a7baa9 1d953ada3c6dbbf27b7fc194ebdf4759

webの場合ここまで大きく文字を設置しないっていうのもありますが、文字をそのテーマにそったものに改造するのも紙っぽいといえるでしょう。

 

文字や記号の中に写真や、文字組をいれちゃう手法

6c684dddcb959411540ac87b18a98bcb
00743a0a6f31b16eebd5bafeea375bca

これはなかなかエキセントリックな手法なので取り入れ難いですが、ダイナミックさが非常に出る手法です。

 

文字の頭をあえて揃えない手法

b344f85ab84749220ed893e5f67d6f1d
0286f9f66ca043c5967c415fa6b81e10
0db60b2f06a3bb61c9c1247fbd4914e6

文字の頭は揃えるのが常識ですが、目線を読みやすいように誘導すればそろえないという手法もあります。↑の参考の場合、視線が右上から左下にいくので、この場合文字のあたまをそろえなくても見やすいです。揃ってるものより動きがです。この手法は視線をよく考えないで実行すると上司に確実に怒られるのでやめましょう。

 

文字のメリハリを最大にする手法

57067acab39f72f28b6d26a4a2b8a12d
文字の大小やウエイトでメリハリをつけるのは基本的なルールですが、
このくらいのメリハリをつけて写真にかぶるようにセンターに配置などすると紙っぽいです。

 

スイス系手法

5ebf9e8ee39185f419a4633ea534de7c
o0600070012895142773

今流行っているフラットデザインはスイス系グラフィックデザインのリバイバルと言われています。そこでフラットデザインをするときは、海外のフラットデザインを参考にするのではなく、スイス系グラフィックデザイン(http://www.swissted.com/)を参考にしても面白いかもしれません。少し余談です。

 

その他エクストリーム手法

バンド系グランジ手法

64d5c3a5cdf9b9b2092170422af01b73

ペンキをとばして勢いを付与。写真もモノクロに。

b719c38f52528f6532da4333cb624d32
f72698f6bddcccdfe589e644bcd54175

写真をモノクロに荒く加工。蛍光の黄色は重ねても重たくなりすぎないので、大胆に重ねるには最適。もし友人のハードコアバンドのサイトを作るときはこの辺を参考にすると乙だと思います

 

写真をトリミングして更にそれを模様にしちゃう手法

b8a483ba6f52a4c890165c473b2ff7b6

 

文字をパスに沿ってユルユルで組んで女子っぽく手法

cd9412a2c0ad0c3c0db6f90eed550118

 

まとめ

あくまでもこれらは課題を解決する為の手法です。「こういった表現をしたいから」という目的でむやみやたらに使うのは絶対やめましょう。
個人的にデザインというのは、
「こういった問題がある⇒じゃあこの手法はどうだ?この手法はどうだ?」というトライ&エラーのサイクルが速い方がいいデザインが出来ると思います。
そうなれる為にも常日頃からデザインを見るときにどのような手法を使っているか自分なりに解析するといいですね。

  • 何を目的としたものなのか?
  • どのような人対象としているのか?
  • どんな手法を使っているのか?
  • 写真はどのようなものを使っているか?
  • 個性を出している”あそび”の部分はどこなのか
  • 基本からあえてハズしている部分はどこなのか?
  • 視線の流れはどうなのか?
  • どんな色を使っているのか?
  • コピーってこれが一番ベストなのか?分かりづらくないか?
  • どういった業種で、どんなフォントをつかっているか?

など、これらの知識の点が線となって(ry

書籍ではこの辺が参考になります。
以上、良い連休を。