# XAION DATA｜コーポレートのWebデザイン参考

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

- URL: https://xaiondata.co.jp/corp/
- 解説ページ: https://katapick.com/sites/xaion-data
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: AI・データプラットフォーム
- テイスト: ライト、写真主体、余白、等幅フォント、スクロール演出
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

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

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

## 配色
- #f9f8f7 Warm Paper（背景）
- #ffffff White（カード / フォーム）
- #232323 Carbon（テキスト / フッター）
- #d9ea6b Lime Signal（枠線 / アクセント）
- #5a5a5a Graphite（サブテキスト）

## フォント
- 和文見出し・本文: IBM Plex Sans JP（代替: IBM Plex Sans JP）
- 座標ラベル・システム表記: Fragment Mono SC（代替: Fragment Mono）
- 英字: IBM Plex Sans（代替: IBM Plex Sans）
- 英字見出し: Geist（代替: Geist）

## よくある質問
### XAION DATAのサイトで使われているフォントは？
和文に IBM Plex Sans JP、英字に IBM Plex Sans と Geist、ラベルに等幅の Fragment Mono が使われています。いずれも無料で利用できます。

### XAION DATAのような階段状の写真KVはどう作る？
写真を1枚置き、clip-path: path() や SVG の mask で角丸の矩形を組み合わせた形に切り抜きます。枠線は同じグリッド上に別要素で重ね、少しずらして配置すると奥行きが出ます。

### XAION DATAのデザインはどんな業種の参考になる？
AI・データ基盤、BtoB SaaS、コンサルティングなど、抽象的なサービスを写真と図解で具体的に見せたいコーポレートサイトの参考になります。

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