AYA@デザイン | n2p
webデザイン/バナーの分析記事をまとめたマガジンです。週に1回更新していきます！
会社のnoteで記事を書きました！よければチラッと覗いてみてください🌱 https://note.com/nonameproduce/n/n71f0f9d5d0eb
記念すべき70回目…！今回は【粥粥好日 | アジアを味わう、新感覚お粥】サイトを分析します！ コンセプト推察「やさしく、アップデート」「ネオ東洋」 ABUOT(メッセージ)に「〜お粥を、まったく新しいワクワクする日常食へとアップデート。」とあること 色味が淡い色で統一されていること 緑・黄色・赤という、中華街で見かける色の組み合わせながら、明度の高いトーン採用することで、柔らかい"ネオ"感を醸し出していること から推測しました。 ローディング画面なし 文字英文
今回は10th Anniversary | Money Forward マネーフォワード10周年サイトを分析させていただきます！ コンセプト推察サイト自体のコンセプトは「さあ、人生をもっと前へ。」だそうです。 こちらは推察ですが、デザインのコンセプトをつけるとしたら「自分の人生を描こう」かなと思いました。 手書きらしさの残るイラストや、ロゴのテクスチャ、ペンキを塗ったようなあしらいから発想しました。 ローディング「さあ、人生をもっと前へ。」と、様々な夢を追いかける人々を応
こんにちは。AYAです。 今回は、佐藤好彦著『デザインの教室~手を動かして学ぶデザイントレーニング~』をまとめ、実践してみるnote#2です！ Lesson2 その2「面(四角形)を使ったデザイン」を要約し、実践します！ 要約 このような、情報のまとまり、強弱の整理を事前にしておくべきというのは、グラフィックデザインでもwebデザインでも、情報量の多さや性質に限らず最も大事なことかもしれない、と最近痛感しているところです。 自身の弱みとして、"文字サイズやマージンの大小
今回は地域交通共創モデル実証プロジェクトのサイトを分析させていただきます。 コンセプト推察萌芽をつくろう 新たな取り組みを作り出していく段階であることや、全体的に緑色を使用していることから推察しました。 文字周り navi・見出し なんとFVに表示されている文字はすべてSVGで構成されています。 和文：たづかね角ゴシック 英文：Europa Grotesk SH Medium(？) 平文：Noto Sans JP Weight:500 Size:18px Lin
今日はARIGATOBANKさんのサイトを分析&トレースさせていただきます。 落ち着いた色味と、大胆な角丸の使い方、写真のトーン、手書き風のあしらいなどに惹かれて魅力的なサイトだなあと思いました。 コンセプト推察「誰にでも、優しく。」 ・"寄付金"を使うサービスであること ・誰でもすぐにつかえるサービスであること ・シンプルなサイト構成、優しい色合い、Rの強い角丸 から、上記のコンセプトを考えました。 文字周りnavi Noto SansJP weight700 siz
こんにちは。AYAです。 今回は、佐藤好彦著『デザインの教室~手を動かして学ぶデザイントレーニング~』をまとめ、実践してみるnote#1です！ この本を読んで、これまで感覚的にしか分かっていなかったことが論理的に腑に落ちたので、出会ってよかった…！という思いを噛み締めつつやっていきます！ 第一章 視覚的な表現における「構成」この章では、「根拠を作り上げるようにデザインする」(p8)という言葉がとても印象に残りました。 また、「内的必然性」＝「描かれたそれぞれの要素が、お互
今回は FruOatsさんのブランドサイトを分析&トレースさせていただきます！ コンセプト推察 優しいおやつで、からだを嬉しく ・カロリーを気にしている人でも我慢せずに食べられる ・ヘルシーさとおいしさを両立している という商品の性質から、暖色・丸みの強いフォントで優しい印象を大事にされているのかなと思いこのコンセプトにしてみました！ 使用フォント 英文_menu/セクションタイトル/数字/ボタン：Inter 英文_あしらい/商品名：futura PT 言わずと知
今日はルミネ荻窪さんのバナーを分析&トレースさせていただきます。 コンセプト推察 これから春になり、新しいことへ挑戦していく、「新たな窓を開ける」がコンセプトかなと推察します。 また被写体として映られている方＝このバナーのターゲット層と考えると、20代女性が好む、ぬけ感がありながらもポップな色使いを採用されているのかなと思いました。 使用フォント 英文：EngraversW01 Regular Engraversは"彫刻師"を意味するそうで、確かにセリフの▲部分が、彫
今回はBan Design Studioさんのサイトを解剖&トレースして学ばせていただきます！ コンセプト推察 「産地とくらしの間をデザインする」というコピーや、「その土地の中にある「ふつう」に出会う時、その魅力に驚くと同時に、うらやましく思います。」というリード文、商品写真を中心にした構成から、このサイトのコンセプトは「"ふつう"を見つける」かなと推察しました。 マウスオーバーでズームされる写真や、Detailの横のアニメーションから、何かを発見した時に寄って見てしま
いやぁ〜お久しぶりのnoteです…！ なんと8ヶ月くらい間が空いてしまいました。 またイチからコツコツやっていきますのでどうぞよろしくお願いします。 今回はナゴレコさんのバナーを解剖&トレースさせていただきます。 使用フォント おばんざい 特集：丸明オールド 親しい人としっぽり楽しみたい、/ずらりと並ぶ料理に〜：KOくれたけ銘石B Nagoya Obanzai：わからず…(分かる方いればコメントで教えてください！) 使用色 黄色(#E8CD7B)：背景 茶色(#
今回はメディア：壌(JYOU)のサイトを主に文字組の視点から分析します！ ▼今回分析させていただくサイトはこちら 俯瞰で見ると、タイトルがあって、扉絵としてのMVがあって、見出しがあって、ととても雑誌的な構造をしているサイトだと分かります。 加えて、ロゴ以外は全てデバイステキストを使用。細かな調整の裏側を覗かせてもらいます。 使用フォント大見出し：New Spirit Condensed 文字サイズ/高さ：183px 小見出し：DNP 秀英角ゴシック銀 文字サイズ/高
今回はABEMAのバナーを解剖します！ 初めて知ったんですが、ABEMAというサービスを運営している会社名が、Abema TVなんですね！逆だと思っていた... 使用色黄色のグラデーションで金色を表現(F7EBBA~F3D679のグラデ) 白、黒 フォント英字：おそらくHelvetica Neue 日本語：おそらくA-OTF ゴシックMB101 Pr6N どちらもウエイトが高く、どっしりとした雰囲気を醸し出しています サンセリフ体、ゴシック体のため、シンプルな印象にも
今回はアルコール度数0.5%で話題の"ビアリー"サイトMVを分析します！ 文字まわりフォント：メインコピーに明朝体を使用。 ウェイトの低い文字を使い、文字間も広めにとることで軽やかな印象に。 文字右側：「選択肢」「誕生」「New」グリッドが揃っていることで整った印象 文字左側：ロゴ、「0.5%」商品名、商品説明のグリッドは揃っている が、「微」は左側にはみ出している ＝全て揃っているよりも、一部左右に伸びている部分があることで、より目立たせたい部分が目立つ？ 商品名と
今回はミツワ電機株式会社さんの採用サイトです。 MV ・画像をファーストビュー全面に配置 ・初回ローディング時にフェードインするようなアニメーション ・メッセージを中央に配置し、周囲の余白をとることで視線を集中させている ・「MESSAGE」ボタンから社長インタビューページに遷移。MVでの文言掲載は最小限になっている ボタンやあしらいで使われている線は全て1pxと細く、そのことで繊細な雰囲気になっている 使用色コーポレートカラーの赤、白、黒 完全な白/黒を使用している
今回はオープンロード合同会社さんのサイトを分析します！ MV 使用色オレンジ(f5a70f)/白(F5F2EF)/黒(222222) 完全な黒ではなく僅かに明るさをいれることで柔らかい印象に。 オレンジも彩度を高くしすぎないことで優しさを表現している。 フォント#A1ゴシック メニュー18px,タイトル40px,リード文24px A1ゴシックは、線の交差部分に墨だまりがあったり、角丸になっていたりと優しさを感じるフォントです。 ・左側のメニュー固定でMV部分がスライド
