派手なCSS演出、受託案件で入れていいのか

このブログのトップページに、見出しの文字が光って見えるシマーエフェクトを入れました。純粋なCSSだけで動く演出で、入れてみると単純に「かっこいいな」と思います。ただ、自分のブログで気に入ったのと、受託の案件で提案していいかは別の話です。今日はその線引きを考えてみます。

🎥 この記事の内容は動画でも解説しています。

何を検討したか
公式で確認した前提と制約
向いている案件
向いていない案件
自分の案件ではどう判断したか
提案するとしたら、どう出すか
まとめ

何を検討したか

検討したのは、今回入れたようなCSSアニメーション演出全般(グラデーションが動く、光の帯が走る、といった系統)を、クライアントワークで採用していいかどうかです。技術的にはJSライブラリなしで実装できる手軽さがある一方、見た目のインパクトが強い分、案件によっては合わないだろうという感覚もありました。

実装自体はbackground-clip: textでテキストにグラデーションを乗せて、@keyframesでグラデーションの位置をずらしていくだけのシンプルな作りです。JSを一切使わずに動かせるのは魅力で、パフォーマンス面でもJSアニメーションより有利になりやすいというメリットはあります。

.hero-title em {
  background: linear-gradient(
    100deg,
    #00bbdd 0%, #00bbdd 34%,
    #8ae9fa 44%, #ffffff 50%,
    #8ae9fa 56%, #00bbdd 66%, #00bbdd 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 4.5s ease-out infinite;
}

@keyframes text-shimmer {
  0% {
    background-position: 130% 50%;
    filter: drop-shadow(0 0 0 rgba(138, 233, 250, 0));
  }
  11% {
    filter: drop-shadow(0 0 16px rgba(138, 233, 250, 0.6));
  }
  22%, 100% {
    background-position: -30% 50%;
    filter: drop-shadow(0 0 0 rgba(138, 233, 250, 0));
  }
}

/* アニメーションを減らす設定のユーザーには、動きを止めて静的なグラデーションで見せる */
@media (prefers-reduced-motion: reduce) {
  .hero-title em {
    animation: none;
  }
}

/* background-clip: text 非対応環境向けフォールバック */
@supports not (background-clip: text) {
  .hero-title em {
    background: none;
    color: #00bbdd;
  }
}

公式で確認した前提と制約

こうしたアニメーション演出を入れる場合、prefers-reduced-motionへの対応が必須だという点は外せません。動きに敏感なユーザーのために、OS側で「アニメーションを減らす」設定がされている場合は、演出を止めるかシンプルな見せ方に切り替える実装が求められます。これはアクセシビリティの観点で、W3Cのガイドラインでも明確に触れられている話です。

💡 Tips: prefers-reduced-motionとは

OS側の「視差効果を減らす」「動きを減らす」といったアクセシビリティ設定を検知できるCSSのメディアクエリです。この設定がオンになっている環境では、@media (prefers-reduced-motion: reduce) { ... }の中に書いたスタイルが適用され、アニメーションを止めたりシンプルな見せ方に切り替えたりできます。Windows・macOS・iOS・Androidいずれにも対応する設定項目があります。

またbackground-clip: textのような比較的新しいプロパティを使う場合、対応していない環境向けのフォールバックも必要になります。派手な演出ほど、裏側で用意しないといけない安全策が増えるということです。今回の実装でも、@supportsで対応判定をした上で、非対応環境では単色のテキストにフォールバックする形にしています。

向いている案件

ブランディングを重視するコーポレートサイトのヒーローエリアや、期間限定のキャンペーンLP
ターゲットのブラウザ環境がモダンブラウザに限定できる案件
クライアントが動きのある演出を積極的に求めている、あるいはその方向性を歓迎してくれる案件
エンターテインメント系やアパレル系など、ブランドの世界観そのものが「攻めている」ことを求められる業種

向いていない案件

官公庁・教育機関・交通系のように、アクセシビリティ対応が厳格に求められる現場
表示速度やパフォーマンス予算がシビアな案件(アニメーションはGPU負荷がかかります)
納品後の更新担当がCSSを触れない場合。効果を入れた意図がコードのコメント頼みになり、引き継ぎのタイミングで削られてしまうことがあります
年齢層が高いユーザーや、視覚的な情報処理に配慮が必要なユーザーが多いと想定されるサービス

自分の案件ではどう判断したか

今受けている学校や交通系の案件では、今のところこの手の演出は提案していません。理由は向いていない案件の条件にそのまま当てはまるからです。ミスが許されない現場で、動きの派手さを優先する場面はなさそうです。ガイドラインが厳しい現場では、そもそも「なぜこの動きが必要なのか」を説明できないと通らないことが多く、装飾のための装飾は提案の土台にすら乗りません。

一方でこのブログは自分ひとりで運営していて、ターゲットもモダンブラウザで問題なく、多少の遊びも歓迎される場所なので、実験する場としてはちょうどよかったと思っています。実際に自分のサイトで動かしてみると、コードを書いているときには気づかなかった「実際の画面でどう見えるか」の感覚がつかめました。今後カジュアルなブランドサイトの案件が来たら、この経験をもとに提案してみようと思います。

提案するとしたら、どう出すか

仮に向いている案件が来たとしても、いきなり全面採用は勧めないと思います。まずはヒーローの見出し1箇所など、影響範囲を絞って提案し、prefers-reduced-motion対応込みで実装した上で、クライアントに実際の画面を見てもらってから判断してもらう、という進め方が現実的そうです。派手な演出は言葉で説明するより、実物を見てもらった方が判断が早いことが多いからです。