マガジンのカバー画像

デザイン解剖

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

#WEBデザイナー

デザイン解剖 #68

デザイン解剖 #68

今回は地域交通共創モデル実証プロジェクトのサイトを分析させていただきます。

コンセプト推察萌芽をつくろう
新たな取り組みを作り出していく段階であることや、全体的に緑色を使用していることから推察しました。

文字周り

navi・見出し

なんとFVに表示されている文字はすべてSVGで構成されています。

和文:たづかね角ゴシック

英文:Europa Grotesk SH Medium(?)

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

デザイン解剖 #66

今回は FruOatsさんのブランドサイトを分析&トレースさせていただきます!

コンセプト推察

優しいおやつで、からだを嬉しく
・カロリーを気にしている人でも我慢せずに食べられる
・ヘルシーさとおいしさを両立している
という商品の性質から、暖色・丸みの強いフォントで優しい印象を大事にされているのかなと思いこのコンセプトにしてみました!

使用フォント

英文_menu/セクションタイトル/数字

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

デザイン解剖#65

今日はルミネ荻窪さんのバナーを分析&トレースさせていただきます。

コンセプト推察

これから春になり、新しいことへ挑戦していく、「新たな窓を開ける」がコンセプトかなと推察します。
また被写体として映られている方=このバナーのターゲット層と考えると、20代女性が好む、ぬけ感がありながらもポップな色使いを採用されているのかなと思いました。

使用フォント

英文:EngraversW01 Regul

もっとみる
デザイン解剖#64(22.04.17追記)

デザイン解剖#64(22.04.17追記)

今回はBan Design Studioさんのサイトを解剖&トレースして学ばせていただきます!

コンセプト推察

「産地とくらしの間をデザインする」というコピーや、「その土地の中にある「ふつう」に出会う時、その魅力に驚くと同時に、うらやましく思います。」というリード文、商品写真を中心にした構成から、このサイトのコンセプトは「"ふつう"を見つける」かなと推察しました。

マウスオーバーでズームされ

もっとみる
デザイン解剖#63 (22/03/06追記)

デザイン解剖#63 (22/03/06追記)

いやぁ〜お久しぶりのnoteです…!
なんと8ヶ月くらい間が空いてしまいました。
またイチからコツコツやっていきますのでどうぞよろしくお願いします。

今回はナゴレコさんのバナーを解剖&トレースさせていただきます。

使用フォント

おばんざい 特集:丸明オールド

親しい人としっぽり楽しみたい、/ずらりと並ぶ料理に〜:KOくれたけ銘石B

Nagoya Obanzai:わからず…(分かる方いれば

もっとみる
デザイン解剖#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は動画が掲載されており、常に動きがあるので目を引き付けられる。
が、背景が常に動いているなどではなく限定的なので混雑

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

デザイン解剖#07

1日1つデザインの分析=解剖記事を書いていきます!
---

今日は「行くぜ、東北。」のバナーです。

読み取れること
なんといっても特徴的なのがパズルのように組み合わされた文字とイラスト、写真。ともすると混み合った印象になってしまう組み合わせがどのようにしてうまく行っているのかを読み解いて行く。


茶色(CA8E54)黒(211814)白。
東北の雰囲気を3色で見事に表現している。

文字の

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

デザイン解剖 #06

勉強のため、1日1つデザインの分析=解剖記事を書いていきます!
---

今日はすみだ水族館のバナーです。

読み取れること
・使われている色
ピンク(E9448B)紺(053466)黒(000000)背景・灰色(E6EAEE)
ピンク色を使っているが、明度の低い色にしていること、黒や紺といった落ち着いた色を使っていることで可愛らしくなりすぎていない。

・想定ターゲット
20代後半〜30代女性

もっとみる
デザイン解剖 #05 バナーver.

デザイン解剖 #05 バナーver.

勉強のため、1日1つデザインの分析=解剖記事を書いていきます!
---

今回はJA三井リースさんの広告バナーです。読み取れること
・使われている色
 灰色(373737)、黄色(FEEA0A)オレンジ(E81610)のグラデーションで
 コントラストが強く、目が引き付けられる 

・「Change Future」というコピーのフォント/あしらいがそれぞれ違う
「Change」はスプレーで吹き付け

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

デザイン解剖#04

Webデザイン勉強のため、サイトの解剖をしています!

今回は主にお出汁を販売している手火山家さんのサイトです。

「かっこいい!」「かわいい!」「素敵!」「新しい!」など、そう感じた理由を紐解くために、自分なりにWebサイトを分析します。

ーーーーーー

縦書きの文章が用いられたサイトを分析するのは初めてです!ワクワク
今回のポイントは、和風なのに古臭さや重さを感じさせない秘訣を探ることです。

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

デザイン解剖 #02

Webデザイン勉強のため、サイトの解剖をしています!

第2段は大分県にある、尾石動物病院さんの公式サイトを分解します。

「かっこいい!」「かわいい!」「素敵!」「新しい!」など、そう感じた理由を紐解くために、自分なりにWebサイトを分析します。

ーーーーーー

テーマカラー:白#FFFFFF
差し色:黄緑#87C358 黒##000000
フォント:見出しゴMB31 Pr6・Abel

まず

もっとみる