UXというものがWebのUIに限ったことではないというのが自論です。
ですが、なぜアプリやWEBデザイン関連で盛んに語られて、UX & UIセットみたいな感じになったのかよく考えてみたことなかったので考えます。
僕はこれに関しては、Webデザインが進歩したというより、「技術革新」のせいだと思います。
”せい”って書くと悪いみたいですが、恩恵です。
僕はデザイン寄りなので、技術は色々できるようになってきているのを、画面作りで横目に見ながらやってたんですが、今一度ちゃんと整理したくて、ある意味忘備録のようになっていますが、ご興味があれば是非。
Flashのブームとインタラクティブの流行
Flashが登場した時、WEBサイトは動き出しました。
それまでも、Javascriptはあったし、GIFアニメーションだってありました。
懐かしのmarqueeタグなんてのもありましたね(笑)
こんなやつ
僕は、この唯一無二な感じ嫌いじゃなかったですが、もう滅びかけてますねwww
この頃は、Webサイトは「ただ動く」ということしかできなくて、はっきり言って鬱陶しいだけ、UXのユの字もなかったと思います。
Flashはそんな鬱陶しい動くWebを一気にUXという土俵まで引き上げてくれました。
文字はあたかもキーボードでタイピングしているように表示され、ボタンやナビゲーションはアニメーションして、ユーザーにプライオリティを示し、Webサイト全体があたかも大きな模造紙にデザインされ、自分が視点を動かしているように、ブラウザの中で縦横無尽に動きました。
また、あたかも実際の本を読んでいるように、ページがめくれてコンテンツが表示されたり、ばら撒かれたカードをドラッグ&ドロップで動かし、クリックで拾い上げて詳細を見るといった、現実にユーザーが慣れ親しんだ挙動にこだわったコンテンツもたくさんありました。
さらにFlashはこのアニメーションをブラウザでダウンロードしたローカルコンピューター上でやっていたので、動作はシームレスで軽かった。
僕個人としては、FlashはSEOやスマホに駆逐されてしまったけど、UXって観点では現代でも十分に戦える優秀な技術だったんじゃないか?って思います。
Ajaxの台頭と通信の革命
Flash大ブレイクの少し後だったか、Ajaxという技術が台頭し始めました。
Flashと同じようにインタラクティブに動くコンテンツですが、全く方向性が異なります。
サーバーと通信をしてリアルタイムに変化する情報を提供するというのが、Ajaxの思想です。
※Flash技術ももちろんサーバとの通信はできますが、なぜかあまり流行らなかった気がします。
この通信を介するインタラクティブが生まれてきた背景としては、動的なコンテンツが増えたからだと思います。
要は、Webサイトの多くがCMSのデータベースに情報をためるようになり、コンテンツ表示毎に通信するようになったからです。
Ajaxの名を世に知らしめたのはgoogleMapです。
画面上に表示された地図をドラッグ&ドロップでどこまでも動かせる、ズームインアウトできる。
しかも、動かすのに画面の再読み込みが発生しません。
あたかも膨大な地図データが、コンピュータ上にあって、自由に動かせるように感じさせられます。
明らかにローカルPCに事前にダウンロードできるような量ではないコンテンツをシームレスにブラウザに反映できる。
これがAjaxの醍醐味です。
Ajaxを実現しているのは、Javascriptとサーバーです。
近年Flashの衰退で、主流になっていますが、JavascriptはローカルPCのブラウザ上で動くプログラムです。
初回にWebサイト(ページ)に訪れた時にダウンロードされるものです。
このJavascriptくんが器用なもので、ダウンロードされた後、ユーザーのアクションを逐一拾って、画面リロードすることなく、裏側でサーバと通信して、画面を変化させてくれているのです!
それまで、サーバーとの通信が発生する場合は、以下のように「何かをクリックして遷移」が基本でした。
1.クリックしました
2.サーバーがクリックしたことを受信しました
3.サーバーで次に表示する内容を作ります
4.サーバーで作った内容をブラウザーに送ります
5.2〜4の間画面は消えます
6.ブラウザに表示されます
この「2〜4の間画面は消えます」が、再読み込みです。
なんか野暮ったいですね。「命令したら指示がくるまで動けないんかい(怒)」ってなります。
javascriptくんはマウスのクリックも、ドラッグ&ドロップも、マウスホイールの動きも、キーボードのタイピングだって見逃しません。
ユーザーの要望に紐ずく操作をサーバーにこっそり伝達し、サーバーはそれに応じ必要なデータをこっそり送ってあげ、ユーザー様を待たせることなくコンテンツをお届けする。
要は今までの「遷移」は指示待ち人間で、Ajaxは、自主的にいい感じに動いてくれる究極の空気読める人ってことです(笑)
このAjaxは様々な新しいUXを産みました。
googleMapを始め、フォームからマウスを外した瞬間のリアルタイムエラーや郵便番号自動検索、キーワードの候補をサジェストしてくれる検索窓、スクロールするだけで読み込まれる次のコンテンツ。。。
今でも現役で大活躍しているUXばかりですし、どれもユーザーが良いと感じるものばかりです。
まさにWebで体験できることを大きく広げた革命児だったのではと、僕は思います。
ついでにWebAPIの話
前章のAjaxとセットで、よく耳にするのがこのWebAPIとやらです。
前章のでJavascriptくんの大活躍を書いてますが、彼の活躍はサーバー側でデータを送ってくれる人がいないと成り立ちません。
このサーバー側に置かれているプログラムがWebAPIです。PHPとかCGIとかサーバーで動くプログラムでできてます。
ブラウザを見ながらユーザーが直感的に起こしたアクションをJavascriptが拾って通信すると、裏側でせっせと情報を送ってくれる人です。
このWebAPIはもちろん、自分のサイトのCMSの機能の一部として作ってデータベースのコンテンツをリアルタイム表示するために使ってもいいのですが、よく耳にする対象としては、違うドメインのサービスで提供されるものを使うパターンです。
皆が使うようなサービス、前章のgoogleMapだけでなく、YouTube、Twitter、facebook、instagramなんかもこのWebAPIを作っています。僕らは、このWebAPIを使って様々なコンテンツをリアルタイムにサイトに表示させることができるのです。
そのサイトのサーバーに無い情報もWebAPIと通信することで、表示できてしまうのです。
このWebAPIのおかげで、「いちいち最新情報見たい時はfacebookページ行ってね、動画はYouTubeに行ってね」ってユーザーにリンクでお願いしなくても良くなるのです。
また、WebAPIは、ログインやショッピングカート、フォームと言った「自社サイトで開発するとコスト的にもセキュリティ的にもちょっと。。。」と言った悩みも解決してくれます。
上記のような悩みがある場合の多くは、元々安全安心を売りにしている開発元が提供するASPサービスを使うことで解決してきました。
しかし普通にASPサービスにリンクで飛ばしてしまうと、前章の「再読み込み」はもちろん発生しますし、ドメインも変わってしまいます(あんま気にしない人は気にしないですが)。また僕らデザイナーの立場からすると、一番問題なのは、ASPサービスの画面に飛んだ瞬間に、デザインが変わってしまうということです。
カートに行くと「あれ?違うサイト?」って思ったことありませんか?
すごく世界観のあるサイトなのに、お問い合わせフォームに行くと「ん?何これ?」と思ったことありませんか?
カートや問い合わせは、Webビジネスにおいて最後の砦のはずなのに、そこだけUXが下がってしまう。。。
じゃーコストとリスクに目をつぶって、自社で開発しなきゃなんですかーーーー!?
という声に応えてくれるのがWebAPIです。
多くのASP事業者は、WebAPIを提供してくれています。
もちろん利用には別途費用がかかる場合が多いですが、それでも自社で個人情報を抱えるリスクや、開発費用を考えると安いもんです。
このWebAPIを使うことで、デザインは自社サイトでしっかりUXを考えて作り、データベースだけは安心安全のASPサービスを使うということが可能になっているのです。
スマホの登場とフロントエンドエンジニアリング
いやー、ここまでで大分書いてしまいましたが、周りでよくUXに関して語られてるのは、本来ここからですよね。。。
スマホ。
やはり、Web×UXの完全なる分岐点ですよね。
スマホ画面デザインや、タッチ操作について考える的なところは、それだけで複数記事になってしまうくらいになってしまうので、ここではちょっと違った見方をしてみます。
スマホの場合、Webとアプリで、少し違った歩みになったって僕は感じています。
結果から言うと、WebはUXという観点では、アプリに遅れをとってしまった、と思います。
理由は、マルチデバイスというものが足かせになったから。
スマートフォンアプリは、名前のごとくスマートフォン専用です。
スマホユーザーの事だけを考えて、スマートフォンユーザーに最高のパフォーマンスを出すように設計されます。
これに対して、Webはレスポンシブという方向に進みました。
どんなデバイスで見ても、同じように閲覧しやすいコンテンツを提供する必要があったからです。
八方美人になろうとしたんですね。
そりゃ負けますわ。シャア専用ザクの方が、誰でも乗りやすい量産型ザクより強いに決まってるやん。
しかし、世の中には秀逸なレスポンシブWebもたくさんあります。
この秀逸なレスポンシブWebを支えているのは、なんなのでしょう?
ここでも技術革新が密接に関係していると思います。
スマホ時代のWebデザインでデザイナーが頭を悩ませているのは、技術がわからないとデザインできないってことじゃないでしょうか?
そう、昔の図式はデザイナーがphotoshopできっちりpixel単位でデザインカンプを作り、コーダーがそのデザインに合わせてコーディングするという流れでした。
しかーし、ここ最近は画面の大きさに応じてデザインが変わっちゃうんです。
スマホだと、全部の要素出しちゃうとお腹いっぱいになっちゃうから、折りたたんだり、ボタンにまとめて、状況に応じて画面がいろいろ動いちゃうんです。
この色々変化しちゃう画面を実現したのが、HTML5+CSS3+javascriptと言ったコーディング技術です。
上記三つは昔からずっとありました。ただバージョンが上がっただけです。でもできることはどんどん広がっています。
これらはjavascriptのところでも書きましたが、ローカルPCで動くためブラウザが対応しているかという制約を受けますが、ぶっちゃけ最近はこれらに対応していないブラウザ(バージョン)は廃れてサポートされなくなるという流れです。
同じサイトを見て、昔ならスマホだと文字が小さくなりすぎて見えなかったのが、ちょど良い大きさに勝手に変わったり、いかにも画像でできていそうな、グラデーションのついた角丸ボタンが、実はCSS でスタイリングされていて、見る環境に応じて押しやすい大きさに変形したり。
コーダーがフロントエンドエンジニアと改名し出したのはこの時期でしょう。
スマホ時代のWebのUXはまさに、このフロントエンドエンジニアリングに支えられていると思います。
動画時代、AI時代 今
あんま触れないですが、僕の会社は、動画関連のグループです。
こちらで会社でやっている動画プレイヤーのこと載ってます。
※あ、このブログで初めてコンテンツマーケティングした(笑)
動画っていうものは、Webの本流からかなり独立した進歩を遂げてきたと思います。
それは、あまりにもデータ容量が他とかけ離れていたから。
そのデータ容量に耐えうる、インフラを持っていないとなかなか参入できない分野だったからだと思います。
しかし、動画はUXという観点では、ユーザーに与えられるポテンシャルもかけ離れて高いというのは事実です。
僕は、二人子供がいますが、どんなに面白いサイトでも1時間見といてといって見てられないでしょう。
いや、10分でも無理だと思います。
でも、YouTubeなら、いつまででも見てるんです。。。
子供は正直です。要するに動画の方が楽しいってことです。
そして、そのYouTubeはもはや世界標準になり、Web動画は世界中に溢れ出しました。
うちの会社グループにとっては、あまり嬉しくないことなのかもですが、AmazonやGoogleがインフラを解放しだし、多くの開発者が参入のチャンスを平等に受けられるようになりつつあります。
そして、今動画はVRの誕生でもっと先に行こうとしています。
記事内でずうっと書いてきましたが、技術が次のステップに行こうとするとき、必ずUXが考えられます。
動画に関しても、今後もっと考えられていくんじゃないかって思います。
現時点で、僕的に気になっていることがあります。
僕の子供にも言えることですが、動画の影響力が他と比べて高過ぎるということは、逆にちゃんとUXに気をつかったコンテンツにしていかないと、人に悪影響を与えてしまうってことです。
自分の子供含む現代っ子によくあることですが、静かにさせられるからといって、携帯を渡してYouTube見させてると、「おい、そんなん見とるんかい」というようなFPS(戦争ゲーム)のプレイ動画を見てたりします。これではいくらゲーム側に年齢制限つけて買えないようにしても意味がないですね。
子供でも簡単に理解出来るUIになっている、YouTubeのUX的弊害だったりするのかな?って思います。
また、VR。これ体験したことありますか??
ものっすごい持っていかれる感。。。バーチャルなのに、現実に見えている世界より、陶酔感を感じます。
現実に女の子から告白されるより、VRの中で告白される方が、ドキドキしちゃうんじゃないかって思うくらい(笑)
いやこれすごい体験なんですが、これがセールスに使われるってなるとちょっと気をつけないとなって思います。
「買わなきゃ。。。」って強迫観念にかられそう。。。
同じようにARもそう。ポケモンが出てくるなら可愛くていいんですが、あらゆるところから広告が飛び出してきたら、鬱陶しくてかないません。誰も押さないバナーだらけのメディアみたいになっちゃいます。
動画時代のUXは、人間の許容量ってところと密接に関係してくるんじゃないかって予想してます。
最後ついでにAI!
これに関しては、まだどんな技術とかってところに僕自身追いつけてないのが現実。。。
でも、ここまで書いた技術とは次元の違うスケールで、UXにかかわってくるのは間違いないですね。
基本は人が楽をするってところに焦点が当てられるのかな?
能動的に行動するってことをしなくてよくする?
それが良いことなのか悪いことなのか、まだよくわかりません。
僕個人としては、あまりコンシューマーに向けた「楽をするUX」ために使われて欲しくないな。。。と思います。
古い考えなのかな?
ビジネスで人が処理しきれないデータ量を整理したり、属人化によって困ってる状況を統計的にサポートしたり、アイディアマンの一人として、助言してくれたり、あくまでも人のサポート要員としていてくれるような、人の可能性を少し上げてくれるような立ち位置に進んで欲しいって思います。あくまでも希望ですが。。。
いやー、これ書いてて途中で長くなりそうだな。。。って感じてましたが、本当長くなってしまった。
最後まで読んでくれた方。ありがとうございました。
また個別に色々掘り下げ記事かけたらなと思います。