# GUNDAM Official Website｜ブランドのWebデザイン参考

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

- URL: https://gundam-official.com/
- 解説ページ: https://katapick.com/sites/gundam-official
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: アニメIPの公式ポータル
- テイスト: モノクロ、グリッド、等幅フォント、固定ナビ、カルーセル、大胆なタイポ
- 公開・リニューアル: 2025-10 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 32 時間）

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

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

## 配色
- #ffffff White（背景）
- #000000 Black（ボタン / 見出し）
- #222222 Gunmetal（ダークセクション / ヘッダー / テキスト）
- #f0f0f0 Hangar Gray（セクション背景）
- #767676 Steel Gray（補足テキスト / 罫線）

## フォント
- 和文本文・カードタイトル: Noto Sans JP（代替: Noto Sans JP）
- 英字見出し: Manrope（代替: Manrope）
- ナビ・ラベル・ボタン: JetBrains Mono（代替: JetBrains Mono）

## よくある質問
### GUNDAM Official Websiteで使われているフォントは？
和文に Noto Sans JP、英字見出しに Manrope や Inter、ナビやラベルに JetBrains Mono が使われています。いずれも Google Fonts で無料で利用できます。

### 情報量の多いポータルサイトを整理して見せるコツは？
GUNDAM Official Websiteのように、色を白黒に絞って画像だけに色を持たせ、SERIES・NEWS・PRODUCTS などのセクションを同じ見出しの型とカードの型で積むと、量が多くても迷いにくくなります。

### アニメ作品のサイトを参考にするときの注意点は？
キービジュアルやキャラクター、ロゴの権利は作品の権利者に帰属します。レイアウトや情報設計の考え方だけを参考にし、画像はオリジナル素材に置き換えてください。

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