![見出し画像](https://assets.st-note.com/production/uploads/images/71661531/rectangle_large_type_2_f0b123ade261f64aa5e8c91af143315b.png?width=1200)
デザイン分析#012 | STORES決済
■サイトの目的
ターゲット:店を個人経営している人、店舗経営者、新規開業を予定している人
キャッシュレス決済を導入してもらう
■デザイン
シンプルで知りたい情報が整頓された構成で、わかりやすい
青系の配色にまとめ、信頼、誠実な印象を受ける
余分な装飾がないのもBtoBらしいデザインで上記のデザインイメージを相乗させていると思った
■書体
見出し:35px
平文:15px
■配色
テキストカラー:#002e4e
![](https://assets.st-note.com/img/1644193933235-R2unaydRyg.png?width=1200)
テキストカラーを紺にすることで、青系の配色と相性がよくまとまっている。装飾には差し色でパステルの紫や黄色も使用されている
![](https://assets.st-note.com/img/1644192817166-LPz3TKYX9W.png?width=1200)
■FV
利用シーンをFVに。手にとっていることで、機械のコンパクトさが伝わる写真。
コピーは簡潔で、余計な装飾がないので写真が目を引く
まずは相談してもらうように促している
コンテンツ幅:1100px
余白
コンテンツ間82px
ブロック間24px 42px 64px
![](https://assets.st-note.com/img/1644194150024-IgZv1uBmEq.png?width=1200)
情報の項目をブロックに分けてレイアウトされている
基本構成はアイコン、小見出し20px、数字64px
必要な情報をパッと見て得ることができる
![](https://assets.st-note.com/img/1644194413089-nwCN4Ph9qm.png?width=1200)
アイキャッチとアンカーリンクが配置されている
■まとめ
BtoBのLP作成の際に、情報のまとめ方が参考になると思った。情報に優先順位(ジャンプ率)をつけることで、整理されておりわかりやすい。
下層にはアンカーリンクを配置し、知りたい情報にアクセスしやすい導線になっている。
青など同系色で配色をまとめる際、テキストカラーも黒でなく紺にして色をまとめる手法は参考にしたい。
この記事が気に入ったらサポートをしてみませんか?