マガジンのカバー画像

デザイン解剖

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

#解説

デザイン解剖#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

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

デザイン解剖#30

今回はproject8さんのサイトを分析!

---

MV

「PROJECT」という言葉を背景に、画像がスクロールする構成。
オーバーレイではなく、人物との間に差し込むレイヤー構造にすることで一味違う雰囲気になっている。

使用色背景:灰色(F0F1F3)、座布団:紫みの青(1236E6)、白、文字色:黒

メニュー

スクロール追従で、オーバーレイになっており、背景の色味によって変化する

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

デザイン解剖#29

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

---

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

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

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

デザイン解剖#28

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

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

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

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

デザイン解剖#26

今回はタクシーサイネージ | GROWTHのサイトを分析します!

---

MV

使用色
白、黒(1B2025)、黄緑(e9ff00)
背景:灰色(F7F7F7)
黒に黄緑がハイビームのように目立って良いアクセントカラーになっている
フォント
ヒラギノ角ゴ ProN W6

MVは動画が掲載されており、常に動きがあるので目を引き付けられる。
が、背景が常に動いているなどではなく限定的なので混雑

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

デザイン解剖#25

今回はメルカリ×dポイントのバナーを分析します!

---

使用色メイン
赤(FE0211)水色(01A8FE)黄色(FCF901)
メルカリ、dポイントそれぞれのブランドカラーをメインにしている

文字周り・フォントはおそらく新ゴpro
 シンプルなフォントなので可読性が高い(数字には別のフォントを使用)
・中央に「得」という文字を大きく配置することで流し見でも目にとまる
・「得」に被せて「d

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

デザイン解剖#24

今回は爽健美茶のバナーを分析します!

---

使用色オレンジ(F08300)黄土色(ECAD28)黒、白

文字まわり・游ゴシックでしなやかな印象
・左上に商品名を置くことで真っ先に目線が集まるようにしている
 また色味もハレーションが起きるくらいにコントラストをきかせている
・「乾く季節の水分補給キャンペーン」をあえて揃えず中央の角度をズラすことで遊び心を感じさせる。
 周りの落ち葉が舞って

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

デザイン解剖#23

今回はANA Travel&Lifeというwebマガジンのバナーを解剖します!

---

使用色背景深緑(4FA161)バッジ黄緑(A2CD46)、文字色白
背景色とイラスト/文字色とが被らず、可読性が保たれている

文字まわり・ステンシルのような切れ目があり、丸みのあるフォントでポップな雰囲気に
・ウイスキー蒸留所という渋いイメージになりがちなものを可愛らしく演出している
・「日本の」を中心に

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

デザイン解剖#22

今回はURBAN RESEARCHのバナーを解析!

---

使用色オレンジ濃(EA6B3E)オレンジ明(E98F74)白、黒
素材背景のオレンジは僅かに濃淡がついており、微妙なニュアンスが効いている。背景色よりも文字色を明るくすることでバランスがとれている。

文字まわり・中央欧文はサンセリフ体を使い、左の縦組みはローマン体を使っている。
ローマン体は少しシックな印象を演出
サンセリフ体は現代

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

デザイン解剖#21

第21回ということで、心機一転サムネイルを変更しました今回は、FREAK'S STOREのバナーを分析します!

---

使用色オレンジ(F3BD7E)灰みの青(A0B5C8)黒(231816)、白
黒ベタ部分を完全な黒にしないことで浮きすぎない

文字まわり・フォント
和文:游ゴシック
欧文(平文):Trade Gothic Next LT Pro?
・タイトルを左右中央に配置。
 上下は、色

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

デザイン解剖#20

今回はニッカセッションのバナーを分析します!

---

使用色グリーンに近い青(02ACD8)と濃紺のような青(003E8D)白の3色
パッケージの色とリンクしているため統一感がある

文字周り・「自由を歌う」を体現するように、文字の繋がり部分が離れているフォントが使われている
・文字間も広く、余裕・自由を感じる
・フォントウェイトは低めなので主張は強く無いが、逆に引きの美学で興味を惹かれる効果

もっとみる