CorporateJapanPicked 2026.09.26

neoAI

コーポレートのWebデザイン参考 — 生成AIスタートアップ

出典: neoai.jp

Editor's note — 編集部の視点

AI企業なのに、FVは明るい青と橙の太い帯。

生成AIスタートアップneoAIのコーポレートサイトは、画面を斜めに横切る2本の帯と長めのステートメントで、「日本の成長を、加速する」を図形の勢いで見せている。

IrisColor & Brand

ロゴの鳥だけが紫で、ほかは青とオレンジ。ブランドの主役を1点に絞ってて、名刺の箔押しみたいにそこだけ特別に見えるのがすき。フッターのぼかしも朝焼けっぽくてやさしい感じ。

1FVは太い2本の帯が斜めに交差するだけ。AIの定番の暗い画面や光の粒を使わず、加速の向きで語る
2導入企業のロゴを事業紹介の直後に敷き詰める。何ができるかの次に、誰が使っているかを見せる順番
3見出しは「Our Business」と英字を大きく、和文は斜線の後ろに小さく。全セクションで型が揃う

Color

neoAIの配色

Typography

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

本文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

和文見出し

Aa あア

使用: こぶりなゴシック W6 JIS2004
代替: Zen Kaku Gothic New（Bold）

英字見出し・ナビ

Aa あア

使用: Figtree
代替: Figtree

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

見出しKatapick 型14px · 1.01 · 600
小見出しKatapick 型29px · 1.01 · 400
本文The quick brown fox — 参考を型にする17px · 1.59 · 500
ボタンKatapick 型16px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、右に半透明のピル型ナビ（事業内容・私たちについて・事例紹介・ニュース・お問い合わせ）と青い「採用情報」ボタン。
02
ヒーロー
青と橙の太い帯が斜めに交差する背景に「日本の成長を、加速する。」と英文、長めのステートメント、「neoAIを知る」ボタン。右端に縦書きの SCROLL。
03
Our Business
薄いグレーの角丸パネルに、neoAI Enterprise と neoAI Chat の2事業を罫線で区切って説明し、「詳しく見る」へ。
04
導入企業
白い角丸パネルに、導入企業のロゴをグリッドで敷き詰める。
05
More neoAI
受賞や導入事例などのトピックを、日付入りのカードのカルーセルで見せる。
06
News
カテゴリタグ付きのお知らせを、角丸の白いカードで縦に並べる。
07
Join neoAI
紺の背景に採用メッセージと「採用情報を見る」、右にオフィスや社員の写真をグリッドで並べる。
08
Contact・フッター
大きな「Contact Us」と問い合わせ導線、青と橙のぼかしたグラデーションを敷いたフッター。

Interaction

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

ヒーローの帯はスクロールに合わせて位置や長さが変わると思われる。SVG の stroke-dashoffset や transform をスクロール量に連動させると再現可能
ヘッダーのナビは backdrop-filter: blur の半透明ピルで、スクロール中も固定表示
More neoAI のカードは、左右の丸い矢印ボタンで送るカルーセル
フッターは青と橙をぼかしたグラデーションで、FVの帯の色を最後に回収している

スクロールのコマ撮り300–90000ms

検出された技術:STUDIONuxtGoogle Fonts

Reproduce

再現するときのポイント

01背景はほぼ白（#fafdff）にし、青 #47bcfc と橙 #ffba4f の2色だけを太い帯やグラデーションで使う
02セクション見出しは「小さな色付き英字＋大きな英字＋斜線の後ろに和文」の型を全ページで繰り返す
03コンテンツは大きな角丸のパネルに収め、背景との明度差を小さくしてやわらかく区切る
04ナビは半透明のピルにまとめ、採用ボタンだけを青で塗って目立たせる

再現MDに含まれるもの

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

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

neoai.katapick.md

1---
2title: "neoAI 再現用デザイン仕様書"
3source: https://neoai.jp/
4katapick: https://katapick.com/sites/neoai
5category: コーポレート
6region: 国内 (JP)
7tags: [ライト, 余白, 角丸, グリッド, ブルー基調]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# neoAI — 再現用デザイン仕様書
17 
18> AI企業なのに、FVは明るい青と橙の太い帯。生成AIスタートアップneoAIのコーポレートサイトは、画面を斜めに横切る2本の帯と長めのステートメントで、「日本の成長を、加速する」を図形の勢いで見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22