マガジンのカバー画像

デザイン解剖

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

2020年10月の記事一覧

デザイン解剖#29

デザイン解剖#29

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

---

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

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

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

デザイン解剖#28

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

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

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

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

デザイン解剖#27

今回はオロナミンCのバナーを分析します!

---

使用色赤(FE0000)黄色(FAD223)オレンジ(FF7B00)、文字色白

文字まわり・フォントはオロナミンCの商品ロゴと同じものが使われている
・中央のテキストはわずかにドロップシャドウがかかっており、光量が強い印象を濃くしている
・中央文字二段組み部分は両橋のグリッドが揃っていることで整った印象
・「キャンペーン」の上部グリッドよりも

もっとみる
デザイン解剖#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色
パッケージの色とリンクしているため統一感がある

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

もっとみる