佐倉男声合唱団 サイトリニューアル ／ トンマナ確認用モック

3 パターンの方向性で、トップページとサンプル下層（団員募集）を試作しています。

現行 Google Sites のサイト構成・ナビ順を踏襲し、旧サイト（HPB 製）にしか無い情報（次回定演、過去動画、団長ごあいさつ、練習風景写真）を統合しています。
JIS X 8341-3:2016（WCAG 2.0）レベル AA を念頭に、本文 22〜24px、コントラスト 4.5:1 以上、44×44px 以上のタップ領域、フォーカス可視化、ランドマーク・見出し階層を整備。スマートフォンを主軸に確認してください。

PATTERN A

和モダン

旧サイトの maroon ／メイリオ／装飾的タイトルの趣を昇華し、和紙・桜・墨を意識した上品な伝統色。シニアに馴染みやすく、団の歴史と地域性が感じられます。明朝体ベース。

配色：和紙ベージュ × 桜 × 墨 × 金
本文 22px ／ 明朝
強み：歴史・格式・親しみ

トップ 募集

PATTERN B

コンサートクラシック

クラシック演奏会のプログラムノートを意識した、ネイビー × クリーム × ゴールドの上質な配色。Serif と Sans の使い分けでコンテンポラリーかつ品格のある佇まい。来場者・地域文化施設にも訴求しやすい。

配色：ネイビー × クリーム × ゴールド
本文 22px ／ ゴシック ＋ 明朝（見出し）
強み：上質感・演奏会訴求

トップ 募集

PATTERN C

シネマティック・モダン

紙 × 墨 × 朱を軸に、スクロール連動パララックス、ガラスカード、グレインノイズ、にじむ光の演出を重ねた現代寄り。大判のセリフタイトルとシネマ的な階層感で「動」を、本文 22px とコントラスト維持で「読みやすさ」を両立。

配色：ペーパー #f1ece0 × 墨 × 朱 #d04a3a
見出し：明朝／本文：ゴシック 22px
強み：動きと素材感のある現代モダン

トップ 募集

PATTERN D

マテリアルデザイン

Material Design 3（Material You）準拠。Tonal Palette・Elevation・Filled / Tonal / Outlined ボタン・State Layer によるリップル風ホバー・FAB を採用し、Google プロダクト的な親しみのある UI に。ロゴの紺をシードに Tonal を構成。

配色：Surface #faf8fc × Primary #1f4b8e × Tertiary #c75d3a
本文 22px ／ ゴシック
強み：パターン認識しやすく、UI 学習コスト低

トップ 募集

PATTERN E

シネマティック KV

フルスクリーン KV に練習風景・演奏会写真の Ken-Burns スライドショー（無音、reduced-motion対応）。網掛け・グレイン・暗グラデを重ねて画質のムラを意図的にぼかし、シネマ的な没入感を演出。本文セクションは紙ベージュで明るくまとめる。

配色：紙 #f6f4ee × 墨 #14171d × ピーチ #d97c4a
本文 22px ／ ゴシック＋セリフ見出し
強み：インパクト・写真の力で訴求

トップ 募集

PATTERN F

オーロラ・カルーセル

最近の構成トンマナを踏襲。グラデーション（バイオレット → ローズ → アンバー）を駆使し、ヒーロー全画面にカルーセルを配置。すべての要素を白カードに統一して情報の見え方を均一化。Inter ＋ Noto Serif JP の組合せでメリハリ。

配色：オフ白 #fafbff × バイオレット #6b4fe0 × ローズ #e0467e × アンバー
本文 22px ／ Inter＋ゴシック＋セリフ見出し
強み：今っぽさ・カード統一の整理感

トップ 募集

横断比較（同じページを並べて見る）

A 和モダン ／ トップmaroon × 桜 × 金 B コンサートクラシック ／ トップネイビー × クリーム × ゴールド C シネマティック・モダン ／ トップ紙 × 墨 × 朱 D マテリアルデザイン ／ トップMaterial 3 / Tonal Palette E シネマティック KV ／ トップ動画風 KV ＋網掛け F オーロラ・カルーセル ／ トップグラデ＋カード統一 A 和モダン ／ 団員募集応募導線・FAQ サンプル B コンサートクラシック ／ 団員募集応募導線・FAQ サンプル C シネマティック・モダン ／ 団員募集応募導線・FAQ サンプル D マテリアルデザイン ／ 団員募集応募導線・FAQ サンプル E シネマティック KV ／ 団員募集応募導線・FAQ サンプル F オーロラ・カルーセル ／ 団員募集応募導線・FAQ サンプル

アクセシビリティ確認ポイント