Webサイトや業務アプリにおける情報設計/UXデザイン領域に従事。Life(http://www.festival-life.com/)では編集を担当しており、Webにおけるコンテンツ、プラットフォームのデザインに取り組んでいる。48タイトルとURLをコピーデザインに関わる仕事をしていると、奇抜で目を引き、ユーザーの世界を変えるくらいに強いインパクトを与えるクリエイティブに憧れることがあります。一方でデザインを「課題解決」と解釈すると、必ずしも目立つことが正解ではありません。今回は「映画」と「Webサイト」という2つのメディアに共通する「意識されないこと」の重要性について、考えていこうと思います。映画マニアというわけではないのですが、週末に時間があれば家にこもって映画を観ています。最近映画を観ている中で、ひとつ気付いたことがありました。それは「役者の演技が上手なことを特別に意識することはなくても、下手な場合は演技していることに気がついて(意識して)しまう」ということです。これについては共感してもらえる人も多いのではないでしょうか。映画の中で「演技をしている感」に気付いてしまうと、視聴者は作品の世界に引き込まれず、物語に共感することはできません。「あ~この人頑張って怒ってるな」そんなことを思ってしまったら興ざめですね。逆に良い役者の場合、役者は「演技」によって、スクリーンの中で物語の一部となり、視聴者は作品の世界観に引き込まれます。すると、視聴者はストーリーの中で主人公に共感し、喜怒哀楽の感情を抱くのです。それが映画というメディアと視聴者の関係だと思っています。この「意識されないこと」の価値を知ったとき、それはWebサイトのデザインにおいても同じことであると気が付きました。Webサイトにおいて「意識されない」ということユーザーは優れたデザインのWebサイトを操作しているときに、スムーズに目的を達成できる気持ちよさを感じることはあっても、わざわざ「良い導線設計だな」とか「このインタラクションはユーザーの行動を導きやすいな」と感じることはないでしょう(ユーザー自身がデザイナーなら話は別ですが)。ユーザーがデザインのことを意識するのは、逆に使いづらさを感じたり、ゴールに辿り着けず迷ってしまったときではないでしょうか。ユーザーが目的を達成できない、あるいは操作に迷うことは、しばしば良くないデザインの例として挙げられます。目的のページに遷移できなかったり、想定したインタラクションが起こらなかったりした場合、ユーザーは考え、違和感を抱きます。フラストレーションを感じ、最終的には離脱してしまう。これはWebサイトというメディアにおいて、最悪のシナリオのひとつでしょう。逆にユーザーがWebサイトの中で、スムーズに目的を達成させることができる場合は優れたデザインであると言えます。優れたデザインの中では、ユーザーはゴールに到達するまでの操作を迷わず、デザインについては何も考えないということです。このようにWebサイトの利用を通してユーザーの「没入感」を生み出し、特に意識されないデザインも優れたデザインのひとつと言えます。没入感を生み出す2つの鍵ユーザーを迷わせ、違和感を与えてしまうデザインと、ユーザーをスムーズにゴールに導くことができるデザインの違いはどこにあるのでしょう。今回は「文脈」と「インタラクション」という2つの観点で紐解いていきます。ユーザーの感情に沿うデザインユーザーには、サイトに訪れるまでの文脈(ストーリー)があり、そこにはもちろん利用目的、そしてユーザーの感情があります。サイトを訪れてお目当てのコンテンツを閲覧する人、やりたくない手続きのためにしょうがなくWebサイトから手続きをしている人。ウェブサービスが溢れ、スマートフォンやPC、スマートウォッチなど、さまざまなデバイスが普及したことで、ユーザーの流入経路や閲覧シチュエーション、利用デバイス、感情なども多岐に渡ります。その文脈に沿うことができなければ、ユーザーの期待とWebサイトがすれ違い、利用中のフラストレーションに繋がってしまうでしょう。Webサイトはユーザーの利用シチュエーションやデバイスなどの条件、状況をイメージしてデザインされることで、はじめてユーザーの文脈に沿うことができます。UI設計、ビジュアルデザインなど複数のレイヤーにおいて共通の認識を持ってデザインされなければ、ユーザーにとって価値のある体験(UX)を提供することは難しくなります。ステークホルダー間でユーザーの感情や利用文脈を共有するために、カスタマージャーニーマップやペルソナというフレームワークがありますが、これらを上手く活用してユーザーの文脈に沿ったアウトプットをすることが重要といえます。「文脈」に沿ったUI設計が重要だと前述しましたが、UIデザインの中でも、ユーザーがWebサイトの世界に没入するためにはインタラクションが重要な役割を占めています。インタラクションとは、ユーザーとWebサイトの「対話」です。Webサイト上での「対話」としての普遍的なルールと、それを踏まえた上でWebサイトの世界観を体現するような細やかな「対話」を設計することで、UIを通してユーザーをWebサイトの世界に引き込むことに繋がります。ローディングバーもその役割を担っているインタラクションのひとつです。ユーザーが要求したアクションに対してシステムが瞬時にリアクションできない場合に、「現在〇%読み込んでいます」というステータスを伝えることで、ユーザーを安心させ、混乱を防いでいます。ローディングバーがなかったらどうでしょう。システムの故障やデバイスの不具合など、色んなことを心配してしまいますよね。http://inspacewetrust.org/en/さらに、ここでローディング中であることを知らせるだけでなく、ユーザーを飽きさせない工夫や世界観を表現することで、よりユーザーのストレスを軽減し、Webサイトの世界に引き込むこともできます。SOUND(サウンドをオンにして、少々お待ちください)」と書かれており、ローディング完了後にサウンド込みで体験を楽しんでもらう準備を促しています。ローディング画面では宇宙飛行士がカーソルに付いてくるのですが、カーソル移動の速度にあえて合わせずゆったりとしていることで、宇宙空間を感じさせてくれるインタラクションとなっています。このようにインタラクションの中でユーザーのストレスを軽減するだけでなく、Webサイトの世界に引き込むための仕掛けができると、ユーザーはWebサイトの操作にグッと集中できます。まとめユーザーが余計なことを考えずに目的を達成できるWebサイトをデザインするために・ユーザーの利用文脈に沿った体験を設計すべし!利用文脈はチームで共有し、全体で一貫したデザインをしましょう。・ユーザーとWebサイトの自然な対話を設計すべし!一般的なルールと細部へのこだわり、ユーザーの違和感を生まない工夫が鍵となります。Webサイトという異世界にのめり込んでもらうためにはユーザーの文脈に沿って、自然な対話をデザインすることが重要だと言えます。ユーザーの利用文脈を汲み取ること、そしてさりげない細部のインタラクションを妥協せずに作りこむことが、ユーザーをサイト利用に没入させることに繋がります。ユーザーがデジタルデバイスを使って、さまざまなサービスの申し込みや処理を行うことが増えている昨今、使いやすさのひとつの考え方として「意識されていないか」という点もデザインする際にチェックされてみてはいかがでしょう。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。