Block UIの世界 #いしむの知らない世界！
こんにちは、コーポレートPRのいしむ（@asako_ishimu）です。
私が興味本位でつかまえたメンバーに（社員も意外と知らないであろう？）話をねほりはほりしていく「#いしむの知らない世界！」。
vol.3の今回は、Yappliで作られたアプリのユーザー体験向上を目指す「Block UI（ブロック ユーアイ）」について。これまで全社定例などでも周知されていたプロジェクトなので、「何かすごいことが起きそうだぞ…！？」と、頭の中では思っていました。しかし、「知ったかぶり」もできない程に、何が起ころうとしているのかが、分からないのです。
とりあえず、話を聞きに行ってみましょう！
🗣登場人物
Block UIの世界🌎
いしむ：佐野さ〜〜ん！！いろんな場面で話題に上がってる「Block UI」について知りたいんですけど、誰に聞けば教えてくれるのでしょうか！？#times_yappliの「いしむの知らない世界」って知ってますか…？それで取り上げたくて！！
佐野さん：そのシリーズ！久々の更新だね（笑）
いしむ：う！
佐野さん：そうだな〜。プロジェクトの立ち上げをしてたプロダクトデザイナーとアプリエンジニアかな。でもBlock UIは難しいからな〜。いしむへの通訳としてPdMの増渕もいた方がいいかも！
いしむ：通訳いただけるなんてとってもありがたいです…。ありがとうございます、聞いてきます！！
プラットフォームでアプリを作っていくための、汎用的なUX/UIデザインとは？
いしむ：さて、今回はみなさんが立ち上げた「Block UI」についてお伺いしたいのですが…もはや何から聞いていけばいいのか…。既にめっちゃ汗かいてます…（笑）。
りーさん：そうですね…伝えるのもすごく難しいんですけど、「Block UI」は、アプリのユーザー体験をさらに向上させるためのプロジェクトなので、まずは
・元々、Yappliで出来ていたこと
・それをどうやって考えて作っているか
を知ってもらった方が分かりやすいかも！
いしむ：お願いします！
りーさん：私たち、プロダクトデザイナーはアプリプラットフォーム「Yappli」のアプリ機能と、管理画面（以下、CMS）のUX/UIデザインをしています。
いしむ：ふむふむ。CMSのUX/UIデザインはイメージがつくような…。アプリの運用担当者さんがYappliをより使いやすくするために、導線とか使い心地を考えてデザインしたり、改善したりとか…？
りーさん：そうですね。Yappliはクライアント様内部のアプリ運用担当の方はもちろん、アプリの初期制作をしているヤプリ社内のアプリデザイナーも使うので、社内外問わずユーザーから意見を聞いて新機能のデザインや改善などを行ってます。
では、アプリ機能のUX/UIデザインのイメージはつく？
いしむ：「アプリのユーザー」が使いやすいように、アプリ画面の、どこに何を置くか設計を考えたり、ボタンをタップしたら画面がニョッて出てくるような「動き」を考えたり？
りーさん：「ニョッ」ていうのはインタラクションデザインっていいます（笑）！
だいたいイメージは合っていて、インタラクションデザインは、操作が行われたときにユーザーが「操作した」という感覚になるような「動き」をつけて、ユーザーの目的を達成しやすい操作体験を実現する手段の一つになります。そういったことを考えて、心地よくアプリやサービスを使ってもらうためのデザインをしてるんです。
いしむ：なるほど！だからいつも、会議室に社員を呼び出してスマホを触らせていたんですね…！
りーさん：ユーザビリティテストね（笑）！
いしむ：ひとつひとつのアプリ機能のデザインはイメージがつきました！
じゃあ、プラットフォームとなると、様々な企業が作りたいアプリに対応できるような機能のUX/UIをデザインしているんですよね…？
りーさん：そうなんですよ。プラットフォームとして、汎用性の高いUX/UIデザインをすることが肝なんです！
特定の課題や業界に特化したWebサービスでは、「特定のターゲットを決める」＋「特定のユースケースを決める」というのが通常の考え方なんですけど、Yappliのようなプラットフォームの場合は、業種業界・用途問わずさまざまなクライアント様に利用されるので、アプリのエンドユーザーのターゲットもどんどん増えていくんです。
いしむ：たしかに…アパレルや化粧品、雑貨屋、銀行や学校など業種はもちろん、用途も幅広いですもんね。
りーさん：業種が違うと、アプリで実現したいことや、デザインも大きく違うんですよ。例えばこれらのアプリ、全てYappliで制作しています！
いしむ：確かに全く違う。
りーさん：だからこそ汎用的なUX/UIデザインをすることが重要になってくるんです。
いしむ：汎用的にすることが「大事」なのは分かりました！分かる！大事だけど、どうやって考えているか見当がつきません…（涙）！
りーさん：ここが難易度が高くて、やりがいのあるポイントなんです！考え方としては、「どの業界でも使えるような最大公約数的な設計」を探るといったイメージですね。
一方で、それだけだと様々なクライアント様の要望を満たせなかったり、世界観を表現できない場合もあるので、いろんなユースケースを想定してカスタマイズできるようなつくりにしています。
いしむ：なるほど！具体的にどんなユースケースを考えて設計しているのか知りたいです…！
りーさん：じゃあ、例えば…Yappliに「ミュージック機能」ってありますよね？？
いしむ：はい！iTunesストアと連携させたりデータをアップロードするだけで、再生プレーヤーができる機能！
りーさん：はい、正解！
りーさん：基本的な機能は、いしむさんが言った通りなんですけど、英会話教材とか、資料館等の音声ガイドでの利用など、一つの機能であっても使い方がたくさん想定されるので、横展開も想定しながら幅広く活用できるような設計が必要なんですよ。
いしむ：そんな使い方までされていた機能だったなんて！どうやってそんなユースケースを想定していくんですか？
りーさん：私たちプロダクトデザイナーは、クライアント様と直接やりとりをする機会がほとんどないので、自分たちが想定しきれていないユースケースだとか、要望などを関係者へヒアリングしてキャッチアップしていきます。
例えば、普段クライアント様とやりとりをしているカスタマーサクセス（以下、CS）のメンバーとかですね。不定期ですが、CSが開催しているクライアント様向けのMeetupにも参加させてもらい、直接ご意見を伺うこともあります。
カスタマイズ性に関しては、例えば、このアプリみたいに「同じ情報の構成」だった場合でも、各所のデザインやカラーを変更できたり、画像や情報を囲む「角丸」の具合をCMS上で変えられることで、いろんな表現ができるようにしているんです。
いしむ：「角丸」の機能は社内のデザイナーにもかなり好評で盛り上がってましたよね！
りーさん：では、この話を踏まえて、Block UIのお話に移っていきましょうか！
で、“Block UI”ってなに？？
いしむ：そういえば、このプロジェクト、昔は「Yappli Atom（ヤプリ アトム）」プロジェクトっていう名前でしたよね？なんでYappli Atomだったんですか？
佐野さん：なんと説明したらいいか！（笑）このAtomって、実は「原子」っていう意味なんだよ。簡単に説明すると、プロジェクトの発端として
「今のYappliよりも、より柔軟で多くの表現ができるアプリを作りたい！」
「もっと細かい単位でアプリの画面を構成できるようにしよう！」
「プロジェクト名は何がいいかな？」
「アプリの画面を構成する最小単位になるものだからAtom（原子）でいっか！」
くらいなノリで、プロジェクトメンバーと話してて決めたんだよね！（笑）
いしむ：そういう意味だったんですね…！なんか全体定例でAtomって聞いて、鉄腕ア○ムくらい画期的な発明なんだなあ、って思ってた（笑）！
りーさん：でも、結構それくらい（？）やろうとしていることは難しくて、PJメンバーも理解するのに時間がかかったりするんだよね。
伸さん：そうですね…このプロジェクトは結構壮大な計画なので、比較的分かり易い部分から話していきましょうか。
いしむ：う！是非、分かりやすくお願いします。
伸さん：いい感じに話せるように頑張ります！（笑）
今のYappliって、各機能に対して、設定を行なっていくCMSの画面があって、そこで操作をしていくことによってアプリが作れていますよね？だからエンジニアではない方々でも簡単にネイティブアプリが作れる。
いしむ：はい。
伸さん：Yappliが目指しているのは、まるで「フルスクラッチでアプリを開発したようなリッチな表現ができる」こと。ただ、単純にそこを目指すとユーザーが多少コードを書かなければいけないとか、どんどん複雑になり「ノーコードで比較的簡単にアプリが作れる」という価値が失われてしまう恐れがあるんです。
いしむ：それは大変だ！困る！
伸さん：でしょう。
一方で、「リッチな表現」へのこだわりを捨ててしまうと、それはそれでYappliの価値が損なわれてしまう。アプリプラットフォームなのに「まるでスクラッチ開発かのような柔軟な表現が可能」、なおかつ「クライアント様（非エンジニア）・制作チームの方々がノーコードでアプリを作れる」という価値。この両方の価値をバランスよく高める、というのがすごく重要なんですよね。
いしむ：ふむふむ。
伸さん：そういう考え方の元、プロジェクトの由来通り、今のYappliでできる「機能単位でアプリを作っていく」というものではなくって、今より「もう少し細かいパーツ」に分けて、更に柔軟な表現ができるようにするっていうのがこのプロジェクトです。
増渕さん：一番最初は「そのパーツって何？」っていう話からスタートしました。もうちょっと小さいパーツに分けたいけど、それは「どのくらいの大きさ」の「何」で、「どうやって組み合わせればいいのか」っていうところを、メンバーで考えながら進めていったんです。
伸さん：パーツといってもテキストや画像というありがちな粒度ではダメで、佐野さんの頭の中にある構想と設計思想をどう実現するかメンバー全員で手探りで進めていきました。
要件定義して仕様策定して、ここがゴールですっていうプロジェクトではないんですよ。対話をする中で、「生き物」みたいに変わっていくような感じ。まさに次世代にむけたプラットフォームを研究開発をしているような感覚ですね。
いしむ：（果てしねえ）
伸さん：すごいみんなで悩みながら進めてきたんです（笑）。
増渕さん：Block UIについて最近やっと公開できたので、次は現在のプロジェクトメンバーから、より具体的なお話ができると思います！
いしむ：え！？今日はもう終わり！？気になりすぎる！！じゃあここから先は、Block UIの世界 その② に、つづく…😭
みなさん、ありがとうございました！！
〜編集後記〜
実はこちらのインタビューですが、ずいぶん昔に実施したものでした。なんやかんやで執筆・公開に時間がかかってしまい、ついには「記事の投稿が進まないので、転職します」と某社員からの申し出があるという悪夢まで見てしまう始末でした…（笑）。
そんな中、インタビューや公開までご協力いただいた、
佐野ラボ 佐野さん
UXデザイナー 城さん、りーさん
iOSエンジニア 伸さん
PdM 増渕さん
某社員 古屋さん
コーポレートPRのみなさま
本当にありがとうございました🙌