デザイン案の比較

集合写真に丸い枠・緑の下線・オレンジの影を付け、活気を明るく表す。

強み

強豪の厳しさだけでなく、入りやすさを伝える余地がある。3Dなしで実際のチームを見せられる。

弱み

装飾が多く、スマホの小さい写真では顔が見えにくい。生活・進路の中身は旧案共通で不足。

特徴

白・クリーム、太い日本語、丸いボタン、手書き風のアクセント。

構成

表紙 → 数字 → 物語 → 戦績 → 試合 → 入部

活かすなら

明るい方向の有力な参考。本文を新しい募集方針に合わせ、Jや共通進路ページの情報を足す。

実装

外部演出ライブラリなし。表示演出は自前。

修正点

表紙を全国と仲間へ修正済み。未接続申込を修正する。

C系の分かりやすい画面に、選手・卒業生・指導陣・日常・FAQを加える。

強み

中学生と保護者が知りたい項目の幅は広い。特に指導者・日常・進路という構成は募集への判断材料になる。

弱み

一枚に項目が多く、読む距離が長い。ニュース・試合・日課は低更新運営と合いにくい。『完成形』という旧表記と実際の未完成状態に差がある。

特徴

白系、写真と文章の分割、カード、時刻表、FAQ。

構成

表紙 → 物語 → 数字 → 選手 → 卒業後 → 指導陣 → 1日 → 試合 → ニュース → 動画 → 戦績 → FAQ → 入部 → アクセス

活かすなら

選手・進路は共通ページへ。指導と日常の確認済み情報を採用し、更新枠はInstagramへ集約する。

実装

外部演出ライブラリなし。表示演出は自前。

修正点

選手写真は人物写真ではなく試合告知のダミー。未確認の進学先・日課、準備中ニュース・動画がある。卒業生の過去所属を現在所属と誤読させない整理が必要。

文章と写真を並べ、紹介・戦績・入部・アクセスを簡潔に整理する。

強み

何のサイトか、どこを読めばよいかが明確。表形式は保護者が比較しやすい。

弱み

学校サイトとしては汎用的で、野西の日常や人柄を感じにくい。表の情報を増やすほど更新管理が必要。

特徴

白地、左右分割、数字のカード、戦績表。

構成

表紙 → 強さ・進路・人間力 → 戦績表 → 試合 → 入部 → アクセス

活かすなら

保護者向け情報の整理。Jから項目を絞った簡潔な構成として比較する。

実装

外部演出ライブラリなし。表示演出は自前。

修正点

表紙を「全国を目指す、野西の3年間。」へ修正済み。実績・卒業生・学校情報は正本へ照合し、未接続リンクを修正。

集合写真を全面に使い、大きな日本語で競技への憧れを伝える。

強み

実際のチームを第一画面で見せられる。日本語中心でメッセージを理解しやすい。

弱み

背景の横断幕と文字が重なり、スマホでは顔も文字も見分けにくい。生活・進路の判断材料が少ない。

特徴

黒とオレンジ、写真背景、大きな見出し。

構成

表紙 → 物語 → 戦績 → 試合 → 入部 → アクセス

活かすなら

写真の迫力は残し、文字の置き場を整理。NEXTと見比べる。

実装

外部演出ライブラリなし。表示演出は自前。

修正点

募集コピーは全国への挑戦へ整理済み。戦績の再照合は別途必要。試合画像のリンクは #、申込ボタンはアクセス枠へ移動するだけ。

明朝体と余白を使い、チームの歩みを記事のように読ませる。

強み

落ち着きと伝統を伝えやすい。監督や先輩の実際の言葉と相性がよい。

弱み

競技志向の中学生には熱量が控えめに映る可能性。スマホでは表紙の説明・行動への入口が下方になる。

特徴

白いヘッダー、全面写真、明朝見出し、静かな誌面構成。

構成

表紙 → 優勝の物語 → チーム紹介 → 戦績 → 試合 → 入部

活かすなら

指導・成長の実話を読ませる部分に採用。Mとの違いは、自校写真と読みやすさを優先する点。

実装

外部演出ライブラリなし。表示演出は自前。

修正点

表紙は全国を目指す日々、2025年の一戦は日付付きの歴史に整理済み。生活・進路の情報と常設の体験案内を補う。

黒・金・オレンジと大きな英字で、強豪クラブの存在感を表す。

強み

強さと意志を一瞬で伝えやすい。E・G・Hと比べ、追加ライブラリなしで方向性を判断できる。

弱み

大きな英語と抽象的な決意が中心で、生徒・親が知りたい具体像が薄い。暗い写真では表情が伝わりにくい。

特徴

重厚な色、全面写真、英字見出し、横に流れる言葉。

構成

表紙 → 数字 → 物語 → 戦績 → 試合 → 入部

活かすなら

重厚な方向を選ぶなら、まずDを基準にする。内容は成長・仲間・将来へ置き換える。

実装

外部演出ライブラリなし。自前の表示・文字の動き。

修正点

旧案共通の戦績・入部案内の更新とリンク接続が必要。

Dの方向に、読み込み画面・数字の動き・Instagram埋め込みを足す。

強み

学校側の投稿を、サイト本文を更新せず紹介する発想は有用。入口の演出に統一感がある。

弱み

内容を見る前に待ち時間が入る。埋め込みは外部サービスの読み込みに依存する。Dとの方向性の差は小さい。

特徴

エンブレムのローダー、進捗表示、パララックス、投稿の埋め込み。

構成

読み込み画面 → 表紙 → 数字 → 物語 → 戦績 → Instagram → 入部

活かすなら

Instagramへの導線を参考にし、読み込み画面は外す提案。埋め込み採用は実機で判断。

実装

Instagram embed.js。演出は自前。

修正点

申込ボタンが #。投稿を埋め込んでも募集本文・戦績の古さは解決しない。

Kに近い明るい画面で、集合写真の代わりに白黒の3Dボールを置く。

強み

明るい色と太い文字による親しみやすさは参考になる。

弱み

見た目の品質と操作の価値が弱い。『ドラッグで回せる』表記に対してドラッグ・タッチ操作は未実装。操作しても学校を知る情報が増えず、チームの固有性が伝わらない。

特徴

クリーム色、丸い枠、オレンジ・緑。ボールは自動回転とマウス位置への反応のみ。

構成

表紙＋3Dボール → 数字 → 物語 → 戦績 → 試合 → 入部

活かすなら

明るい方向はKで比較。Three.jsは空間見学など理解を助ける目的がある時に再検討。

実装

Three.js r128と自作シェーダー。描画サイズは表示の2倍を確認したため、低解像度が原因とは断定しない。

修正点

コピーは全国への挑戦へ整理済み。未接続申込、操作説明の不一致が残る。詳細判断はthreejs-use-review-2026-10-05.md。

太い枠・硬い影・大きな面で、部のポスターのように見せる。

強み

15案の中で形の違いが大きい。宣伝物や体験会の特集として記憶に残しやすい。

弱み

第一画面でチームの実写が見えず、学校の様子を想像しにくい。個性の強さが、公式校サイトの信頼感につながるかは未確認。

特徴

ネオブルータリズム、黒い線、紙色・オレンジ・黄、等幅系文字。

構成

表紙 → 流れる言葉 → 物語 → 戦績 → 試合 → 入部

活かすなら

告知ビジュアルや短い特集の表現に向く。常設サイトとしては学校側のブランド判断が必要。

実装

外部演出ライブラリなし。表示演出は自前。

修正点

旧案共通の本文・戦績・体験案内の更新が必要。

大きな競技場写真と明朝体を使い、映画のような憧れからチームの物語へ入る。

強み

写真のスケールと文章の余韻で、目指す舞台を印象づけられる。Bより映像的な方向。

弱み

冒頭の海外スタジアムは野西の施設や実績ではない。見た目の憧れが実際の高校生活より先に来る。写真の質への依存が大きい。

特徴

全面写真、余白、明朝体、風景とチーム写真の連続。

構成

表紙 → 物語 → グラウンド → チーム → 試合 → 入部

活かすなら

表紙を自校の試合・練習写真に置き換えて再比較。外部写真は野西の実景と誤認させない。

実装

外部演出ライブラリなし。表示演出は自前。

修正点

フリー素材と自校素材の役割を明示。物語は次の全国への挑戦へ整理済み。未接続案内を修正。

Dの方向を、登場演出・滑らかなスクロール・横に進む試合枠で展開する。

強み

スクロール中に印象を作れる。写真を連続して見せる演出は大会・応援の特集と相性がよい。

弱み

Dと同じ内容のため、演出だけでは募集情報は増えない。最初の登場に時間がかかり、PCでも本文の体験ボタンは第一画面より下。

特徴

GSAP、ScrollTrigger、Lenis。写真の移動、数字のカウント、横送り。

構成

表紙 → 数字 → 物語 → 横送りの試合 → 戦績 → 入部

活かすなら

ページ全体ではなく、採用案の一箇所に絞って移植する候補。

実装

GSAP 3.12.5 / ScrollTrigger / Lenis 1.1.13（外部CDN）。

修正点

申込ボタンが #。スクロールとキーボード・低性能端末の検証を追加してから採用。

Gの構成に、青い光と写真を波打たせるWebGL効果を追加する。

強み

15案の中でも技術的な演出が目立つ。先進的な印象を試す比較材料になる。

弱み

写真の顔や学校の雰囲気が、暗さと歪みで伝わりにくくなる。描画処理と外部依存が増える。速度や電池への影響は未測定。

特徴

Three.jsのシェーダー、マウスへの反応、青系の夜の印象。

構成

Gと同じ。表紙の写真表現を変更。

活かすなら

WebGLを全面採用する根拠はまだ弱い。実写を読める状態に保つ小さな効果として検討。

実装

Gの3ライブラリ＋Three.js r128。

修正点

Gと同じ未接続申込。スマホの操作ではマウス反応を同じ体験にできない。