キッズマネースクール ゆずりは校の公式サイトは、お金の相談という身構えられやすいテーマを、淡いイエローグリーンと白の組み合わせでやわらかく見せている点が印象的です。写真の分割、余白の取り方、セクションごとに繰り返されるボタンの形まで一貫した型があり、Webデザインの見本として読み解きやすいサイトになっています。
ここでは、埼玉県桶川市に拠点を置くこの相談窓口のサイトを題材に、配色やファーストビュー、情報設計、UIと導線の考え方を順番に見ていきます。新NISAや投資信託、保険の見直し、住宅ローンといった相談を扱うサイトを設計するときに、そのまま応用できる要素がそろっています。
淡いイエローグリーンと白でつくるトーン＆マナー
このサイトの第一印象を決めているのは、明るい黄緑を主役に据えた配色です。使う色数を絞り、面積の大きい部分は白に任せることで、扱う話題の硬さを和らげています。ここでは色の役割分担と、文字まわりの設計を順に見ていきます。
主役の色をひとつに絞った配色
見出しの英字、ボタンの罫線、チェックアイコンの下地、フッターの問い合わせ枠まで、色はほぼ黄緑系だけで組み立てられています。同じ系統の中で、淡いトーンを面の広い部分に、深いトーンを押してほしい部分に割り当てているため、色数が少なくても優先順位が伝わります。
画面上部では、電話番号を載せた枠に淡いトーンを、LINEでの連絡先を示す枠に深いトーンを使い、隣り合う2つの入口に差をつけています。同じ組み合わせがフッターでも繰り返されるので、読み進めるうちに色の意味が自然に学習されていきます。
白と余白が支える読みやすさ
セクションとセクションの間には、たっぷりとした空白が取られています。写真と文章が交互に現れる構成でも息苦しさを感じないのは、この余白が視線の休憩地点として働いているためです。
本文の文字色は真っ黒ではなく、少し明度を上げたグレーが選ばれています。字間と行間もやや広めに設定され、一つの段落が長くならない分、一文ずつを落ち着いて読める設計になっています。
英字と和文を重ねた見出しの型
各セクションの見出しは、大きめの英字と、その下に置いた小さな和文という2段構成で統一されています。英字はセリフ体で字間を広く取り、和文はゴシック体を小さく添えるという関係が、ページの最後まで崩れません。
MENUやVOICE、FAQといった英字見出しには、左右へ細い横線が伸びる装飾が添えられ、セクションの切り替わりが視覚的にも分かります。同じ型を繰り返しているため、下へスクロールしても現在地を見失いにくくなっています。
ファーストビューで相談のテーマを一望させる
トップページの最初の画面は、3枚の写真を縦に分割して並べる構成です。文章だけでは伝わりにくい相談の中身を、道具や資料の写真で直感的に示しています。
3分割の写真がテーマを具体化する
左には色分けされたグラフの資料と紙幣や硬貨、中央には木製ブロックと折れ線グラフ、右にはボールペンと電卓が写っています。いずれも家計や資産に関わる場面を連想させる被写体で、業種を言葉で説明する前にテーマが伝わります。
3枚には共通して黄緑のベールが重ねられ、写真ごとの色味の差が吸収されています。素材の統一が難しい既製の写真を使う場合でも、重ね色でトーンをそろえられるという良い例になっています。
中央のコピーとスクロールの合図
画面の中央には白抜きの大きな一文が置かれ、その下に2行のサブコピーが続きます。字間を広げた見出しと細めのサブコピーでコントラストがつけられ、視線が上から下へ自然に流れます。
画面の下寄りには縦組みの小さな英字でスクロールを促す表示があり、続きがあることを控えめに伝えています。ファーストビューの直後には、サイトからのお知らせを載せる枠が左右に2つ並び、日付と見出しを同じ形で表示する構成です。
悩みから入る情報設計
ファーストビューの次に置かれているのは、サービスの説明ではなく読者の悩みです。自分に関係のあるサイトかどうかを早い段階で判断できるようにする設計になっています。
チェックリスト型で悩みを提示する導入
「こんなお悩みありませんか？」という見出しの下に、淡い緑の帯が4本並びます。各帯の左端には濃い緑の四角とチェックアイコンが置かれ、素朴な箇条書きよりも視線が進みやすい形になっています。
並んでいるのは、保険の新規加入や見直し、新NISAや投資信託の始め方、住宅ローンや住宅購入の資金計画、ライフプラン表の作成と家計の見直しという4つの内容です。扱う分野を悩みの言葉に置き換えているため、専門用語になじみのない読者でも自分の状況と照らし合わせられます。
概要から信頼材料へ進むセクションの順序
その後はABOUT USで考え方を伝え、MENUでサポートメニューを見せ、VOICEで利用者の感想、Ownerで代表者、FAQでよくある質問へと続きます。まず立ち位置を示し、次に具体的なサービス、最後に人柄や疑問の解消へ進む流れです。
相談を前提とするサービスでは、何ができるかと同じくらい、誰が対応するのかが判断材料になります。代表者を紹介するセクションを独立させて中盤に置いている点は、その心理を踏まえた配置だと考えられます。
下層ページへ渡す情報量の調整
トップページの各セクションは、見出しと1〜2行の説明、そしてボタンだけで構成されています。詳しい内容は下層ページに預け、トップページは索引に徹するという割り切りが見られます。
サポートメニューでは、新NISA・投資信託の手続き、ライフプラン表の作成、家計の見直しの3枚をカードで見せ、残りは一覧ページへ送る形です。トップページが長くなりすぎず、それでいて主要な相談分野が伝わる分量に収まっています。
回遊を促すUIと導線
このサイトは、どのセクションからでも問い合わせと詳細ページへ進めるように作られています。繰り返し登場する部品の形をそろえることで、操作に迷いが出にくくなっています。
画面上部に常設された連絡手段
ページの上部には、電話番号を大きく載せた枠と、LINEでの問い合わせを示す枠が左右に並びます。中央には白い台の上にサイト名のロゴが置かれ、その右側に短いタグライン、右端に開閉式メニューのアイコンが配置されています。
連絡先を上部に置いておくと、読み進めている途中で相談したくなった瞬間に、迷わず次の行動へ移せます。電話は070-8461-7683で、営業時間は9:00から20:00まで、休みは不定休と案内されています。
同じ形で繰り返されるボタン
各セクションの末尾には、角を丸くした細い罫線のボタンが中央に置かれています。中の文字はそのセクションの名前と対応しており、押した先で何が見られるのかが明快です。
塗りつぶしではなく線で囲む形にしているため、主張が強すぎず、写真の多い画面でも浮きません。背景に写真を敷いたコンテンツのセクションだけは白い線のボタンに変えられており、可読性を優先した使い分けが見て取れます。
フッターで受け止める2つの入口
ページの最下部には、電話とLINEの問い合わせ枠が横幅いっぱいに並びます。上部の小さな枠と役割は同じですが、面積を大きく取ることで、読み終えた読者の受け皿として機能しています。
その下には主要なページへのリンクが縦罫で区切られて1行に収まり、さらにInstagramとLINEの丸いアイコン、プライバシーポリシーへのリンクが続きます。項目数は多いものの、文字サイズと間隔が整えられているため、ごちゃついた印象になっていません。
写真とレイアウトの使い分け
写真の見せ方にも一定の方針があります。すべてを同じ大きさで並べるのではなく、担わせたい役割に応じて幅と位置を変えている点が特徴です。
画面端まで伸ばす写真と中央にそろえる写真
導入部の写真は左右どちらかで画面の端まで伸び、反対側の余白と組み合わせて動きを作っています。一方で、お客様の声や代表者のセクションの写真は中央にそろえられ、読ませたい文章と幅を合わせています。
端まで伸ばす写真は雰囲気づくり、中央にそろえる写真は内容の説明という役割分担ができているため、下へスクロールしていく間も単調になりません。COMPANY PROFILEの見出しを左に置き、右側の写真を画面端まで伸ばした非対称のレイアウトも、同じ考え方の延長にあります。
重ね色と枠線でカードをそろえる
サポートメニューのカードは、写真の上に黄緑のベールと白い細枠を重ね、その内側に見出しと2行の説明を白文字で置く形です。3枚とも同じ処理なので、写真の中身が異なっても列としてのまとまりが保たれています。
コンテンツのセクションでは、青空と菜の花の写真を背景に敷き、中央の帯だけ色を重ねて可読性を確保しています。背景に写真を使いながら文字を読ませたい場面での、扱いやすい手法だと言えます。
お金の相談を扱うサイトで参考になる考え方
新NISAや投資信託、保険の見直し、住宅ローンといった相談は、内容が専門的になりやすく、読み手が身構えやすい分野です。だからこそ、Webサイトの側では言葉と見た目の両方で心理的な距離を縮める工夫が必要になります。
このサイトが取っているのは、悩みの言葉から入る、色数を絞る、写真で場面を見せる、同じ形のボタンで次の行動を示すという4つの基本です。どれも珍しい手法ではありませんが、最後まで方針を崩さずに通しているところに価値があります。
相談の流れを段階に分けて示す構成も、初めて相談する読者の不安を和らげます。住宅購入について案内するページでは、問い合わせ、希望の確認、資金のシミュレーション、購入計画の提案、その後のフォローという順に段階が並び、当日までに何が起きるのかを想像できるようになっています。
問い合わせフォームでは、名前や連絡先に加えて希望日と時間帯を選べるようになっており、電話が難しい方でも予約まで進められます。連絡手段を電話、LINE、フォームと三通り用意している点も、相談のハードルを下げるための設計だと考えられます。
まとめ：キッズマネースクール ゆずりは校のサイト設計
キッズマネースクール ゆずりは校は、埼玉県桶川市を拠点に、新NISAや投資信託の手続き、ライフプラン表の作成、家計の見直し、保険の新規加入と見直し、相続や贈与の相談、住宅ローンや住宅購入の相談まで幅広く扱っています。代表の宮木一暢様は保険代理店での勤務を経て2025年にこの窓口を立ち上げ、ファイナンシャルプランナー二級や相続診断士、住宅ローンアドバイザーといった資格を持って対応にあたっています。
公式サイトでは、生命保険32社と損害保険16社という選択肢の中から提案する体制や、15年で2,000世帯以上を支えてきた経験が紹介されています。知らなかったために損をする状態をなくしたいという考え方が、配色や見出しのやわらかさにも表れています。
デザイン面では、淡いイエローグリーンと白を軸にした配色、3分割のファーストビュー、悩みから始まる導入、同じ形のボタンでそろえた導線がひとつのまとまりを作っています。お金に関するサービスサイトを検討している方にとって、構成の参考になる一例です。実際の画面の質感やスクロールに合わせた見え方は、住宅ローンや保険の相談に対応する公式サイトでご確認ください。
