Service / SaaSOverseas / ARPicked 2026.09.26

Alethia

サービス / SaaSのWebデザイン参考 — 環境データ・カーボンMRV

出典: alethia.earth

Editor's note — 編集部の視点

苔むした岩に、計測値のラベルを貼ってる。

環境テック企業Alethiaのサービスサイトは、苔むした岩に白い枠と等幅の数値ラベルを重ね、詩的な写実と冷静なデータの同居を信頼の根拠にしている。

LunaType & Whitespace

GeistとGeist Mono、同じ一族で声色だけ変えてる。だから混ぜても濁らない。見出しの端が岩に掛かって読みにくいのは減点。でも、この兄弟使いは……いいね！！

1岩に白い四角枠と「-4.3 tCO2E」のラベル。自然の写実とHUDの記号が、事業内容を一瞬で翻訳する
2小見出しはライムの小さな等幅ラベルに統一。背景色が変わっても、同じ声で文脈を告げ続ける
3深緑・霧のグレー・黒・オフホワイトを章ごとに切り替える。長いページに、場面転換のリズムが生まれる

Color

Alethiaの配色

Typography

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

見出し・本文（Medium / Regular / SemiBold）

Aa あア

使用: Geist
代替: Geist

ナビ・ラベル・計測値・ボタン

Aa あア

使用: Geist Mono
代替: Geist Mono

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型72px · 0.95 · 500
見出しKatapick 型40px · 0.95 · 500
小見出しKatapick 型24px · 1 · 400
本文The quick brown fox — 参考を型にする18px · 1.2 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央に SOLUTIONS / OUR TECH / COMPANY / RESOURCES の等幅ナビ、右に「LET'S TALK」とライムの矢印アイコン。SPではライムの「MENU」ボタンになる。
02
ヒーロー
深緑の背景に3行の大きなサンセリフ見出しを左上、中央に苔むした岩、周囲に小さな岩を配置。岩の上に白い四角枠と等幅の計測値ラベルを重ね、左下にリード文、右下に「Scroll to discover」。
03
ビジョン
霧がかったグレーの背景に植物と土のビジュアルを置き、中央右に説明文、画面内に丸いアイコン付きの注釈を点在させる。
04
計測ステーション紹介
植物の中に立つ観測機器のビジュアルに、ガラス風のパネルで計測値のグラフや機能リスト（観測システム、ブロックチェーンでの追跡など）を重ねる。
05
Our Solutions
白背景に見出しと、写真を背景にした角丸カード2枚（Nature-Based / Supply Chain）を横並びにする。
06
Our Technology
黒背景に観測機器のモノクロ写真を大きく置き、中央の見出しからAtmospheric-Based MRV・Blockchain technology の説明とボタンを左右に振り分けて配置する。
07
Alethia Solves
オフホワイトの背景に、ダッシュボード画面・写真・数値カード（-2.4 tCO2e など）を散らしたコラージュの中央に見出しを置く。
08
Redefining・Case studies・News
フルページキャプチャは9000pxで切れており、以降は抽出データの見出しのみで確認。4項目の特長、導入事例（Success Story×2）、ニュース一覧が続く。
09
CTA・フッター
見出し「Turn Climate Data Into Business Results」で問い合わせへ誘導して締める（見出しより）。

Interaction

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

ヒーローの岩は位置・奥行きがばらついて浮遊しており、動画またはスクロール・マウス連動のパララックスと思われる。岩を切り抜きPNGで複数枚重ね、transform を個別の速度で動かすと再現できる
計測値ラベルと四角枠は、スクロールやロードに合わせて出現するHUD演出と思われる。抽出データの Lottie で線や数値を描いている可能性がある
Lenis による慣性スクロールで、背景色が切り替わる長いページでも移動が滑らか
抽出データに Framer があり、セクションごとの出現アニメーションは Framer のスクロール連動エフェクトで組んでいると思われる

スクロールのコマ撮りLenis ·

検出された技術:LenisFramerLottie

Reproduce

再現するときのポイント

01見出しは Geist Medium を大きく・行間詰めで組み、ナビ・ラベル・数値はすべて Geist Mono に寄せて「計測データ」の雰囲気を出す
02ライムグリーン #c6f19d はラベルの地色とボタンのアイコンだけに使い、面積を小さく抑える
03自然物のビジュアル（岩・植物）と、白い枠線・数値ラベルの人工的なUIを重ねて、科学的な検証の文脈を視覚化する
04セクションごとに背景を深緑・グレー・白・黒で切り替え、ページの区切りを色で示す

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

alethia.katapick.md

1---
2title: "Alethia 再現用デザイン仕様書"
3source: https://www.alethia.earth/
4katapick: https://katapick.com/sites/alethia
5category: サービス / SaaS
6region: 海外 (AR)
7tags: [ダーク, 写真主体, 等幅フォント, スクロール演出, 角丸, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# Alethia — 再現用デザイン仕様書
17 
18> 苔むした岩に、計測値のラベルを貼ってる。環境テック企業Alethiaのサービスサイトは、苔むした岩に白い枠と等幅の数値ラベルを重ね、詩的な写実と冷静なデータの同居を信頼の根拠にしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22