はじめに

この記事を読み始めてくれているあなたはエンジニアでしょうか。それともUIデザイナーでしょうか？ はたまたそれとは別の役割を持つ職種の方かもしれません。いずれの職種であったとしても、普段、あなたが自社プロダクトや受託案件でUIに関わるときに、「あれ？ なんかちょっと違和感」「こんな感じのUIなんだっけ？」「予想外の動きをするな？」「思ってたのと違う」といった感想を持ったことはないでしょうか？ もし、対峙したUIにそう感じたことがあるなら、その原因は、作られたUIが狙った的から外れているからかもしれません。

この記事は、狙った的から外れないUIを作るためのヒントを書いたものです。主な内容は、UIに対する理解の解像度を上げるためのものです。UIは単なる見た目として捉えられがちですが、検討のプロセスと思考のポイントを知ることで、より深くUIを観察することができるようになります。

UIに関連した話題なので、UIデザイナー向けの記事かと思われるかもしれませんが、UIデザイナーに閉じた内容は目指していません。Web制作はさまざまな領域のメンバーが関わって進められていきます。そして、UIデザインを担当領域としていない人でも、UIに接する場面は少なくありません。そんなとき、UIをより深く観察することができれば、違和感が発生しているUIに対して的確な指摘や方向修正を促すような、フィードバックやレビューが行えるようになります。

狙った的とは？

さて、そもそもで「狙った的」とはなんでしょう？ それは、美しい見た目でしょうか？ それとも、気持ちの良いアニメーションでしょうか？ はたまた、洗練された実装コードでしょうか？ それらは、いずれもより良いプロダクトやUIを構成しているひとつの要素ではあるものの、狙った的という視点においては、どれも本質を捉えているとは言えないと筆者は考えます。

筆者が考える狙った的とは、対象の施策が目指したゴールのことです。施策のゴールは利用者へ提供する価値の最終的な目的地になりますが、一番最初に「狙った的」が発生するのは企画が作られた段階です。この段階の企画というのは施策に具体的な形がまったく無い段階でのぼんやりとした仮説です。「〇〇というフィードバックがユーザーからあった」「こういった機能を作りたい」「これがあったら便利ではなかろうか」などなど、施策のスタートラインはさまざまですが、一番最初に「こうだと思う」と設定した瞬間に「的」が生まれます。

もちろん、この的はずっと固定されているわけではありません。それは、ユーザーの本質的な課題を探ることで変わることもあるでしょうし、ユーザーインタビューからの発見で変わるかもしれません。既存実装の制約や目指したいリリースの時期によっても変わるでしょう。いずれにしても狙った的とは、その時設定された施策のゴールのことだと筆者は考えます。

そして、最初に作られたぼんやりとした的は、施策の検討が進むにつれて、揺れ動きながらも段々とその輪郭を明確にしていきます。的は1箇所にとどまっていることはありませんので、UI検討を実施するUIデザイナーや、UIレビューに関わるメンバーは、今現在、検討しているUIはちゃんと狙った的に向かって進んでいるのかという部分について、注意深く意識を向ける必要があります。

もし、そのUIが的から外れてしまい、誰もその事実に気がつくことができなかったら⋯⋯。そうなると、実施した施策に対してユーザーからネガティブなフィードバックが寄せられたり、定量的な評価で目標の数値に届かなかったときに、施策自体の問題と評価されてしまう懸念があります。実際には、的を外してしまったUIに原因があったとしてもです。そうなってしまうと、どんなに施策側に調整を入れたとしても、本来の原因であるはずのUIに直接的に目を向けることができなくなってしまいますので、必要な改善が実施されず、改善が堂々巡りとなり、施策を好転させることができなくなってしまいます。

作ったUIが狙った的から外れてしまっている事態は、プロダクト提供側にとっても利用者にとっても良いことがありません。幸いUIは、ほとんどの場合で目に見える形として画面に表示されます。目で見て操作して使ってみることができます。誰でも関わることができる要素ですので、UIデザイナーに限らずUIに携わる関係者全員でもって、UIが的から外れるのを食い止めることができます。

UIは具現化の作業

狙った的というのは、施策が設定したゴールのことであると書きました。施策を実行するうえでゴール設定が非常に大事な行為であることは言うまでもありませんが、ではなぜUI検討・作成という作業が、的を狙う必要があるのでしょうか。それはUI検討という作業が、言語を利用したコミュニケーションから、視覚（または聴覚、触覚）を利用したコミュニケーションへの転換だからです。

筆者は常々、UI検討を具現化の作業だと考えています。

直前でも述べたようにUI作成の作業は言語から視覚への転換です。言語を駆使することで設定された施策のゴールを、UIという形に具現化して落とし込まなければなりません。UIと利用者の対話においては、言語を駆使して長々と利用者へUIの意図や施策の背景を説明するわけにはいきませんので、簡潔で一目瞭然になるように作られる必要があります。要するに、UIという最終的に見た目でもって表現される要素で、それまで言語を駆使して考えられた施策の内容を体現する必要があるということです。

しかし、言われたことを絵でもって表現するのは、そう簡単なことではありません。単に四角で囲ったり、アイコンとテキストを並べただけでは施策を体現することは叶いません。ですので、この転換作業の最中に、言語でもって練られた施策の内容が消失してしまうこともしばしばで、狙った的に着地できなかった状態がこれです。プロダクトと利用者の直接の接点はUIになりますので、施策の意図を正しく体現できていないUIが、利用者へその意図を伝達できるはずもありません。

施策意図の具現化は容易な作業ではありません。しかし、具現化の作業をいくつかのステップに分割することで、そのズレを発見しやすいものにすることができます。

具現化作業の3つのステップ

具現化の作業のステップは次の3つに分けることができます。

• ステップ1：課題の的を絞る
• ステップ2：適用箇所と手段の的を絞る
• ステップ3：見た目の的を絞る

UI検討の順番は、基本的には1から3へ順番に流れて行きます。ですが、必ずしもその順番を守らないと、UIの具現化が失敗してしまうというものでもありません。それよりも重要なことは、UI検討という作業を一括で検討をしないということです。UIは、最終的に具体的な形をもった要素になりますが、具現化の工程は1回で済むわけではありません。それを最終的な状態が見た目に落とし込まれるからと、最初から見た目でUIを考えてしまうと、見た目以外でもって考える必要が無視されてしまいます。

そうならないためにも、UI検討のステップを小さく分割します。そして、実行中の作業が、UI検討のどの部分に対峙しているかを自身で明確に意識するようにします。対象範囲を絞ったUI検討をするためには、自分に向かって「今はどの的に対峙しているのか」という問いかけを常に持った状態で検討を実行するのが良いでしょう。そうすることで、UI検討という工程が、漠然としたまとまった作業にならずに、UI検討の最中に感じた違和感や疑問を、もう一段高い解像度でもって感じることができるようになります。

次回から、このステップを具体的に見ていきます。まずは、ステップ1の「課題の的を絞る」を解説しましょう。