そのWebサイトは「道具」ですか？それとも「広告」ですか？

突然ですが、みなさんがデザインしているWebサイトは「道具」ですか？それとも「広告」ですか？

「Webサイト」と一口で言っても、ペライチのLPや、コーポレートサイト、ブランドサイト、また、Webブラウザ上でアプリケーションのような振る舞いをするものなど多岐に渡りますし、「EC機能を持つブランドサイト」のように「道具」でも「広告」でもあるようなWebサイトもたくさん存在しますよね。

そこで今回は、Webサイトが「道具」であるときと「広告」であるときの、その「境界線」がどこにあるのかについて考えていきたいと思います。

「道具」か「広告」か

そもそも「道具」か「広告」かという考え方自体がどこから出てきたのか？という話から始めたいと思います。
筆者自身、キャンペーンサイトやコーポレートサイトのような、所謂「Webサイト」のデザインをすることもあれば、業務システムのような「Webアプリケーション」をデザインすることもあるのですが、これらをデザインする際、それぞれ「情報整理の方法」にどこか違いがあるような気がしていました。

「何かの基準を境目に情報の整理方法が変わるのではないか？」というような感覚をずっと持っていたのですが、その基準とは「情報量」でしょうか？「機能の複雑さ」？もしくは「Webサイト」か「Webアプリケーション」かの違いでしょうか？

色々と考えている中で、最もしっくり来たのが、「道具」か「広告」かという線引きでした。

広い意味では、「広告」もある種の「道具」であるという捉え方もできるので、ここで「道具」と「広告」の定義を明確にしておきたいと思います。

道具
物を作り出すため、あるいは仕事をはかどらせるため、また生活の便のために用いる器具の総称。
https://www.weblio.jp/content/%E9%81%93%E5%85%B7

広告
人々に関心を持たせ、購入させるために、有料の媒体を用いて商品の宣伝をすること。また、そのための文書類や記事。
https://www.weblio.jp/content/%E5%BA%83%E5%91%8A

「道具」と「広告」の言葉の定義

Webサイト（あるいはページ）の目的が「人々の目的を達成させるためのもの」なのか、「人々の関心を引くためのもの」なのかによって、「道具」なのか「広告」なのかを見極めることができそうです。

そこで、この「Webサイト（あるいはページ）の目的」を「オブジェクト指向」という設計論を使って、整理していきたいと思います。

オブジェクト指向

オブジェクト指向（Object-orientation）はソフトウェア設計に用いられる考え方・設計論です。また、その設計論を用いたユーザーインターフェイスデザインをオブジェクト指向ユーザーインターフェイス（Object-oriented user interface、OOUI）と呼びます。

オブジェクト指向とは、オブジェクト同士の相互作用として、システムの振る舞いをとらえる考え方である。
オブジェクト（object）はオブジェクト指向プログラミングにおいて、プログラム上の手続きの対象を抽象化する概念である。

オブジェクト指向ユーザーインターフェイス（OOUI）についてさらに詳しく理解されたい方は、ぜひソシオメディア上野さんの「OOUI – オブジェクトベースのUIモデリング」を読んでみてください。

「UIデザイナーのスキルとOOUI観点の構造設計」こちらもおすすめです。

「オブジェクト」を探す

誰が何をどうするためのサイト？

まず最初に、こちらの構文に沿ってこのサイト自体の大きな目的を定義します。

ECサイトの例

「道具」でも「広告」でもあるWebサイトの例として、「ECサイト」をこの構文に当てはめると、ECサイト＝サイトに訪れる人（Who）が商品（Object）を購入する（Action）ためのサイトです。
メインとなる操作の対象、つまり「オブジェクト」は「商品」であることがわかります。

この構文についてもっと詳しく理解されたい方は、「インタラクションというはたらきの言語化を試みる」を読んでみてください。

次は、「誰が（Who）」に当たる部分をもっと細かく見ていきます。

「誰が（Who）」を分類する

「サイトに訪れる人」と一口で言っても、ECサイトの場合、「ただ見てるだけの人」から、「今すぐに買いたい人」など、違うモチベーションを持った人がいます。
これらの人々を分類してみると、このように5つの層に分けることができました。

サイトを訪れる人の分類

このように「商品を知らない人（非認知層）」が商品の購入を完了するまでには→「商品を知り（認知層）」→「商品を欲しいと思い（購入希望層）」→「商品を購入する（購入層）」という推移を辿ります。

次に、このサイトで「オブジェクト（商品）」に対して取れるアクションを考えます。

「どうする（Action）」を定義する

このサイトで「オブジェクト（商品）」に対して取れるアクションは、主に以下の2つが挙げられるのではないでしょうか。

「オブジェクト（商品）」に対して取れるアクション

では、「誰が（Who）」がこれらのアクションを行うのかを整理してみます。

「購入する」というアクション

ECサイト自体の大きな目的である「購入する」というアクションですが、このアクションを行うのは、商品を買うと決断した人（購入層）です。
商品を買うと決断した人（購入層）は「オブジェクト（商品）」に対して「購入する」という明確なアクションを想起しており、この時彼らにとってWebサイトは、「購入するという目的を達成するためのもの（＝道具）」です。

「知る」というアクション

「オブジェクト（商品）」のことを知らない人（非認知層）や、知ってはいるけどまだ欲しいとは思っていない人（認知層）が、「オブジェクト（商品）」に対して行えるアクションは、「知る」のみです。

また、「オブジェクト（商品）」を欲しいと思っているけど、まだ完全に購入を決めていない人（購入希望層）が行うアクションもまた、「知る」ではないでしょうか。
彼らは、実際の「オブジェクト（商品）」を購入すると「何ができるのか（What）」、「他と違ってなぜいいのか（Why）」、「どうやって使うのか（How）」など「オブジェクト（商品）」に関する情報を知り、他の商品と比較したりしながら、「オブジェクト（商品）」に対して次のアクション「購入する」を行うかどうかを検討します。

ここでは、彼らの「『知りたい』を『購入したい』に変えられるようなコンテンツが必要そうだ」ということがわかります。

また、「知る」というアクションの中でも「オブジェクト（商品）」のことを知らない人（非認知層）や、知ってはいるけどまだ欲しいとは思っていない人（認知層）が、「オブジェクト（商品）」に対して行う「知る」と、「オブジェクト（商品）」を欲しいと思っているけどまだ完全に購入を決めていない人（購入希望層）が行う「知る」は、少し違いがあるような気がします。

前者が受動的な「知る」、後者は能動的な「知る」と言えるでしょうか。

前者に対しては、なるべく受動的な形で情報を受け取れるように設計すべきかもしれません。例えば、私たちがオフラインの世界で、パンフレットのページを右から左に、あるいは左から右にめくって情報を得るような感じです。

この時、Webサイト（あるいはページ）は「人々の関心を引くためのもの（＝広告）」と言えるのではないでしょうか。

ECサイトの「オブジェクト（商品）」は、まだ「オブジェクト（商品）」そのものではなく、「オブジェクト（商品）の虚像」のようなものなので、オフラインの世界の「外箱」や「チラシ」を思い浮かべるとわかりやすいかもしれません。

「道具」と「広告」の境界線

このように「オブジェクト（商品）」の「広告」を見ている人の中で「あ、これ買おう！」という能動的な「アクション」が芽生えた瞬間、そこに明確な目的が生まれます。その瞬間こそが、「道具」と「広告」の境界線ではないでしょうか。

「道具」と「広告」

見ている人が「購入する」というアクションを想起した瞬間、「広告」は、そのアクション（目的）をいち早く達成するための「道具」となることを求められます。
その瞬間が期待しているよりも遅ければ、「あー、使いにくい道具！せっかく、こっちは買いたいのに！」と思われてしまうかもしれませんし、逆に早すぎると「あら、貪欲な広告ね！まだ買うって決めたわけじゃないのに！」と思われてしまうかもしれません。

まとめ

今回はECサイトを例にしてみましたが、このように、Webサイトをデザインする際には、まず「このサイトは誰（Who）が　何（Object）をどうする（Action）ために、存在しているのだろう？」ということを明確にし、メインとなる操作の対象＝オブジェクトを定義します。さらに、そのオブジェクトに対して「それぞれどのような人（Who）が、どうする（Action）ことを求めているんだろう？」という目的を明らかにします。

そして、彼らがそのWebサイトを「道具（目的を達成させるためのもの）」として見るのか、「広告（関心を引くためのもの）」として見るのか、それぞれに正しく寄り添えるようにデザインしていくことが大切だと思います。

今作っているWebサイトは、「道具」ですか？それとも「広告」ですか？

Webサイトをデザインする際、このような視点を取り入れてみると、何か新しい発見があるかもしれません。