Webデザインレビュー 【Bitesized | World's Most Delicious Design Subscription】編
海外サイト。
デザイン会社というかデザインのサブスクの会社かな？
デザイナー斡旋会社というか。日本で言うレバテックとかに近いのかな？
Bitesized | World's Most Delicious Design Subscription
https://www.bitesized.design/
レトロなダイナーな雰囲気。デザインの注文をダイナーの注文のように表現している。取り扱っている・できることのメニュー表が本当のお店のメニュー表みたいでかわいい。色合いがレトロでかわいい。
アイコンやキャラクターもそれっぽくレトロでいい。
スクロールすると背景の上をテキスト類が上に流れていくけれど、背景は固定ではなく、若干気持ち動いているのも奥行きが出ていい。
PCでの右に出るスクロールバーが紫っぽいピンクで細くカスタマイズされていて、デザインの世界観を細部までこだわっているのがわかる。
フォントがかわいいな。
ファーストビューのテーブル上にあるメニュー表をクリック（タップ）するとメニューまでスクロールするのは遊び心があってかわいいしいいな。
動きやhoverで見せると言う感じではなく、必要最低限なのもいい。
■欧文フォント
メイン（太め・antonやimpactくらいの存在感）
font-family:VVDS Fifties, sans-serif;
個人利用ならフリーで使えるのかな？
商用だと２個目のように買う必要があるのかしら。
飾りやアクセント（筆記体）
font-family: Redonto Ave, sans-serif;
普通のテキスト・文章部分
font-family: Poppins, sans-serif;
GoogleでもAdobeでもあり。
■参考
・bodyのフォントサイズに「 clamp(16px, 2vw, 24px)」使用
画像は拡張子「.webp」使用。「srcset」で幅に合わせて出しわけ
・webpについての説明とメリット
https://www.profuture.co.jp/mk/column/40040
・webpとjpg、png相互変換ツール
・imgの「srcset」属性について（レスポンシブイメージ）
https://ics.media/entry/13324/
・ページ内リンクのスムーススクロール（jquery /cssのみの２パターン）
この記事が気に入ったらサポートをしてみませんか？