2017.12.17
デザイン現場経験ゼロからわかる「超一流デザイナーの思考プロセス」

AbemaTV立ち上げ期の開発フロー

テレビという受動型のメディアにおける視聴を、いかにスマホに最適化していくかということを考えながら動きのあるデザインを考えていたそうです。このときに重視していたのが動きのあるプロトタイプを作るということで、さまざまなツールを組み合わせながら、250個にも及ぶプロトタイプを作っていたそうです。

プロトタイプを作る中で、テレビの比率がスマホに適していないなどの課題が出てきており、そうした課題をクリアし動画の魅力を最大限に伝えられるデザインを考案。また、ユーザーが観たい動画に出会うためには快適なザッピングが不可欠で、UIの面で工夫し、画面の両端のスペースに他の動画がチラッと見える設計にする、切り替えた瞬間に動画の再生が始まるようにするなどユーザーの使い勝手を考慮してデザインをしました。

こうしたユーザーの利用シーンを想定した設計によりサービスの水準が高められているのですが、その背景には動きのあるプロトタイプの存在が大きく影響しているようです。デザイナーとエンジニアのやり取りでも、このプロトタイプを介することで互いの立場からの意見が出やすくなり、一方的ではないコミュニケーションが品質向上に貢献していたようです。

運用フェーズでのUIデザイナーの仕事

サービスをリリースした後は、いかに継続利用してもらうかが重要になります。そのため、UIデザイナーはユーザーの声を聞いたり、解析データを見たりしながら、インターフェースのデザインを調整したり、機能を追加するなどの改善を加えていきます。

UIデザイナーの仕事で肝になってくるのは以下のポイントです。

ガイドラインを参考にする

UXを考慮する際に役に立つのがガイドラインです。

最近ではiPhone7 Plusなどのファブレットサイズのデバイスがどんどん増えてきており、ユーザーが操作する際に画面の上のほうにあるボタンに指が届きにくくなってきています。そこで、AbemaTVではAndoridのBottomSheetと同じ設計にすることで、この課題に対応しました。

こうしたインターフェースの設計をする際に効果を発揮するのがガイドラインで、インターネット上で公開されている様々なガイドラインを参考にすることで、ユーザーが普段から慣れ親しんでいる操作感を提供することができるようになります。

超一流のデザイナーとは

まず、荒砂氏が考える「超一流デザイナーとは何か」というところからお話をしていただきました。

ジェシー・ジェームス・ギャレット氏が提唱するWebのUX5階層モデルでは「表層・骨格・構造・要件・戦略」の階層に分かれており、デザイナーは表層・骨格の階層の作業を行うことが一般的です。

Web制作においては分業されていることが多いため、デザイナーが戦略の部分を理解せずに仕事をしているケースが多く、戦略とデザインがマッチしないということも日常的に起こりがちです。そのため、戦略レベルから理解し、それをデザインに落とし込んでいくことができる人が超一流のデザイナーであるとお話をされました。

戦略に必要な3つの要素

ビジネスには、経済状況や社会動向などのマクロ要因、ユーザーや競合他社の動向などの外部要因、会社の組織体制やブランドなどの内部要因といった、さまざまな前提条件が絡んできます。これらを考慮しながら「マーケティング・ブランディング・UX」の3つの要素を考慮して戦略を立てる必要があります。

• マーケティング...売れる仕組みをつくること
• ブランディング...企業や商品に対する好意的なイメージを顧客の頭に残す
• UX...なぜ今UXが重視されるのか、市場環境の変化と技術環境の変化

UXには、近年の市場環境では、モノ消費よりもコト消費が重視される傾向が強くなってきており、ユーザーは機能よりも体験に価値を感じているという背景があります。高性能の機能を搭載したPS3よりも家族みんなで遊べるWiiに注目が集まった背景には、こうした市場環境の変化の要素が絡んでいます。また、スマートフォンの普及によって多くの人が様々なアプリ、サービスを通じて高品質なUXに触れる機会ができたことも、UXが注目される要因の一つであるとのことでした。

戦略的なWeb制作

Webサイトの制作の前には戦略と設計を考えるプロセスがあり、優れたデザインをするためにはこれらへの理解が欠かせないと荒砂氏はお話をされていました。

超一流デザイナー3つの心得

荒砂氏は、超一流のデザイナーの心得として「論理から逃げない」「説明から逃げない」「文字から逃げない」という3点を挙げていました。

論理から逃げないとは、デザインには細部に至るまで意図が必要で、クライアントのビジネスとデザインが論理的に結びついていないといけない、その論理を軽視して情緒的な表現を押し付けるのは好ましくない、ということ。

説明から逃げないとは、デザイナーには説明責任があり、作成したデザインを提出する際にはデザインの意図や論理の説明をする必要がある、デザインを提出して終わりというのは避けるべき、ということ。

文字から逃げないとは、文字もUIの一部と捉え、文章の長さや言い回しを調整する意識が大切、ワイヤーフレームはあくまでも構成要素の伝達のツールで、デザインにあてはめた際の文字の表現についてはデザイナーも積極的に責任を持つべき、ということ。

超一流デザイナーは、こうした3点は当たり前に心得ているものだというお話でした。

超一流に近づくための行動

まず、一流の人は自分の限界を超えたい、前よりも良くしたい、といった考え方を持っており、失敗から学びプロセスで改善をするなどの行動も伴っています。

一方で三流の人は、自分にできる範囲で済ませたい、使いまわしをして楽をしたい、といった考え方があり、失敗した際も原因を深堀せずに場当たり的な仕事をする傾向にあります。

まずはこうした考え方を一流の人に近づける必要があります。

また、一流になるためには費やす時間の量が重要です。

ベルリン芸術大学のバイオリン科では、卒業後の活躍度を分類し、それぞれのタイプの人がどの程度の時間をバイオリンの練習に費やしたのかを調査しました。その結果、世界的な活躍ができる人は一般の人の倍以上の時間を費やしていることがわかりました。

こうしたデータからもわかるように、まずは費やす時間の量が重要です。しかし、仕事で使える時間は限られていますし、単純に仕事時間を増やせばよいということではなく、質も伴っていることが前提となります。

質を上げるためには限界的練習、つまり自分にとっての安全圏、心地のよい領域を抜け、痛みや緊張を伴うような、限界を超える負荷をかけつづけることが大切です。普段の自分ではできないことにチャレンジをし続けることで、時間の質を高めることができます。

時間の量と質を掛け合わせた総量が大きい人が超一流になり得るとして、荒砂氏は講演を締めくくりました。

ケーススタディ

デザイナーの役割はクライアントのコーポレート・アイデンティティ(CI)を理解し、それをもとにUXを設計しエモーショナルな表現を行うことにあります。永井氏は実際に手掛けた案件を元にデザイナーとしての仕事について語っていただきました。

永井氏がケーススタディに挙げたのは、歯科医師を専門としたWEBマーケティング/経営コンサルティング会社の案件でした。この案件では、リニューアルに必要な導線設計からタッチポイント開発を担当したそうです。

UI設計

ここでは顧客のペルソナを元にして、ユーザーがコンバージョンに至るまでの導線設計を行います。その際にカスタマージャーニーマップを作成し、その内容をもとにWebサイトで必要な要素を洗い出していきモックアップを作ります。

永井氏はモックアップの作成にはAdobe XD CCを活用しており、紙で提出するよりもクライアントに理解してもらいやすくコミュニケーションがスムーズに進むようです。

実装

デザインが仕上がり、実装のフェーズにおいては作業を高速化するためにさまざまなツールを活用しています。永井氏は、Gulp(タスクランナーツール)、Pug(HTML)、Sass(CSS)、CoffeeScript(JavaScript)などを活用して作業の高速化・高速化を測っているそうです。

こうしたプロセスを経て完成したサイトでは、目標としていたKPIを大きく上回っただけではなく、クライアントにコンセプトを気に入ってもらえ追加の案件にも発展したそうです。