サザンカシティウインズ|リニューアル モック

2バージョンを並べました。それぞれ別ウィンドウで見比べてみてください。

A. 上部ナビ版 (オリジナル提案)

STYLISH / おしゃれ

大人で本格派の楽団印象

ダーク基調 × ゴールドアクセント、セリフ書体、写真主体のミニマルレイアウト。市民会館の大ホールに似合う格調を演出。

  • 結成20年の落ち着いた重みを伝える
  • 定期演奏会への集客を意識した構成
  • セリフフォント (Noto Serif JP × Cormorant)
  • カラー: 漆黒 × クリーム × ゴールド × 山茶花の朱
→ おしゃれ版を見る
FRIENDLY / フレンドリー

親しみやすく入りやすい楽団印象

暖色のカード型レイアウト、丸ゴシック書体、絵文字とイラストで「楽しそう・続けられそう」を伝える設計。

  • 初心者・ブランク組の心理的ハードルを下げる
  • 見学申込み・問い合わせCTAが目立つ
  • 団員の声セクションで雰囲気を可視化
  • カラー: コーラル × イエロー × ミント
→ フレンドリー版を見る

★★ NEW: カフェ・コンセプト版 (構造から作り替え)

CAFÉ CONCEPT / カフェ風

"A Music Café Since 2005"

配色だけでなく、コンセプトとレイアウト構造から作り替えた版。カフェのメタファーで「最近の活動 = TODAY'S MENU」「パート一覧 = ドリンクメニュー」「団員専用 = STAFF ROOM」のように再構成。

  • カラー: カフェオレ × テラコッタ × モスグリーン × ラテゴールド
  • フォント: DM Serif Display + Sacramento(筆記体) + Caveat(手書き) + Zen Maru Gothic
  • 装飾: ポラロイド・マステ・OPEN看板・スタンプ・チケット・黒板
  • レイアウト: メニュー表/ドリンクメニュー/チケット型カードなど現物モチーフ
  • サイドバー = 黒板風、フッターも黒板でカフェの雰囲気
→ カフェ版を見る
CAFÉ + CONTACT / お問い合わせ統合版

カフェ版 + お問い合わせ統合

カフェコンセプト版に、お問い合わせフォーム(見学申込み・一般お問い合わせの2タブ)を黒板デザインで統合した完成版。

  • 見学申込み・一般お問い合わせをタブ切替
  • 黒板風セクション:チョーク文字・マステ装飾
  • 募集中パート表示・直接連絡先つき
  • カフェのサイドバー・フッターとデザイン統一
→ カフェ版(お問い合わせ統合)を見る ✦NEW

(前回) 明るいおしゃれ版 - 配色のみ変更

STYLISH LIGHT

(参考) 配色だけ反転した版

構造はおしゃれ版と同じで、ダーク→ライトに反転、アクセントをサザンカピンクに変更。比較用に残しています。

→ 配色のみ版を見る

C. お問い合わせフォーム (見学申込み / お問い合わせ の2種類タブ切替)

CONTACT / おしゃれ

お問い合わせ - おしゃれ版

2種類のフォーム(見学申込み / 一般お問い合わせ)をタブで切り替え。既存サイトの全項目を踏襲。

  • 左: 説明と募集中パート・連絡先 / 右: フォーム
  • 必須/任意は控えめなマーカー表示
  • 下線スタイルのミニマル入力欄
→ おしゃれ版 お問い合わせを見る
CONTACT / フレンドリー

お問い合わせ - フレンドリー版

同じ2種類のタブを、絵文字つきカードボタンで分かりやすく切替。「団員になりたい方」「それ以外の方」ラベル付き。

  • 必須/任意はピル型バッジで明確化
  • 練習日・募集パート・連絡先を色分けカードで提示
  • 大きなコーラル色の送信ボタン
→ フレンドリー版 お問い合わせを見る

B. 左サイドバー版 (既存サイトの構成を踏襲)

STYLISH + SIDEBAR

左サイドバーつき おしゃれ版

既存サイトと同じく左に常時表示メニュー。ホーム/楽団紹介/楽団指揮者/演奏情報/スケジュール/パート紹介/ブログ/SNS/団員募集/お問い合わせを縦並びで配置。

  • メニューは黒地に小さなゴールド番号つき
  • 下部に「団員募集」「お問い合わせ」「Member Portal」のCTA固定
  • モバイルではハンバーガーでドロワー化
→ おしゃれ版 (左メニュー) を見る
FRIENDLY + SIDEBAR

左サイドバーつき フレンドリー版

同じ左メニュー構成を、丸み・絵文字つきで再構成。メニュー項目ごとにアイコン、下部の「団員募集」は赤いボタンで強調。

  • メニューに🏠🌸🎼📸など絵文字アイコン
  • SNSは丸ボタン、CTAは立体ボタンで存在感
  • 団員ログインは目立たせず下部に控えめ配置
→ フレンドリー版 (左メニュー) を見る

★★ NEW: D. フレンドリー版 完成形 (お問い合わせ統合 + 大人配色)

FRIENDLY + CONTACT + CAFÉ COLOR

フレンドリー版 完成形(カフェ配色)

お問い合わせ統合版に、カフェコンセプト版と同じカラーパレットを適用。

  • お問い合わせセクションをページ内に統合(タブ切替)
  • 「見学を申し込む」ボタンが直接フォームにジ��ンプ
  • カラー: テラコッタ × ラテゴールド × モスグリーン × ティール
→ カフェ配色版を見る ✦NEW
FRIENDLY + CONTACT + ADULT COLOR

フレンドリー版 完成形(大人配色)

同じ構成で、配色を大人っぽいワイン・アンバー・セージ系にリカラーした版。

  • お問い合わせセクションをページ内に統合(タブ切替)
  • 「見学を申し込む」ボタンが直接フォームにジャンプ
  • カラー: ダスティローズ × アンバーゴールド × セージグリーン × スレートブルー
→ 大人配色版を見る ✦NEW
FRIENDLY + CONTACT + BLUE COLOR

フレンドリー版 完成形(ブルー配色)

ロゴ画像の青(#647db9)をベースに全体をブルー系パレットでリカラーした版。

  • お問い合わせセクションをページ内に統合(タブ切替)
  • 「見学を申し込む」ボタンが直接フォームにジャンプ
  • カラー: コーンフラワーブルー × ゴールド × ティール × パウダーブルー
→ ブルー配色版を見る ✦NEW
両バージョン共通の構成
ヒーロー(活動が一目で伝わる) → 団体紹介 → 最近の活動 → 団員募集(パート別状況) → スケジュール → 団員専用ログイン → フッター。
トップページ1枚で「活動してる感」「入団のしやすさ」「団員専用入口」が完結するように設計しています。

A (上部ナビ) と B (左サイドバー) の違い
A: ヒーロー画像を画面いっぱいに使えてモダンな印象。情報量が多いと項目を絞る必要あり。
B: 既存サイトと操作感が同じで現団員に優しい。常にメニューが見えるので回遊性が高い反面、コンテンツの横幅が狭くなる。