01 SCALE
画面いっぱいに、伝える。
小さくたくさん置くより、大きくひとつ。開いた瞬間に何の会社かが分かる状態を、余白と大きさでつくります。
- A見出しは端まで画面の幅いっぱいに置き、読む前に伝わる形にする。
- B余白で整理する情報を減らすのではなく、置き方で読む順番をつくる。
- Cはじめの3秒スクロールする前に、いちばん強いことばを見せる。
02 STRUCTURE
1ページを、
分解して組み直す。
章ごとに役割をひとつだけ決めて、知りたい順に並べ替える。スクロールの速さも設計の一部です。
STEP 1章に分ける伝えることを1章にひとつだけ置く。
STEP 2順番を決めるお客様が知りたい順に並べ替える。
STEP 3動きを当てる章の切り替わりに合わせて映像を進める。
03 PORTRAIT
写真が、主役になる。
文字を足すより、1枚をきちんと見せる。人が写っているだけで、伝わる速さが変わります。
1枚章ごとの主役
3秒目が止まる時間
100%画面に占める大きさ
04 GALLERY
並べて、見せる。
実績も、商品も、横に流して一覧にする。指でもマウスでも同じ速さで動き、見たいものの前で止まります。
- Z1横に流すスクロールに合わせて一覧そのものが動く。
- Z21枚ずつ止める見たいものの前で、自然に速さが落ちる。
- Z3押せる形にするどこを押せるのかを、色と形で示す。