2026年のUI/UXトレンド｜ガラスの質感・触って動く演出は自社サイトに必要？

流れ② 触ると応える：なでると波紋、近づくと逃げる文字

2つ目は、押す・なでる・近づけるといった操作に、画面が小さく応える演出です。見るだけのサイトとの違いは、来た人に「自分で触った」という体験が残ることです。覚えてもらうきっかけや、もう少し見ていこうと思ってもらうきっかけを作るのが狙いです。

たとえば、写真やロゴを水の下に沈めて、触れたところから波紋を広げる見せ方があります。旅館・温泉・和菓子・酒蔵・スパなど、涼しさや静けさを伝えたいお店に合います。下の水面を、カーソルでなでてみてください（スマホでは指でなぞります）。

もう一つは、文字や図形がカーソルや指をよけて、離れると元の形に戻る見せ方です。ロゴやキャッチコピーの見せ方、404ページ（ページが見つからないときの画面）の遊び、イベントや子ども向けのサイトに向きます。下の文字に、カーソルを近づけてみてください（スマホでは文字の上を指でなぞります）。

流れ③ スクロールで場面が変わる見せ方

3つ目は、下へスクロールするたびに写真や文字が入れ替わり、1本の物語のように読ませる見せ方です。会社紹介、商品やサービスの説明、採用ページのように、順番に読んでほしい内容と相性が良い方法です。

実際の動きは、架空のテック企業のサイトとして作ったスクロール演出のデモで確かめられます。画面いっぱいに広がる最初の画面、重なっていくカード、数字のカウントアップなどを、スマホでも見られる形にしています。

注意したいのは、演出に気を取られて、料金・場所・問い合わせ先のような肝心の情報がスクロールの奥に埋もれることです。演出を飛ばして下まで進んでも、必要な情報がすべて読めるかを確認しておきます。

流れ④ 遊び心のある仕掛け：ボールが転がる「からくり」

4つ目は、遊び心のある仕掛けです。下の見本では、ボールを落とすと、転がる・跳ねる・倒れるがつながって、最後にのれんが上がります。最後まで見たくなる仕掛けなので、サイトの「顔」として使える演出です。

見本の上のほうをクリックすると、ボールが落ちます（スマホではタップしてください）。

向いているのは、最初の画面やキャンペーンの入口、商品の仕組みを楽しく説明したい場面、採用ページで会社の遊び心を伝えたい場面です。こうした仕掛けは、サイト中に散らすより、1ページに1つ「ここぞ」という場所に置くほうが印象に残ります。

なぜ2026年に「触れるサイト」なのか

理由は、見る側と作る側の両方にあります。

見る側では、先に紹介したLiquid Glassによって、iOS 26のiPhoneでは画面そのものが「透けて、触ると動く」見た目になりました。その画面に毎日触れている人には、平らな色の四角いボタンだけで組まれたサイトが、内容が同じでも少し前のものに見えやすくなっていると当社は考えています。

作る側では、透ける表現に使うbackdrop-filterに、主要なブラウザーの最新版がそろって対応しました（前述のMDNの表示では2024年9月）。これまで、こうした演出には専門の技術と作り込みの時間が必要で、大きな予算のブランドサイトで見かけることが多い表現でした。ブラウザー側の対応がそろったいまは、ボタンだけガラスの質感にする、最初の画面に1つだけ演出を置く、といった部分的な取り入れ方も考えやすくなっています。

向いているサイト・向いていないサイト

演出が力を発揮するのは、雰囲気や人柄が選ばれる理由になる業種です。反対に、来た人が情報を素早く確かめたいサイトでは、演出は控えめなほうが使いやすくなります。

サイトの種類	向き・不向き	合いやすい取り入れ方
旅館・ホテル・温泉	向いている	最初の画面に水面、予約ボタンにガラスの質感
飲食・和菓子・酒蔵	向いている	季節の写真に触れる演出、メニューのカード
美容・サロン	向いている	ガラスの質感のメニュー・料金表
採用サイト	向いている	からくりや逃げる文字で社風を伝える
ブランドや新商品を伝えたい会社	向いている	スクロールで場面が変わる商品紹介
診療時間や相談窓口を急いで探す人が多いサイト（医療・士業など）	控えめに	ボタンやメニューにガラスの質感を少しだけ
仕様や在庫を確かめる人が多いサイト（製造・卸など）	控えめに	動きより、探しやすさと表示の速さを優先

業種と同じくらい大事なのが、「今のサイトの基本が整っているか」です。次の3つを、自社サイトで確かめてみてください。

1. スマホの回線で開いたとき、待たされずに表示されるか
2. 開いてすぐ、何の会社で、次にどこを押せばよいかが分かるか
3. 電話や問い合わせのボタンが、スマホで見つけやすく押しやすいか

3つとも「はい」なら、演出を足して印象を強める段階です。1つでも「いいえ」があれば、演出より先に基本を直すほうが問い合わせにつながります。基本の整え方はUI/UXとは？に、表示の速さはホームページの表示が遅い原因と直し方にまとめています。今の表示の速さは、WEBサイト無料診断にURLを入れるだけでも確かめられます。

入れるときの注意

重くしない：開く速さと、触ったときの反応

演出で気をつけたい重さは2つあります。ページを開く速さと、触ったときに画面が応える速さです。

開く速さについては、最初の画面に重い演出を置くと、肝心の写真や見出しが出るまで待たされます。重い部品は本文が出たあとに読み込み、画面に近づいてから動かし始めるのが基本です。

触ったときの反応については、Googleが示す「INP」という指標があります。クリックやタップへの反応の遅さを測るもので、200ミリ秒以下なら応答性が高く、500ミリ秒を超えると応答性が低いとされています（web.dev）。演出の計算が重いと、ボタンを押しても反応が遅れる原因になるので、画面に見えていない演出は止めておきます。

動きが苦手な人への配慮

画面の動きで、めまいや気分の悪さを感じる人がいます。iPhoneには「視差効果を減らす」という設定があり（「設定」→「アクセシビリティ」→「動作」）、オンにすると傾けたときの壁紙などの揺れや、一部のアプリのアニメーションが止まります（Appleサポート）。

W3Cがまとめるウェブのアクセシビリティの指針WCAG 2.2には、操作をきっかけに起きる動きのアニメーションを、情報や機能に欠かせないものでなければ止められるようにする、という項目があります。最も高い水準（AAA）の項目で、前庭障害（内耳などの不調で、めまいや吐き気が起きる）のある人への影響が理由に挙げられています。端末の動きを減らす設定（iPhoneの「視差効果を減らす」など）をサイト側で読み取る方法（prefers-reduced-motion）は、その満たし方の一つとして示されています（W3C）。

作り方としては、この設定がオンの端末には、動きを止めた完成形を見せるのが分かりやすい方法です。からくりなら仕掛けが動き終わった姿、水面なら静かな水面、という具合です。お手持ちのiPhoneで設定をオンにしてサイトを開けば、動きで伝えていた情報が止めた状態でも伝わるかを、自分で確かめられます。

スマホでも触れるか

カーソルを乗せる（ホバー）ことを前提に作った演出は、スマホではそのままでは思ったとおりに動きません。指でなぞる・タップする操作にも同じように応えるよう最初から作り、公開前にスマホで実際に触って確かめます。

もう一つ見落としやすいのが、スクロールの邪魔です。指で触る演出が画面の大部分を占めていると、ページを下へ進めたいのに、指の動きが演出に取られてしまうことがあります。演出の大きさと置き場所は、スマホでスムーズに下へ進めるかどうかも含めて決めます。

制作会社に頼むときに確かめたいこと

演出を頼むときは、見た目のほかに次の4点を確認しておくと安心です。

• スマホの指の操作で、どう動くか
• 「視差効果を減らす」などの設定がオンのとき、どう見えるか
• 演出を入れる前と後で、表示の速さを測るか
• 演出が動かない古い環境でも、内容がすべて読めるか

当社の見本は、画面に入っている間だけ動かす、重い部品は画面に近づいてから読み込む、指で操作する端末では描画の細かさを落とす、動きを減らす設定がオンの端末では止めた完成形を出す、という作り方にしています。考え方はUI/UXの見本ページの「動くのに、重くしない」にまとめています。

まとめ

2026年のUI/UXは、透けるガラスの質感、触ると応える演出、スクロールで場面が変わる見せ方、遊び心のある仕掛けの4つが目印です。iPhoneの画面の見た目が変わり、ブラウザー側の対応もそろったことで、大きな予算のブランドサイトに限らず、部分的に取り入れやすくなっています。

ただし、演出は基本の上に足すものです。開く速さ、押しやすさ、分かりやすさが整っていることを先に確かめ、入れるなら1ページに1つの見せ場から始めてください。公開前には、重さ、動きが苦手な人への配慮、スマホでの操作の3つを確認します。

この記事で紹介した演出と、自社サイトに入れる場合の料金の目安は、UI/UXの見本ページでまとめて見られます。ガラスの質感だけを見たい場合はガラスのUIの見本へどうぞ。予約やチャットのような実用の機能は、できること（触れる機能デモ）と2026年の機能カタログをご覧ください。