V-up 動画編集スクール

動画編集スクールは数が多く、「未経験でも学べます」という同じ文言がどのサイトにも並んでいます。 そのなかで、対象を大学生に絞っていることが最大の差別化要因でした。

ただ、それは料金表や講師紹介を見ても伝わりません。読み手が知りたいのは 「自分の生活がどう変わるか」であって、講座の仕様ではないからです。 そこで、サイト全体を「大学生活がこう変わる」という一本の話として組み直すことにしました。

TOPの並び順を、講座の説明からではなく読み手の疑問の順番に合わせました。 「動画編集とは？」→「V-upで得られる3つの価値」→「大学生活がこんなに変わる」→「メッセージ」→ 「5つのサポート」。先に不安を消して、あとから体制の話をする順序です。

レイアウトはモバイルファーストで組み、メディアクエリは PC 側の1本だけにしています。 スマートフォンで読む学生が主な読者なので、基準になる状態をSPに置くほうが、 あとから崩れません。行間は本文1.6、見出し1.3の2値に固定して、ページ間で読み心地を揃えました。

装飾のドロップシャドウは使っていません。影で階層を作ると、 画面が小さいときに情報の優先順位がぼやけます。かわりに余白と罫線、 そして文字サイズの差だけで階層を作っています。

SCSSはページごとにパーシャルを分け、共通コンポーネントにページ固有の値を混ぜないルールで書いています。 共通側を書き換えると全ページに波及して、後から触るのが怖いファイルになるためです。 ページ差分は必ずそのページのモディファイアで上書きします。

// 共通は触らず、ページ側の modifier で差分だけ上書きする
.page-head--sup {
  .page-head__lead {
    @include pc {
      max-width: none; // support だけ幅制限を外す
    }
  }
}

画像パスはすべて相対パスに統一しました。サブディレクトリに配置して公開する運用なので、 先頭スラッシュの絶対パスにすると全アセットが404になります。

全7ページを公開まで持っていきました。運用のなかで文言や余白の調整依頼が入りましたが、 SCSSをページ単位で分けていたおかげで、影響範囲を確認せずに直せる状態を保てています。

反省点もあります。初期はPCの見た目から作り始めてしまい、途中でモバイルファーストに 組み替える手戻りが発生しました。ブレークポイントの向きは最初に決めておくべきだった、 というのがこの案件で一番大きな学びです。