![見出し画像](https://assets.st-note.com/production/uploads/images/72352172/rectangle_large_type_2_23cbf789aadb584fcc0426211d8dbfcf.png?width=1200)
サイトトレース | ALL CONNECT
トレースしたデザイン
![](https://assets.st-note.com/img/1644997558994-fJgqTxTtPs.jpg?width=1200)
![](https://assets.st-note.com/img/1644997184100-6dAezupsxm.png?width=1200)
コンテンツ幅 1025px
英語見出し;Neufreit / 186px程度
コンテンツの英語タイトルが、このサイトのデザインとして印象的だった。
パララックスになっている
大きく配置することで、コンテンツの区切りとしての効果も持っているように感じた
また主要なコンテンツのみに配置されている模様
日本語見出し:Noto sans JP / 13px 不透明度70%
英字を邪魔しないよう、不透明度を下げている
コンテンツの余白
コンテンツ間の区切りの余白は130px~
レイアウトの見え方によってバランスよく見えるよう、余白のサイズは調整されているように思う
フォント
見出し;32px
小見出し;21px
本文:16px
テキスト最小;10px
ボタン:16px,15px
ヘッダー:12px
フッター:13px
プライバシーポリシー,©︎:1opx
![](https://assets.st-note.com/img/1644997068096-CzkM5soHjZ.png?width=1200)
見出しと画像が重なる部分のみテキスト色が#326CDB
私だったらテキスト自体の色を変えてしまいそうだけど、こういう見せ方もあるのかと発見になった
![](https://assets.st-note.com/img/1644997211226-foJhupS6Ie.png?width=1200)
コンテンツタイトル、テキストに対して見出しが12px余白が設けられている
見え方のバランスを整えているのではないかと思う
![](https://assets.st-note.com/img/1644997306886-fJp3brhMiq.png?width=1200)
フッター部分の英語見出しのみ、#326CDB(ボタンと同じ)で目立つ
恐らくエントリーは、コンバージョンに当たる部分なので配色で差別化を図っている
背景色は、テキスト色と同じ紺色なので、フッターだけ濃い色でも馴染む。
この記事が気に入ったらサポートをしてみませんか?