# Alethia｜サービス / SaaSのWebデザイン参考

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

- URL: https://www.alethia.earth/
- 解説ページ: https://katapick.com/sites/alethia
- カテゴリ: サービス / SaaS / 地域: 海外（AR）/ 業種: 環境データ・カーボンMRV
- テイスト: ダーク、写真主体、等幅フォント、スクロール演出、角丸、ロングページ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

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

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

## 配色
- #0f1f10 Forest Black（ヒーロー背景・テキスト）
- #f5f4f2 Bone White（背景・テキスト）
- #000000 Black（テクノロジー紹介の背景）
- #ffffff White（ソリューション背景）
- #c6f19d Lime（アクセント / ラベル・ボタンのアイコン）
- #200f85 Indigo（セクション背景（フルページ未撮影範囲））

## フォント
- 見出し・本文（Medium / Regular / SemiBold）: Geist（代替: Geist）
- ナビ・ラベル・計測値・ボタン: Geist Mono（代替: Geist Mono）

## よくある質問
### Alethiaのサイトで使われているフォントは？
見出しと本文に Geist、ナビやラベル・数値に Geist Mono が使われています。どちらも Vercel が公開しているオープンソースの書体で、Google Fonts から無料で使えます。

### 計測画面のようなHUD表現はどう作る？
ビジュアルの上に position: absolute で白い枠線の四角と、等幅フォントの数値ラベルを重ねます。表示タイミングをスクロールに合わせてずらすと、計測中のような印象になります。

### Alethiaのデザインはどんな業種の参考になる？
気候テック、環境コンサル、データ検証やSaaSなど、専門的なデータの信頼性を伝えたいBtoBサービスの参考になります。

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