ととのえる屋
相談する
ととのえる屋
相談する
Lab — Web表現ずかん
サイトで見かける「なんかかっこいい動き」。その正体を、実物で触って、名前を知れるページです。むずかしい言葉は使いません。このページ自体が、ぜんぶ実演でできています。
下にスクロールすると、ひとつずつ「しかけ」が出てきます。それぞれ 名前・ひとことで何か・実演・どんな時に効くか・重さやSEOへの影響 を、正直に並べました。最後に専門用語集と「テンプレとは何か」も置いています。
※このページのしかけは、スクロールするたび何度でも再生されます。
スクロールに"慣性"をつけて、ヌルッと滑らかに動かす。実はこのページ全体に、もう効いています。マウスホイールを少し回してみてください。
カードにカーソルを乗せると、下線が左から伸び、矢印が動きます。
言葉を集約し、核だけ残す。
現場の事務作業まで、AIで軽く。
続けたくなることを、大事に。
画面に入ると、覆いの下から文字が現れます（上の見出しがそれです）。
マスク（覆い）が左から開いて写真が出ます。ホバーでゆっくり寄ります。
ボタンの近くにカーソルを寄せると、少し近づいてきます。押し心地のための"気持ちよさ"。
画面に入ると 0 から目標値まで動きます。
線が描かれて、1点に収束します。「集約してととのえる」を図で。
スクロールで前後の写真がずれて動き、奥行きが出ます。
スクロールで奥行きが出る
リンクを押した瞬間、画面が覆われて次ページへ。静的サイトでもできる、いま一番モダンな演出です。
中央のつまみを左右に動かすと、ビフォー／アフターが切り替わります。清掃や制作の「前と後」を見せるのにぴったり。
BeforeAfter
カーソルの位置に合わせて、カードがわずかに3D回転します。
カーソルを乗せて動かしてみてください。奥行きが出ます。
1文字ずつ打ち込まれるように現れます（下の行・画面に入ると再生）。
同じ言葉がゆっくり横に流れ続けます。
この枠が画面の中央に来ると、明るい紙から夜の墨へ。通り過ぎれば、また紙へ戻ります。
Scene change
たたんでおいて、必要な時だけ開く。場所を取らず、探しやすい（FAQの定番）。
「テンプレート」は、あらかじめ用意されたひな型です。色や文字を差し替えるだけで、早く・安くサイトが作れます。一方、このページのような表現の作り込みは、ブランドに合わせて動きや見せ方を一つずつ設計します。
どちらが正しい、ではありません。早さ・安さならテンプレ。独自の空気感や説得力なら作り込み。——目的で選ぶものです。
ととのえる屋は、テンプレを否定しません。必要なら使います。ただ、ここに並べた表現を「やり過ぎず、ブランドに合う量だけ」入れるのが、ちょうどいいと考えています。