【サイト分析】 Roaster

ウェブメディア・紙媒体・SNSの編集・ディレクションを手がけるRoasterさんのサイト。デザインと開発はGarden Eightさん。

https://roaster.co.jp/

推しポイント

1. 文字が出てくる時/消える時のアニメーション
出てくる時はゆったり大きな動き、消える時はサッと控えめな動き
X軸Y軸でも回転があるので奥行き感のあるアニメーション

2. ページを出る時/入る時のアニメーション
テキストも画像も、画面に表示される時だけでなく、ページを出て行く時もフワッとアニメーションで消えていく🫧

3. 2と非同期遷移(?)によって実現される、ページ遷移時のシームレスな感じ
ロードがない&描画まで早いから出る時のアニメーションと入る時のアニメーションが繋がっているような感覚
ヘッダーやメニューが表示されたままなのもシームレスな感じで心地いい🍃

4. Menu開いた時のアニメーション
背景が若干斜めに降りてくるところ、テキストのアニメーション、幕が降りるような感じで素敵
閉じるときもアニメーションあるのもいい

5. hoverした時にカーソルのところに画像がついてくる（Service）
ちょっと遅れてついてくるところ、切り替わる時の滑らかさ

6. 横スクロールエリアのスクロールトリガーアニメーション（Culture）
上下から合流してくるみたいな入ってきかた。発想がすごい・・

滑らかなページ遷移

設計

アーキテクチャ

• SPA？非同期遷移？　ページ遷移時にロードがない・・

• Wappalyzerでフレームワークやライブラリ検出されないけど、もしSPAや非同期遷移ならどうやって実現しているんだろう💭

レスポンシブ対応

• 幅：770や852などを境目に部分的にレイアウト変更

  • 770以下：ヘッダーの回遊非表示

  • 余白はvw

• 横スクロールエリア

  • タッチデバイス：デフォルトの横スクロール（横方向のスクロール/スワイプで横に動く）

  • その他：縦方向のスクロールで横にスクロール

フォントサイズ

• html

  • font-size: max(.763vw,11px);

• テキスト要素

  • 装飾テキストはvw、ゴシック書体の情報としてのテキストはmax(vw, px)

演出

テキストアニメーション

• spanで1文字ずつに区切って、transform3d, rotateX/Y/Z, scale, opacityでアニメーション

will-change: auto;
transform-origin: left bottom;
transform: translate3d(0.5em,0,0) rotate(10deg) rotateY(120deg) rotateX(-30deg) scale(1.1);
opacity: 0;

Menuアニメーション

• 斜めに下がってくるMenu背景

transform: translateY(-50%) rotate(-2.5deg);

• 伸びる線（scale0=>1）

• 斜め上から出現するテキスト

transform: translateY(110%) rotate(5deg) scale(1.1);

hoverでカーソルのところに画像

切り替わる時もフワッと