03 シネマティック
作った側: Codex
全面写真にゆっくり寄り、資料から台本・画面へ変わる区画と横に流れるリールで見せる。
- 参照
- Scrolltide Ora・SELENE／Footer.design Northeast Tomato
- 主役
- 全面写真
- 地の明暗
- 暗い写真に白文字から明るい区画へ
- 書体
- Shippori Mincho＋Noto Sans JP
- 動きの型
- 寄る写真・焦点が合う文字・ピン留め・横リール
- 写真の扱い
- P01・P03を全面に
06 定番の医療サービス型
作った側: Codex
medtube.jp の構成を再現した案。藍と山吹で区画を分け、5商品を番号つきで左右交互に見せる。
- 参照
- medtube.jp の区画の並びと医療サービスの構成
- 主役
- 白い動画プレイヤーと左右交互の5商品
- 地の明暗
- 白と明るい灰色、藍のヒーロー
- 書体
- Noto Sans JP＋Montserrat
- 動きの型
- 浮き上がる登場・再生ボタンの脈打ち・軽いホバー
- 写真の扱い
- P01をぼかした背景、I01〜I03と各商品の画像
07 カードのグリッド
作った側: Codex
大きさの違うカードで情報を組み合わせる。料金ページもライト4列・スタンダード8列を起点とした非対称の格子。
- 参照
- Scrolltide Service Bento・Ledger Bento／Supahero 製品型
- 主役
- 写真・映像・大きな料金を組み合わせた非対称カード格子
- 地の明暗
- 明るいオフホワイトと白、淡い黄緑
- 書体
- Noto Sans JP＋Inter
- 動きの型
- 時間差のカード登場・確認の点灯・画面の切替・工程線の伸長
- 写真の扱い
- P11を独立した大きな写真カードに、F01〜F03を画面カードに
08 デザインスタジオ型
作った側: Codex
スタジオの一覧を型に、場面・確認・料金・工程を横罫の行で見せる。料金の全文と条件も同じ行の設計で統一。
- 参照
- Supahero デザインスタジオ／Scrolltide Hover List／Footer.design
- 主役
- 余白を持つ一覧の行と巨大なサイト名
- 地の明暗
- 暖かい明るい灰 #efece6 と墨色
- 書体
- Zen Old Mincho＋IBM Plex Mono＋Noto Sans JP
- 動きの型
- 丸いカーソル追従・行内の写真追従・文字の横流れ
- 写真の扱い
- 通常は隠し、ホバー時だけ行右端の予約領域に表示。小画面は行内に常時表示
09 ストーリーボード
作った側: Codex
768px以上では7シーンが横へ進む。小画面・動き抑制・JavaScript無効では全文を縦に並べる。料金の詳細はフィルム穴の紙色フレームで統一。
- 参照
- Scrolltide Reel Slider・Parallax Row／動画の編集画面
- 主役
- 7枚の絵コンテと時間の進む再生位置バー
- 地の明暗
- 暗い炭色の地に紙色のコマ
- 書体
- Noto Sans JP＋JetBrains Mono
- 動きの型
- 縦スクロールに連動する横送りと00:00から03:00の進行
- 写真の扱い
- P03・P07とF01〜F03を絵コンテのコマに配置
10 ガラスと 3D
作った側: Codex
実在するT01〜T06の透過WebPを使用。カードにbackdrop-filterを使い、文字の面を十分に白くして読む領域と奥行きの装飾を分ける。
- 参照
- glass.samasante.com liquid-glass／3dicons
- 主役
- 大きな3Dアイコンと重なるすりガラスの面
- 地の明暗
- 写真をぼかした明るい青白色と柔らかい色の重なり
- 書体
- M PLUS 2＋Noto Sans JP
- 動きの型
- 穏やかな奥行きの傾き・アイコンの浮遊・縁を走る光
- 写真の扱い
- P04を全面にぼかし、T01〜T06を透明な3D素材として配置
11 王道コーポレート
作った側: Opus
左下に白い板を重ねた全幅の写真のスライダー（番号の送りと止めるボタンつき）と、写真つきのメガメニュー。料金のページは「最初の 1 本に」を紺の頭で持ち上げ、商品の一覧が今見ているカードを示す。
- 参照
- Navbar Gallery の Mega Menu／日本の企業サイトのきちんとした作り
- 主役
- 全幅の写真のスライダーと番号つきのサービスのカード
- 地の明暗
- 白と紺の帯（紺 #142b4d・淡い青灰の帯をはさむ）
- 書体
- Noto Sans JP（500・700）＋数字に Lato
- 動きの型
- 写真がゆっくり寄りながら重なって切り替わる・カードが順に現れる・メガメニューが開く・スクロールでヘッダーが縮む
- 写真の扱い
- P01・P13・P04 を全幅のスライダーに、場面と使う場所のカードの上に、下層は紺の帯の右に
12 ポップでカラフル
作った側: Opus
ベタ塗りの色面と墨色の太い線でまとめ、イラストを画面の枠やステッカーに入れて主役にした。資料の紙から動画の画面へ手描きの矢印が伸び、区画の境目の波がゆっくり揺れる。
- 参照
- Refero Playful consumer app・Hand-drawn & doodles
- 主役
- 平面のイラスト（I01〜I04・F01〜F03）を太い線の枠に入れたステッカー
- 地の明暗
- 明るい色の面が区画ごとに変わる（黄・水色・桃・若葉の 4 色のベタ塗り）
- 書体
- M PLUS Rounded 1c（800）＋Noto Sans JP
- 動きの型
- 弾むように現れる・波の区切りがゆっくり揺れる・ホバーでカードが少し傾く
- 写真の扱い
- ヒーローに P02 を丸く 1 枚だけ
14 ダーク×ネオン
作った側: Opus
ほぼ黒の地に細い格子の線が走り、カーソルを追う光でカードの縁だけが光る。色は青緑の 1 色を縁と点灯にだけ使う。
- 参照
- Refero Linear（midnight precision instrument）・Raycast（midnight command center）／Scrolltide Spotlight
- 主役
- 光る縁のカード
- 地の明暗
- ほぼ黒
- 書体
- Inter＋Noto Sans JP
- 動きの型
- カーソルを追うスポットライトで縁が光る・背景の細い格子に光が走る・数字の数え上げ
- 写真の扱い
- P13・F01〜F03・P07を暗く小さくモニターの枠の中に
15 スイス格子
作った側: Opus
12 列の格子と太い黒の罫だけで組み、共通文章にある数字を巨大な欧文の数字で左に揃える。料金のページは商品を時刻表のような行に並べ、金額の数字を大きく出す。
- 参照
- スイス様式（国際様式）: 白・黒・1 色の赤／太い黒の罫で区切る 12 列の格子／角丸と影なし
- 主役
- 巨大な数字と格子（3 人・150,000 円・3 分・2 回・5 本・1 枚など共通文章にある数字だけ）
- 地の明暗
- 白（相談の区画だけ赤・フッターは黒）
- 書体
- Noto Sans JP（700）＋数字に Archivo
- 動きの型
- 格子の罫がスクロールで引かれる・数字が刻むように出る・見出しの上を赤い面が横に滑る
- 写真の扱い
- 白黒にして格子のセルの中に（P08・P09・P07・F01〜F03）