Webデザインレビュー　【代官山青果店】編

代官山青果店

アクセス時の要素の出方が心地よい。流れるようにリズム良くいろんな出方をして出てくる。それがバラバラな感じではなくテンポ良くやってるから心地いいんだろうな。

お店からのおすすめが流れるのかわいいな。

メニューを開くと半分は画像で、メニューと連動して変わるのもいい（PCのみのよう）。
おしなものの方のhover時の動きはあまりみたことがなくていいな。一文字一文字が横にスライドして変わるというか。
→サイト内全体のhoverだった。

ECサイトなのにECっぽくなくていいな。

ベストセラーのカルーセル画像右上にナンバーと一緒に表示をバーで表しているのかわいい。いいあしらい。ここのテキストの出し方も素敵。黒帯がしゅんと出るとか。

前見たサイトでもそうだったけど、見出し部分のフォントサイズ小さめだな。今それが流行っているというか流れになってるのかな。

パンくずがheader付近ではなく、footerあたりにあるのもいいな。Appleとかもそうだけど、下にあった方がバランスもいいし、ユーザー的にもページを見終わった時にあるからいいよな。

footerの組み方も綺麗。newsの組みもいいな、PCもスマホも。

白と濃紺、あとはグレーをうまく使っていてスタイリッシュ。

私はこれくらいのフォントサイズでもいいし、つくっちゃうけど小さいと感じる人もいるのかな。いつもフォントサイズ悩みどころ。狙っているユーザーによるのだけども。

画像が楽しそうだったり美味しそうだったり綺麗で素敵だな。

PCだと、ログインとカートは上に常にあるけど、スマホだと良くあるけど下についているのはデバイスを考えてて参考になる。

フルーツサンド食べたいな。

■フォント
font-family: dnp-shuei-gothic-gin-std,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;

こっちが欧文（見出し）？
font-family: Inter,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;

DNP Shuei Gothic Gin Std | Adobe Fonts

Montserrat - Google Fonts

Inter - Google Fonts

■参考（考察）
・流れる文字をcssで。

CSSだけで流れるテキストを実装してみた – アットクリエイト　スタッフブログ

スライダー部分は「splide」知らなかった。勉強。

【2023年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説

about部分の流れる画像はcssアニメーション。ファーストビューのおすすめのテキストも同じく。