SWAG

グリッドを活かしたレイアウト

パキッとした緑のベタ塗りと深い黒が潔いこちらのサイト。アパレル系かと思いきや、マウスウォッシュのサイトです。

FVを過ぎると直線状に並んだイメージが目に入ります。 グリッドを活かした構成で、PCは3カラム、SPでは2カラムのリキッドレイアウト。 ブロックの縁にラインを引くと要素が整列されるので、まとまりがある印象です。区切りの線が細いことで、すっきりと垢抜けているように感じます。グリッドレイアウトの良さを生かしつつ、洗練されたセクションです。

ユーモアある仕掛け

PCの場合、商品にホバーするとくるくる回転するGIFが設定されています。SOLD OUTになるとGIFが外され、動きが止まる仕様です。テキストや差し色で強調する方法がおなじみですが、アニメーションによる表現はあまり見かけないので新鮮に感じました。見分けがつきやすく、ユーモアあるアイデアです。

オーバルをアクセントに

海外のサイトをはじめ、様々な媒体でオーバルモチーフを見かける機会が増えてきました。こちらのサイトでもいくつか登場しています。ハンバーガーボタンや商品ページの写真の切り抜き、ナンバリングのあしらいなど、アクセントとして効いています。楕円形は角のある図形より柔らかく、正円よりシャープな印象があるので、デザインに加えるとほど良いおしゃれさを演出してくれます。