NONISHI FC — WEBSITE DESIGN PROPOSALS

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

八戸学院ひばり野西高等学校サッカー部(通称・野西)の公式HP デザイン案です。方向性の違う12案を用意しました。各カードのプレビューをタップすると実物が開きます。良いと思った案・要素をお聞かせください。

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

オレンジ躍動感 / Energetic

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

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

写真主役・落ち着き / Editorial

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

明朝大判写真余白

シンプル・情報重視 / Clean

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

白基調戦績表情報整理

重厚プレステージ / Premium

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

黒×金Oswald挑戦者コピー

モーション+Instagram / Motion

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

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

盛りモリ版 / Full Motion

シネマティック・ヒーロー、カーソル追従、カウントアップ、横スクロール等の演出入り(軽量化済み)。手書きモーションの実験版。

カーソル追従視差フルエフェクト

旗艦版 / GSAP Flagship

業界標準の 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

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

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

各案のこだわり

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

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

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

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