Service / SaaSOverseas / CAPicked 2026.10.21

L.I.S.A. — Locomotive Interactive Super Assistant

サービス / SaaSのWebデザイン参考 — デジタルエージェンシー

サイトを見るlisa.locomotive.ca

lisa.locomotive.ca/en開く ↗

L.I.S.A. — Locomotive Interactive Super AssistantのPC版ファーストビュー

サイトを開く ↗

L.I.S.A. — Locomotive Interactive Super Assistantのスマホ版ファーストビュー

Editor's note — 編集部の視点

会社案内なのに、ブラウン管頭の3D人形しかいない。

カナダのLocomotiveによる特設サイト「L.I.S.A.」は、3Dキャラと「[CLICK] TO START」の一行だけで、会社紹介をアシスタントに会う体験へ変えている。

LeoMotion & Direction

首元からダラッと垂れたケーブル、あれが効いてる！ツルッとした3Dじゃなくて、SF映画の小道具みたいな生々しさ。電源を入れたら本当にしゃべり出しそうで、クリック前からもうワクワクが止まらない！

1FVにあるのはロゴとLet's talk、3Dの人物だけ。説明文を捨てて、まず触らせる
2頭はブラウン管、画面は星空に「[CLICK] TO START」。ゲーム機の起動画面の文法で、クリックを誘う
3背景は淡いグレーのグラデーションだけ。黒いモニター画面に、視線が自然と吸い寄せられる

Color

L.I.S.A. — Locomotive Interactive Super Assistantの配色

Typography

使用フォントと無料の代替

ロゴ・ナビ・ローディングの文字

Aa あア

使用: HelveticaNowDisplay
代替: Inter Tight

Structure

ページ構成（上から順）

01
ローディング
黒い画面に「Digital-First Agency」「Montreal, Canada」などの文字列が、ランダムな記号混じりの状態から組み上がっていく（SPキャプチャで確認）。
02
ヘッダー
左に「Locomotive®」、その右に記号的なシンボル、右端に「Let's talk」だけを置いた極小のテキストナビ。
03
3Dキャラクター
白〜グレーのグラデーション背景の中央に、タートルネックの人物がブラウン管モニターを頭にかぶった3Dモデルを胸から上で据える。首元にケーブルが垂れる。
04
スタート画面
モニター画面は星が散る黒地に「[CLICK] TO START」の一行。画面下の筐体には青く光るインジケーターが並ぶ。
05
ページ全体
縦スクロールはなく、1画面（高さ900px）で完結する。以降の体験はクリックから始まる構成。

Interaction

アニメーション・インタラクション

ロード時の文字列は、ランダムな記号から正しい文字へ置き換わるテキストスクランブルと思われる。requestAnimationFrame で1文字ずつ確定させると再現可能
キャプチャごとにモニターの角度がわずかに違い、頭部がポインタや時間に反応して動いていると思われる。Three.js でモデルの rotation をポインタ座標に補間させる
モニター画面は3Dモデルのスクリーン面に CanvasTexture や動画テクスチャを貼り、星のノイズと文字を描いていると思われる
サイト名（Locomotive Interactive Super Assistant）から、クリック後はアシスタントとの対話形式で会社情報へ案内する設計と思われる

スクロールのコマ撮り200–900ms

L.I.S.A. — Locomotive Interactive Super Assistantをスクロールしたときのフレーム1 — 01

検出された技術:Three.jsWebGL

Reproduce

再現するときのポイント

013Dモデルは質感を作り込み、背景は単色のグラデーションにして主役を1体に絞る
02モニター内は CanvasTexture で描画し、黒地に明るい青紫の文字1行だけを置く
03UIの文字は Helvetica 系の1書体に統一し、画面の上端に最小限だけ配置する
04操作の入口はクリック1回に限定し、その後の体験をすべてキャラクター経由にする

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全5セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

lisa-locomotive.katapick.md

1---
2title: "L.I.S.A. — Locomotive Interactive Super Assistant デザイン分析書"
3source: https://lisa.locomotive.ca/en
4katapick: https://katapick.com/sites/lisa-locomotive
5category: サービス / SaaS
6region: 海外 (CA)
7tags: [3D/WebGL, ミニマル, モノクロ, レトロ]
8launched: 2026-09
9verified: 2026-11-07
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12generator: Katapick
13---
14 
15# L.I.S.A. — Locomotive Interactive Super Assistant — デザイン分析書
16 
17> 会社案内なのに、ブラウン管頭の3D人形しかいない。カナダのLocomotiveによる特設サイト「L.I.S.A.」は、3Dキャラと「[CLICK] TO START」の一行だけで、会社紹介をアシスタントに会う体験へ変えている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22