NONISHI FC — WEBSITE DESIGN PROPOSALS

野西サッカー部HP デザイン案 比較

八戸学院ひばり野西高等学校サッカー部(通称・野西)の公式HP デザイン案です。方向性の違う12案を用意しました。大きく【実用デザイン:A・B・C・D・K・L・M】【技術デモ:E・G・H・I】【完成形サンプル:J】に分かれます。各カードのプレビューをタップすると実物が開きます。良いと思った案・要素をお聞かせください。

制作:2026年6月 チームカラー:オレンジ モチーフ:エンブレム/集合写真/実スローガン 前提:2027年 ひばり野西・五戸移転を反映 写真:公式Instagram+一部フリー素材

オレンジ躍動感 / Energetic

集合写真ヒーロー+極太タイポ。実スローガン「一蹴入魂」を前面に、熱量重視の王道スポーツデザイン。

写真ヒーローAnton極太スクロール演出

写真主役・落ち着き / Editorial

明朝見出し・広い余白の雑誌的レイアウト。大きな写真で品よく見せる、保護者にも好印象な上品トーン。

明朝大判写真余白

シンプル・情報重視 / Clean

白基調・カード&表で戦績や入部情報を分かりやすく。保護者・中学生が迷わない、信頼感のある構成。

白基調戦績表情報整理

重厚プレステージ / Premium

黒×オレンジ×ゴールド。「王者へ挑む者」を掲げた、かっこよさ重視の重厚な挑戦者ブランド。

黒×金Oswald挑戦者コピー

モーション+Instagram / Motion

ローディング・スクロール演出・数字カウントアップに加え、公式Instagram投稿を埋め込み表示。動きで魅せる案。

ローディングカウントアップIG埋め込み

GSAPスクロール型 / 技術デモ

業界標準の GSAP ScrollTrigger+Lenis を導入。横スクロールのピン留めやスクラブ連動で、派手かつ滑らか。“すごい×軽い”を狙った本命候補。

GSAP ScrollTriggerピン留め横スクロール高性能

WebGL没入版 / WebGL

Three.js のシェーダーで集合写真がゆらめき、マウスに波紋で反応する没入ヒーロー。現時点で最も“すごい”を狙った実験的最上位案。

Three.js / WebGLシェーダーマウス反応

3Dボール版 / 3D Ball

Three.jsで回転する3Dサッカーボール(オレンジ・パネル柄)をヒーローに配置。マウスで転がり、ふわりと浮遊。動きで魅せる遊び心のある案。

Three.js 3D回転ボールマウスで転がる

フル構成版 / Full Content

追加提案コンテンツ(選手紹介・OB進路・数字・1日の流れ・ニュース・動画・FAQ・入部3導線・アクセス)を全部入れた“完成形イメージ”。中身はダミー込み。

選手/OB/FAQニュース/動画完成形の見本

ライト・エネルギッシュ / Light

白/クリーム基調+オレンジ+ティール。丸みと大ブロック、手描き風の下線で明るく元気に。ダーク系とは真逆の見た目。

白基調丸み・ポップティール差し色

ネオ・ブルータリズム / Brutalist

紙色+極太の黒枠・ハード影・等幅フォント。生っぽく尖った個性で唯一無二。攻めたブランド感。

極太黒枠ハード影等幅フォント

フォトエッセイ / 写真主体・フリー素材

スタジアムの熱気を全画面写真で描くシネマティックな構成。野西の実写真+フリー素材(Pexels)で“舞台”の雰囲気を演出。明朝見出しで映画的。

全画面写真明朝・映画的フリー素材活用

各案のこだわり

A 躍動感
集合写真+極太タイポで“熱量”を最優先。テンプレ然としない王道スポーツ。
B エディトリアル
明朝+余白で品よく、写真を主役に。保護者に好印象な上品トーン。
C クリーン
白基調・表とカードで戦績や入部情報を分かりやすく。迷わせない信頼感。
D プレステージ
黒×金の重厚感。「王者へ挑む者」を掲げた挑戦者ブランド。
E モーション
ローディングやカウントアップ等の動き+Instagram埋め込み。
G 旗艦(GSAP)
業界標準ツールで“派手×滑らか”。横スクロールのピン留め演出。
H WebGL(ナイト)
ネイビー×シアンの夜の配色。Three.jsシェーダーで集合写真がゆらめき、マウスに波紋で反応。
I 3Dボール(ライト)
明るい白基調に、ドラッグで回せる3Dサッカーボール。遊び心と技術力を象徴。
J フル構成
追加コンテンツを全部入れた“完成形イメージ”(下記の提案を反映)。
K ライト
白/クリーム+オレンジ+ティール。丸み・大ブロックで明るく元気。ダーク系の対極。
L ブルータリズム
紙色+極太黒枠・ハード影・等幅フォント。生っぽく尖った唯一無二の個性。
M フォトエッセイ
全画面写真で“舞台の熱気”を映画的に。実写真+フリー素材(Pexels)、明朝見出し。

トップに追加を提案したいコンテンツ

監督のご意見をいただきたい候補です。採用するものを選んでいただければ本実装で組み込みます。実例は パターンJ(フル構成版) でご覧いただけます。

選手紹介(名鑑)背番号・学年・出身。中学生が“自分”を重ねられる
OB・進路阿部稜(ヴァンラーレ八戸)ほか。育成力の証明
数字で見る野西実績を一目で。強力な社会的証明
1日の流れ・年間予定保護者の不安を先回りで解消
保護者向けFAQ寮・費用・奨学生・文武両道
ニュース/ブログmicroCMSで部員が更新=“生きたサイト”
動画ハイライトYouTube埋め込みで熱量アップ
監督・スタッフ紹介三上監督のロング取材で“人”で惹く