![見出し画像](https://assets.st-note.com/production/uploads/images/71270595/rectangle_large_type_2_d88fce900b6497d320c1cc2060447cbb.png?width=1200)
デザイン分析#008 | たかまつななオフィシャルサイト
■選んだ理由
キュレーションサイトでFVが目を引いた
文字組が綺麗で気になった
![](https://assets.st-note.com/img/1643702125545-7rfetDLrhb.png?width=1200)
■書体
英語:Overpass コンテンツタイトル70px
平文:A1ゴッシック 15px #010101
余白
コンテンツ周囲 120px
タイトルタイトルと平文の間 48~56px
下線との間 16px
余白を大きくとっているので、コンテンツ ごとにまとまっている
また英語タイトルと平文のジャンプ率が大きく、気持ちの良いレイアウト
■デザイン
![](https://assets.st-note.com/img/1643762997529-6spoh4Ripz.png?width=1200)
弧の大きい角丸オブジェクト
→未来的な印象を受ける
ロゴと同じ一部鋭角になっている
![](https://assets.st-note.com/img/1643763119408-tkMqtgr6SR.png?width=1200)
余白が大きく、ジャンプ率の高いリンク
カラフルだがトーンが統一されているので統一感がある
![](https://assets.st-note.com/img/1643763221249-QZ8a3HyTom.png?width=1200)
アンカーリンク
アイキャッチ画像内にレイアウトを収めることで、シンプルで小さいテキストでも目がいく
アイキャッチやサイト内に、たかまつななさんの顔写真があり
人柄が想像しやすいなと思った
![](https://assets.st-note.com/img/1643763430062-xBnK3gZH1o.png?width=1200)
![](https://assets.st-note.com/img/1643763511286-52p8ZnmABa.png?width=1200)
色ベタの上に、写真を配置する際に影をつけレイヤー感をだしている
![](https://assets.st-note.com/img/1643763570684-DW9FDACWtf.png?width=1200)
サポート金額決済リンクに優先順位がついている
サポートしやすい金額のリンクを目立たせているのではないかと思った
閲覧者側も金額に迷った場合、選びやすくなりそう
![](https://assets.st-note.com/img/1643763752823-PvkpDD8hHr.png?width=1200)
メニューの英語と日本語のバランスがきれい
ジャンプ率は1.6倍
英語:20px
日本語:12px
縦書きのコピーと、横書きのバナーが隣接しているが、
メニューとバナーが一括りになり、それに対して大きさのちょうどいい縦書きコピーが配置されているのでまとまっている
バナーにはわずかに影があり、写真も配置されているのがアクセントになっていてデザインが締まっていると思った
この記事が気に入ったらサポートをしてみませんか?