ウェブサイト／学習塾・難関校受験

英数専科セオリア

2教科に絞る理由を、
数字とともに示す。

東京都文京区の架空の学習塾を題材にした、英語と数学だけを教える進学塾のウェブサイトです。絞る理由と四つのコース、合格実績とその集計条件、体験授業の申し込みまでを12ページにまとめました。

作品を開く

架空の事業者を題材にした自主制作です。

絞る理由と結果を、
同じ流れで読ませる。

読み手は難関校を目指す中学生・高校生と、その保護者です。トップページでは合格実績を早い位置に置き、続けて2教科に絞る理由、定員6名などの三つの約束、四つのコース、体験授業の順に並べました。

冒頭は問題を解く手元の映像がスクロールで進む導入にし、最初の画面ではコピーと定員、教室の場所だけを示します。上部のメニューからは特徴・コース・実績・料金・教室へ直接移動できます。

薄い青みの地と濃紺の文字を基調に、見出しは明朝体にしました。ヘッダーは画面の上端から、ページごとに色の違うインデックスのタブを垂らしています。本文は方眼の地に赤い余白線を引き、余白に赤ペンの注記を書き込み、写真はクリップで留めました。

合格実績では、人数を手描きの斜線の棒と大きな赤い数字で並べ、のべ人数であることを点線の下に添えています。大学受験と高校受験は左右に分け、色ではなく見出しで区別しました。本文の重要な語には、スクロールに合わせてマーカーが引かれます。

コース案内はキーワード欄で絞り込め、該当件数とすべて表示のボタンが並びます。よくある質問は開閉式で、必要な項目だけを開いて読めます。

体験授業の申し込みは、学年と教室の組み合わせを確かめてから確認画面へ進みます。入力内容は送信も保存もされず、予約は成立しないデモです。

スマートフォンでは教室の写真を画面いっぱいに敷き、下から暗くなる地にコピー、定員と教室、体験授業のボタンを重ねます。上部の導線は色のシールの列と「メニュー」のタブにまとめ、開くと右端に色の付いたインデックスの一覧が出ます。