ハクソク

世界を動かす技術を、日本語で。

スクロールフェードに死を

45日前原文(dbushell.com)

概要

  • Scroll fadeエフェクトの批判的考察
  • アクセシビリティやユーザビリティへの影響
  • 開発現場での典型的な問題点
  • パフォーマンスやSEOへの悪影響
  • Scroll fade導入への反対意見とその根拠

Scroll fadeエフェクトの是非

  • Scroll fadeは、ウェブ要素がスクロール時にフェードインするデザイン手法

  • Y軸のtransformと組み合わせることで動きを付加

  • 控えめな使用なら許容範囲だが、ほとんどの場合やり過ぎ

  • 最終段階で突然要求されることが多く、開発者の悩みの種

  • 「何もかもフェードさせて！」という曖昧な指示が頻発

    • 影のステークホルダーによる唐突な要求
    • プロジェクト終盤での仕様変更

  • Scroll fadeはユーザーにも開発者にも不快感を与えることが多い

  • JavaScriptでの実装が煩雑で、しばしばバグの温床

Scroll fadeの問題点

  • 目的やバリエーションが無く、どれも似たり寄ったり

  • 1秒のopacity遷移＋100pxのtransformが定番

  • ゆっくりスクロールしないと見栄えが悪い

  • クライアントの主観に左右されやすく、説得は困難

    • アクセシビリティへの配慮が不足
    • vestibular disorder（前庭障害）への影響
    • prefers-reduced-motionで一部ユーザーの保護は可能だが、根本解決ではない

  • コグニティブオーバーロード（認知的負担）の増加

  • Appleデバイスでの開発が中心、Windows・Linux・Androidでの動作検証不足

パフォーマンス・SEOへの悪影響

  • ユーザーテストやパフォーマンステストの重要性
  • **LCP（Largest Contentful Paint）**の悪化
  • バウンスレートの上昇リスク
  • SEOへの悪影響が懸念されるが、最近はGoogleの評価基準も変化

Scroll fade導入への反対意見

  • アクセシビリティの軽視
  • ユーザー体験の低下
  • パフォーマンスへの負担
  • 開発コストやテスト工数の増加
  • プロジェクト初期からの設計が必須で、後付けは危険

Scroll fadeよ、さようなら

  • Scroll fadeは「クイックウィン」ではなく、計画的な実装が必要

  • 導入を断固拒否する姿勢の重要性

  • 開発者コミュニティ全体で「技術的に不可能」と装うユーモアも

  • Scroll fade廃止を強く提案

    • 🐴（タツノオトシゴの絵文字で「Scroll fadeはダサい」）

Scroll fadeは、見た目の派手さよりもユーザー体験・アクセシビリティ・パフォーマンスを優先すべきであり、安易な導入は避けるべきデザイン手法

Hackerたちの意見

投稿者は、この効果がネット全体に広がっていることを暗示しているみたいだけど、俺はその投稿で初めて見たよ。（確かに、イライラする。近くでアニメーションが動いてると目が疲れるし。）下の金魚のアニメーションはすごくいいね。どこかで再利用するために保存しなきゃ。
└
自分のウェブサイトを redesign してたら、クロードがこれをアニメーションとして追加することを提案してくれた。俺の考えでは、クロードが自信を持って提案するってことは、他の人も同じことを考えてるはず。もしかしたら、気づきにくいのかも。追記: odeva.nl で。
└
https://history-of-animation.webflow.io/
└
主に個人のウェブサイトテンプレートで見かけるけど、昔の MySpace プロフィールがキラキラしてた人たちが使ってたようなやつだね。
└
> 投稿者は、この効果がネット全体に広がっていることを暗示している。実際、そうだよ。動的コンテンツのあるサイト（SNSやニュースなど）では起こらないけど、商品を使わせようとする商業サイトではすごく一般的。必ずしもこのサイトのようにフェードインするわけじゃなくて、時にはコンテンツが横から滑り込んでくることもある。SaaSマーケティングページでは非常に広まってるよ。
└
たぶん、今まで気づかなかったのは、うまくやると微妙で心地よい効果になって、ページの特定の要素に注意を引くために使えるからだね。このサイトは意図的にひどくやって、ポイントを示そうとしてる。本当に、学ぶべきことは、下手にやらないことだね。でも、それはちょっと明らかすぎるかな。
└
Anthropicは自社のウェブサイト全体でこれを使ってるよ。スクロールすると効果がはっきりわかる典型的な例がこれね： https://claude.com/solutions/agents もしかしたら間違ってるかもしれないけど、僕の単純な推測では、AnthropicのスタイルガイドがClaudeにバンドルされたスキルを通じて採用されて、LLM生成のウェブサイトで広まったんじゃないかな。
└
確かに普及してるわけじゃないし、通常は「特集」系のコンテンツ（昔のワシントンポストの暴露記事みたいな）や商品ページで使われることが多いね。Appleは色々なページで使ってるけど、正直うざいよね。https://www.apple.com/iphone/ テスラも好きみたいだね。https://www.tesla.com/models 時々、サイトは遅延読み込みの画像を使って、実際に読み込まれたときに「フェードイン」効果をすることもあるけど、それ自体は問題ないと思う。
└
「動作を減らす設定」が有効になってるか確認した？私もそれを有効にしてることに気づいたばかりなんだ。
└
> 金魚は、水の中のクリックしたところに行くよ。
それに対抗して、パララックススクロールに死を！実際、すべてのスクロールアニメーションに死を！
└
スクロールは固定サイズのビューを上下に動かすだけでいいと思うんだけど、なんでみんなそんなに複雑にするの？
└
その通りだね。UIデザインにアニメーションを使うのには反対じゃないけど、ユーザーの注意を特定のものに向けさせるためとか、最小限の美的効果のために使うべきだと思う。全てが動いてると、まるで全てにケチャップをたっぷりかけるみたいだよ。
└
スクロールイベントのオーバーライドには死を。私のvimiumのスムーズスクロールが台無しになる。
> この投稿は、みんなに同じ本当にひどい体験をさせるために、動きの少ない設定を意図的に無視している。ごめん。ブラウザのリーダーモードを使ってください。「リーダーモード」は特別なモードであるべきじゃなくて、デフォルトのブラウジング体験であるべきだと思う。スタイリングが好きなユーザーは「クラウンモード」とかを有効にしないといけないようにすべきだよ。
└
ページが開いたときに自動的にこれが表示されるのはいいアイデアだね。必要なら、ユーザーがエスケープキーを押して消せるように数秒の猶予を与えるといいかも。
└
MacOSやiOSではリーダーモードをデフォルトに設定できるよ。リーダーモードをデフォルトに設定した方がいいよ。
└
「『クラウンモード』を有効にしなきゃいけない」っていうの、バハハハ、+1！これ、Windows XPのデフォルトのモチーフを「フィッシャープライスモード」って呼んでたのを思い出す。残念ながら、今のWindows（そしてますますMac）と比べると、プロフェッショナルで効率的に見えるんだよね。
笑、確かにその点は言われてるね。絶対に気持ち悪い。僕はかなりひどい乗り物酔いに悩まされてて、大人になってもあんまり改善されてないんだけど、このページを見た瞬間に吐きそうになったよ。最初の画像を見た後、リーダーモードに切り替えなきゃいけなかった。車の中で読書できない子供だったし、長距離ドライブでは常にグロッキーになってた。Dramamineのせいでね（ちなみに、Meclizineは眠くならずにほぼ同じ効果があるから、僕の生活をかなり改善してくれた）。大人になった今は前席に座ってる限り大丈夫だけど、公共交通機関は最悪。エレベーターは小さな拷問部屋みたいで、特に複数の階で止まるときは最悪だよ。しかも、感覚は累積するから、一日中それにさらされるとどんどん悪化する（自分の中で「テーマパーク予算」を持ってて、どれだけ快適に乗れるか考えてる！）。VRは、しっかりとした場所に固定されてない動きはダメだね（宇宙船や運転シミュレーターは大丈夫だけど！）。このことに対する意識が高まってるのは嬉しいけど、今どんなウェブサイトがこれを使ってるのか気になるな。今は個人ブログとかそんな感じなのかな？よく行くサイトでこれを見かけたら絶対気づくと思う。
└
僕はかなりひどい乗り物酔いに悩まされてるけど、そうじゃないのに、そのページを読んだ後に気持ち悪くなってるよ！本当に最悪な体験だね。
└
> 大人になったら、前の席に座ってる限りは大丈夫だけど、公共交通機関は最悪だよ。私も！これの最悪なところは、車に大人が二人以上いると、「前の席」にはいろんな社会的期待や礼儀があること。前の席じゃないと酔うって言ったことがあって、誰も信じてくれなくて、私がその特権の椅子を独占しようとしてるみたいに思われた。だからそれ以降は言わないようにしてるけど、共有の車は避けるようにしてる。あれに乗ると、周りの人たちが理解してくれない中で、静かに拷問室にいるみたいな気分になるから。それに、運転手が常にアクセルとブレーキを繰り返すのも最悪。急に交通が急減速するのはわかるけど、みんな少なくとも一つのペダルを常に踏んでる感じで、全然スムーズに走らない。拷問だよ。
これがiOSの話で、今（iOS 26から）ウェブページの上部に「フェードアウト」があるって話だと思ってたんだ。スクロールしたりウェブページを読んでると、その部分のテキストが灰色にフェードしていくんだよね。だから、「全部がスクロールフェード」って感じ。オフにする方法が見つからなくて、正直イライラしてる。追記：iOSのSafariでの「スクロールフェード」テキストの色の問題は、上部のテキストが「動的」（変化する）になって、視覚的に「注目を集める」ってことなんだよね。だから、実際にはページの下の方を読んでるときに、視線を奪われちゃう。上の方のテキストをちらっと見ることもできるようにしたいけど、色が変わって見えにくくなるのは困る。Appleのデザイナーはこれを理解してるはず。さらに、ページのテキストの色は、ウェブページのデザイナーが設定したものをデフォルトで尊重すべきだと思うし、OSがその色を変えるべきじゃないと思う（ユーザーがダークモードとかでオーバーライドを要求しない限り）。この記事の批判も妥当だと思うし、インターフェースの「スクロールフェード」について一般的に言えることだよね。最近は、必要のないところでOSのページが全部フェードアウトするのはあまり見かけないな。
└
「透明度を減らす」をオンにしたら、フェードする代わりに画面の上下が真っ白なスペースになったよ。私の「エッジからエッジ」のiPhoneが、2017年のホームボタン付きの最後の世代のiPhoneに似てきた。
└
さらにひどいiOSの例は、「スクロールフェード」だけじゃなくて、後退的で無能なUIデザインだね。音楽の再生コントロールがウィンドウの上部の空いてるエリアから、コンテンツブラウザのエリアに移動したんだ。そこでコントロールが「透明」で、テキストやサムネイル画像に重なってる。コンテンツブラウザのペインにあるものも？そう、それもスクロールフェードする。
スクロールジャッキングにこだわるクライアントのために働いてたんだけど、パララックス効果を見つけてからはもう後戻りできなくなったみたい。俺はクビになって、意見のない別のチームが入った。今じゃ、iPhone 16+の5G以外のデバイスではページがカクカクしてる。 :shrug:
俺のブラウザでも、何もアップデートしたりしてないのに、突然起こり始めた現象があるんだ。マスターボリュームが上がってるっていうか、YouTubeの音量じゃなくて、OSで表示される音量が上がってる。これがどうやって起こるのか、どうやって完全にオフにすればいいのか全く分からない。Firefoxには設定があるけど、試したやつは全然ダメだった。ここ数年で見た中で最悪のことの一つだよ、他にもネットに広がってる変な現象と一緒にね。
スクロール関連で個人的に大嫌いなことがあるんだ。スクロールダウンすると現れて、スクロールアップすると消える「スティッキーヘッダー」。ほんとに大嫌い。ページをスクロールしてると、あのバカみたいなやつが出たり消えたりするのを見るだけで頭が痛くなる。最悪なのは、uBlockみたいなもので消せないこと。ページのトップにいるときでもヘッダーが消えちゃうから。 >:(
└
正当なコンテンツのための画面スペースはしばしば貴重なのに、スティッキーヘッダーやフッターでその土地を奪われちゃうんだ。たまに、両方を同時に使って、広告もあちこちに挟むモバイルサイトに出くわすけど、ほんとにひどい体験だよ。
└
ああ、これ。俺はユーザースタイルで解決したけどね。
スクロールフェードの流行は、バグに重なった誤解だと思う。昔、開発者たちは帯域幅を節約するために画像の遅延読み込みを実装してたんだけど、うまく実装できなかった開発者もいて、画像が画面にスクロールされるまで読み込みを始めないから、スクロールするときに目に見えるブリップが発生するんだ。（もっと良い方法は、現在のスクロールビューの先にあるページ分の画像を先に読み込むことで、スクロールする前に十分な時間を確保できることなんだけど、これだと最大限に帯域幅を節約できないし、開発者によっては帯域幅の節約と目に見えるUXの劣化のトレードオフをうまく考えられないんだ。）それで、デザイナーたちはそのブリップが見える効果を見て、意図的なビジュアル効果だと思い込んで、ああ、これをきれいに見せるように直そう、フェードを使おうってなったんだ。で、バグから生まれたバカなビジュアルの流行がここにあるわけ。
└
…それが本当に話の内容なの？なんか、これらは関連してるけど別のことに感じるな。
[遅延]