マガジンのカバー画像

デザイン解剖

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

#デザイナー

デザイン解剖#32

デザイン解剖#32

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

---

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

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

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

デザイン解剖#12

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

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

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

デザイン解剖#11

今回は久しぶりに #webサイト を解剖! #ベンザブロック 様のサイトが素敵!と思ったので読み解かせていただきます。

---

構成要素はシンプルなのに洗練された印象になっている!

MV
・アニメーション
綾瀬はるかさんがゆっくりフェードイン、ハンバーガーメニューが横に伸びるアニメーションがされている
・色使い
背景が一見ベタ塗りのように見えるが、中心が明るく、外側が暗いグラデーションになっ

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

デザイン解剖#10

記念すべき10回目はまるまるマルシェさんのバナーを解剖!
---

使われている色は3色+α!
灰色(CACACA)黒(000000)白(FFFFFF)+緑(099DA0)
・彩度の低い色がメインで使われているので落ち着いた印象。
・灰色/白の背景に文字だけ緑色が使われていることですぐに目に入る

タイトル×あしらいの扱いが上手い!
・「〇〇」部分は明度の高い灰色を使うことで、背景として成立してい

もっとみる