とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

1画面内に自動で動く要素を2箇所以上いれないようにデザイン設計をしよう

1画面内に自動で動く要素を2箇所以上いれないようにデザイン設計をしよう

リッチなUIが多くなってきた昨今の

Webサイト。

ブラウザでの表現も豊かになり、

情報の見せ方が多様になってきています。

 

見栄えがいいからと言って、

なんでもかんでもリッチにすれば

いいというわけではないので

基本、1画面内に動く要素が2つ以上ある

ようなことはなるべく避ける、という

ルールを持っておくといいかなと思います。

 

 

Webサイトでよくある

動く要素、UIとしては以下のようなものがあります。

 

  • 動画
  • 自動スライドショー
  • 背景動画
  • SVGアニメーション
  • アニメーション広告
  • ニュースティッカー
  • ajaxで自動で切り替わる動的コンテンツの表示非表示

 

などなど。

 

 

基本クライアントは情報が多いです。

なんでも見せたい、あれもこれも見せたい。

でもデザインはシンプルにしたい、みたいな

わがままがあります。

 

そうなったときに、

表示領域を大きくとらないように

するには動的にコンテンツが

差し替わるようなUIが求められます。

 

Web運用側のわがままと、

Webサイトの実装側の都合が吸収できるUIですね。

 

その場合、先に上げたUIのようなものが

採用することがありますが、

動く要素が多いと気が散って落ち着いて

情報を見ることができないので、

多様は避けて1画面内に同時に動く要素を2つ

以上混在させないデザインを意識しなければいけません。

 

 

たとえば動画再生ができるメイン領域が

あり、その下に自動スライドショーがあると

動画再生中にスライドがチラついて、

集中できません。

 

この場合スライドの自動スライドをオフに

すればいいですが、クライアントは

自動で動くようにしたい、と言いがち。

 

おっさんは動くものがスキなのと、

なんでも見せたい病なのでやたらと

自動にしたがるのですが、そういうときは

「1画面内に動く要素が2つ以上あると、

ユーザの視点が定まらないので」と

説明してあげると納得してくれると思います。

 

www.toaru.jp

 

なんでも出したい、表示したい、動かしたい。

そんな要望があったら、

1画面内に動く要素が2つ以上ある

ようなことはなるべく避けるという方針で

デザイン設計するようにしましょう。