デザイン解剖

2020年9月30日 00:16

デザイン解剖#19

今日は「ミスドの思いド」のバナーを分析します！

使用色オレンジ(F7A921)茶色(561702)白
セピア調の色合いで「思い出」感を演出！

文字周り・とにかく目立つのがウェイトもサイズも規格外の「ド」。素材ではなく文字で目線を集めるという手法が面白い。
・「思い」はフォントサイズは大きいが線は細く、「ド」が持つ圧迫感を軽減している
・「思いド」の高さに収まるように「ミスドの」が縦組みで配置さ

もっとみる

AYA@デザイン | n2p

2020年9月29日 01:00

デザイン解剖#18

今回は大阪、梅田ESTのバナーを分析！

---

使用色ピンク(E45398)黄色(D9DF01)黒、白

こちら

の記事で紹介したバナーと配色は同じだが、彩度を低くすることで大人っぽい印象になっている。

文字周り・100だけで画像の約半分を占めているため、すぐに目に入る
・EST POINTといういわば100というのが何の数字なのかを説明する文言を数字の中に入れてしまうことで、問答無用で関

もっとみる

AYA@デザイン | n2p

2020年9月27日 02:36

デザイン解剖#17

今回はnews picksのバナーを分析します！

文字周り

・和文は明朝体、欧文はローマン体を使い、今っぽさよりも信頼感を演出している
・左上に未来を発掘せよ。という命令口調のコピーを置くことで意識を引きつけている
・↑の文字間は広くなっている。命令口調×明朝体で力強くなってしまいがちな部分を緩和している
・右下の「日本をRethinkする」は左上よりフォントサイズは小さくなっている
・↑こ

もっとみる

AYA@デザイン | n2p

2020年9月26日 00:27

デザイン解剖#16

今回はSORACHI 1984のバナーを分析！

---

文字周り・長方形の画像に沿ったL字型の文字組
・縦組みの上下グリッドと、写真＋横組みの上下グリッドが揃っている
・同じく左右グリッドも揃っており、文字も含めた長方形になっている
・文字間が広いので、余裕のある印象になる
・縦組みも横組みも文字と写真のマージンは同じ。
そのことでをとほの間が少し離れてしまっているが、それぞれ単体でも成り立つ

もっとみる

AYA@デザイン | n2p

2020年9月24日 00:36

デザイン解剖#15

今回はメルペイ×TSUTAYAさんのバナーを解読します！

使用されている色背景：ピンク(F21396)文字：黄色(FFFA00)
コントラストが強いことでとにかく目立つ組み合わせ！

文字周り・50を最大限に大きくすることで否応なしに目線を集めている
・数字フォントはコンデンス体を使うことで、文字サイズを大きくしても幅を取らない工夫をしている
・文字サイズは50→%→還元→ポイント→メルペイフィ

もっとみる

AYA@デザイン | n2p

2020年9月23日 22:37

デザイン解剖#14

今回は #アシックスさんのバナーを読み解きます！

文字周り
・上辺、下辺に繋がった文章を分けて配置しており、どちらも4センテンスの文章になっている
・左右に配置している文章は同じ
そうすることで、上下左右がシンメトリーになっている

・GEL LYTEⅢ ゲルライトⅢ 30TH 30YEARS OFという表記を、表現を変えて繰り返し配置している
・30THの表記の一つはロゴ化されており、30

もっとみる

AYA@デザイン | n2p

2020年9月22日 16:22

デザイン解剖#13

今回はヤングマガジン/ラフォーレ原宿のコラボバナーを解剖！

タイトル/リード文
・ヤングマガジンのタイトルフォントはそのままに、黒帯文字抜きにしている
・チャンネルR/Bでズラし→重ねられていることでデジタル感と流行感を醸し出している
・英文は縦組みになっており、情報を伝えるというよりも雰囲気づくりの方に重きを置いていることが分かる
・英文はA・V・Y・Iのみ斜体になっている(そういったフォント

もっとみる

AYA@デザイン | n2p

2020年9月21日 23:31

デザイン解剖#12

今日はABEMA TVのバナーを解剖します！

文字周り・四角枠で囲うことで、整った印象になっている
・枠は1pxほどの太さにすることで洗練された印象に
・最も知らせたい9.21という日付を最大サイズにすることで目に入りやすくしている
・(MON)を縦にすることで日付との一体感が出ている
・タイトルPOPFESは円と長方形、曲線のみで形成されている
全体的に円形、四角形、細い線を使っていることでP

もっとみる

AYA@デザイン | n2p

2020年9月21日 17:35

デザイン解剖#11

今回は久しぶりに #webサイトを解剖！ #ベンザブロック様のサイトが素敵！と思ったので読み解かせていただきます。

---

構成要素はシンプルなのに洗練された印象になっている！

MV
・アニメーション
綾瀬はるかさんがゆっくりフェードイン、ハンバーガーメニューが横に伸びるアニメーションがされている
・色使い
背景が一見ベタ塗りのように見えるが、中心が明るく、外側が暗いグラデーションになっ

もっとみる

AYA@デザイン | n2p

2020年9月19日 23:18

デザイン解剖#10

記念すべき10回目はまるまるマルシェさんのバナーを解剖！
---

使われている色は3色＋α！
灰色(CACACA)黒(000000)白(FFFFFF)＋緑(099DA0)
・彩度の低い色がメインで使われているので落ち着いた印象。
・灰色/白の背景に文字だけ緑色が使われていることですぐに目に入る

タイトル×あしらいの扱いが上手い！
・「〇〇」部分は明度の高い灰色を使うことで、背景として成立してい

もっとみる

AYA@デザイン | n2p

2020年9月10日 01:23

デザイン解剖 #09 バナーver.

毎日投稿9つめ！

---

今日は野菜生活100のキャンペーンバナーを解剖します！

読み取れること
背景に野菜の写真は使っているものの、ほぼ文字のみで見せている。
文字組みの勉強になる気にかしない...！
細かく見ていきます。

使われている色
緑(10670A)水色(C6F2FF)白(透過80%ほどか)
他、背景の野菜・果物の色がカラフルな印象を受けるが、実際には緑・オレンジ・赤といった絞ら

もっとみる

AYA@デザイン | n2p

2020年9月9日 00:04

デザイン解剖#08 バナーver.

1日1つデザインの分析＝解剖記事を書いています！
---

今日は渋谷STREAMのバナーです。

読み取れること
長方形と正方形の組み合わせで幾何学的な模様が生まれている。一見複雑に見える構成だが、分解してみるとどうなのか...？

使われている色
黄緑(E6E404)白、写真の灰色
写真が多用されているが、どれも彩度が低く編集されているため落ち着いた柔らかい雰囲気になっている。
黄緑は渋谷ST

もっとみる

AYA@デザイン | n2p

2020年9月7日 23:31

デザイン解剖#07

1日1つデザインの分析＝解剖記事を書いていきます！
---

今日は「行くぜ、東北。」のバナーです。

読み取れること
なんといっても特徴的なのがパズルのように組み合わされた文字とイラスト、写真。ともすると混み合った印象になってしまう組み合わせがどのようにしてうまく行っているのかを読み解いて行く。

色
茶色(CA8E54)黒(211814)白。
東北の雰囲気を3色で見事に表現している。

文字の

もっとみる

AYA@デザイン | n2p

2020年9月2日 23:47

デザイン解剖 #06

勉強のため、1日1つデザインの分析＝解剖記事を書いていきます！
---

今日はすみだ水族館のバナーです。

読み取れること
・使われている色
ピンク(E9448B)紺(053466)黒(000000)背景・灰色(E6EAEE)
ピンク色を使っているが、明度の低い色にしていること、黒や紺といった落ち着いた色を使っていることで可愛らしくなりすぎていない。

・想定ターゲット
20代後半〜30代女性

もっとみる

2020年9月の記事一覧