（再編成）4-5-1-4.SWELLブロック・リッチカラムを使ってみよう

この記事は4-5-1.SWELLで作る教室サイトのトップページ設計〈前編〉|着せ替えデザイン応用の抜粋・再編成です。Topページで採用したリッチカラムブロックの設定方法を解説しています。

固定ページの抜粋をトップページに載せる

まず最初に、「教室紹介」「レッスン案内」「アクセス」など、
各コンテンツの固定ページをしっかり作り込みます。

そのあと、トップページでは、
それぞれのページの大事な部分だけをコピーして抜粋し、
「▶ 詳しくはこちら」ボタンで本ページ（固定ページ）へ誘導する構成にしています。

こうしておくと、
トップページを読むだけで全体像がわかり、
気になった部分はすぐに詳細ページに進めます。
「抜粋を載せて、深掘りはリンクで見せる」――
とてもシンプルですが、閲覧者にとって分かりやすい構成です。

レッスン案内セクションに「リッチカラム」を使用

リッチカラムを使う理由

• 統一感が出る
• スマホ時にスライドで見やすい
• 複数教室を横に並べやすい

横スライド形式一列表示で、横のアクション

「レッスン案内」セクションでは、
SWELLの リッチカラムブロック を使い、
各教室のバナーを 横スライド形式で1列表示 にしました。

各バナーには、

• 教室の写真（バナー画像）※クリックで各固定ページに移動
• 教室内容を2行程度で紹介するテキスト

を配置しています。

この構成により、
見た目はシンプルでも、どの教室も統一感のあるデザインで紹介できます。
また、同じバナーを 共通サイドバー にも設置し、
どのページからでも各教室ページへスムーズに誘導できるようにしています。

---