CorporateJapanPicked 2026.09.26

XAION DATA

コーポレートのWebデザイン参考 — AI・データプラットフォーム

出典: xaiondata.co.jp

Editor's note — 編集部の視点

街の写真を、階段状のブロックで切り抜いてる。

AIデータ基盤を手がけるXAION DATAのコーポレートサイトは、切り抜いた写真にライムの細い枠を重ねたKVで、散らばったデータが組み上がる様子を一枚で見せている。

IrisColor & Brand

背景が真っ白じゃなくて、ほんのり温かいオフホワイトなのがいい。そこにライムの細い線だけを差すから、AIの会社なのに冷たくならない感じ。朝の光が入るオフィスみたいで、すき。

1KVは角丸の矩形を積んだ階段形。ライムの細枠がずれて重なり、データを束ねる途中を描く
2ステートメントの周りに空の四角形を散らす。余白ごと“未整理のデータ”として見せる
3サービスは等角投影の線画で描いた装置の図。形のないAIを、組み立てられる仕組みとして示す

Color

XAION DATAの配色

Typography

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

和文見出し・本文

Aa あア

使用: IBM Plex Sans JP
代替: IBM Plex Sans JP

座標ラベル・システム表記

Aa あア

使用: Fragment Mono SC
代替: Fragment Mono

英字

Aa あア

使用: IBM Plex Sans
代替: IBM Plex Sans

英字見出し

Aa あア

使用: Geist
代替: Geist

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

特大見出しKatapick 型38px · 1.6 · 400
見出しKatapick 型38px · 1.4 · 400
小見出しKatapick 型16px · — · 500
本文The quick brown fox — 参考を型にする18px · 2 · 300
ボタンKatapick 型14px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に菱形を重ねたロゴ「XAION DATA」、右に私たちについて／ニュース／サービス／会社情報／採用サイト／お問い合わせ。
02
ヒーロー
左上に「あらゆるデータを統合し、AIと人のポテンシャルを解放する。」と英文、右から下へ階段状に積んだ角丸ブロックで街の写真を切り抜き、ライムの細い枠と等幅の座標ラベルを重ねる。
03
About
空の四角形が散らばる余白の中央に、XAION シリーズの理念を語るステートメントと「私たちについて」ボタン。
04
Services
XAION シリーズの説明と、XAION Sales / XAION HR などのサービスを、等角投影の線画のプラットフォーム図と等幅のシステム表記を添えて切り替えながら紹介する。
05
News
サムネイル・日付・タイトルのニュースカード4枚と一覧ボタン。
06
XAION Media
淡いベージュの帯で、自社メディア「XAION Media」を紹介するバナー。
07
Company Info
社名・所在地・設立などを罫線で区切った表で見せる。
08
Contact
項目を縦に並べた問い合わせフォーム。
09
フッター
黒地にサイトマップ、サービス、所在地、SNS、画面幅いっぱいのロゴ。

Interaction

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

GSAP と Lenis を使用。Services は縦に長いピン留めセクションで、スクロールに合わせてサービス名と図版が切り替わると思われる
ステートメントはスクロールに合わせて1行ずつ濃くなる演出と思われる（末尾の行が淡く写っている）
KVの写真はキャプチャごとに別の街に変わるスライドショー。階段状の形は clip-path: path() や、複数の角丸矩形のマスクで再現可能
ライムの枠は写真とずらして重ねた角丸の枠線。等幅フォントの座標ラベルを添えて“計測中”の空気を足している

スクロールのコマ撮りLenis · 150–6000ms

検出された技術:GSAPLenisGoogle Fonts

Reproduce

再現するときのポイント

01背景は #f9f8f7 のわずかに温かい白にし、アクセントはライム #d9ea6b の細い線だけに限定する
02KVの階段形はグリッドのセル単位で設計し、写真マスクと枠線を同じグリッドに乗せてずらす
03和文は IBM Plex Sans JP の細めのウェイトで組み、ラベルは等幅で小さく添える。見出しと本文のジャンプ率は控えめに
04サービス図は等角投影の線画で統一し、ライムの差し色でプロダクトの中心を示す

再現MDに含まれるもの

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

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

xaion-data.katapick.md

1---
2title: "XAION DATA 再現用デザイン仕様書"
3source: https://xaiondata.co.jp/corp/
4katapick: https://katapick.com/sites/xaion-data
5category: コーポレート
6region: 国内 (JP)
7tags: [ライト, 写真主体, 余白, 等幅フォント, スクロール演出]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# XAION DATA — 再現用デザイン仕様書
17 
18> 街の写真を、階段状のブロックで切り抜いてる。AIデータ基盤を手がけるXAION DATAのコーポレートサイトは、切り抜いた写真にライムの細い枠を重ねたKVで、散らばったデータが組み上がる様子を一枚で見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22