マガジンのカバー画像

デザイン解剖

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

2020年12月の記事一覧

デザイン解剖#43

デザイン解剖#43

今回はPREMIUM BOSSのバナーを分析!

使用色赤(C7010A)肌色(FCFAFB)
背景に薄く色をいれることでニュアンスが出る

文字まわり・明朝体、セリフ体、ゴシック体が混合で使われている
現代的、大人な雰囲気を表現
商品名はゴシック体にすることで可読性を上げる

・NEW!を横幅いっぱいに配置することで目を集める

・!に中央揃えで縦組みの文字を配置することで目線の誘導が自然
右上

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

デザイン解剖#42

今回は○△□グミのバナー!
文字のみの配置が印象的です

使用色水色(2ABBDA)ピンク(#E7CEE4)
くすんだ色味なので、文字の密度が高くても目がチラチラしない

文字・配置について・明朝とゴシックが混合で使用されている
オノマトペなど柔らかい印象にしたい部分は明朝体、ポップな印象にしたい部分はゴシック体にしているよう。

・全ての文字の左右、上下グリッドが揃っていることで、混雑せずブロッ

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

デザイン解剖#41

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

使用色赤(E62427)金色(D6C671)黒、白
テーマが年末年始ということで、赤と金色を使いおめでたい雰囲気に
その他の色は白と黒でまとめることで落ち着いた印象

文字・配置まわり・明朝体とゴシック体、セリフ体が混合で使われている
お正月の和風な雰囲気もありつつ、モダンな雰囲気も保っている

・左上(最初に視線が集まる)に赤ベタを配置することで問答無用に目が

もっとみる
デザイン解剖#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)、白、黒
コントラストが高くなっており目に入りやすい

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

もっとみる