UX設計に最適解を導き出す「UIディレクション」のカバレッジ

こんにちは、渡辺 将基です。

僕は、日々Web戦略/サービス設計/UI・UXなどをメインに「ロジカルに考え、シンプルに生む」をモットーに、インターネットサービスにおけるイノベーションへのアプローチを探求しています。

今回タイトルでは「UIディレクションのカバレッジ」という表現をしましたが、今回はクオリティの高いUIを作るためにはどういう観点での品質管理が必要なのか、ということを自分なりにまとめてみたいと思います。

ユーザー体験から逆算する「情報設計・レイアウト」

情報設計やレイアウトには無限に選択肢があるだけに、「どんなユーザーに、どんな接触態度で、どんな体験をしてもらいたいか」というマーケティング的な視点を持っているか否かで、アウトプットに大きな違いが出てきます。

初めにUIを設計する際には比較的このような視点を持ちやすいのですが、既にリリースしているサービスに対峙すると、どうしても既存のUIの延長線上で改善を考えてしまいがちです。

そうならないよう、UIに関わる人たちは、常に提供したいユーザー体験の理想型を意識し、そこから逆算的にUIを考える癖をつけなければいけないと思っています。

「なぜこれはこうしたのか?」と訊かれたら、いつでも自信を持って自分なりの狙いを答えられることが重要なのです。


※例えば同じ料理投稿系サービスでも、レシピ検索サービスであるクックパッドと、料理日記コミュニティであるペコリではホーム画面の構成は大きく異なっています。(クックパッド=レシピ検索や人気のレシピ、ペコリ=自分が投稿した料理写真)

ユーザー行動を左右する「世界観・トンマナ」の考え方

モチーフ、色味、質感、サイズ感、ラベル(文言)などはサービスのイメージや世界観を構成する重要な要素となります。

一般的なユーザーは、情報設計云々よりもまずはこのレイヤーでサービスのクオリティ、もしくは好みであるかどうかを判断している気がします。

いくら優れた情報設計ができていても、デザインの世界観が受け入れられなければ使ってもらうことすらできません。

また、サービスの世界観はユーザーの行動を方向付けます。例えば、AmebaのGIRL’S TALKというサービスのデザインテイストはこんな感じになっています。


黒いマットな背景の中に浮かび上がる「みんなにうちあける」ボタンが特徴的ですが、これが仮にクリーンな白背景+「投稿する」ボタンだったら、おそらくユーザーの投稿内容やコミュニケーションは今とは違ったものになっていたはずです。

同サービスが多くの女性の本音を吸い上げることに成功している背景には、こういった世界観作りが寄与している面も大きいと思っています。

2ちゃんねるがいつまでもデザインを変えないのも、雑多でアングラな雰囲気をキープしたいという考えがあってのことかも知れませんし、結局はここでも目的から逆算したデザインというものが大切になります。

"手に馴染む感覚"を作り出す「触感・動き」の追求

上記2点は静的な画面を眺めていても管理できますが、実際にアプリに触った時、また触った後の動きまでは見えてきません。

最終的にプロダクトの品質を上げ切るためには、この観点のクオリティチェックも必要なんです。

タップした際にリアクションが返ってくるか、滑らかに動作するか、ローディング絡みの処理は最適か、など意識すべきポイントはたくさんありますが、これらはある程度チェックリスト化して管理できるものです。

そうやって触感や動きの作り込みを丁寧にやっていくと、最終的にストレスがなく、手に馴染むアプリに仕上がります。


  • ※ ネイティブアプリでは、画面遷移アニメーションを設定するなどして、画面間を滑らかに行き来できないと触感が悪いと感じてしまう(左)
  • ※ pathはアプリの至る所にリッチなアニメーションが実装されており、気持ちの良い操作感を得ることができる(右)

以上、大きく3点にまとめてみましたが、個人的にはクオリティの高いUIを作るためにはこれら全てをカバーする必要があると思っています。どれか1つの視点が欠けてもダメです。

それぞれの領域が得意なメンバーを集めれば良いのかも知れませんが、そんな理想的なチーム編成ができるケースはまずないでしょう。

ですので、基本的にはプロデューサーやディレクターなどの立場の人がこれらの観点を持って、一気通貫でUIを管理できるようになるべきだと思います。

ただ、本音を言えば、UIに関わる全ての人たちにもっと自身のカバレッジを広げて欲しいという気持ちもあります(あれもこれも手を出せと言っている訳ではなく、もっと多角的な視点を持って欲しいという意味です)。

いつの間にか自分で自分の職域を狭めてしまっている人が結構いるんじゃないでしょうか。

記事が気になった方にぜひ来て欲しいセミナー紹介

UIスキルはディレクターとしてもぜひ身につけておきたい知識...と、いうわけで大好評のワークショップ型勉強会「失敗しないスマホサイト制作講座〜落としどころの審美眼を体得せよ〜」の宣伝です。

そのタイトルの通り、現場のプロが実際に起こる問題やその解決策を伝授、そして共に考えるワークショップを通してプレゼンまでノンストップでやりきります。

講師は株式会社まぼろし副社長、小林信次氏。講義には日本ディレクション協会 会長の中村健太も参加し、二人で「なぜ失敗するのか?」「ディレクターはどうするべきなのか?」を徹底解説します。

失敗しないスマホサイト制作講座 〜落としどころの審美眼を体得せよ〜

超具体的ヒアリングポイントの解説から、メジャーUIの分解と注意点説明などなど。これからスマホサイト開発に関わる方や、もっともっと制作クオリティ&スピードを上げたい方向けの実践セミナー。

日時5月17日(土)13:00〜17:00(開場12:40)
料金3,000円(懇親会費別)
会場C&R社2Fセミナールーム(〒102-0083 東京都千代田区麹町二丁目10番9号
主催日本ディレクション協会

イベントを詳しく見る

記事著者:渡辺 将基 CyberAgent,Inc. Producer

慶應義塾大学理工学部卒業後、人材系ベンチャーを経て2008年モンスター・ラボに入社。同社では、インターネットサービスの受託開発における企画/セールス/プロジェクトマネジメントなどを幅広く担当。中でも、スマートフォンアプリの開発には黎明期より取り組み、中〜大規模プロジェクトを中心に数多くのアプリのプロデュースを手掛ける。サイバーエージェント社主催のモックプランコンテストでのグランプリ獲得をきっかけに、2012年同社社長室にUI/UXディレクターとしてジョイン。約1年間Amebaのコミュニティサービスの品質管理に従事した後、現在はプロデューサーとして新規メディアの立ち上げに奮闘中。2013年、全社総会にて最 優秀中途新人賞を受賞。 プライベートでは3児の父(プライベートブログはこちら)。

また、社会人アカペラグループSPLASHのVoice Drum兼Chorusとして、イベントやライブシーンなどを中心に音楽活動も行っている。