# 熱血硬派くにおくん オフィシャルポータルサイト（40周年リニューアル）｜ブランドのWebデザイン参考

> トップのくにおくんを、自分で操作して遊べる。『熱血硬派くにおくん』シリーズのオフィシャルポータルは、ファミコン時代のドット背景に40周年ロゴを重ね、ピクセル表現そのものをシリーズの顔として前に出している。

- URL: https://www.kuniokun.jp/
- 解説ページ: https://katapick.com/sites/kuniokun
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: ゲームシリーズ公式ポータル
- テイスト: レトロ、ダーク、イラスト、3D/WebGL、マーキー、周年
- 公開・リニューアル: 2026-03 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 5/5（目安 60 時間）

## 編集部のひとこと（Leo）
SPだとドット絵の場面が縦に何枚も積み重なって、ステージを縦スクロールで駆け抜けてく感じ！横スクロールのアクションゲームを縦に組み替えたみたいで、ここで来る！って熱くなる！

## デザインの見どころ
- FVはドット絵の街並みに、水色の「40th」ロゴを一枚だけ。懐かしさと周年の告知を一度に済ませる
- ナビも見出しも、ドット文字と角ばった白い枠。UIの隅まで、ファミコンの画面の中にいる
- 1986年の初代から歴代作を年表で並べる。40年分の厚みを、スクロールするだけで体感させる

## 配色
- #000000 Arcade Black（背景）
- #db2b00 Brick Red（色面 / アクセント）
- #5bd63f Pixel Green（色面）
- #64a8fe Sky Blue（色面）
- #f8eadc Parchment（明るいセクション背景）
- #ffffff White（テキスト / ナビの枠）

## フォント
- 見出し・ナビ: ドット文字（SVG画像）（代替: DotGothic16）
- 本文: Noto Sans JP（代替: Noto Sans JP）
- 約物の字詰め: YakuHanJP（代替: YakuHanJP）
- 英数字: Inter（代替: Inter）

## よくある質問
### くにおくんのサイトで使われているフォントは？
本文に Noto Sans JP と YakuHanJP、英数字に Inter が使われています。見出しのドット文字はSVG画像で、無料で近づけるなら Google Fonts の DotGothic16 が使えます。

### サイト上でキャラクターを操作できる仕掛けはどう作る？
Canvas（WebGL / 2D）にスプライトを描画し、マウスのクリック・ダブルクリックやキーボードの入力でアニメーションを切り替えるのが一般的です。マウスとの距離で歩き・ダッシュを切り替えると、ゲームらしい手触りになります。

### どんなサイトの参考になる？
レトロゲームのシリーズポータル、周年サイト、ドット絵を使ったブランドサイトなど、ピクセル表現を世界観の中心に据えたいサイトの参考になります。素材は流用せず、演出の考え方だけを取り入れてください。

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