PLAN A
ひろびろ
- 写真を画面いっぱいに使い、白いカードでキャッチを置く。下端は手描きの波
- 区画は白地中心。色は見出しの下線・タグ・カードの上辺だけ
- 参考サイトにいちばん近い落ち着き。文字が読みやすい
PLAN B
まるまる
- メインの写真も手書き風の切り抜き。悩みは吹き出しで並べる
- サポートは丸い色面のバッジ。区画の切れ目もカーブ
- 3案でいちばんやわらかい。写真3枚をすべて使う
PLAN C
いろどり
- 区画ごとに地色を替え、切れ目は波。メインは全面写真＋手描きの波
- 悩みは2列で読みやすく整理。サポートは緑地に白カード
- チラシの明るさに近い。情報が増えても迷子になりにくい
09-16 更新：参考サイトくらいの賑やかさへ
- 参考サイトを実際に測ったところ、区画の縦余白は参考サイトのほうが大きい（144px 対 88px）ことが分かりました。
賑やかく見える理由は詰めているからではなく、余白に必ず何かが置いてあることでした
- そこで ①写真の背後に大きな水彩の丸を敷く ②イラストを1.5〜1.7倍にして点数を増やす
③見出しの下に葉の区切りを置く、の3つを入れています。余白を詰めたのは補助（88→68px）です
- イラストが本文やボタンに掛かる位置では、必ず文字が上になるようにしています（スマホは一律）
3案に共通していること
- 色はロゴの実測値（緑・黄・茶）が土台。オレンジ・ピンク・水色は差し色として少しだけ使用
- 書体は見出し Zen Maru Gothic（ロゴの丸ゴシックに合わせる）／本文 Noto Sans JP
- いちばん上に「この冬オープン予定・募集中」の細い帯。電話番号はヘッダーに出さない
- 学研和賀東教室は載せていない
- お知らせ3件・地図・写真の位置はダミー。文章は原稿とチラシからの転記
手書き風の切り抜きについて
- 形は6種類＋横長用2種類。見本はこちら
- 紙のザラザラ感は画像を使わず CSS で作っています。粒の粗さと重ね方の比較
- 切り抜き・波・質感・水彩の丸は製品の語彙として資産化しました（他の案件でも宣言1行で使えます）
- 切り抜きは写真ではなく CSS 側が持つので、あとから管理画面で写真を差し替えても形は残ります
- 写真の縦横比が変わっても形が追従します（縦長の枠なら縦長の形になる）
- イラスト（鳥・動物・植物）は、いただいたら見出しの脇・区画のすき間・写真の縁へ散らします
決まっていないので仮に置いたもの
- 「3つのサポート」の説明文（チラシの見出しから起こした仮の文章）
- お知らせ3件の中身、Googleマップ、開所予定日
- 営業日・営業時間・対象年齢・定員・送迎範囲・利用料金（未定のためTOPには出していない）
