webサイトに演出を着せる際に個人的に気をつけたい事項

こんにちは。CSSやJSでwebサイトの演出デモやスニペットを作るのが趣味の者です。
自己紹介用自己満サイト↓
https://kobito.zombie.jp/

筆者自身は、いわゆる動きのあるサイトが好きで、魅力的な演出を表現しているサイトを見て回ったり気に入った演出を再現するために朝までデモを作ったりしています。が、サイトの演出がうざいという感情を持つこともあります。
自分が作るモノに関しては、できるだけサイトの演出が与えるネガティブな印象を削りたいと思うものです。よって以下は、webサイトに演出を着せる際に筆者個人が心がけようとしている指標たちという主観的箇条書きになります。

そもそもwebサイトの演出は悪なのか？

いきなり否定から入りますが、個人的には「No」です。
webサイトを、演出込みで1コンテンツとして完成させている成果物は多く存在します。
ではなぜwebサイトの演出に対するネガティブな批判は生まれてしまうのか。
拙い経験則から導き出される未熟な予測としては以下です。

( 1 ) 「このサイトみたいにしてほしい！」というオーダーを叶えられなかった

例えばクライアントから

「この、賞を受賞しているサイトのような雰囲気にしてほしい。他にもこのサイトや、このサイトや、このサイトが気に入っていて...」

とのオーダーを頂いたはいいものの、そもそも所属しているチームで実現可能なのか問題・納期的予算的に可能なのか問題があります。最高の集団が作り上げた最高のwebサイトを一朝一夕でマネできるはずがないのです。とはいえビジネスです。クライアントの意向を尊重するとしたら、できるところまでやるでしょう。そのできるところまでが取りこぼしてしまった塩梅が、批判の原動力となるストレスを感じさせるユーザー体験に繋がってしまうケースがあるなぁと感じています。

( 2 ) ワタシは演出が好きなデザイナー/デベロッパー。webサイトの演出が好きで普段から収集している。今回のクライアントワークで私的演出コレクションを組み込んでみたい！

チームプレイの中でソロプレイしてしまって連携が取れなかったパターンです。例えば、ディレクターとデザイナーはクライアントの抱える課題などを鑑みてワイヤーを引き、デザインを完成させたとします。演出が大好きなワタシは、そのデザインデータを見て閃きました。

「よし、演出を加えよう。ちょうどアレを覚えたばかりで試したかったんだ。」

クライアントのための成果物であるはずが、実装者の作品と化してしまうパターンです。理想論的には制作はチーム全体で行われるべきであり、課題認識や制作方針は全員が共有しているはずである。ですが、自分が過去所属していた制作会社にも当てはまりますがチーム全体で連携がとれている状況は稀だなぁと感じています。デベロッパーの方なんかは特に、「デザインデータを見て初めてその案件の存在を知った」なんてことは多々あるのではないでしょうか。

( 3 ) ワタシはweb制作会社のメンバー。クライアントから「動きのあるサイト」をオーダー頂いた。どうしよう。ハッキリ言って演出向きの要件とは思えない

こんなときどうするでしょうか。webサイト制作は美談ではなくビジネスです。このビジネスへの捉え方次第で、例えば以下のようなパターンが考えられます。

• webサイト制作はビジネスだ。この要望はクライアントのビジネスを成功させるとは思えない。別のアプローチを提案しよう

• webサイト制作はビジネスだ。我が社がこのクライアントとの付き合いを続けていくため、顧客満足度UPのためにクライアントの要望を尊重しよう

どちらが正しいかの判断は誰にも下せないと思います。が、もしかしたら後者の例は1の例と同じ道を辿るかもしれません。

webサイトに演出を着せるという選択は、実装者一人が気軽に行えてしまうものです。一人が気軽に行えてしまうにも関わらず、影響範囲のデカい行いになってしまいがちであるという戒めを忘れないようにしたいところです。

挑戦することは悪なのか？

上記に従うなら、「未熟者。身の丈に合わぬ挑戦は控えよ」と言われているようです。これでは相乗効果的な周囲の成長も見込めなければ、新しいことを試せない息苦しい環境になってしまいます。挑戦はエライに決まっています。何度か使用している塩梅というワードも、最初から快適な塩梅を実現できるケースなど稀でしょう。やってみて、やりすぎてみて、批判されて研磨され、最終的に到達できる場所であるはずです。やりすぎるくらいに突き詰めてみなければ加減などできようもないのです。

おや？では、クライアントは発展途上の製作者の実験台として許容されるべきか？こんな議論が生まれそうです。本記事ではあくまでwebサイトの演出にスコープを留めたいので無視します。1つだけ言い逃げするとしたら、最初から完璧な人物など存在しないが、最初から全ての人物は完璧を要求されるになりがちな状況をうまいこと生き抜かなければならないなぁという所感です。

本題。

以下に、webサイトに演出を着せる際に気をつけたいことを羅列します。
最初に断っておきますが、モノの感じ方はそれぞれであり、ささいなトランジションも許容できないユーザーもいれば派手な3D演出でも回遊を楽しめるユーザーもいます。全てのユーザーをカバーすることは不可能です。3割のユーザーから嫌悪されたとしても7割のユーザーが許容できていれば問題ないケースは多いでしょうし、例え7割のユーザーが許容できなかったとしても、商材のターゲットが3割のユーザーであれば問題はないのです。

- 慣性スクロール

スクロールを止めているにも関わらず、ぬる〜っとスクロールが停止するアレです。スクロールインタラクションを演出するサイトではオキマリと言っていいほど頻出な気がします。
この演出のストレスとなり得る要素は止まりたいところで止まれないと進みたいところまで進めないが考えられます。実装者側の感想としては、せっかくスクロールインタラクションを作ったので、こう、ぬるっと演出させたくなるものです。しかし、Macユーザーは基本的に慣性を持ってスクロールしていますし、モバイル端末もデフォルトで慣性を持っています。windowsユーザーにのみ慣性を適用させるなどに留めておけば、二重で慣性が働いてしまった酔っぱらいアイススケートのような状況を防げるのかなぁと考えたりします。

- スクロールスナップ

「ちょっとしかスクロールしてないのに、次のセクションが画面ピッタリに収まりにきた！」
みたいなアレです。本当はこういう文字ベースの説明でなくcodepenとかで挙動添付する方が好ましいとわかっているものの、デモを用意している時間があまりにもなさすぎるので諦めました。
この挙動のストレスになり得る点は注視したい要素を画面の中心に持ってくることができない点が考えられます。上の方にある要素を読むには目線を上に上げなければならないという事は、普段の回遊体験が目線は常に中心に固定しており、スクロールすることで対象を中心に持ってきているという習慣を持っているユーザーには一手間強いることになります。

- スクロールジャック

スクロールしているのに固定され続けていて、進んでいるのか進んでいないのかわからない。であったり、縦方向にスクロールしているのに突然横スクロールしているような振る舞いになり、縦に操作したらいいのか横に操作したらいいのかわからないという混乱に繋がります

- スクロールバーを隠蔽した横スクロール

ビジュアルのためだけにスクロールバーを非表示にした横スクロールエリアです。筆者はmacユーザーなので完全に気がつきませんでしたが、横スクロールできる機能を持たないマウスで地獄というご意見を頂きました。確かにが過ぎました。

- ページ遷移アニメーション

ページ遷移のアニメーションなんか毎サイト導入したいですよね。最近mask-imageで遷移させる方法を覚えたので使いたくて仕方がありません。しかし、ページ遷移アニメーションは今、サイトマップで言うところのどこにいるのかわからないという混乱に繋がりかねないという性質を持っていると考えています。トップページにいたはずだが、スクロールしていたら下層ページに入っていた。よくあるMPAでは起きえない挙動であり、このような体験は多くのユーザーのメンタルモデルとして定着していない気がします。

「ここまでスクロールしたってことは/5秒hoverしたってことは、次のページに行きたいって事？」

この予測を制作者が行うことはあまりにも美しいと考えます。が、個人的には制作者が提供していいのはアシストまでであり行動の代理実行ではないのかなぁと考えています。
上記例であげるなら、「ここまでスクロールしたということは、下層ページに行きたいのか？下層への導線はコチラです」と知らせてあげるに留まることで、最終的な決定はユーザーに委ねるという考えです。

- 押したらどうなるのか予測できないUI / そもそも押せるのかわからないUI

例えばアコーディオンパネルなのだが、開閉のトリガーとなる要素が到底ボタンとは予測できないようなケースです。これに関してはwebサイトの演出的実装というよりは設計そのもののトピックな気がします。一昔前の小規模なページなどでは、遊び心として意図的に押せるのかわからない隠し要素のような楽しみがあったものです。

- ユーザーの希望は、演出の完了を待たなければ叶わない

例えば、ユーザーはAという情報を閲覧するためにBというボタンを押しました。演出が始まり、1.6秒後にようやくユーザーは目的の情報を閲覧することができました。

1.6秒くらい待ってくれよなと思いたくなります。個人的なポエムなのですが、

webサイトは制作者にとっては訪問中の瞬間の主役だが、多くのユーザーにとっては人生の脇役でしかない

という考えを持ち始めました。webサイトなんて大抵ながら見であり、主役を気取るにはそれに足るカリスマを持ち合わせなければならない、と。もちろん、1つのwebサイトがユーザーのその瞬間の主役となり得る成果物も存在しています。すさまじいことです。ポエムが長くなりましたが、ユーザーの目的ある行動に対するレスポンスがしばらく帰ってこないことが約束されている状況はストレスとなり得るという考えです。

- 情報が見え隠れしており、ページ内検索やテキストのコピーなどが行えない

演出が機能を損なってしまっているケースです。つい昨年あたりまではアコーディオンパネルの中身がページ内検索にHITしない問題などがイメージしやすいかなぁと思います。details summary要素は偉大です、

- 画面に入るたびにアレもコレも動く

よく存在している・よく要求される演出だと思います。俗に言う「ふわっとさせて」のアレです。
スクロールという行動は、「次の要素を閲覧するぞ」という意思決定の現れであり、ユーザーが決意した閲覧するという結果が提供されるまでの時間的ギャップはそのままストレスとなり得ると考えます。
加えて、ふわっとということは大抵の場合translateなどで座標も動いていることと思います。5pxの距離を0.2s程度で移動してくれるのであれば「スタイリッシュだ」と感じるに留まる気がしますが、opacityは0から1に、translateYは-100から０に、0.8sかけてがアレもコレもで起きると「はやく表示させてほしい」というストレスとなり得る気がします。

- クリック可能な要素がユーザーのマウス操作と連動して移動する

例えば、モーダルを開くためのボタンにマウスカーソルが近づく事に連動して、モーダルを開くためのボタンがカーソルに近づいてくるようなインタラクションが挙げられます。非常に面白い演出であり、ニューバランスのような歩行アシスト、優しさを感じます。
が、テーブルの上に置いてあるリモコンを取りにいくとき、リモコンは人間に近づいてこないという決めつけがあります。大抵の場合、リモコンを取るための行動の根拠はリモコンとの距離はこの程度離れているから、これくらい動けば届くだろうという予測による片道切符的に行われるため、リモコンを常に注視し続け、現在のリモコンの座標と現在の自身の位置からどの程度近づくべきなのか算出し続けるという習慣のないユーザーは、このインタラクションを通り過ぎることになります。もう一回取りに行かなければならない。しかも、新しいルールを前提にしながら。

- アニメーションの終わりを予測できない

例えば、完全な透明状態から１文字ずつ表示されるような演出が挙げられます。１文字ずつ文字が表示されているが、これは1行で済むのか8行あるのか。終わってみないとユーザーはアニメーションの全貌を知ることができません。その演出に付き合い続けなければならないという状況を強いることになります。
とはいえ、一文字ずつ表示させるというのは魅力的な表現手法です。最近「いいな」と思ったやり方は、完全な透明状態からスタートするのではなく、半透明な状態から1文字ずつ完全な色を帯びていくような、background-clip:textとbackground-image:linear-gradientを使った演出でした。半透明ではあるものの、ユーザーはアニメーションの終わりを完全に予測することができ、文字に色がついていくという演出は、そのままユーザーに、色のついていく文字を順番に読ませていくという、コンテンツを素通りさせない誘導となり得ると考えています。

- アニメーションを実装することが目的になっている

あ、冒頭で殴り貼りした自己紹介サイトはご覧頂きましたでしょうか。そうです。アニメーションを実装する事を目的としています。とはいえ、これはクリエイターの自己紹介サイトとしては間違っていない姿かもしれません。
アニメーションを実装することが目的となりえないシーンでやってしまうと。ユーザーはただ単に実装者のエゴで実装された演出に付き合わされるでしかなくなってしまいます。楽しみにしていた番組の間に流れるコマーシャルのようです。

- 訴求力を持っている動画にコントローラーがついていない

背景を演出するためだけの動画なら、ユーザーはそこに対して操作を行いたいとは考えないかもしれません。が、アート性を確保するためにコントローラーを非表示にした動画は商材そのものにフォーカスがあたっていて、ある特定のシーンのみ繰り替えし閲覧したいであったり、ある特定のシーンのみ停止して閲覧したいなどの場合には、そのシーンにたどり着くまで動画がループするのを待たなければいけなくなります。

- オープニング(ローディング)演出を毎回見なければならない

初回アクセス時にオープニング演出があることは、ロードによる離脱を防いだり、限られた時間でユーザーに何か伝えられたりとメリットがあります。が、この演出がリロード時にもページ遷移時にも発火していたら、ユーザーをいたずらに待たせてしまう結果につながってしまいます

- マウスストーカー

指を刺しながら文字を注視する癖のある人物は、マウスカーソルを移動させながらwebサイトの文字を読んでいくのではないか？という妄想を抱えています。(自分がそうだというだけなんですが)
そうなった場合、マウスストーカーは読み物に被ってきます。刃に絹着せなければあまりにも邪魔な要素だと感じてしまう要素だと考えています。

- webサイトの印象が、サイトの主役であるはずの商材の印象を上回っている

ポエムから始めます。印象に残せば勝ちに懐疑的です。恐らくこの論調の本意は印象に残らなければ負けという意味合いと捉える方が真意に近い気もします。
例えば印象に残るような演出をしよう。ここはこうしよう。あのセクションはああしようを織り混ぜ、最高に印象的なwebサイトが出来上がってしまうケースです。ほとんどの場合、webサイトにはwebサイトそのもの以外の目的があります。アピールしたい商材や機能を差し置いて演出の印象が残ってしまっては、せっかく印象に残せたユーザーも

「あのサイトはすごかった！...なんのサイトだっけ？演出は思い出せるけど、キーワードを何も思い出せない」

こうなってしまってはwebサイトのためのwebサイトになってしまうと考えています。
印象的であると一時的にでも感じさせる行為は、ユーザーのその先の行動を期待してのものであるはずであり、印象に残すことが目的になって「印象に残して、仕事をした！」と感じてしまってはいけないなという自戒です。印象に残らないよりマシと、印象に残せば良いはどちらも不完全であるという考えです。

- 演出の理由のために「世界観」というワードにすがりつく

こういう表現をしたいという制作側のエゴに根拠を持たせるためだけに世界観というワードを持ち出してしまってはアレだという考えです。耳の痛い話ですが、その演出は何を目的としているのか、ユーザーに何を期待して、その演出の先にどういうアクションがあるのか、最終的にどういうモデルを想定しているのか。この辺りありきで演出の設計はされるべきだと考えており、こういった根幹的な部分に一切関与してこない、あってもなくてもサイトの機能とユーザーの体験する道筋は変わらないが、それがあることによって雰囲気という機能のみを果たすことができる。のようなモノだと考えています。
「あってもなくても構わないが、ブランドのために演出している部分」であり、こういう表現をしたいからやってみたが、理由を聞かれても答えられないので「世界観」というワードを使ったは好ましくないという考えです。

まとめ

だらだらと書きましたが、webサイトに限らずこういった問題は

サイトの目的による
ターゲットによる

というワードで片付いてしまいます。3D酔いが予想されるコンテンツだとしても、3Dに酔うユーザーはターゲットではないと切り捨てられるのであれば問題がない訳です。冒頭でも記述したとおり、全ての訪問者に快適な体験を提供することは不可能です。

ではなぜこのような箇条をまとめているのか、それはwebサイトの演出を探求するという目的のために、ユーザー・ユーザビリティを切り捨てても問題がないと思えないという個人的なポリシーでしかありません。webサイト制作はビジネスです。クライアントが切り捨てろとの意向を示すのであれば切り捨てます。が、自分の中から上記の自戒を切り捨ててしまいたくない。そのための備忘録でした。