V-up 動画編集スクール
大学生向け動画編集スクールのサイト。TOPから受講事例、カリキュラム、サポート、 お問い合わせ、法務ページまで全7ページを設計・実装しました。
手で組んだ ウェブサイトを、 0件。
テンプレートは使っていません。HTMLを書いて、SCSSを書いて、公開まで自分で持っていく。
やってきたのはそれだけです。
住宅メーカー、美大、鉄工所、動画編集スクール、宿。並べると題材はばらばらですが、
毎回いちばん悩むところは同じで、何をどの順番で読ませるかです。
下のリストは、そのまま実物のページが開きます。
01 ── Selected
まず、3本だけ。
全部を並べる前に、要件の整理から公開まで通しで担当したものを3本。 何を考えて、どう決めたかはケースページに書いています。
株式会社Climb「やまたび」
登山ツアーのコーポレートサイト。1,100点を超える写真素材を、 読み込みを重くせずに見せるための出し方を組み立てました。GSAPでスクロール連動を実装。
ZINEN NATUREHOOD PROJECT
宿泊・リトリート施設のサイト。Lenisによる慣性スクロールとGSAPを合わせ、 「静けさ」を速度で表現することに時間を使いました。
02 ── About
作り方の話を、
先にしておきます。
CONTACT SHEET
ここまでのファーストビュー、16枚。
まずHTMLの構造を決めます。SCSSはスマホの見た目を基準にして、PCはそこからの差分だけ。 JavaScriptは、必要な動きがあるときにだけ足します。
こうしておくと、あとから直せます。「この余白だけ2px詰めたい」と言われたときに、 どこを触れば他が壊れないかが自分で分かる。 納品してからのほうが付き合いは長いので、そこは崩さないようにしています。
できること
01情報設計・ワイヤーフレーム
02デザイン
03HTMLコーディング
04SCSS設計（モバイルファースト）
05JavaScript・アニメーション実装
06公開作業
Works / 16
Hover to preview ／ Click to open
