BrandJapanPicked 2026.09.26

GUNDAM Official Website

ブランドのWebデザイン参考 — アニメIPの公式ポータル

出典: gundam-official.com

Editor's note — 編集部の視点

ガンダム全部入りなのに、画面は白黒だけ。

ガンダムシリーズの公式ポータルGUNDAM Official Websiteは、作品・ニュース・商品を白黒のグリッドに流し込み、色はキービジュアルと商品写真だけに任せている。

BrunoStructure & IA

ヒーローのスライダーに一時停止ボタンをちゃんと付けてるのが、地味だけどうまいんだよね。自動で流れる大きなビジュアルを、読みたい人が自分で止められる。ポータルの基本を外してない。

1セクション名に「MODULE.002 //」と等幅の番号を振る。ポータル全体を、機体の仕様書のように読ませる
2SERIES・FEATURED・NEWS・NEW PRODUCTSを同じ型で積む。情報が膨大でも迷わない
3白と黒の面の境目は角を斜めに落とす。四角いグリッドに、メカらしい切り欠きを1つだけ足している

Color

GUNDAM Official Websiteの配色

Typography

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

和文本文・カードタイトル

Aa あア

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

英字見出し

Aa あア

使用: Manrope
代替: Manrope

ナビ・ラベル・ボタン

Aa あア

使用: JetBrains Mono
代替: JetBrains Mono

Structure

ページ構成（上から順）

01
ニュースティッカー・ヘッダー
最上部に「LATEST NEWS」の1行ティッカー。罫線で区切ったヘッダーに SERIES / NEWS / PRODUCTS、中央にロゴ、右に SNS・LOG IN・LANGUAGE・検索。
02
ヒーロー
作品のキービジュアルを全幅で切り替えるスライダー。左下に作品名・説明・関連サイトへのボタン、右下にページ番号と前後・一時停止ボタン。
03
SERIES
大きな英字見出しと説明文を左右に分け、キービジュアル・タイトル・年・シリーズ区分のカードを横に並べる。「VIEW ALL SERIES」。
04
FEATURED
角を斜めに落とした黒い面に切り替え、「MODULE.002 //」のラベルと注目コンテンツのカードを並べる。
05
NEWS
薄いグレーの背景に、大きな画像付きの3件と、サムネイル付きの2列リスト。カテゴリと日付を添える。
06
NEW PRODUCTS
白背景に商品写真のカードを大小混ぜたグリッドで並べ、カテゴリと発売日を表示する。
07
フッター
写真を敷いた面に CONTENT / INFO のリンク群をまとめる。

Interaction

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

ヒーローは Swiper のスライダー。自動再生を止める一時停止ボタンと「01 / 05」のページ表示付き
最上部の LATEST NEWS は、見出しが横に流れるティッカーと思われる
ヘッダーはスクロールしても固定表示
斜めの切り欠きは clip-path: polygon() で角を落として再現可能

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

GUNDAM Official Websiteをスクロールしたときのフレーム1 — 01

検出された技術:SwiperNext.js

Reproduce

再現するときのポイント

01色は白・黒・グレーの階調に絞り、色は画像にだけ持たせる。作品のキービジュアルやキャラクターは使わず、オリジナル素材に置き換える
02セクションごとに「MODULE.00X //」のような等幅ラベルを付け、見出しは大きな英字サンセリフで統一する
03罫線でグリッドを見せ、カードは同じ情報順（画像 → タイトル → カテゴリ → 日付）に揃える
04面の切り替えやボタンの角を clip-path で斜めに落とし、メカらしさを1点だけ足す

再現MDに含まれるもの

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

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

gundam-official.katapick.md

1---
2title: "GUNDAM Official Website 再現用デザイン仕様書"
3source: https://gundam-official.com/
4katapick: https://katapick.com/sites/gundam-official
5category: ブランド
6region: 国内 (JP)
7tags: [モノクロ, グリッド, 等幅フォント, 固定ナビ, カルーセル, 大胆なタイポ]
8launched: 2025-10
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# GUNDAM Official Website — 再現用デザイン仕様書
17 
18> ガンダム全部入りなのに、画面は白黒だけ。ガンダムシリーズの公式ポータルGUNDAM Official Websiteは、作品・ニュース・商品を白黒のグリッドに流し込み、色はキービジュアルと商品写真だけに任せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22