熱血硬派くにおくん オフィシャルポータルサイト（40周年リニューアル）

1. 01

   ヘッダー

   左に「熱血硬派くにおくん」ロゴ、右にドット枠のナビ（トップ / ゲーム / ヒストリー / キャラクター / スペシャル）、JP / EN 切替、YouTube・X のボタン。

2. 02

   ヒーロー

   ファミコン版の場面をドット絵の背景に敷き、中央に40th ANNIVERSARYロゴ、下段の道路にドット絵のキャラクターが並ぶ。SPでは複数の場面を縦に積む。

3. 03

   TOPICS

   日付付きのお知らせ一覧と、ドット文字で流れるテキストの帯。

4. 04

   NEW RELEASE・GAME

   最新作と近作を、発売日・対応機種とともにカードで紹介。

5. 05

   HISTORY

   1986年の初代から、歴代タイトルを年・対応機種・あらすじ付きで並べる年表。

6. 06

   CHARACTER

   くにお・りき などのキャラクター一覧。選ぶと学校名や必殺技を載せたモーダルが開く。

7. 07

   SPECIAL・フッター

   復刻コレクションの公式サイトなど関連サイトへのバナーと、コピーライト。

• 画面上のくにおくんをマウス（クリックでパンチ、ダブルクリックでキック、マウスとの距離で歩く/走る）やキーボードで操作できる。操作方法はモーダルで案内し、描画には Three.js（WebGL）の Canvas を使っていると思われる
• ドット絵は image-rendering: pixelated で拡大し、輪郭をにじませない
• 見出しはドット文字のSVG画像で、lazyload で遅延読み込みしている
• 読み込み中はドット絵のキャラクターを表示するローディング画面を挟む

スクロールのコマ撮り400–110000ms

検出された技術:Three.jsSwiperWordPressGoogle FontsWebGL

• 01キャラクター・ドット絵・ロゴは権利物。再現時はオリジナルのドット絵に差し替え、構成と演出の考え方だけを取り入れる
• 02ドット素材は整数倍で拡大し、image-rendering: pixelated で輪郭を保つ
• 03見出しとナビはドット系の書体（代替 DotGothic16）、本文は Noto Sans JP にして読みやすさを確保する
• 04ナビやボタンは角を1ドット欠いた白い矩形（clip-path で再現可能）にして、ゲーム画面のウィンドウに見せる

1---
2title: "熱血硬派くにおくん オフィシャルポータルサイト（40周年リニューアル） 再現用デザイン仕様書"
3source: https://www.kuniokun.jp/
4katapick: https://katapick.com/sites/kuniokun
5category: ブランド
6region: 国内 (JP)
7tags: [レトロ, ダーク, イラスト, 3D/WebGL, マーキー, 周年]
8launched: 2026-03
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12estimated_hours: 60
13generator: Katapick
14---
15 
16# 熱血硬派くにおくん オフィシャルポータルサイト（40周年リニューアル） — 再現用デザイン仕様書
17 
18> トップのくにおくんを、自分で操作して遊べる。『熱血硬派くにおくん』シリーズのオフィシャルポータルは、ファミコン時代のドット背景に40周年ロゴを重ね、ピクセル表現そのものをシリーズの顔として前に出している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22