家庭学習に関わるサービスサイトのデザインを探している方に向けて、今回は高知県高岡郡中土佐町に拠点を置く「家庭学習サポーター スタディバディ」の公式サイトを、見本として取り上げます。
結論から述べますと、このサイトの見どころは、AIという先進的な題材を扱いながら、画面全体の印象が冷たくならないように設計されている点です。濃い青のデジタル表現と、生成り色に近いベージュの背景を交互に重ねることで、技術の頼もしさと家庭の落ち着きを一つの画面の中に共存させています。
以下では、ファーストビューの構成、配色、情報設計、導線づくりという順に、実際の画面から読み取れる工夫を分解していきます。
家庭学習サポーター スタディバディのサイト概要
デザインを読み解く前に、どのようなサイトなのかを整理しておきます。家庭学習サポーター スタディバディは、中学1年生から3年生を対象として、ご家庭での学習を支えるオンラインのサポートサービスです。公式サイトはそのサービス像と始め方を一本の縦の流れで伝える構成になっており、上から順に読み進めるだけで全体像がつかめるように組み立てられています。
運営者の情報が明示されている
会社概要のページには、商号として家庭学習サポーター スタディバディ、代表者として池川 和也様が掲げられています。所在地は高知県高岡郡中土佐町大野見吉野167で、問い合わせの対応時間は平日の9時から16時まで、土日祝は休みという条件まで書かれています。
個人で運営する学習支援サービスでは、誰が担当しているのかが読み手に伝わりにくくなりがちです。代表者名と所在地、対応の条件をひとまとめにして掲載する構成は、はじめて訪れた保護者の方が安心して読み進めるための土台になっています。
トップページを構成するブロックの並び
トップページは、ファーストビュー、About Us、Service、Step、Contact、Newsという順序で積み上がっています。「どんな考え方のサービスか」「何をしてくれるのか」「どうやって始めるのか」「どこへ連絡すればよいのか」という、読み手が判断していく順番にそのまま沿った並びです。
ページ数を欲張らず、トップページだけで検討に必要な材料がひととおり揃うようにまとめている点も特徴です。さらに詳しく知りたい人だけが下層ページへ進む形になっており、どこを読めばよいのか迷いにくい設計になっています。
ファーストビューが打ち出す「AI×人」というコンセプト
このサイトで最も設計意図が濃く出ているのがファーストビューです。画面を左右に分け、片側に無機質なデジタル表現、もう片側に人の表情を配置することで、サービスの考え方を言葉で説明する前に視覚で伝えています。
左右で役割を分けたスプリット構成
左側には濃紺を基調にした回路やデータを思わせるグラフィックが敷かれ、右側には制服姿の生徒と白い人型ロボットが並んで写る写真が置かれています。左が技術、右が人という役割分担が、見た瞬間に伝わる配置です。
二つの素材の境目を単純な直線で切らず、緩やかに重ねてつないでいるため、別々の絵が分断されずに一つの風景として見えます。左右で色の温度が異なる素材を並べるときに、境界の処理でつなぎ目の硬さを消すという手法は、他のサイトでも応用しやすい工夫です。
反転ボックスと罫線がつくるコピーの階層
キャッチコピーは三段構えになっています。最上段の短いフレーズのうち中心となる部分だけを白い枠で囲んで反転させ、二段目に大きな白抜き文字で主となる一文を置き、細い横罫線を挟んでから三段目に説明的なひとことを添えています。
文字の大きさ、囲みの有無、罫線という三つの要素だけで優先順位を作っているため、コピーが数行にわたっても読む順番に迷いません。背景写真の上に文字を載せる場面では装飾を足しすぎると読みにくくなりますが、ここでは要素を絞り込むことで可読性を保っています。
配色とトーン＆マナーの設計
このサイトの印象を決めているのは、大きく分けて三つの色です。それぞれの色に役割がはっきり与えられており、ページを下へ進んでも受ける印象がぶれません。
濃紺から明るい青へと幅を持たせた青の使い分け
青は、ファーストビューやコンタクトのブロックでは濃紺に近い深い色で使われ、セクション見出しの英字やボタン、アイコンでは明るく澄んだ色で使われています。同じ色相の中で明度を大きく振り分けることで、背景として沈む青と、操作を促す青が自然に区別できるようになっています。
色数を増やさずに役割を分けるこの手法は、統一感を保ちながら情報の優先度を示したいときに有効です。ページ全体を見渡しても、押せる場所とそうでない場所の見分けが直感的につきます。
ベージュの背景が生む家庭的な空気
About UsやStep、Newsのブロックでは、生成り色に近いベージュが背景に敷かれています。白と青だけで組むと機械的な印象に傾きがちなところへ、温かみのある中間色を挟むことで、家庭での学習という主題にふさわしい柔らかさが生まれています。
さらにAbout Usの背景には、点と線でつないだネットワーク状の模様がごく薄く敷かれています。気づくかどうかという濃度に抑えられており、文字の読みやすさを損なわずに技術的なニュアンスだけを添えている点が丁寧です。
連絡手段にだけ使われる緑
緑は、ヘッダー右端のLINEで相談するボタンと、コンタクトのブロックの右側という二か所に限って使われています。青でまとめられた画面の中に別の色相を置くことで、そこが連絡するための場所であると色だけで伝わります。
差し色を使う場所を絞り込むと、ページ全体の落ち着きを保ったまま行動を促せます。色を増やすことよりも、増やした色の使い所を限定することのほうが効果的だと分かる例です。
情報設計とセクションごとの見せ方
縦に長い一枚もののトップページでは、単調さをどう避けるかが課題になります。このサイトは、見出しの形式、レイアウトの型、背景の切り替えという三つの層でリズムを作っています。
英字と日本語を重ねた二段見出し
各セクションの見出しは、丸みのある書体の大きな英字を上に、小さな日本語を下に置く二段構成で統一されています。英字が視覚的な区切り記号として働き、日本語が意味を補うという役割分担です。
すべてのセクションで同じ形式を守っているため、スクロールの途中で見出しが現れるたびに、ここから話題が変わると読み手が判断できます。見出しのデザインを揃えることが、そのままページ全体の読みやすさにつながっています。
数値と主張を分けて示す導入部
About Usの冒頭では、二段見出しの下に、累計200人以上の指導実績と高校合格率98%という数値を一行にまとめ、その下の行に元学習塾の教室長という経歴と、ご家庭で自走する自学自習という方向性を続けています。数値の行と主張の行を分けて置くことで、根拠と結論の関係が読み取りやすくなっています。
その下には、四行に折り返した本文が中央揃えで置かれています。一行の長さを短く保ったうえで中央で揃えることにより、まとまりのある宣言文のように読ませる工夫です。中央揃えは長い文章には向きませんが、行数を絞れば主張を印象づける手段になります。
白いカードで情報を粒に分ける
About Usでは四つの特徴が2列2行の白いカードに分けて置かれ、Stepでは手順が横並びの四枚のカードにまとめられています。角に丸みを付け、うっすらと影を落とすことで、ベージュの背景から静かに浮き上がって見えるようになっています。
カードの中身も型が決まっており、円形の下地に載せた線画アイコン、二行に折り返した見出し、そして短い本文という順で並びます。四枚とも同じ骨格でできているので、内容を横に比べながら読み進められます。アイコンはすべて線の太さを揃えた単色の描き分けで、絵柄がばらつかないように管理されています。
Stepのカードには、上端に重なる形で青い円形の連番バッジが添えられています。数字を独立した円として置き、カードの枠から少しはみ出させることで、順番のある手順だと一目で伝わります。公式LINEの友だち追加から受講の開始までを四つに区切って示す構成は、何から始めればよいのか分からないという不安をやわらげる働きをしています。
斜めのラインを繰り返すモチーフ
ファーストビューの角、Serviceの背景、コンタクトの手前の区切りなど、複数の場所に同じ角度の斜めのラインが登場します。細い平行線を束ねた表現で統一されており、ページ全体を貫くモチーフとして働いています。
背景の色が切り替わっても同じ形が現れるため、ブロックごとに雰囲気が変わりすぎることがありません。装飾を一種類に絞って反復させる考え方は、素材の点数を増やさずに世界観をまとめたいときの参考になります。
写真とテキストを左右に振り分けたService
Serviceのブロックでは、左に角の丸い写真、右に見出しと本文とボタンを置く二カラムが組まれています。左右の幅は均等ではなく、テキスト側にやや広く取ってあるため、説明が窮屈になっていません。
本文の中では、サービスの型を指す言葉や重要な語句が鉤括弧でくくられ、一部が色付きの文字になっています。説明が長くなっても視線が引っかかる場所ができるので、流し読みでも要点を拾えます。
導線設計とUIの工夫
問い合わせまでの道筋にも、細かく検討した跡が見えます。入口の数を絞りながら、ページのどこにいても連絡できる状態が保たれています。
ヘッダーに常設された二つの入口
ヘッダーの右端には、封筒のアイコンを添えた問い合わせのボタンと、LINEのアイコンを添えた相談のボタンが、ヘッダーの高さいっぱいの面として並んでいます。文字だけのリンクではなく塗りつぶした面にしてあるため、ナビゲーションの項目とは明確に区別されます。
左端にはロゴが置かれ、中央から右にかけてTOP、サービス内容、お申込みの流れ、会社概要という四項目が並びます。項目数を絞り込んでいるので、右端の二つのボタンが埋もれずに済んでいます。
セクションの終わりに置かれたボタン
ServiceとStepの各ブロックは、詳細ページへ進むボタンで締めくくられています。ボタンは角に丸みを持たせた青い横長の面で、右端に小さな山形の記号が入る形に統一されています。
Newsのブロックにある一覧のボタンも同じ形です。ボタンの見た目を一種類にそろえると、押せる場所の見分けが早くなります。色や形をボタンごとに変えないという判断は、地味ながら効果の大きい工夫です。
連絡手段を横一列に並べたコンタクト
コンタクトのブロックは、濃紺のデジタル背景の上に三つの面を横一列に並べる形です。左は白地に電話の窓口と受付の時間帯、中央は青地でメールの窓口、右は緑地でLINEの窓口という並びになっており、それぞれ塗りの色を変えてあります。
連絡の手段が複数あることと、それぞれ条件が違うことが、色と配置だけで伝わります。三つを縦に積まずに横へ並べたことで、どれを選んでもよいという対等な関係も表現されています。
フッターは最小限の構成
フッターは白い背景に切り替わり、サイトマップとプライバシーポリシーへのリンク、ロゴ、外部サービスのアイコン、著作権の表示だけという簡潔な構成です。ページの終わりを軽く閉じることで、直前のコンタクトのブロックの存在感が保たれています。
塾に行っても成績が上がらないという悩みに向き合うサイトのつくり方
ここからは、このサイトが扱っている主題そのものについて、一般的な観点から整理します。学習に関するサービスのサイトを作るときには、業種を問わず共通して考えるべき点があるためです。
通塾していても手応えが出ないという相談の背景
塾に通っていても成績に反映されないという声は珍しくありません。授業を聞いている時間と、自分の手を動かして定着させる時間は別のものなので、後者が確保できていなければ結果が変わりにくいからです。授業の理解度だけでは測れない部分があるという前提を、サイト側が言葉にして示せているかどうかで、読み手の納得感は大きく変わります。
家庭学習サポーター スタディバディのサイトでは、この点をAbout Usで正面から扱っています。分かった気で終わってしまう状態を課題として先に挙げ、そのうえで自宅で自走する学習を育てるという方向性を示す構成です。課題の提起から解決の方向へ進む流れは、読み手が自分ごととして読み始めるきっかけになります。
地方で塾が近くにないという条件をどう扱うか
通える範囲に塾がない地域では、選択肢の少なさそのものが悩みになります。送り迎えの負担や移動にかかる時間も検討の材料になるため、オンラインで完結するかどうかは重要な情報です。
このサイトでは、山間部や地方でも学習の環境を保てるという趣旨の特徴が、四つのカードのうちの一つとして独立して置かれています。地域の条件を弱点として扱わず、サービスが前提としている状況として最初から示している点が、読み手の環境に寄り添う構成になっています。
新しい仕組みへの不安をやわらげる見せ方
AIを使った学習支援は、判断の材料がまだ多くない分野です。だからこそ、仕組みの説明と、始めるまでの手順の説明を分けて置く構成が効きます。仕組みを理解することと、行動の見通しを立てることは別の話だからです。
このサイトは、About Usで考え方を伝え、Serviceで対象と内容を示し、Stepで始め方を並べるという順序を守っています。読み手の疑問が生まれる順番に答えを配置することが、そのまま途中離脱を防ぐ設計になります。
まとめ 生成AIと教育をつなぐサイトの見本として
家庭学習サポーター スタディバディの公式サイトは、深い青と生成り色のベージュを交互に重ねる配色、英字と日本語を組み合わせた二段見出し、白いカードによる情報の分割、そして斜めのラインの反復という、限られた手法を丁寧に積み上げて作られています。装飾の種類を増やすのではなく、決めた型を最後まで守ることで統一感を出すという考え方が一貫しています。
また、ヘッダーに常設した二つのボタンと、色を分けた三つの連絡窓口によって、どのタイミングで興味を持った読み手でも次の行動に移れる状態が保たれています。縦に長い一枚もののトップページを設計するときの参考になる構成です。
AIという題材を扱いながら冷たさを感じさせない画面づくりに関心のある方は、実際の画面で余白の取り方や色の切り替わりを確かめてみてください。生成AIを教育に取り入れた家庭学習サポートの公式サイトを見る
