マガジンのカバー画像

デザイン解剖

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

#Webデザイン

AYA@デザイン

AYA@デザイン

デザイン解剖 #70

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

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

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

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

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖 #69

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

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖 #68

デザイン解剖 #68

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

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

文字周り

navi・見出し

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

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

英文：Europa Grotesk SH Medium(？)

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖 #67

デザイン解剖 #67

今日はARIGATOBANKさんのサイトを分析&トレースさせていただきます。
落ち着いた色味と、大胆な角丸の使い方、写真のトーン、手書き風のあしらいなどに惹かれて魅力的なサイトだなあと思いました。

コンセプト推察「誰にでも、優しく。」
・"寄付金"を使うサービスであること
・誰でもすぐにつかえるサービスであること
・シンプルなサイト構成、優しい色合い、Rの強い角丸
から、上記のコンセプトを考えま

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖 #66

デザイン解剖 #66

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

コンセプト推察

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

使用フォント

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#65

デザイン解剖#65

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

コンセプト推察

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

使用フォント

英文：EngraversW01 Regul

もっとみる
AYA@デザイン

AYA@デザイン

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

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

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

コンセプト推察

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

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#62

デザイン解剖#62

今回はメディア：壌(JYOU)のサイトを主に文字組の視点から分析します！

▼今回分析させていただくサイトはこちら

俯瞰で見ると、タイトルがあって、扉絵としてのMVがあって、見出しがあって、ととても雑誌的な構造をしているサイトだと分かります。
加えて、ロゴ以外は全てデバイステキストを使用。細かな調整の裏側を覗かせてもらいます。

使用フォント大見出し：New Spirit Condensed　文

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#61

デザイン解剖#61

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

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

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

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

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#60

デザイン解剖#60

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

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

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

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#59

デザイン解剖#59

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

MV

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

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#57

デザイン解剖#57

今回はオープンロード合同会社さんのサイトを分析します！

MV

使用色オレンジ(f5a70f)/白(F5F2EF)/黒(222222)
完全な黒ではなく僅かに明るさをいれることで柔らかい印象に。
オレンジも彩度を高くしすぎないことで優しさを表現している。

フォント#A1ゴシック
メニュー18px,タイトル40px,リード文24px
A1ゴシックは、線の交差部分に墨だまりがあったり、角丸になって

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#56

デザイン解剖#56

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

MV

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

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

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

もっとみる
AYA@デザイン

AYA@デザイン

デザイン解剖#39

デザイン解剖#39

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

---

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

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

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

もっとみる