マガジンのカバー画像

デザイン解剖

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

#バナー広告

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

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

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

デザイン解剖#19

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

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

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

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

デザイン解剖#18

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

---

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

こちら

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

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

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

デザイン解剖#17

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

文字周り

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

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

デザイン解剖#16

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

---

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

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

デザイン解剖#15

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

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

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

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

デザイン解剖#14

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

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

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

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

デザイン解剖#13

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

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

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

デザイン解剖#12

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

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

もっとみる