いま世界のウェブは、
こう見えている。
アメリカのAI企業やテック企業のサイトを中心に、2026年に流行っている見た目と使い勝手を、職人さんにも分かる言葉でまとめました。見た目は、このページの上で動く形で再現しています。本物は、リンクから開いて見てください。
私は、こうした最先端のサイトを見て、使える所だけを、職人の会社のホームページに取り入れながら作っています。
リンク先を開いて確かめた日：2026年10月27日。サイトは変わることがあります。
UI ＝ 見た目
見た目のトレンド、5つ
左が、このページの上での再現です。さわって、動かしてみてください。右に、お手本のサイトを並べました。「米国外」と書いたものは、アメリカ以外の会社の参考例です。
UI 03
すりガラス（グラスモーフィズム）
後ろが透けてぼやける、すりガラスのような板を重ねます。
Apple が2025年6月に、iPhone などの新しい見た目「Liquid Glass」を発表しました。トレンドの記事でも、よく取り上げられています。メニューやカードを重ねても、奥行きが出て、すっきり見えます。
お手本
- Apple（MacBook Pro）：上のメニューを開いたときの幕や、サイズの切り替えボタン。
- Linear：スクロールしても上に残るメニュー。下の中身が透けてぼやけます。
- Spline：トップの真ん中の、AIに頼む入力欄。
このサイトでも：画面の上に残る、すりガラスのメニュー。
UI 04
大きな文字のタイポグラフィ
画面いっぱいの大きな見出しで、ひとことで言い切ります。
写真に頼らず、言葉の強さで見せる作り方です。文章は短く、まず要点だけ。スマホでも一目で何の会社か分かります。
お手本
- Vercel：黒い画面に、大きな白い一文。
- Notion：トップに画面幅いっぱいの太い見出し。
- Apple（MacBook Pro）：途中に出てくる、巨大な数字。
このサイトでも：AI導入支援のページの最後の、大きな数字と見出し。
UI 05
3D・光の粒
画面の中で立体や光の粒が動き、さわると反応します。
ブラウザの中で3Dを動かす技術（WebGL）を使うと、特別なソフトを入れなくても、さわれる立体を見せられます。左の粒は、マウスや指を近づけると逃げます。
お手本
- Spline：ブラウザで3Dを作る会社。トップから立体が動きます。
- Rive：トップの黒い画面に、映画のような動く景色。
- Apple（MacBook Pro）：スクロールすると、液体のような粒の映像が画面いっぱいに出ます。
UX ＝ 使い勝手
使い勝手のトレンド、5つ
見た目より大事なのが、こちらです。見る人が迷わず、早く、気持ちよく目的にたどり着けるか。2026年のトレンドの記事では、AIが入口になるサイトが取り上げられています。
UX 01
AIに聞ける入口
メニューを探させず、トップでいきなり「何をしたい？」と聞きます。
見る人は、知りたいことを打つだけ。メニューの奥まで探しに行かなくて済みます。AIの答えをどこまで信じてよいか分かる作りにすることも、大事になっています。
お手本
- Perplexity：トップの真ん中が、大きな質問欄そのもの。
- Replit：「何を作りますか？」の大きな入力欄と、選べるお題のボタン。
説明を読むより、さわるほうが早い。
UX 02
自分で試せるデモ
説明文を読ませる前に、画面の上で実際にさわらせます。
伸びている会社のサイトは、「製品が動いているところ」をトップで見せています。職人の会社なら、料金の目安をその場で出せる計算機などが、これに当たります。
お手本
- ElevenLabs：見出しのすぐ下に、切り替えて試せるデモの枠。
- Linear：実際の製品画面を再現した、大きな画面。
- Cursor：AIが作業している画面の再現。
このサイトでも：AIに任せられる所を探すチェックと、料金シミュレーター。
中をスクロールしてみてください。上の線が伸びて、「あとどれくらいか」が分かります。
2025年は、スクロールで物語を見せるのが流行りました。
2026年は、それが「道案内」に変わってきています。
いまどこにいて、あとどれくらいか。
それが見えると、人は最後まで読みます。
おしまい。上の線がいっぱいになりました。
UX 03
ガイド付きスクロールと、小さな反応
スクロールやボタンに小さな反応を付けて、「あとどれくらいか」を伝えます。
押したら少しへこむ、進んだら線が伸びる。小さな反応（マイクロインタラクション）があると、見る人は安心して先へ進めます。このページの一番上の線も、その1つです。
お手本
- Dropbox Dash × McLaren F1：画面の上に、経過時間とスクロールの速さのメーター。
- Raycast英国・米国外：アイコンに乗せると名前が出る、小さな反応。
MOTION ＝ 動き
スクロールと動きのトレンド、5つ
動きは、目立たせるためではなく、「次はここ」と目を案内するために使うのが、いまの流れです。
MOTION 01
スクロールでピン留め
一部を画面に貼り付けたまま、スクロールに合わせて中身だけを変えます。
長い説明も、紙芝居のように1枚ずつ見せられます。左の見本は、数字と手順が順に切り替わります。
お手本
- Apple（MacBook Pro）：スクロールすると、映像から大きな数字へ、場面が次々に切り替わります。
- Apple（AirPods Pro）・Cursor：画面に貼り付く部品を多く使っています。
このサイトでも：トップの「段階」のカードと、横に流れる「任せられること、7つ」。
MOTION 02
CSS だけで作るスクロールの動き
これまでプログラムで作っていたスクロールの演出を、ブラウザの標準の機能で軽く作れるようになりました。
プログラムが減るので、ページが軽く、速くなります。このページの一番上の進み具合の線も、対応しているブラウザでは、この機能だけで動いています。
お手本（この機能の記述が、ページの見た目の設定に書かれているもの）
TOOLS ＝ 見本を探す道具
最新の見本は、ここで探しています
流行りは、世界のデザイナーが作品を出している場所を見れば分かります。見本を探せる場所と、動きを作る道具をまとめました。
HOW ＝ 私の作り方
流行りを見て、職人の会社に合う形で作る
流行りを全部入れると、重くて読みにくいサイトになります。私は、見本を集めて、職人の会社に合うものだけを選び、Claude Code（AIの道具）で形にしています。
- STEP 01
見本を集める
Dribbble や Awwwards、アメリカのAI企業のサイトを見て、いま効いている見せ方を集めます。
- STEP 02
合うものだけ選ぶ
お客さんは、地元で工事を頼みたい人です。その人が迷わず問い合わせまで行けるか。そこで選びます。
- STEP 03
AIと一緒に形にする
「この動きを、この会社に合う色で」と、言葉で伝えて Claude Code に作らせます。直しも言葉で重ねます。
- STEP 04
速さと読みやすさを確かめる
字の濃さ、スマホでの見え方、動きを減らす設定。公開の前に、ひとつずつ測ります。
このサイトで使っている、2026年のトレンド
- 暗い背景に光るグラデーション（トップの一番上）
- マウスについて来る青い光（トップの一番上）
- すりガラスのメニュー（画面の上）
- ベントーグリッド（トップの「任せられること、7つ」）
- スクロールでピン留め（トップの「段階」）
- 大きな文字と、数え上がる数字（AI導入支援の最後）
- 自分で試せるチェック（AIに任せられる所を探す）
- 動きを減らす設定への対応（全ページ）
流行りは、見た目の話
仕事が来るかどうかは、検索で見つかるか、施工事例が伝わるか、問い合わせが簡単か、で決まります。流行りは、その上に乗せるものです。
まねは、しない
見本の画面や絵を、そのまま使うことはしません。考え方だけを取り入れて、あなたの会社の色と言葉で作り直します。
流行りは、変わる
ここに書いたことも、来年には古くなります。公開したあとも、変えたい所があれば相談してください。
このページの出典
- Webflow「8 web design trends to watch in 2026」（2025年12月23日）
- Figma「Top Web Design Trends for 2026」
- Nielsen Norman Group「State of UX 2026」（2026年1月16日）
- Framer「12 Tech and SaaS Website Examples (2026)」
- Apple Newsroom（Liquid Glass の発表、2025年6月）
- Chrome for Developers「Cross-document view transitions」
お手本のサイトは、2026年10月27日に開いて確かめました。どの部分にトレンドが見られるかは、その日の画面と、ページの見た目の設定（CSS）で確かめたものです。各社のサイトは、予告なく変わることがあります。このページの見本は、どれも当社がこのページの上で作った再現で、各社の画面を写したものではありません。
今のサイトが心配なら、
そのまま聞いてください。
今のサイトを見せてください。直すべきところだけ、正直に言います。売り込みはしません。それで終わっても、それで構いません。
屋根職人歴20年以上、施工2,000棟以上。まず自分の会社で実証してから、同じやり方をお渡ししています。
