![見出し画像](https://assets.st-note.com/production/uploads/images/80426598/rectangle_large_type_2_dc9a8e53827b0ee86bd3ba99d8c253ff.png?width=800)
#1日1サイトレビュー 122 youmeme
フォント
・Dilo World
https://justtheskills.com/product/dilo-world/
Dilo Worldは太字のオールキャプスフォントで、漫画やコミックのような外観をしている。丸みを帯びた角と弾力のあるベースラインは、このフォントで書かれたそれぞれの言葉に、よりおふざけでフレンドリーな感じを与えている。ポスター、ウェブサイトのヘッダー、パッケージ、Tシャツなど、パンチラインを必要とするものなら、Dilo Worldがその答えです。これ以上探す必要はありません。
![](https://assets.st-note.com/img/1654904402352-uZZQ6g7jMG.png?width=800)
・Inter
![](https://assets.st-note.com/img/1654904412424-8GyHEfOP8H.png?width=800)
カラー
![](https://assets.st-note.com/img/1654904908137-Reln6q89Qs.jpg?width=800)
感想・考察
(1)幻想的でかわいさも溢れるfv
背景は、グラデーションで点滅する素敵なライトで右側ではアニメーションの犬が、かわいらしさを象徴するフォントが左側に。
幻想的と可愛さが共存している。
注目したいのは、犬の頭の周りについているガラス?的なものが後の光を透過していること。マテリアルにも凝っていて素晴らしい!
![](https://assets.st-note.com/img/1654904941973-zX1EbV1RjJ.png?width=800)
(2)スクロールに応じて3Dモデルのアニメーションとカメラをコントロールしている。
スクロールイベントを取得して、カメラやアニメーションを切り替えるのは使えそう。勉強になる。
![](https://assets.st-note.com/img/1654905856710-3W7QvGxcx5.png?width=800)
(3)ラインでセクションを区切る
背景がcanvasで背景色によってメリハリをつけることができないため、ラインを使ってセクションごとにメリハリをつけている。
![](https://assets.st-note.com/img/1654906081061-CLrT7l5JRU.png?width=800)
![](https://assets.st-note.com/img/1654906091218-VuSOpdgTVZ.png?width=800)
この記事が気に入ったらサポートをしてみませんか?