01Overview
制作概要
朝倉の運送会社のコーポレートサイト。公開後、発注者の判断でトップページを全面リニューアルし、「一台のトラックの一日」を10章でたどるスクロール体験に作り替えました。下層ページは企業サイトとしての実用情報を維持する二層構造です。掲載しているスコアは、この演出を全部載せた状態でのモバイル実測値です。
- 制作区分
- 実案件（掲載許可取得済み）
- 業種
- 一般貨物自動車運送
- サイト種別
- コーポレートサイト（10ページ）
- 納期目安
- 実案件で 要件定義〜公開まで4日（公開後もリニューアルを継続中）
02Problem
課題
同質化した運送業サイトのなかで、荷主に選ばれる
- 制作目的
- 荷主からの見積もり・問い合わせ獲得。公開後、発注者の判断でトップページを会社の看板として作り替え、朝倉から九州へ届けるまでの仕事そのものを見せる構成にした。
- 読み手
- 青果物・農産物の輸送を委託する荷主企業の担当者。現場からスマートフォンで見る場面が多い。
03Research
調査と気づき
運送業のサイトは同質化していて、比較の土俵が価格と車両数になる
競合のデザインを調べたところ、業界内で似た形のサイトが並んでいました。同じ土俵に乗ると価格や車両数の比較になります。朝倉の産地に密着した輸送品質を、業界の外側の作り方で見せる方針を、ここで決めています。
04Decision
設計判断
朝倉の産地に密着した輸送品質。運送業サイトが同質化しているなか、一台のトラックが朝倉を出発して九州へ届けるまでを10章のスクロールで見せ、業界の外側からブランドを立てる。
速度と表現のどちらを取るかを、発注者と決めてから作った
公開後、発注者からトップページを会社の看板として作り替えたいという方針が出ました。演出を積めば表示速度は必ず落ちます。そのトレードオフを数値で示したうえで、トップページは表現を優先し、下層の企業情報ページは従来どおり軽量に保つ二層構造で合意しました。何を捨てて何を取ったかを説明できる状態にしてから作っています
05Implementation
実装
主役のトラックはAI生成ではなくBlenderで作った
装飾を施した実在の一台をサイトの主役にするため、AIの自動生成ではなく、実車の撮影24枚をもとにBlenderでモデリングしました。冒頭の「闇からヘッドライトが点いて目の前を通過する」192枚と、終盤の「灯が順に消えて一日が終わる」128枚は、そこからプリレンダした連番です。実在の車両を生成AIで作ると、実物とは違う車を実物として見せることになるため使いませんでした
演出が動かない環境をすべて成立させた
JavaScriptが無い場合・LINEやInstagramのアプリ内ブラウザ・prefers-reduced-motion では、演出章を畳んで静的な完成状態を出します。アプリ内ブラウザは発注者から「LINEで開くと表示がおかしい」と報告を受けて対応したもので、動作保証のできない環境では壊れた演出より確実な静止画を出す、という判断です
06Verification
検証
公開中のCLS 0.93を実測で見つけて原因を潰した
リニューアル後にモバイルを計測したところ、CLS 0.93（基準0.1）を検出しました。演出のせいではなく、演出章を出し分けるためのクラス付与がGSAPを含むバンドルの中にあり、実行が約270ms遅れていたことが原因でした。それまで画面1枚ぶんの高さが存在せず、後から出現して以降を丸ごと押し下げていたものです。クラス付与をhead側へ出すだけで CLS 0.001・Performance 57→84 に戻しました。演出のコードは1行も変えていません
07Result
成果
掲載しているのは、演出を全部載せた状態でのモバイル実測値です。問い合わせ数などの事業成果は未確認のため、数値は載せていません。
モバイル実測（Lighthouse・同一条件）
- Performance
- 84
- LCP
- 4.0秒
- CLS
- 0.001
08Screens
Desktop / Mobile
枠の中を縦にスクロールすると、各チャプターの実画面を確認できます
09Scope
担当範囲・使用技術
担当範囲
- 要件定義
- 競合デザインリサーチ
- 構成設計
- コピーライティング
- アートディレクション
- モーション設計
- Blenderでの車両モデリングとプリレンダ
- AI動画生成のディレクション
- 実装
- SEO・構造化データ
- 公開前検証
- デプロイ
- 公開後の性能改善
使用技術
- Astro（静的）
- GSAP + ScrollTrigger
- Canvas＋WebP連番のスクロールスクラブ
- Blender（車両モデリング・プリレンダ）
- AI動画生成（四季の風景）
- Cloudflare Workers