触って、遊べる。
記憶に残るUI/UX。
ボールが転がって仕掛けが次々に動く。なでると水面が揺れる。近づくと文字が逃げる。
透けるガラスのボタンが光を受けて傾く。このページの動きは、すべて実際に触れます。
どれも、お客さまのサイトに入れられます。
このページの動きは、すべて触れます。どれも、お客さまのサイトに入れられます。
サイト全体の作り込み：リニューアル費用に＋50万円〜80万円
UI/UXとは、見た目と
使い心地のこと。
UI — ユーザーインターフェース
画面の見た目と、触るところ
ボタン・メニュー・入力欄・カードなど、見た人が目で見て、押したり動かしたりする部分です。
たとえば：電話ボタンの大きさと置き場所、メニューの開き方、ガラスのように透けるボタン。
UX — ユーザーエクスペリエンス
使ったときに感じること
迷わない・速い・安心できる・楽しい。サイトを使い始めてから、問い合わせや購入を終えるまでの体験全体です。
たとえば：知りたいことにすぐ着ける、スマホで読みやすい、触ると気持ちよく応えてくれる。
内容が良くても、ボタンが見つからない・押しにくい・開くのが遅いだけで、人は帰ってしまいます。UIを整えるとUXが良くなり、問い合わせまで迷わずたどり着けるサイトになります。その上で、触って楽しい動きを足すと、見た人に覚えてもらえるサイトになります。
ボールを落とすと、
仕掛けが次々に動く
上のほうをタップすると、ボールが落ちます
ボールを落とすと、
仕掛けが次々に動く
上のほうをクリックすると、ボールが落ちます
転がる・跳ねる・倒れる。来た人の一押しから、仕掛けがつながって最後にのれんが上がります。見終わるまで目が離せないので、サイトの「顔」になる演出です。
- 最初の画面・キャンペーンの入口
- 商品の仕組みを楽しく説明
- 採用ページで会社の遊び心を伝える
お客さまのサイトに入れる場合（からくり仕掛けの演出）
導入目安 38万円〜60万円
ボールが転がり、仕掛けが次々に動く。物理の計算とコース設計込み
なでると揺れる水面
指で水面をなぞると波紋が広がります
なでると揺れる水面
カーソルで水面をなでると波紋が広がります
写真やロゴを水の下に沈めて、触れたところから波紋を広げます。旅館・温泉・和菓子・酒蔵・スパなど、涼しさや静けさを伝えたいお店に。
- 旅館・温泉・スパの最初の画面
- 季節のキャンペーン
- ブランドの世界観づくり
お客さまのサイトに入れる場合（水面・波紋の演出）
導入目安 20万円〜32万円
触れたところから波紋が広がる。写真やロゴを水の下に
カーソルから逃げる文字
文字の上を指でなぞってみてください
カーソルから逃げる文字
文字にカーソルを近づけてみてください
文字や図形がカーソルや指をよけて、離れると元の形に戻ります。ちょっとした遊び心で、滞在時間と「覚えてもらえる」を増やします。
- ロゴ・キャッチコピーの見せ方
- 404ページや待ち時間の遊び
- イベント・キッズ向けのサイト
お客さまのサイトに入れる場合（カーソルから逃げる演出）
導入目安 10万円〜16万円
文字や図形が指・カーソルをよけて、また戻る
2026年のガラスの質感
カードやボタンを触って、動かしてみてください
2026年のガラスの質感
カードやボタンにカーソルを乗せて、動かしてみてください
iPhoneの画面のように、透けるボタンとカードが光を受けて傾き、切り替えのつまみは溶けるように動きます。いまのサイトを「最新の見た目」に変えたいときに。
- メニュー・ボタンの刷新
- 料金表・カードの見せ方
- アプリのような操作感
お客さまのサイトに入れる場合（ガラスの質感のUI一式）
導入目安 13万円〜20万円
透けるボタン・カード・メニュー。光を受けて傾く・形が溶けるように動く
2026年のWEBサイトは、
こう変わりました。
スマホの画面がガラスの質感に変わったように、WEBサイトも「平らで静か」から「透けて、触ると応える」へ。
いま新しく見えるサイトの共通点です。
WEBサイトも「平らで静か」から「透けて、触ると応える」へ。
01
ガラスの質感
ボタンやカードが透けて、後ろの色がにじむ。iPhoneの最新の画面と同じ考え方で、いまのサイトを一気に新しく見せます。
02
触ると反応する
押す・なでる・近づけるで、画面が小さく応えてくれる。「見るだけ」のサイトより長く見てもらえます。
03
スクロールで場面が変わる
下へ進むたびに写真や文字が入れ替わり、1本の物語のように読ませます。
04
奥行きのある3D
カーソルの動きに合わせて傾く・立体に見える。平らな画面に、手に取れるような存在感を。
スクロールで場面が変わる見せ方は、スクロール演出のデモで体験できます。いまの流れと、自社サイトに入れるときの注意はコラム「2026年のUI/UXトレンド」にまとめています。
凝りに凝った
サイトデザイン
最初の画面からお問い合わせまで、サイト全体の動きを一から設計して作り込みます。動きの設計と作り込みに時間をかけるため、通常のリニューアルに「デザイン料」を足す形のメニューです。
最初の画面からお問い合わせまで、サイト全体の動きを一から作り込みます。リニューアルの料金に足す形のメニューです。
- 動きの設計（どこで・何が・どう動くかの絵コンテ）
- ブランドの色・形に合わせた演出の作り込み
- スマホでの軽量化（指で触れる・電池を食わない）
- 「視差効果を減らす」設定の方には、止めた完成形を表示
- 表示速度の確認（最初の画面を遅くしない）
凝りに凝ったサイトデザイン（サイト全体のモーションデザイン）
＋50万円〜80万円
リニューアル／新規制作の費用に足す、税別の目安です
1つだけ入れる場合
からくり仕掛けの演出38万円〜60万円
水面・波紋の演出20万円〜32万円
カーソルから逃げる演出10万円〜16万円
ガラスの質感のUI一式13万円〜20万円
動くのに、重くしない。
動きを入れても、サイトの開く速さと読みやすさは落としません。このページの動きも、同じ作り方をしています。
動きを入れても、開く速さと読みやすさは落としません。
画面に入ってから動く
見えていない演出は止めています。読み込みも、画面に近づいてから始めます。
スマホでは軽く
点の数や計算の細かさを、スマホでは自動で減らします。
「動きを減らす」設定に対応
動きが苦手な方の端末では、止めた完成形を表示します。
最初の画面は遅くしない
重い部品は後から読み込むので、サイトの開く速さはそのままです。
UI/UXをもっと知る
UI/UXの基本、2026年の流れ、いまのサイトに足せる機能のコラムです。
UI/UXとは？違いをたとえで解説｜ホームページの問い合わせを左右する見直しポイント
UI/UXとは？違いをたとえで解説
UI/UXとは？違いをたとえで解説｜ホームページの問い合わせを左右する見直しポイント
UIは画面の見た目とボタン・メニューなど操作する部分、UXはサイトを使って感じる体験の全体です。違いをお店のたとえで説明し、問い合わせとのつながり、Googleが示すページの体験の目安、自社サイトで試せる見直しポイントを確かめ方つきでまとめます。
2026年のUI/UXトレンド｜ガラスの質感・触って動く演出は自社サイトに必要？
2026年のUI/UXトレンド
2026年のUI/UXトレンド｜ガラスの質感・触って動く演出は自社サイトに必要？
2026年のホームページで新しく見えるUI/UXは、透けるガラスの質感、触ると応える演出、スクロールで場面が変わる見せ方、遊び心のある仕掛けの4つです。向いているサイトと向いていないサイト、入れるときの注意（表示速度・動きが苦手な人への配慮・スマホ）を、触れる見本つきで解説します。
2026年、ホームページに付けられる機能カタログ｜予約・決済からAI接客まで
2026年、ホームページに付けられる機能カタログ
2026年、ホームページに付けられる機能カタログ｜予約・決済からAI接客まで
ホームページに追加できる機能を2026年版カタログとして整理。予約・決済・ECからAI接客・LINE連携・モバイルオーダーまで、目的別の機能と費用目安、作り直さずに1機能から追加する方法を、制作者の視点で解説します。