「紙っぽいデザイン」の特徴を盗め!イベントポスター事例から学ぶ、紙っぽいデザインの特徴。(1)「紙っぽいデザイン」の特徴を盗め!イベントポスター事例から学ぶ、紙っぽいデザインの特徴。2014/08/10quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。お盆休みまでもう少しですね!みなさま仕事の進捗はいかがでしょうか。webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。お客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙(ポスター、雑誌)のような完成図をイメージされることが多いのではないのでしょうか。(特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ!)それで今回はLPやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するために、webにはない紙独自のデザインを、参考を元に紐解いていければと思います。山ほどストックを溜め込んであるので早速いきましょう。今回もサーバーが落ちたらすみません。写真に文字を少し重ねる手法です。最近ではwebでも結構みられます。これとか(http://kyu-plus.jp/info/shop.html)写真の淡い色の箇所に黒文字で引っ掛けるようにのせたり、こちらのポスターのように色を逆転してもナイスですね。デバイスフォントでやるのは結構難易度高いです。淡い色または蛍光色のタイポグラフィーをダイナミックに背景に設置する手法です。webでやる場合はメインコピーやH1文言を英語にして柄のようにドーンと配置しても面白いかもしれません。文字のサイズが既に大きいので目立ちすぎる色ではなく、埋もれるような色にするのが多分ポイントです。×などの記号を背景にしいてもいいかもしれません。縦組みをアグレッシヴに取り入れる手法webのデザイナーは縦書きにビビりすぎです。場合によっては縦書きをドーンと入れてみたり、キャプションを縦書きにしてみたり、してみてもいいかも。これとか縦書きがいい感じにはいっとります。http://www.rakuten.ne.jp/gold/sparkler/about.html文字を改造しちゃう手法webの場合ここまで大きく文字を設置しないっていうのもありますが、文字をそのテーマにそったものに改造するのも紙っぽいといえるでしょう。文字や記号の中に写真や、文字組をいれちゃう手法これはなかなかエキセントリックな手法なので取り入れ難いですが、ダイナミックさが非常に出る手法です。文字の頭は揃えるのが常識ですが、目線を読みやすいように誘導すればそろえないという手法もあります。↑の参考の場合、視線が右上から左下にいくので、この場合文字のあたまをそろえなくても見やすいです。揃ってるものより動きがです。この手法は視線をよく考えないで実行すると上司に確実に怒られるのでやめましょう。文字の大小やウエイトでメリハリをつけるのは基本的なルールですが、このくらいのメリハリをつけて写真にかぶるようにセンターに配置などすると紙っぽいです。今流行っているフラットデザインはスイス系グラフィックデザインのリバイバルと言われています。そこでフラットデザインをするときは、海外のフラットデザインを参考にするのではなく、スイス系グラフィックデザイン(http://www.swissted.com/)を参考にしても面白いかもしれません。その他エクストリーム手法バンド系グランジ手法ペンキをとばして勢いを付与。写真をモノクロに荒く加工。蛍光の黄色は重ねても重たくなりすぎないので、大胆に重ねるには最適。文字をパスに沿ってユルユルで組んで女子っぽく手法まとめあくまでもこれらは課題を解決する為の手法です。「こういった表現をしたいから」という目的でむやみやたらに使うのは絶対やめましょう。「こういった問題がある⇒じゃあこの手法はどうだ?この手法はどうだ?」というトライ&エラーのサイクルが速い方がいいデザインが出来ると思います。なれる為にも常日頃からデザインを見るときにどのような手法を使っているか自分なりに解析するといいですね。何を目的としたものなのか?どのような人対象としているのか?どんな手法を使っているのか?写真はどのようなものを使っているか?個性を出している”あそび”の部分はどこなのか基本からあえてハズしている部分はどこなのか?視線の流れはどうなのか?どんな色を使っているのか?コピーってこれが一番ベストなのか?分かりづらくないか?どういった業種で、どんなフォントをつかっているか?など、これらの知識の点が線となって(ry書籍ではこの辺が参考になります。スタッフ募集のお知らせWebデザイナーが覚えておきたい写真の基本構図muuuuu.org運営者が教える名著「アイデアのつくり方」に倣った、Web制作における参考サイトの探し方デザインってどう教えるの?元・任天堂デザイナー前田さんから学ぶ効果的なフィードバックとは論理的な考え方が面白いほど身につく本まとめwebサイトのデバイスフォントを美しく見せるために有効な設定まとめ意外とできてる会社ばかりではない!?Webデザインを行う前にすべき、Webディレクション作業まとめ。デザイナーとして一皮剥ける、説明が上手くなるための3つのセオリーWebデザイナーが身につけるべきビジネススキルとは?デザインとビジネススキルの相乗効果を生み出す6つのコツ。私たちQUOITWORKSにお任せください。サイト制作に関するご相談、料金のお見積もりなど、お気軽にお問合わせください。サービス内容につきまして制作の相談・お問い合わせQUOITWORKSでは通年で採用も行っています。ディレクター、エンジニア、デザイナーが対象となっております。ご興味がある方は採用ページもご覧ください。採用ページ採用に関するお問い合わせアニメーションで問題を解決!サイトをより分かりやすくする為のアニメーションの使いどころ。スタッフ募集のお知らせWebデザイナーが覚えておきたい写真の基本構図muuuuu.org運営者が教える名著「アイデアのつくり方」に倣った、Web制作における参考サイトの探し方デザインってどう教えるの?元・任天堂デザイナー前田さんから学ぶ効果的なフィードバックとは論理的な考え方が面白いほど身につく本まとめwebサイトのデバイスフォントを美しく見せるために有効な設定まとめ意外とできてる会社ばかりではない!?Webデザインを行う前にすべき、Webディレクション作業まとめ。デザイナーとして一皮剥ける、説明が上手くなるための3つのセオリーWebデザイナーが身につけるべきビジネススキルとは?デザインとビジネススキルの相乗効果を生み出す6つのコツ。株式会社クオートワークスのブログです。ここではWeb制作におけるノウハウやナレッジ、ビジネスに関する覚書などまとめて発信しております。https://quoitworks.com/LinkSNSでもWeb制作に有益な情報や、制作実績など発信しております。