見出し画像

WEBにおける体験設計の幅を広げるDOMイベントの知識

突然ですが皆さんはWEBブラウザ上でユーザーとのインタラクションにおいてどんなイベントが取得できるかどれくらい知っていますか?

クリックやホバー、ドラッグアンドドロップなどをはじめとして普段インターネットを利用している人なら何となくこんなインタラクションがあるよなと認識しているかと思います。これらはDOMイベントとしてWEBブラウザの公式仕様(ブラウザ独自のものもあります)としてまとまっています。

DOMイベントって何?

ではDOMイベントとは何でしょうか。まずDOMやWEBブラウザ上で動的な変更がされる仕組みを知る必要があります。

DOMとはDocument Object Modelの略でHTMLやXMLをアプリケーションから利用するための仕組み(API)です。WEBページ上の要素を変更するとき、JavaScriptを通じて操作をしますがJavaScript自体はWEBページの要素へアクセスする術がありません。JavaScriptはDOMというインターフェースを通じてWEBページ上のあらゆる要素(DOM要素)へとアクセスしているのです。

JavaScriptはWEBページをDOM要素(つまり<p>や<input>など)が構造化された集まり(DOMツリーとも言う)として捉えて解釈していますが、そのDOM要素へのユーザーのインタラクションがDOMイベントです。つまり先ほど出てきたクリックやホバー、ドラッグアンドドロップはDOMイベントという「JavaScriptが解釈できるWEBページにおけるインタラクションや発生したこと」のひとつです。

あらゆるDOM要素はEventTarget(雑に言うとWEBページ上にあるあらゆる要素).addEventListenerというメソッドを通じて特定のイベントを受け取ることができ、そこで指定されたイベントに応じた変更(関数の実行)がされます。

こうしてはじめて私たちはWEBページというユーザーインターフェース上でいろいろなことができる(起きる)わけです。

具体的にどんなイベントを取得できるのか

では、具体的にはどんなイベントを取得することができるのでしょうか。そのリストはMDN web docsにリファレンスとしてまとまっています。

デザイナーやエンジニアであれば普段からWEBページを触っていると思うので、それこそclick, mouseover, focus, copy, paste, scroll, dragなどなどよく行うインタラクションは当然知っているはずです。

しかし着目すべきはあなたがまだ知らないイベントなのです。なぜならば人間はインプットのない状態から適切なアイデアを出すことができないからです。つまるところ「どんなイベントが取得できるか知っている数の多さ=体験設計における打ち手の幅広さ」となります。

どう体験設計に生かすべきか

どんなイベントが取得できるか知っていれば知っているだけ最強みたいな話になってしまいましたが、全てのイベントを覚える必要はないですし、数も多いので無理でしょう(少なくとも私は無理)。DOMの仕様は時代に合わせて変化するので、体験設計の時に「こんなイベントって取ることはできないのかな?」とリファレンスをのぞくくらいがちょうどいいのかなと思います。

ひとつ例を挙げると、YouTubeのような動画再生サービスがあるとします。皆さんはYouTubeで好きなアーティストのMVをバックグラウンド再生して別のタブでインターネットサーフィンする、ということをしたことはありますか?(これ割とあるあるなユースケースだと思います)

このとき、もしvisibilitychangeという「タブのコンテンツが表示・非表示状態になったときに発生する」イベントの存在を知っていれば、今YouTubeで再生されてるMVをユーザーは見ていない(別タブを見ている)はずだと判断できるからそういう場合は音声だけストリーミングするあるいは動画の画質を下げて通信量を下げてあげるといったような打ち手が思いつくわけです。

今のはちょっとニッチな一例ではありますが、単なるよく使う(知っている)イベントの知識の範囲内では出てこないひとつ上のレイヤーで体験設計や施策出しができるということです。

最後に

WEBというプラットフォーム上でアプリケーションをデザインする上で真に考え抜くなら、こうした仕組みは切っても切り離せないなと感じるこの頃です。フロントエンドわからないとか言ってられないなあ。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートは今後のインプット/アウトプットのために使ってまた皆さんに還元します!

よかったらシェアしてね!
51

オオカワラ

UI/UX Designer at HERP, Inc.

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
1つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。