CorporateOverseas / USPicked 2026.09.30

Eleos

コーポレートのWebデザイン参考 — 不動産開発（アフォーダブル住宅）

サイトを見るeleos.la

www.eleos.la開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

画面いっぱいの社名ロゴ、あとは全部等幅。

ロサンゼルスで民間資金の低価格住宅を開発するEleosのサイトは、細身のセリフのワードマークと無骨な等幅体を並べ、理想と実務の両方を語らせている。

LunaType & Whitespace

パートナー一覧、番号は小さく薄いグレーで、名前だけを大きく積んでる。等幅1書体なのに、ジャンプ率だけで主従をつけてるのは偉い。書体を増やして逃げてないのがいい。

1FVは細身のセリフで組んだ社名が横幅いっぱい。残りの文字はすべて等幅で、ロゴだけが柔らかく浮き立つ
2物件は写真・名称・状況・所在地を同じ型で並べ、「03/13」の表示で何件目かを常に示し続ける
3背景はクリームと墨色の2色だけ。全面に薄い縦罫が通り、図面のような規律がページを貫く

Color

Eleosの配色

Typography

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

ヒーロー・フッターの社名

Aa あア

使用: ELEOS ワードマーク（細身のセリフ体によるロゴ。SVGと思われる）
代替: Italiana

見出し・本文・ナビ・ボタンのすべて

Aa あア

使用: JB Mono
代替: JetBrains Mono

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

特大見出しKatapick 型44.1px · 1.05 · 600
見出しKatapick 型44.1px · 1.05 · 600
小見出しKatapick 型20px · 1.2 · 600
本文The quick brown fox — 参考を型にする13px · 1.3 · 400
ボタンKatapick 型15px · 1.3 · 600

Structure

ページ構成（上から順）

01
ヘッダー
左に線画の人物像のロゴマーク、中央右寄りに ABOUT / IMPACT / PROJECTS の等幅ナビ、右端に下線付きの「PARTNER WITH US →」。SPではナビを「MENU」にまとめる。
02
ヒーロー
樹木越しに建物の開口部を見る写真を全面に敷き、上部にクリーム色の「ELEOS」ワードマークを横幅いっぱいに重ねる。下端に等幅大文字の説明文2本と「EXPLORE ↓」を置く。
03
理念
墨色の背景。左に建物を見上げた縦長の写真、右に大文字の等幅見出し「THE NEED FOR AFFORDABLE HOUSING IS IMMEDIATE.」と、補助金を待つ公的住宅の遅さに応えて創業した経緯を短い本文で添える。
04
プロジェクト
クリーム地。左に「DIFFERENT SITES, SAME APPROACH.」と「SEE ALL PROJECTS →」、下に「IN VIEW: 03/13」のカウンター。右に物件写真・名称・説明・STATUS / LOCATION の表を1件ずつ大きく、続いて2件並びで見せる。
05
事業モデル
外壁と樹木の写真を全面に敷き、左に「THE MODEL THAT MAKES IT ALL WORK.」、右に半透明の黒いカード3枚（Private Capital / Regulatory Leverage / Vertical Integration）を配置。
06
パートナー
クリーム地の左に見出しと短い説明、右に01〜10の小さな番号付きで PATH や LACDA などの組織名を大きな等幅で縦に積む。
07
ステートメント
光が差し込むコンクリートの曲面の写真に「THE HOUSING SHORTAGE IS STRUCTURAL. SO IS OUR SOLUTION.」と「PARTNER WITH US →」を重ねる。
08
お問い合わせ・フッター
「GOOD HOUSING TAKES GOOD PARTNERS. LET'S TALK」の見出し、メールアドレスと所在地、ナビ・SNS・規約のリンク。最下部に墨色の巨大ワードマークを下辺で切れる位置に置く。

Interaction

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

Lenis による慣性スクロールと、GSAP での見出しや写真のフェードインが入っていると思われる
プロジェクト一覧の左カラムは position: sticky で残り、スクロールに合わせて「IN VIEW」の番号が更新されると思われる
フッターのワードマークは下辺で切れた状態で撮影されており、スクロールでせり上がる演出か、はみ出しを意図したトリミングと思われる
全面に見える薄い縦罫は、背景に固定したカラムガイド（repeating-linear-gradient や罫線用の固定レイヤー）で再現できる

スクロールのコマ撮りLenis · 250–1840ms

検出された技術:GSAPLenisWebflow

Reproduce

再現するときのポイント

01社名だけを細身のセリフにし、それ以外の文字はすべて等幅1書体で組む
02ワードマークは SVG を width: 100% で置き、画面幅ぴったりに伸縮させる
03背景はクリームと墨色の2色を交互に使い、写真セクションで区切ってリズムをつくる
04物件は「写真・名称・説明・STATUS / LOCATION の表・リンク」の同じ型で繰り返す

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

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

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

eleos.katapick.md

1---
2title: "Eleos デザイン分析書"
3source: https://www.eleos.la/
4katapick: https://katapick.com/sites/eleos
5category: コーポレート
6region: 海外 (US)
7tags: [大胆なタイポ, セリフ体, 等幅フォント, 写真主体, 余白]
8launched: 2026-06
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# Eleos — デザイン分析書
16 
17> 画面いっぱいの社名ロゴ、あとは全部等幅。ロサンゼルスで民間資金の低価格住宅を開発するEleosのサイトは、細身のセリフのワードマークと無骨な等幅体を並べ、理想と実務の両方を語らせている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22