子どもたちの未来を変える

ホームページ用にしてください

image.png の内容をベースに、ホームページ（Webサイト）の「特徴・学習システム」のページとして、すっきりと見やすく、ユーザーに刺さりやすい構成のテキスト案を作成しました。

デザインを考慮し、コピーしてそのままWebデザイン（HTML/CSSやノーコードツールなど）に落とし込みやすいフォーマットにしています。

メイン見出し（ページタイトル）

マナビトの学習システム

リードコピー

マナビトは、単に「勉強を教える塾」ではありません。

多くの塾が「授業」に重きを置く中、私たちは精神論を完全に排除し、「行動」の設計に焦点を当てることで、生徒の確実な成長を導きます。

従来の塾との違い（比較表セクション）

ホームページを訪れた保護者や生徒に一目で違いが伝わるよう、表形式（または2コラムのレイアウト）で構成します。

比較軸	従来の塾	マナビト
アプローチ	授業で知識を与える	成績が上がる「行動」を設計する
メカニズム	生徒のやる気や精神論に依存	科学的な指標に基づき「行動」を管理
結果	結果にばらつきが出る（偶然の産物）	結果（成績向上）を必然にする「確実な成長」

私たちの理念

「成績」ではなく、「行動」を管理・改善する。

成績そのものを直接コントロールすることはできません。私たちが唯一管理し、変えることができるのは「日々の行動」だけです。行動が変われば、結果は自ずとついてきます。

成績向上への5ステップ（ステップセクション）

マナビトが実践する、自学力を育てて未来を変えるための5つのステップです。

01. 指標の計測

まずは現状を正確に把握する
現状の課題や数値を可視化することからすべてが始まります。

02. 行動の改善

データに基づき、具体的な行動を変える
感覚に頼らず、データをもとにネクストアクションを最適化します。

03. 行動の習慣化

正しい行動を意識し、レベルに落とし込む
一時的な頑張りで終わらせず、無意識にできるレベルまで定着させます。

04. 自立した学習

自ら計画を立て、机に向かう
誰かに言われるのではなく、主体的に学ぶ姿勢（自学力）を養います。

05. 成績向上

結果として自然についてくる
正しい行動の積み重ねが、最終的な「成果」へと結びつきます。

結びのメッセージ（フッター手前・CTA前）

行動の積み重ねが、自学力を育て、未来を変える力になります。

💡 ホームページ制作時のデザインアドバイス

カラーの使い分け： 「従来の塾」のエリアはグレー系で落ち着かせ、「マナビト」のエリアはイメージ画像にあるような鮮やかなブルーやグリーン、オレンジをアクセントカラーとして使うと、視線誘導ができて効果的です。
5ステップのレイアウト： 画像のように、階段状（ステップアップ）のグラフィックや矢印を使ったデザインにすると、成長のプロセスが直感的に伝わりやすくなります。

Webサイトの構成や文言のニュアンスで、さらに調整したい部分があればお気軽にお申し付けください！

もう少し、わかりやすくしてください

image_2.png の内容を、ホームページを訪れた保護者や生徒が「直感的に、一瞬で理解できる」ように言葉をかみ砕きました。

専門用語（アプローチ、メカニズム、指標の計測など）をできるだけ使わず、スマホでもサクサク読めるシンプルな構成にしています。

ページタイトル：マナビトの学習システム

マナビトは、ただ「勉強を教えるだけの塾」ではありません。

「やる気を出せ！」「もっと頑張れ！」といった根性論では、子どもの成績は伸びません。マナビトが注目するのは、精神論ではなく「日々の行動」。科学的なアプローチで、誰でも確実にステップアップできる仕組みを作っています。

💡 ここが違う！従来の塾との比較

	従来の塾	マナビト
教え方	授業をして知識を伝えるだけ	成績が上がる「勉強のやり方（行動）」を設計する
進め方	生徒のやる気や「頑張り」に頼る	データをもとに、毎日の行動をしっかり管理する
結果	伸びるかどうかは運次第（ばらつきがある）	行動が変わるから、誰もが「確実に」成長できる

🎯 私たちの考え方

「成績を上げろ」と言うのをやめました。

実は、成績という「結果」を直接コントロールすることはできません。私たちが変えられるのは、「今日、どんな行動をするか」だけです。毎日の行動が変われば、成績はあとから自然とついてきます。

📈 確実にステップアップする「5つの手順」

画像（image_2.png）にある階段のステップを、分かりやすい言葉に直しました。

① 今の状況を知る

まずは、今の勉強時間や小テストの結果など、現状を正しくチェックします。

② 勉強のやり方を変える

データを見ながら、「どこをどう変えればいいか」具体的な行動に落とし込みます。

③ 良い行動をクセにする（習慣化）

「正しい勉強のやり方」を、意識しなくても毎日あたりまえにできるようにします。

④ 自分から勉強できるようになる

宿題を言われてやるのではなく、自分で計画を立てて机に向かう「自学力」が身につきます。

⑤ 気がつけば、成績が上がっている！

正しい行動を積み重ねた結果として、無理なく自然に成績がアップします。

毎日の小さな行動の積み重ねが、自分で学ぶ力を育て、子どもの未来を変える力になります。

ここパンフレットをホームページのようにに変更してください

image_3.png のパンフレット内容を、実際のWebサイト（ホームページ）の画面レイアウトを意識したデザイン構成案に落とし込みました。

このままWeb制作会社やデザイナーに渡せるような、セクションごとの構成にしています。

1. メインビジュアル（ページの最上部）

※背景には、明るい教室や緑の木の葉、集中して勉強する生徒の爽やかな写真

極大見出し： マナビトは「勉強を教える塾」ではありません。
サブコピー： 精神論を完全に排除し、「行動」の設計に焦点を当てる。それがマナビトの学習システムです。

2. 比較セクション（他社との違い）

📊 ひと目でわかる！従来の塾との決定的な違い

※スマートフォンでは縦並び、PCでは2カラム（左右）で綺麗に並ぶボックスデザインを想定しています。

比較ポイント	従来の塾（×）	マナビトのシステム（〇）
アプローチ	授業で知識を与える	成績が上がる「行動」を設計する
メカニズム	生徒のやる気や精神論に依存	科学的な指標に基づき「行動」を管理
結果	結果にばらつきが出る（偶然の産物）	結果（成績向上）を必然にする「確実な成長」

3. コンセプトセクション（私たちの想い）

🎯 「成績」ではなく、「行動」を管理・改善する。

「成績を直接コントロールすることはできません。私たちが管理できるのは『日々の行動』だけです。」

「もっと頑張りなさい」と精神論を押し付けるのは終わりです。データに基づいた正しい行動プランがあるから、生徒は迷わず前に進めます。

4. 5ステップセクション（学習の流れ）

📈 確実な成長へ導く「5つのステップ」

※ホームページ上では、1から5に向けて右肩上がりのカード型レイアウト、またはタイムライン風のデザインで配置します。

STEP 01 | 指標の計測
- まずは現状を正確に把握する
- 現在の勉強量や課題を数値でしっかり可視化します。
STEP 02 | 行動の改善
- データに基づき具体的な行動を変える
- 根性に頼らず、具体的な「次のアクション」を修正します。
STEP 03 | 行動の習慣化
- 正しい行動を意識しレベルに落とし込む
- 良い勉強のやり方を、毎日の「当たり前」のクセにします。
STEP 04 | 自立した学習
- 自ら計画を立て、机に向かう
- 指示待ちではなく、自ら進んで学ぶ「自学力」が育ちます。
STEP 05 | 成績向上
- 結果として自然についてくる
- 行動が変わった結果、最高の成果が生まれます。

5. ボトムメッセージ＆ CTA（行動喚起）

キャッチコピー： 行動の積み重ねが、自学力を育て、未来を変える力になります。

コンバージョンボタン：

Plaintext

[ 無料体験授業・学習相談に申し込む ]

この構成をベースに、例えば「どのような色味（青ベース、緑ベースなど）のホームページにしたいか」や「対象は親御さん向け・生徒さん向けどちらを強めたいか」など、具体的なイメージはありますか？

上のPDFをhtmlにかえてくだい

ホームページのコーディングやデザイン確認用としてそのまま使えるように、先ほどのPDFのデザインを再現したHTMLコードを作成しました。

以下のコードをコピーして、.html という拡張子（例：index.html）で保存すると、ブラウザで実際のWebページとして確認・使用することができます。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>マナビトの学習システム - ホームページ構成案</title>
    <style>
        /* 全体のリセットと基本設定 */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        body {
            font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
            line-height: 1.8;
            color: #2d3748;
            margin: 0;
            padding: 0;
            background-color: #f7fafc;
        }

        /* コンテナ（コンテンツの最大幅を制限） */
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        /* メインビジュアル（ヘッダー） */
        .header-banner {
            background: linear-gradient(135deg, #1e50a2 0%, #003366 100%);
            color: #ffffff;
            padding: 50px 30px;
            border-radius: 12px;
            margin-bottom: 40px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 51, 102, 0.15);
        }
        .header-banner h1 {
            margin: 0 0 15px 0;
            font-size: 32px;
            font-weight: bold;
            letter-spacing: 1.5px;
        }
        .header-banner p {
            margin: 0;
            font-size: 18px;
            opacity: 0.9;
        }

        /* リード文 */
        .lead-section {
            background-color: #ffffff;
            border-left: 6px solid #f08300;
            padding: 25px 30px;
            margin-bottom: 50px;
            border-radius: 0 12px 12px 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        .lead-section h2 {
            margin: 0 0 15px 0;
            font-size: 22px;
            color: #f08300;
        }
        .lead-section p {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
            color: #4a5568;
        }

        /* セクションタイトル */
        .section-title {
            font-size: 20px;
            color: #1e50a2;
            border-bottom: 3px solid #1e50a2;
            padding-bottom: 8px;
            margin-top: 50px;
            margin-bottom: 25px;
            font-weight: bold;
        }

        /* 比較表（レスポンシブ対応） */
        .table-responsive {
            overflow-x: auto;
            margin-bottom: 40px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-radius: 12px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #ffffff;
            min-width: 600px; /* スマホでの極端な縮小を防ぐ */
        }
        th, td {
            padding: 18px 20px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }
        th {
            background-color: #edf2f7;
            color: #2d3748;
            font-weight: bold;
            font-size: 16px;
        }
        .bg-grey {
            background-color: #f8fafc;
            color: #718096;
        }
        .bg-blue {
            background-color: #ebf8ff;
            color: #2b6cb0;
            font-weight: bold;
        }
        .col-title {
            font-weight: bold;
            width: 20%;
            background-color: #edf2f7;
        }
        .col-old {
            width: 40%;
        }
        .col-manabito {
            width: 40%;
        }

        /* コンセプトボックス */
        .concept-box {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            text-align: center;
        }
        .concept-box h3 {
            margin: 0 0 15px 0;
            color: #2b6cb0;
            font-size: 18px;
            font-weight: bold;
        }
        .concept-box p {
            margin: 0;
            color: #4a5568;
            font-size: 16px;
        }

        /* 5ステップ */
        .step-container {
            margin-bottom: 40px;
        }
        .step-card {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px 25px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            transition: transform 0.2s;
        }
        .step-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }
        .step-header {
            font-size: 16px;
            font-weight: bold;
            color: #1e50a2;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        .step-num {
            background-color: #1e50a2;
            color: #ffffff;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 13px;
            margin-right: 12px;
            font-weight: bold;
        }
        .step-body {
            color: #4a5568;
            font-size: 15px;
        }

        /* フッターメッセージ / CTA */
        .footer-message {
            background: linear-gradient(135deg, #f08300 0%, #e06a00 100%);
            color: #ffffff;
            text-align: center;
            padding: 30px 20px;
            border-radius: 12px;
            margin-top: 50px;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(240, 131, 0, 0.2);
        }

        /* スマホ向けの微調整 */
        @media (max-width: 600px) {
            .header-banner h1 { font-size: 24px; }
            .header-banner p { font-size: 15px; }
            .lead-section h2 { font-size: 18px; }
            .lead-section p { font-size: 14px; }
            .footer-message { font-size: 15px; }
        }
    </style>
</head>
<body>

    <div class="container">

        <div class="header-banner">
            <h1>マナビトの学習システム</h1>
            <p>WEBサイト構成・デザイン設計案</p>
        </div>

        <div class="lead-section">
            <h2>マナビトは「勉強を教える塾」ではありません。</h2>
            <p>精神論を完全に排除し、「行動」の設計に焦点を当てる。それがマナビトの学習システムです。</p>
        </div>

        <div class="section-title">📊 ひと目でわかる！従来の塾との決定的な違い</div>
        <div class="table-responsive">
            <table>
                <thead>
                    <tr>
                        <th class="col-title">比較ポイント</th>
                        <th class="col-old">従来の塾（×）</th>
                        <th class="col-manabito">マナビトのシステム（〇）</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-title">アプローチ</td>
                        <td class="bg-grey">授業で知識を与える</td>
                        <td class="bg-blue">成績が上がる「行動」を設計する</td>
                    </tr>
                    <tr>
                        <td class="col-title">メカニズム</td>
                        <td class="bg-grey">生徒のやる気や精神論に依存</td>
                        <td class="bg-blue">科学的な指標に基づき「行動」を管理</td>
                    </tr>
                    <tr>
                        <td class="col-title">結果</td>
                        <td class="bg-grey">結果にばらつきが出る（偶然の産物）</td>
                        <td class="bg-blue">結果（成績向上）を必然にする「確実な成長」</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="section-title">🎯 コンセプトセクション（私たちの想い）</div>
        <div class="concept-box">
            <h3>「成績」ではなく、「行動」を管理・改善する。</h3>
            <p>「成績を直接コントロールすることはできません。私たちが管理できるのは『日々の行動』だけです。」<br>
            データに基づいた正しい行動プランがあるから、生徒は迷わず前に進めます。</p>
        </div>

        <div class="section-title">📈 確実な成長へ導く「5つのステップ」</div>
        <div class="step-container">
            <div class="step-card">
                <div class="step-header"><span class="step-num">STEP 01</span>指標の計測</div>
                <div class="step-body"><strong>まずは現状を正確に把握する：</strong> 現在の勉強量や課題を数値でしっかり可視化します。</div>
            </div>
            <div class="step-card">
                <div class="step-header"><span class="step-num">STEP 02</span>行動の改善</div>
                <div class="step-body"><strong>データに基づき具体的な行動を変える：</strong> 根性に頼らず、具体的な「次のアクション」を修正します。</div>
            </div>
            <div class="step-card">
                <div class="step-header"><span class="step-num">STEP 03</span>行動の習慣化</div>
                <div class="step-body"><strong>正しい行動を意識しレベルに落とし込む：</strong> 良い勉強のやり方を、毎日の「当たり前」のクセにします。</div>
            </div>
            <div class="step-card">
                <div class="step-header"><span class="step-num">STEP 04</span>自立した学習</div>
                <div class="step-body"><strong>自ら計画を立て、机に向かう：</strong> 指示待ちではなく、自ら進んで学ぶ「自学力」が育ちます。</div>
            </div>
            <div class="step-card">
                <div class="step-header"><span class="step-num">STEP 05</span>成績向上</div>
                <div class="step-body"><strong>結果として自然についてくる：</strong> 行動が変わった結果、最高の成果が生まれます。</div>
            </div>
        </div>

        <div class="footer-message">
            行動の積み重ねが、自学力を育て、未来を変える力になります。
        </div>

    </div>

</body>
</html>