マガジンのカバー画像

デザイン解剖

70
webデザイン/バナーの分析記事をまとめたマガジンです。週に1回更新していきます!
運営しているクリエイター

#バナー

デザイン解剖#63 (22/03/06追記)

デザイン解剖#63 (22/03/06追記)

いやぁ〜お久しぶりのnoteです…!
なんと8ヶ月くらい間が空いてしまいました。
またイチからコツコツやっていきますのでどうぞよろしくお願いします。

今回はナゴレコさんのバナーを解剖&トレースさせていただきます。

使用フォント

おばんざい 特集:丸明オールド

親しい人としっぽり楽しみたい、/ずらりと並ぶ料理に〜:KOくれたけ銘石B

Nagoya Obanzai:わからず…(分かる方いれば

もっとみる
デザイン解剖#51

デザイン解剖#51

今回はJINSのバナーを分析!

使用色赤:背景
白:文字色
金:装飾(グラフィック)
黒:影のグラフィック(斜めストライプ)
水色:装飾(グラフィック)
比較的色が多く使われているが、そのうち2つが白黒の無彩色なので雑多な印象がない

文字・配置まわり・NEW YEAR は太陽に合わせて僅かに上部に寄っている

・(20)-(21)と年を表記
大きく2021と書きがちだが、目にする時期は限られて

もっとみる
デザイン解剖#40

デザイン解剖#40

今回はbaycrew's storeのバナーを分析!

文字まわり・ペンで書いたようなかすれたフォントを使用
筆記体ながら、カジュアルな雰囲気にまとまっている

・コピーを中央に配置し、タイトルとのジャンプ率を上げている

・内容詳細はフォントサイズ小さく、右下に配置
より内容を知りたい人だけに伝えたい内容であることが分かる

配置・装飾まわり・手書きのキャッチコピーが斜めに配置されている
それに

もっとみる
デザイン解剖#39

デザイン解剖#39

今回は文字をイラストとして使う手法を勉強!
東京ミッドタウンのバナーを分析します。

---

使用色赤(E60012)・背景:クリーム色(FFFDE4)・黒
赤とクリーム色の組み合わせが1月らしい冬の雰囲気を演出

文字周り・使用フォント:Century Gothic

Arial、Times New Roman、Helveticaなどと同様の、Monotype社から提供されているフォント。
T

もっとみる
デザイン解剖#38

デザイン解剖#38

今回はスターバックス コールドブリューのバナーを分析します!

---

使用色緑(33A08F)白、茶(230100)
ブランドカラーの緑と商品の茶色、プラス差し色の白のみ使用
3色に絞ることで統一感が出る法則にのっとっている

文字周り・上部文字 -Introducing-は筆記体で、読ませるよりも装飾的な役割
・上部文字は3段組みになっているが、中央の文字サイズを小さくすることでまとまって見

もっとみる
デザイン解剖#37

デザイン解剖#37

今回はLINE MOBILEのバナーを分析します!

---

使用色緑(07B53B)ピンク(FF0763)
彩度が高い色を使用することで目に飛び込んで来る
ピンク部分が僅かにグラデーションかかっていることでニュアンスができている

文字周り・吹き出し部分以外は全て左揃え
・0円!/月はオリジナルフォントが使われており、アイコン化されている
・使い放題よりも0円に視線を集める文字構成になっている

もっとみる
デザイン解剖#36

デザイン解剖#36

今回はPAL CLOSETのバナーを分析します!

使用色肌色(FEF1E8)ターコイズブルー(FEF1E8)白、黒
肌色と緑がかったブルーの組み合わせが柔らかくてお洒落

文字周り使用フォント:游ゴシック
細身で洗練された印象のフォント

・横書きの文字は全て斜体がかけられており、しなやかな印象
・欧文を縦書きにすることで情報よりもあしらいとして機能させている
・また、中抜きにすることで圧迫感の

もっとみる
デザイン解剖#35

デザイン解剖#35

今回はCASHのバナーを分析します!

利用色黄色(FFCF07)、白、黒
コントラストが高くなっており目に入りやすい

文字周り・フォント:たづがねゴシック
 可読性が高く、優しげな印象のフォント
・斜めに配置することで飛び出したような印象に
・文字サイズを最大限に大きくすることで非常に勢いがある
・済を丸で囲うことで目を引くアイコンの役割を果たしている
・!を枠外にはみ出させることで勢いがある

もっとみる
デザイン解剖#34

デザイン解剖#34

今回はアサヒ ザ・レモンクラフトのバナーを分析します

---

使用色黄(F2E534)灰(4D4D4D)赤(7C0400)
スモーキーな色合いで、大人っぽい雰囲気を演出
文字色の赤は写真素材の背景と同系色で馴染みも良い

文字周り
・英文以外は明朝体を使うことで大人の雰囲気に
・自分の時間チューハイ の文字間が広めにとることでコピーの世界観を表現
 同時に、文字を追うと商品ロゴにたどり着く仕掛

もっとみる
デザイン解剖#33

デザイン解剖#33

今回はdポイントのバナーを分析します!

---

使用色赤(#FE0000)ピンク(#FF137A)白
彩度が同じなので違和感がない!

文字周り
・右側文字のグリッドが左右すべて揃っている=情報が多いが整った印象になっている
・+50%還元 が50を目立たせる目立たせるようになっている
 =%と還元の左右グリッドを合わせ、上下は50におさまるようにすることでまとまり感が出ている
・周囲の色と文

もっとみる
デザイン解剖#32

デザイン解剖#32

今回はキントのバナーを分析します!

---

使用色
ピンク(E34570)水色(02AECA)差し色紺(253D57)
鮮やかながらレトロな色でまとめることで強すぎない

文字周り
・「買う」「キント」の文字サイズが最も大きく配置されており、僅かに斜体がかけられている
・「あなたはどっち?」を右上に向かって斜めに配置することでワンポイントになっている
・中央「VS」を1文字ずつ左右の色を使うこ

もっとみる
デザイン解剖#31

デザイン解剖#31

今回はトリンプさんのバナーを解剖します!

使用色背景赤(aa1018)、差し色ゴールド(c2aa7a)、文字色白
赤、ゴールド、白というクリスマスを想起させる色合い

文字まわり
・CHRISTMASは中抜け、campaignは筆記体にすることで無駄な装飾なしにロゴ感が出る
・タイトル上にコピーをおき、タイトル下を線で区切ることでバランスが取れている
・CHRISTMASを弧を描かせ、campa

もっとみる
デザイン解剖#29

デザイン解剖#29

今回はマクドナルドのバナーを解剖!

---

黒寄りの紺(101116)彩度の高いピンク(FE1ECA)灰色(B1B1AF)
ほぼ黒寄りの紺と強いピンクのコントラストが強く、目に飛び込んでくる
使っている色が例外の灰色を除くと3色のため、賑やかになりすぎていない
完全な黒にしていないので、程よい柔らかさもある

文字まわり・タイトルフォントはデザインフォントを使っており、強い印象
 ポップさもあ

もっとみる
デザイン解剖#28

デザイン解剖#28

今回はCAFE BASEのバナーを分析!

使用色オレンジ(F8A023)緑(52B548)文字色黒

文字まわり・フォントは手書き風でゆるい印象
・緑部分は左揃え、オレンジ部分は右揃えで対比を表してる
・タイトル部分は中央揃えになっており、「おうちで簡単」がタイトル内に収まっている
・「300」が中央に大きく配置することで目線が集まる
・「300」の上下グリッドと「いい道具で愉しむ冬じたくセット

もっとみる