マガジンのカバー画像

デザイン解剖

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

2021年1月の記事一覧

デザイン解剖#56

デザイン解剖#56

今回はN.PARK PROJECTのwebサイトを分析させていただきます!

MV

全面画像が2枚、自動スライドショーになる仕掛け。
写真の上に、すべて白い文字を配置している。
右下には、スクロールを促す縦線のアニメーションと、SCROLLの文字。

タイポグラフィーはアニメーションで変化し、様々な顔を見せてくれる。
一つが大体2秒ずつで移り変わっていく。

タイポの下には、画像のスライドショー

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

デザイン解剖#55

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

使用色文字色:赤(FC0009)黒
黒赤にすることでチラシ感のある圧の強い印象になる

文字・配置まわり・大まかに9グループに分かれている
メインとなる内容が大文字で配置され、その上下グリッドに合わせてフォントサイズ小さく配置されている内容は装飾的な役割を果たしている

・ついに、!!、ZOZO、WEEK、90%、5.17(日付)、STARTといった

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

デザイン解剖#54

今回は日清焼きそばUFOのバナーを分析します!

使用色赤・黒・黄色
背景色が赤に、黒と黄色という強い配色になっている

文字・装飾まわり商品名の濃い濃いソースを中央に配置し、
・激しい吹き出し
・太字と、赤い枠線
を加えているので非常に目立っている

・濃い濃いソースの上下グリッドに、商品画像、キャラクター、「濃い」「食いてえ」「うめえ!」「濃いソースこそグルメ」など商品に関係の強いキーワードが

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

デザイン解剖#53

今回はFREAK'S STOREのバナーを分析!

使用色白・黒のみ
文字に色を使わないことで、イラストの存在感が際立つ

配置・縦長長方形で3等分されている
 それぞれのマージンを同じにすることで整った印象

・左端に英字縦書き
スペースが限られているので縦書きで有効活用している
最下部の土台は横書きで支えている

・ベタ塗りと枠線のみの文字を両方使っている
全ての文字を黒ベタにすると左端のみが

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

デザイン解剖#52

今回はカロリーメイトのバナーを分析!

使用色ピンク:文字色(F75B9A)
水色:背景

文字・配置フォント:游ゴシック体 斜体
・メインコピーを斜体にすることでスタイリッシュな印象になる

・商品を中央を向いて配置することで中央に軸ができる
文字も中央揃えにすることで統一感がある

・画像部分と、最下部の文字左右グリッドを合わせていることで土台の安定感が出ている

・完全に上下に分けるのではな

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

デザイン解剖#51

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

使用色赤:背景
白:文字色
金:装飾(グラフィック)
黒:影のグラフィック(斜めストライプ)
水色:装飾(グラフィック)
比較的色が多く使われているが、そのうち2つが白黒の無彩色なので雑多な印象がない

文字・配置まわり・NEW YEAR は太陽に合わせて僅かに上部に寄っている

・(20)-(21)と年を表記
大きく2021と書きがちだが、目にする時期は限られて

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

デザイン解剖#50

今回はモビエボのバナーを分析!

使用色青みの緑(018786):背景ベタ、文字
白:背景ベタ、文字

写真素材以外は完全に2色のみで構成されている
1.白ベタに緑文字 2.緑ベタに白文字の2パターンだが、交互にすることで停滞感がない

また緑と白の中に赤いメガネがあることでコントラストが強くなり、そこに目線が行きやすくなる

文字・配置まわり・太字のゴシック体を使用し、平仮名を漢字の2/3ほどに

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

デザイン解剖#49

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

使用色明るい青(0094F6):枠、文字

文字・配置について・中央揃えで、上下:日本語、英語でほぼ同じ内容を書いている
「さわやか」「春」という言葉にふさわしい、柔らかい優しげな丸いフォントを使用

文字間も広めなので余裕のある軽やかな雰囲気

・上部文字と枠の間のマージンを文字間3つ分ほど広めにとることで余白が生まれ、「BREEZY」な雰囲気を醸し出している

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

デザイン解剖#48

今回はUNITED ARROWSのバナーを分析

使用色彩度の高い紫:枠線、説明文
黒:タイトル文字、ベタ塗り

文字・配置まわり・直線的で素朴な印象のタイトル(作字?)
早の横線が半分で、時計をモチーフにしている?=予約イメージ

・タイトル2文字に挟まれる形で「予約アイテム」を縦組み配置
ここのみ明朝体が使われており、カッコで囲われていることもありセリフのように扱われているように見える

上下

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

デザイン解剖#47

今回はトヨフェスのバナーを分析!

使用色背景:薄い黄色(FFEF97)
背景と下部が淡い、優しい色合いのためポケモンのイラストが目立つ

文字・配置について・最下部の著作権記載は白ベタに
それ以外の部分は上下で1:1に分割されている

・上下の分割に斜めで文字を配置している
ピカチュウの目線が文字と同じく斜めに向かっていることで統一感が出ている

・角度は10度ほど。斜めに配置されていること、!

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

デザイン解剖#46

今回は夜マックのバナーを分析します!

使用色紺(09132E)朱色(E23318)オレンジ(FCAE10)黄色(F9D012)
絵本のような濃密な色使い=ほっこりした印象
紺に黄色、朱色に白、とコントラストが強く読みやすい

文字まわり・レトロ感のある太身の明朝体フォント
=可愛らしい、優しい印象

・注意書き的な「国産米使用」はゴシック体を使っている

・タイトル吹き出し部分から文字をはみ出さ

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

デザイン解剖#45

今回はスターバックスのバナーを分析!

使用色ベタ(B91933)パターン(D30554,E8412F,E30240)
同系色でまとめられている

文字・配置まわり英字メイン:DIN

・商品名は左下にネームタグ的に配置

・蜂蜜と、商品2点を三角形に配置し、右商品の頂点に合わせてキャッチコピーを配置
装飾的なフォントを使用し、その下にフォントサイズを小さく細かな説明を配置→グループ感が強くなって

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

デザイン解剖#44

今回は吉野家のバナーを分析!

使用色赤(DF0112)オレンジ(F6A901)黒に近い茶色(231816)白
吉野家のブランドカラーであるオレンジを全面に

文字まわりフォント:A1ゴシック
可読性は高く、優しい印象が「お子様」のイメージにマッチしている

・5度ほど右方あがりに斜めに配置されている
角度をつける時、強くしたくなるが5度でも十分インパクトがある

・割引の文字内に笑顔のマークを入

もっとみる