# L.I.S.A. — Locomotive Interactive Super Assistant｜サービス / SaaSのWebデザイン参考

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

- URL: https://lisa.locomotive.ca/en
- 解説ページ: https://katapick.com/sites/lisa-locomotive
- カテゴリ: サービス / SaaS / 地域: 海外（CA）/ 業種: デジタルエージェンシー
- テイスト: 3D/WebGL、ミニマル、モノクロ、レトロ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 5/5（目安 48 時間）

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

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

## 配色
- #b6b6b6 Studio Gray（背景（グラデーションの明部））
- #828282 Backdrop Shadow（背景（グラデーションの周縁））
- #000000 CRT Black（テキスト / モニター画面）
- #9190ce Phosphor Lilac（画面内テキスト）
- #5b84ff Standby Blue（インジケーター / アクセント）

## フォント
- ロゴ・ナビ・ローディングの文字: HelveticaNowDisplay（代替: Inter Tight）

## よくある質問
### L.I.S.A.（Locomotive）のサイトで使われているフォントは？
ロゴやナビ、ローディングの文字に HelveticaNowDisplay が使われています。無料で近い雰囲気にするなら Inter Tight や Inter が候補です。

### L.I.S.A.のような3Dキャラクターのサイトはどう作る？
Three.js で3Dモデル（glTF）を読み込み、ポインタ位置に合わせて頭部を少し回転させ、モニター画面には CanvasTexture で文字やノイズを描くのが一般的な方法です。

### どんな業種の参考になる？
エージェンシーやクリエイティブスタジオ、AIアシスタントやチャット型のサービスなど、会社案内やサービス説明を“キャラクターと会う体験”として見せたいサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/lisa-locomotive からダウンロードできます。
出典: Katapick（https://katapick.com）