『ピュアニスタ』立ち上げから得た、デザイナーにとって大切な視点

こんにちは。cocone v株式会社です。
今回はUXUIデザイン室の張 珍玉（ジャン ジンオク）さんにインタビューを行いました。
今回フォーカスするのはアバターきせかえアプリ『ピュアニスタ』がまだリリース前だった頃のこと。
新規プロジェクトを通して確立したUIデザインの制作フローや、0からのUXUIの設計のこだわり、そして現在もデザイナーとして大切にしている視点について伺いました。

『ピュアニスタ』は2024年1月時点で114万DLを突破。そんな大人気アプリへの成長をUIデザイン面から支える、張さんの考えるUIデザイナーの姿勢や、普段何気なく使っている画面ひとつひとつに込められた思いをお届けします。

「あの頃のぶつかり合いもあってよかった」UXUIデザインのプロセスを固めた、新サービスの立ち上げ

飯田）張さんは『ピュアニスタ』の立ち上げメンバーだったとのことですが、当時どのような形でUIデザインを進めたのでしょうか。

張）『ピュアニスタ』を立ち上げると決まった当時、チームは企画と開発を含めて7名でのスタートで、UIデザイナーは私一人だけでした。ターゲット選定やビジネスモデルの設計から入ったので、企画に近いような動きをしていました。

他の会社のUIデザイナーであれば、企画から共有された仕様書を見て、UI画面やGUI制作をする場合がほとんどかと思います。一方で、cocone vは元々運営からスタートした会社であったので、運営から企画となったが多かったので、0からサービスを作った経験のあるメンバーが少なかったんですね。そのような背景もあり、当時私が担当する範囲はUXを含む企画からUI制作までと、デザイナーとしては範囲が広かったのを覚えています。

私は前職では、企画が決めたものをデザインに落とし込み、パブリッシャーまで担っていたので、比較的開発に近いUIデザイナーでしたので、前職と異なる経験が多く苦労を感じたのを覚えています。

リリース当時の『ピュアニスタ』のUI画面↑

飯田）業務の幅が広い分、デザイナーと企画の切り分けは難しかったのではないかと思います。特に苦労した所はどういうところでしょうか。

張）当時サービス中だったモバイルアプリがなかったため、当然、企画者もPCの経験は多くあっても、モバイルの経験が少ないメンバーがほとんどでした。
そのため、企画書の画面の大半がPC同様に一画面にとても多くの情報を入れようとしていましたし、UIデザインのフローもPCのUI制作と似た状態でした。

モバイルのUI設計の簡単な例として、『ピュアニスタ』のアイテム交換申請画面で説明します。

初期段階で共有された企画書通りに作成すると、一画面に交換する対象のアイテム選択とメッセージがあり、各々選択画面へ行き来し、プレゼント交換を行うような構造になります。
また、テキストを入力する際にこの仕様書のままだと、入力したテキストがキーボードと被ってしまい、かなり使いづらいのが実情でした。

初期の仕様書を基にしたプレゼント交換画面↑

テキストの入力もキーボードに被ってかなり使いづらい状態…↑

モバイルのUIはデバイス画面が小さいこともあるので、ナビゲーションをPCのように全て表示させることは難しいですし、お客様が一画面に表示される多くの情報を理解し、プレゼントを送るまでにたどり着けないと判断しました。
画面を行ったり来たりせず、選択すると次の画面へ進んでプレゼントを送れるよう、いくつかの問題を解決して、現在のようなプレゼント交換機能の画面は完成しています。

改善後のプレゼント交換機能のUI画面↑

UXUI設計で、一画面に重要なボタンをいくつも表示させることは可能ですが、企画の意図を反映させたグラフィックデザイン（以下GUI）から、ボタン毎の重要度を分かりやすく表現しました。

各コンテンツ全体のサービスをモバイルへ最適化させるために、企画とたくさん相談を重ねました。
初めはモバイルの画面制作に対して意見が割れることも多くあったのですが、日本では当時、UIのボタンを外に全て外すのがトレンドだったので、私がシンプルにしたUI設計を提案すると、企画者には慣れないデザインだったため、説得するのにかなり苦労した思い出があります。

このようなプロセスを『ピュアニスタ』を作っていく過程で固め、現在cocone vでリリースされている他のアプリについても、基本的にこのフローでUIデザインを行っています。

飯田）初めてのモバイルアプリということで、『ピュアニスタ』のUIデザインは張さん主導で企画者と協力して作り上げたものなんですね。

張）そうですね。ですが、私の経験のみを推すのではなく、企画者の意図や何故こうしたい背景をしっかり読み取って、お互いの良い方向へ着地させることも大切にしています。

当時、「きせかえ・投稿画面」に説明文を入れるかどうかで、企画と議論になったことがあります。私は今までの経験上、文章を入れても読まないお客様がほとんどだったので、写真を撮るか撮らないかの文言だけで足りるのでは、という意見を伝えました。

しかし企画の話もよく聞くと、「説明文を入れないと、後々お客様から不便だというお声が上がる。不便な方も一定数いるから入れてあげたい。」という、こちらも今までの運営経験から基づく意見であることが分かりました。

企画の意見も一理あるので、それであれば、画面上に別途Tipsのアイコンを作成して、飛んだ先に説明を記載しようという、双方の意見をいい塩梅で取りこむことで解決しました。

企画と調整しながら反映させた「Tipsマーク」とその画面↑

今振り返ってみると、お互いにお客様のことを思っての、良い衝突だったと思います。(笑)
必要な人はそこで見て、必要でない人はすぐにコンテンツを楽しめるようにしたことで、お互いの意見を調和させた結果になります。
ちなみにこのTipsのマークですが、ピュアニスタの他のコンテンツも基本そのような画面構成になっています。

意識しないところにもこだわりを、自然と遊びやすさを感じられるデザインづくり

飯田）お客様思いのメンバーの優しさが合わさって作られたものだったんですね。サービスの色決めもUIデザイナーが決めていくと思うのですが、『ピュアニスタ』のイメージカラーはどのように選定されたのですか？

張）ピュアニスタのターゲットは大人の女性なので、大人の女性の好きなもの、イメージを調査しました。上品で落ち着いたイメージの色は様々ありますが、クレジットカードやマイレージなどのVIP向けのカードの色で、黒やゴールド、紫をよく見かけたことと、その中でも紫が日本で昔から高貴な色とされていたことから、紫をメインカラーにしました。

その後サブで使用する色も決めていき、当時「多様性」がピュアニスタのキーワードにも挙げられていたことから、多様性を表すミントグリーンも追加し、ピンクや黄色など、様々な色を選定しました。

これらの色をベースにGUI制作をしていくのですが、お客様に機能をきちんと区別、意識してもらいたい時などで色を使い分けています。
ピュアニスタにはアイテムのプレゼント機能と交換機能があるのですが、お客様が双方を誤って使用するケースが多々あったため、改修でピンクと黄色で機能の違いを表すようにしたものが、例の一つとして挙げられます。

誰でも直感的に機能の違いがわかるようにデザインしています。みなさんは気付きましたか？↑

何気なく使っていると気付かない部分ではありますが、お客様が遊ぶ際に、パッと見た色でプレゼントはこっち、交換はこっち、と理解してもらえるように心掛けました。

そのほかにもフォント決めや背景、線の色など、細かい部分のレギュレーションを決めるのもUIデザイナーが行います。

飯田）確かに、色だけで違うということが分かりますね！初めて触った方でもわかりやすいです。何気なく遊んでいましたが、細部までお客様への気遣いが感じられます。

張）そうですね。基本的にUIデザインをする際は、お客様に遊んでもらえるような導線づくりと、ボタン一つに対しても、どちらを押せばいいのかがぱっと見て分かりやすい色にするなど、お客様への分かりやすさを第一に考えています。

ボタンの配置は、GoogleやAppleなどが出しているUIデザイナーが参考にするべきガイドラインがあるので、基本的にはそのガイドに沿った配置にしています。また、人間の視線の動きも考えた画面デザインをしています。

人間の視線の動きには、大きく分けてZ型とF型の二つがあると言われています。
絵のように全体に広がっているものを見るときは、人間の視線はZを描くように動きますし、記事などのテキストを読むときは、細かく読んでいくのでFの形を描くように動きます。

目線の動きを意識して配置したUI画面（Z型）↑

目線の動きを意識して配置したUI画面（F型）↑

それを踏まえて、ピュアニスタのUIデザインにおいても、アートグラフやみんなのコンテストなど、全体的に目を通してほしい場合はZの形に沿って、通知やお知らせなどのテキストをしっかり読んでもらいたい場合はFの形で配置をすることが多いです。

UIデザインにおいては基本的なことになりますが、ページをデザインする際は、このFとZの形を意識して活用し、目を通してほしい情報の位置を調整しています。

ワクワクするUIデザインの追求に妥協しない

飯田）張さんがUIデザインをする上で意識していることはありますか？

張）「この画面を見て、お客様が楽しい・ワクワクすると思うかどうか」という判断軸はぶれないようにしています。
お客様がどう思うかで、その後サービスで遊んでくれるかどうかにも影響があります。社内でこういう事情があってできなかったんだろうな、と予想しながら遊んでくれるお客様はいないので、簡単に妥協はせず、最大限できることはやってみようという姿勢でUIデザインをしています。

そのため、リリース後もお客様の声を基にしたUIデザインの改修をしていくことが大切です。
例えば10人のうち、9人がA案の改修を求めているという結果が出ているのに、それを無視してB案の改修は行いませんよね。今後こうなるかもしれない、という可能性ではなく、実際に数字で出ているお客様のデータに基づいて改修していくことが大切だと思います。

良いデザインは「仕事を楽しむこと」と「愛情」から生まれる

飯田）最後に、張さんの考えるcocone vのUXUIデザイナーの共通点は何ですか？

張）私が他のメンバーを見ていて感じるのは、仕事自体を楽しんでいる人が多いことです。デザイン作業に入る前に、細かい部分の摺り合わせを行わないといけないため、私も大変と感じることがあるのですが、企画や開発と話し合いながら、一つのサービスを作り上げていく過程を楽しんでいるように感じます。

そのようなマインドで仕事をしているので、自然とサービスに対する愛情も持ち合わせているように感じます。サービスへの愛情は、私はcocone vでUXUIデザイナーとして働くうえで何よりも大切だと感じます。

愛情を持って取り組まないといけない＝ヘビーユーザーでなければならない、というわけではなく、サービスに触れることが日常となっている程度で構いません。ふとした時にサービスに触れ、そこからどんなことが見えるのかを、お客様目線で感じて、改善に活かしてもらいたいです。

これからcocone vのUXUIデザイナーとして仕事をしたい方にも、この2点は必ず持ち合わせていただきたいですし、そのような意思のある方と共にサービスづくりをしていきたいと思います。

■cocone v 会社概要
https://coconev.co.jp/