サイト分析(2021.06.07-06.11)
Wild Souls
商品のラインナップは上下にずらす、アニメーションで流す、商品名を座布団からずらすことで短調にならず、没個性的にならないようにしている。
![画像1](https://assets.st-note.com/production/uploads/images/54484753/picture_pc_181865df70d8c99ebfa963e3a54876da.png?width=800)
見出しのフォントはCanelaを使用。形はセリフ体っぽいが線が太めなのでカジュアルっぽく見える。
![画像2](https://assets.st-note.com/production/uploads/images/54485269/picture_pc_d42708fb834178c7779f82e45528b66a.png?width=800)
Kや?など形にクセがあるためこのフォントを使うだけでサイトに味が出るなと思った。その一方で本文のフォントはクセのないGraphik LGを使用。読みやすさやサイトのイメージを考慮したフォント選定になっている。色が#000だがサイトがカラフルなので一番可読性の高い色にしたためだと思う。
![画像3](https://assets.st-note.com/production/uploads/images/54485954/picture_pc_4218bdaaff43a8089d6d67d18b3910b7.png?width=800)
商品を使ったレシピもラインナップと同様にアニメーションで流したり、上下にずらして動きを出している。また写真の大きさも全て統一せず変えている。写真の質が高いこととジャムに価値があること(色んな使い道がある)を伝えるために大きく配置している。
![画像5](https://assets.st-note.com/production/uploads/images/54486716/picture_pc_4c33c1e47430151997524ac09e45abec.png?width=800)
![画像6](https://assets.st-note.com/production/uploads/images/54486751/picture_pc_542545be282362d5c55ab55c860e4d8b.png?width=800)
![画像4](https://assets.st-note.com/production/uploads/images/54486629/picture_pc_2c9abb3bee4f7c5fadaaae942f88d58d.png?width=800)
サイト内にはイラストが使われているが、これは商品に使われている食材やパッケージが環境に配慮したものであり、そうしたブランドの姿勢を示すために手や地球のイラストを配置している。写真ではなくイラストなのは親しみやすさやカジュアルさを出すため。
![画像7](https://assets.st-note.com/production/uploads/images/54487009/picture_pc_b09d91d5e865eb41573999ed6494de94.png?width=800)
動物実験をしないコスメブランドのLUSHも同様にイラストを使用している。
サイトは写真を3つ重ねるなど同じレイアウトのものが繰り返しているが、色を変えたりコンテンツによって写真だったものがイラストに変わっていたりと微妙に変化をつけることで似たような印象を感じさせないようにしている。
今週気になったサイト
グリッドが敷いてあり、複雑なレイアウトにしているわけではないが視差効果を入れたり、スクロールした時にグニョンとした動きを入れるだけですごそうに見えるなと思った。
背景に対しての画像や動画の馴染ませ方が上手だなと思った。
![画像8](https://assets.st-note.com/production/uploads/images/54487873/picture_pc_bb134f518d45c8b22d5dd609076e0f08.png?width=800)
画像の端にある「 」や背景の線と線が重なった所の+があるだけですごく決まって見えるなと思った。
ウルトラエルさん制作のサイト。作った方が未経験で転職して1年くらい?の方で、デザインからコーディングまで一貫して行っているのがすごいなと思った。
この記事が気に入ったらサポートをしてみませんか?