マガジンのカバー画像

デザイン解剖

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

#デザイン

AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖 #70

記念すべき70回目…！今回は【粥粥好日 | アジアを味わう、新感覚お粥】サイトを分析します！

コンセプト推察「やさしく、アップデート」「ネオ東洋」

ABUOT(メッセージ)に「〜お粥を、まったく新しいワクワクする日常食へとアップデート。」とあること

色味が淡い色で統一されていること

緑・黄色・赤という、中華街で見かける色の組み合わせながら、明度の高いトーン採用することで、柔らかい"ネオ"感

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖 #69

今回は10th Anniversary | Money Forward マネーフォワード10周年サイトを分析させていただきます！

コンセプト推察サイト自体のコンセプトは「さあ、人生をもっと前へ。」だそうです。
こちらは推察ですが、デザインのコンセプトをつけるとしたら「自分の人生を描こう」かなと思いました。
手書きらしさの残るイラストや、ロゴのテクスチャ、ペンキを塗ったようなあしらいから発想しまし

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

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

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

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

コンセプト推察

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

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

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#61

デザイン解剖#61

今回はABEMAのバナーを解剖します！

初めて知ったんですが、ABEMAというサービスを運営している会社名が、Abema TVなんですね！逆だと思っていた...

使用色黄色のグラデーションで金色を表現(F7EBBA~F3D679のグラデ)
白、黒

フォント英字：おそらくHelvetica Neue
日本語：おそらくA-OTF ゴシックMB101 Pr6N

どちらもウエイトが高く、どっしりと

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#60

デザイン解剖#60

今回はアルコール度数0.5%で話題の"ビアリー"サイトMVを分析します！

文字まわりフォント：メインコピーに明朝体を使用。
ウェイトの低い文字を使い、文字間も広めにとることで軽やかな印象に。

文字右側：「選択肢」「誕生」「New」グリッドが揃っていることで整った印象

文字左側：ロゴ、「0.5%」商品名、商品説明のグリッドは揃っている
が、「微」は左側にはみ出している
＝全て揃っているよりも、

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#59

デザイン解剖#59

今回はミツワ電機株式会社さんの採用サイトです。

MV

・画像をファーストビュー全面に配置
・初回ローディング時にフェードインするようなアニメーション
・メッセージを中央に配置し、周囲の余白をとることで視線を集中させている
・「MESSAGE」ボタンから社長インタビューページに遷移。MVでの文言掲載は最小限になっている

ボタンやあしらいで使われている線は全て1pxと細く、そのことで繊細な雰囲気

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#58

デザイン解剖#58

今回はSony Squareのサムネイルを分析！

使用色水色(01AAC9)オレンジ(FE5B42)ピンク(EB3EAC)黄色(E0E002)緑(01C291)黒(231816)

6色使われているが、同じトーンでまとめられているので印象が散らない

文字まわりメインの文字は左右、同じ角度のV字ラインに沿って配置
(Wの左側、Kの右側に特徴をつけることで表現)
上に向かって大きくなることで勢い・

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#51

デザイン解剖#51

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

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

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

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

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#40

デザイン解剖#40

今回はbaycrew's storeのバナーを分析！

文字まわり・ペンで書いたようなかすれたフォントを使用
筆記体ながら、カジュアルな雰囲気にまとまっている

・コピーを中央に配置し、タイトルとのジャンプ率を上げている

・内容詳細はフォントサイズ小さく、右下に配置
より内容を知りたい人だけに伝えたい内容であることが分かる

配置・装飾まわり・手書きのキャッチコピーが斜めに配置されている
それに

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#39

デザイン解剖#39

今回は文字をイラストとして使う手法を勉強！
東京ミッドタウンのバナーを分析します。

---

使用色赤(E60012)・背景：クリーム色(FFFDE4)・黒
赤とクリーム色の組み合わせが1月らしい冬の雰囲気を演出

文字周り・使用フォント：Century Gothic

Arial、Times New Roman、Helveticaなどと同様の、Monotype社から提供されているフォント。
T

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#38

デザイン解剖#38

今回はスターバックス　コールドブリューのバナーを分析します！

---

使用色緑(33A08F)白、茶(230100)
ブランドカラーの緑と商品の茶色、プラス差し色の白のみ使用
3色に絞ることで統一感が出る法則にのっとっている

文字周り・上部文字 -Introducing-は筆記体で、読ませるよりも装飾的な役割
・上部文字は3段組みになっているが、中央の文字サイズを小さくすることでまとまって見

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#37

デザイン解剖#37

今回はLINE MOBILEのバナーを分析します！

---

使用色緑(07B53B)ピンク(FF0763)
彩度が高い色を使用することで目に飛び込んで来る
ピンク部分が僅かにグラデーションかかっていることでニュアンスができている

文字周り・吹き出し部分以外は全て左揃え
・0円！/月はオリジナルフォントが使われており、アイコン化されている
・使い放題よりも0円に視線を集める文字構成になっている

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#36

デザイン解剖#36

今回はPAL CLOSETのバナーを分析します！

使用色肌色(FEF1E8)ターコイズブルー(FEF1E8)白、黒
肌色と緑がかったブルーの組み合わせが柔らかくてお洒落

文字周り使用フォント：游ゴシック
細身で洗練された印象のフォント

・横書きの文字は全て斜体がかけられており、しなやかな印象
・欧文を縦書きにすることで情報よりもあしらいとして機能させている
・また、中抜きにすることで圧迫感の

もっとみる
AYA@デザイン | n2p

AYA@デザイン | n2p

デザイン解剖#35

デザイン解剖#35

今回はCASHのバナーを分析します！

利用色黄色(FFCF07)、白、黒
コントラストが高くなっており目に入りやすい

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

もっとみる