Webの"しかけ"、ぜんぶ実演。

なめらかスクロール

スクロールに"慣性"をつけて、ヌルッと滑らかに動かす。実はこのページ全体に、もう効いています。マウスホイールを少し回してみてください。

触れると、線が引かれる。

カードにカーソルを乗せると、下線が左から伸び、矢印が動きます。——この3枚は、実は押すとそのまま各ページへ。

見出しが、下から
すっと立ち上がる。

画面に入ると、覆いの下から文字が現れます（上の見出しがそれです）。

写真が、開いて現れる。

マスク（覆い）が左から開いて写真が出ます。ホバーでゆっくり寄ります。

ボタンが、指に吸い付く。

ボタンの近くにカーソルを寄せると、少し近づいてきます。押し心地のための"気持ちよさ"。PC推奨

数字が、スルスル上がる。

画面に入ると 0 から目標値まで動きます。

3つが、1つに集まる。

線が描かれて、1点に収束します。「集約してととのえる」を図で。

2枚が、別の速さで動く。

スクロールで前後の写真がずれて動き、奥行きが出ます。

スクロールで奥行きが出る

押すと、フワッと切り替わる。

リンクを押した瞬間、画面が覆われて次ページへ。静的サイトでもできる、いま一番モダンな演出です。

境目を、ドラッグで動かす。

中央のつまみを左右に動かすと、ビフォー／アフターが切り替わります。清掃や制作の「前と後」を見せるのにぴったり。

BeforeAfter

⟷

カードが、立体に傾く。

カーソルの位置に合わせて、カードがわずかに3D回転します。PC推奨

文字が、打たれていく。

1文字ずつ打ち込まれるように現れます（下の行・画面に入ると再生）。

言葉が、流れ続ける。

同じ言葉がゆっくり横に流れ続けます。

スクロールで、色が反転する。

この枠が画面の中央に来ると、明るい紙から夜の墨へ。通り過ぎれば、また紙へ戻ります。

押すと、開いて閉じる。

たたんでおいて、必要な時だけ開く。場所を取らず、探しやすい（FAQの定番）。

押すと、まん中に浮かぶ。

ボタンを押すと背景がすっと暗くなり、中央に小窓が開きます。今の画面を保ったまま、要点だけに視線を集めたいときに。

1か所で、切り替える。

見出しを押すと、同じ場所で中身が入れ替わります。スクロール量を増やさずに、複数の情報を見せられます。

すっと出て、すっと消える。

ボタンを押すと、画面のすみに小さな知らせが現れ、数秒で自動的に消えます。「送信しました」のような、軽い合図に。

触れると、そっと説明が出る。

言葉の上にカーソルを乗せる（スマホは押す）と、小さな吹き出しで補足が出ます。本文を汚さずに、注釈を足せます。

ボタンひとつで、まるごとコピー。

コードや設定の右上のボタンを押すと、中身がそっくりコピーされます。読者が手で打ち写す手間を、まるごと消せます。

npx create-totonoeru my-site
cd my-site
npm run dev

数値を動かすと、その場で変わる。

下のつまみを動かすと、コードの数字と、右の見本が同時に変わります。「コードと結果」を並べて、仕組みをそのまま体感できます。

横に、すーっと流れる。

指やマウスで横にドラッグ（PCはホイールでも横に動きます）。場所を取らずに、たくさんのカードを並べられます。——この5枚は、押すとそのまま各ページへ。

パシッと、1枚ずつ止まる。

下の枠の中を縦にスクロールすると、1枚ずつ吸い付くように止まります。最後の1枚は、そのまま相談の入口に。

どこまで読んだか、上の線でわかる。

ページのいちばん上に、細い進捗バーがもう出ています。スクロールすると、読み進んだぶんだけ伸びます（このページで実際に動いています）。

スイッチひとつで、夜になる。

下のスイッチを押すと、見本が「明るい紙」と「夜」で切り替わります。好みや時間帯に合わせて、目にやさしく。

コードに、色がつく。

キーワード・文字列・コメントを色分けすると、コードがぐっと読みやすくなります。技術記事や手引きの定番です。

// LINEの会話を、AIで台帳に集約する
async function totonoeru(message) {
  const task = await ai.summarize(message)
  return { title: "今日の記録", task }
}

質問を、1つずつ。

長い入力フォームも、1問ずつに分けると答えやすくなります。下のミニ相談で体感してみてください。最後は、そのまま本物の相談につながります。

カードが、くるっと裏返る。

カーソルを乗せると裏面が現れます（スマホでは押すと各ページへ）。表に名前、裏に中身と入口を。裏返しはPC推奨

並べて見せて、押すと開く。

写真をきれいに並べ、押すと大きく開きます（ライトボックス）。実績や事例を、作品のように見せるのに。

制作実績をもっと見る →

×

円が、ぐるりと満ちる。

画面に入ると、円がゼロから描かれます。割合や進み具合を、ひと目で。（左は実際の進み具合、右は実例です）

コードを、タブで切り替える。

HTML・CSS・JS など、複数のファイルを1か所でタブ切り替え。手順や作例を、すっきり見せられます。

<!-- ヒーロー -->
<section class="hero">
  <h1>ととのえる屋</h1>
  <a href="/web/">相談する</a>
</section>

.hero {
  padding: 96px 44px;
  text-align: center;
}

// 相談ボタンの計測
document.querySelector(".hero a")
  .addEventListener("click", () => {
    track("soudan")
  })

流れが、縦につながる。

出来事や手順を、時系列で縦に並べます。制作の進み方を、ひと目で。画面に入ると順に現れます。

タグで、ぱっと絞り込む。

上のタグを押すと、合うものだけが残ります（このサイトのジャーナルでも使っています）。カードを押すと、そのまま各ページへ。

表は、見ている列を強調。

どの列を見ているか、ホバーでふわっと浮かせます。比較表がぐっと見やすく。（テンプレと作り込みの違い・価格は出していません）

打つそばから、絞り込む。

入力に文字を打つと、合う質問だけが残ります。FAQが多いときに、探す手間を消せます。試しに「料金」「エリア」「相談」など。

横の棒が、すーっと伸びる。

割合を横棒で。円より、複数を並べて比べるのが得意です。画面に入ると伸びます。（数値はデモ用の例です）

ひとりでに、流れていく。

放っておくと、スライドが自動で切り替わります（カーソルを乗せると一時停止・ドットで移動）。実績やお知らせを順に見せるのに。押すと各ページへ。

線が、描かれていく。

画面に入ると、折れ線がすーっと引かれます。推移や変化を見せるのに。（数値はデモ用の例です）

カチッと、切り替える。

設定のオン・オフを、スイッチで。状態がひと目で分かり、押し心地も軽やか。

プラスマイナスで、増減。

＋とーで、数を増やしたり減らしたり。人数や個数の入力に。打ち込むより速く、間違えにくい。

押すと、枝が開く。

階層を、折りたたんで見せます。サイトの地図にもなります——下はこのサイトの実際の構成です。葉を押すと、そのページへ。

輪を、色で分ける。

全体に対する割合を、輪の色分けで。画面に入ると伸びます。（数値はデモ用の例です）

いま、どこにいるか。

手続きの「現在地」を、番号で示します。「次へ」で進み、最後は相談へつながります。

どこへでも、ひとっとび。

「⌘K」でおなじみの検索ジャンプ。打ち込むと候補が絞られ、選ぶとそのページへ。ページが多いサイトを素早く行き来できます。

日付を、選んでもらう。

予約や空き状況に。点のついた日は予定あり、薄い日は満席のイメージです。日を押すと選べます（下は2026年6月の例）。

範囲を、つまんで決める。

2つのつまみで「ここからここまで」を選びます。絞り込みや並べ替えに（数値はデモ用です）。

星で、気持ちを伝える。

押した数だけ星がつきます。レビューや満足度に。試しに、この図鑑の感想を星で。

つかんで、並べ替える。

左の「⠿」をつかんで上下に動かすと、順番が入れ替わります（スマホでもドラッグできます）。優先順位づけに。

• ⠿まず、相談する
• ⠿やりたいことを、言葉にする
• ⠿設計して、作り込む
• ⠿公開して、計測する

色を、選んでコピー。

ブランドの色を並べ、押すとカラーコードがコピーされます。下はこのサイトの実際の色です。50個目は、ととのえる屋の"地の色"で。

押すとカラーコードがコピーされます。

そっと、ふくらむ。

動画配信サイトでおなじみ。カードにカーソルを乗せると、ふわっと拡大します。横スクロールで一覧、押すと各ページへ。拡大はPC推奨

細部まで、寄って見る。

通販サイトの商品画像のように、カーソルを乗せた部分が拡大されます。質感や細部を見せたいときに。PC推奨

サムネで、切り替える。

サムネを押すと、メイン画像が切り替わります。実績や商品の複数カットを見せるのに。

制作実績を見る →

読み込み中も、退屈させない。

中身が来るまで、ぼんやりした"骨組み"を見せます。真っ白で待たせるより、速く感じます。下のボタンで再現します。

あわせて、これも。

通販や配信でおなじみの「関連のおすすめ」。今見ているものに近いページへ、自然に誘います。押すと各ページへ。

濃さで、多い少ないを。

マス目の色の濃さで、量の大小をひと目で。曜日×時間帯のにぎわいなどに。（数値はデモ用の例です）

まわして、調整する。

つまみをドラッグで回すと、値が変わります。音量や濃度などの調整に。PC推奨

打つと、候補が出る。

検索窓に打つと、合う候補がその場に並びます。選ぶとそのページへ。試しに「清掃」「line」「記事」など。

地図に、ピンを立てる。

拠点や対応エリアを、地図に印で。押すと詳しいページへ（下は配置のイメージです）。

紙から、スマホへ。

QRコードを置くと、チラシやサイネージからスマホへつなげます。下は見た目のイメージです（実際はLINEのQRを置けます）。

数が、ぴょこっと出る。

アイコンの右上に、未読の数を。お知らせ・カート・通知の件数に。下のボタンで増やせます。

打って、チップにする。

入力して Enter で、タグ（チップ）が追加されます。×で削除。キーワードや宛先の入力に。

知らせ方を、色で分ける。

成功・注意・お知らせを、色としるしで区別します。押すと右下に出ます。

下まで行くと、続きが出る。

枠の中を下までスクロールすると、自動で次が読み込まれます（デモは数回で止まります）。一覧を切れ目なく。

縦に、読ませる。

日本語ならではの縦書き。引用や見出し、和の世界観に。（対応ブラウザで縦組みになります）

顔を、重ねて見せる。

参加者やメンバーを、少し重ねて並べます。多いときは「+5」のように省きます。

三本線で、しまっておく。

スマホでおなじみ。三本線を押すとメニューが開きます。小さい画面で項目をしまうのに。押すと各ページへ。

来た道を、たどれる。

「ホーム ＞ 清掃 ＞ 日報をAIで」のように現在地を示し、ひとつ上へ戻れます。深い階層の道しるべに。押すと各ページへ。

読みながら、現在地。

長い記事の脇に小さな目次を出し、今読んでいる見出しを光らせます。押すとその場所へ。

ぱっと、お祝い。

達成や完了の瞬間に、紙吹雪を。70個目の節目に、ひとつ。押すと舞います。

線の下を、塗る。

折れ線の下を塗ると、量の積み上がりが伝わります。画面に入ると描かれます。（数値はデモ用の例です）

付箋を、横へ動かす。

「やること → 進行中 → 完了」と、カードを押すと次の列へ進みます。仕事の流れを見える化。

評価の、ばらつきを。

★5〜1がそれぞれ何割かを、横棒で。レビュー全体の傾向がひと目で分かります。（数値はデモ用の例です）

ひと並びで、選ぶ。

つながったボタンで、ひとつを選びます。期間の切り替え（日／週／月）などに。選ぶと印が滑ります。

期間を、はさんで選ぶ。

開始日と終了日を押すと、あいだが選ばれます。予約や集計の「期間」に（2026年6月のイメージです）。

打ち込まれて、いく。

黒い画面に、コマンドが打たれて結果が出ます。手順の説明や、技術っぽい世界観の演出に。

変えた所を、色で。

追加した行は緑、消した行は赤で示します。どこをどう直したかが、ひと目で分かります。

 function totonoeru() {
-  return template      // 既製のひな型
+  return craft()       // 手で作り込む
 }

いま、世界の時刻。

複数の都市の「今」をリアルタイムで。海外とのやりとりや、グローバルな見せ方に。

処理中を、伝える。

時間のかかる処理の間、画面に「処理中…」を重ねます。固まったと誤解させないために。

横に払って、消す。

項目を左へドラッグ（スマホはスワイプ）すると削除されます。スマホアプリでおなじみの操作。

• 通知 ①　← 左へ払うと消える削除
• 通知 ②　← 左へ払うと消える削除
• 通知 ③　← 左へ払うと消える削除

引っぱって、更新。

一番上で下に引っぱると、最新に更新されます。スマホアプリでおなじみの操作。

はじめてを、案内する。

初めての人に、要点を順に光らせて教えます。最後は相談へ。「次へ」で進みます。

五角形で、バランスを。

複数の項目のバランスを、面の形で見せます。強み・弱みをひと目で。（数値はデモ用の例です）

通知が、積み上がる。

複数のお知らせを、下から順に積み重ねます。続けて押してみてください。

ファイルを、ほうり込む。

枠にファイルをドラッグ＆ドロップ、または押して選びます。アップロードの入口に（ここでは名前を並べるだけです）。

ぽちっと、ハート。

押すと色がつき、数がふえます。共感や保存を、軽い手ざわりで。

この一枚を、わたす。

今のページを、X や LINE で共有したり、リンクをコピーできます。広めてもらう入口に。

仕切りを、動かす。

真ん中の仕切りをドラッグすると、左右の幅が変わります。エディタや管理画面でおなじみ。PC推奨

見出しで、並べ替える。

列の見出しを押すと、その列で並べ替わります（もう一度で逆順）。表を見やすく。

ページを、めくる。

一覧を数ページに分け、番号で行き来します。各項目を押すとジャーナルへ。

下線が、滑って動く。

タブを選ぶと、下線がスーッと移動します。今どこを見ているかが、なめらかに伝わります。

時間が、減っていく。

締切やイベントまでの残り時間を、リアルタイムで。（デモ：24時間ごとに繰り返します）

点で、現在地を示す。

右の点で、今どのセクションにいるかを示し、押すとその場所へ。1画面ごとのページで定番。

背景が、ゆらめく。

やわらかな色がゆっくり動く背景。世界観や、ヒーローの奥行きづくりに。

文字に、色のうつろい。

見出しの文字そのものに、色のグラデーションを。要点を、上品に目立たせます。

押した所から、波紋。

押した位置から、波がふわっと広がります。スマホアプリでおなじみの手ざわり。

カーソルの周りだけ、灯る。

マウスの周りだけ明るくなり、ほかは暗く沈みます。注目を集める演出に。PC推奨

キーで、はやく動かす。

よく使う操作を、キーの組み合わせで。慣れた人ほど、速く使えます。

数字が、めくれる。

パタンとめくれて数が変わります。カウンターや在庫数を、印象的に。