白完_251021_まる見えみらい議会UIUX.mp4

お金の流れがこの1枚に全部まとまってるっていうことにすごく意味があるなというにろにろって感じのね。

そうそう。

この1枚で分かるよって言われることの、ま、安心感とか透明感とか信頼感みたいなものはあるなと。

どうもこんにちは。

安野たかひろと山のゆきあです。

こんにちは。

お願い致します。

本日は直近でチームみらいが発表した2つのプロダクトのUI、UX、いわゆるデザインですね。

はい。

デザインについて話す会ということで、その2つのプロダクト、デザインを中心的にしていただいた山根幸也さんに来ていただきました。

じゃ、まず、山根さん、簡単に自己紹介していただいてもよろしいでしょうか。

はい。

えっと私、あの、今年参議院選挙、愛知県選挙区から出馬はいしておりましてです。

えっと本業はサービスデザイナーという肩書きで、えっとやらせてもらってます。

愛知県の皆さんはね、あの、見覚えがある方もいらっしゃるかもしれません。

参議院選挙の時もはい。

様々な作り物のデザインをしていただいてまして、例えば皆さんが街角で見かけたポスター、これ山根さんがね。

そうですね。

ま、私と、ま、私のデザイナーのボスが一緒にちょっとデザインをして、あの、作って行ったりであったり、ま、ウェブサイトであったり、ま、色々、あの、やらせてもらってました。

今回ですね、みらいまる見え政治資金と、そしてみらい議会という2つのプロダクトの、ま、UIUX、と、ま、企画の立ち上げみたいなところから担当してましてです。

ま、今日はそんな感じでやっていこうかなと思ってます。

はい。

ということで今日は山根さんとみらいまる見え政治資金、そしてみらい議会の2つのUIUXユーザーインターフェイスやユーザーエクスペリエンスのデザインについて話を聞いていきたいと思います。

はい。

あとサポーターの皆さんにかなり、磨いていただいたと。

自分が全部やりましたみたいな感じでちょっと喋りづらいなみたいなことを思った時に、何を喋れるかなと思って今日ちょっと1個持ってきたものがあって、その今回のみらいまる見え政治資金、そして、え、みらい議会、これって、こう日本の国政市場、ま、初めてはい。

政治かつ、ま、国会議員の活動の中にデザインが入っていったという、ま、多分初めての事例と言って確かにそうかもしれないですね。

じゃないかなという風に思って、なので今日は、ま、どうデザインしたかっていうリテイルの話っていうよりうん。

も、ちょっと手前の、ま、なぜこういう形のプロダクトを作ったのかっていうデザインのYとかワットとかって言ったりするんですけど、なぜ作ったのか？

何を作ったのかっていうことをちょっと話せると面白いんじゃないかなと。

確かに。

いうことで、ま、それをちょっとご紹介する会にできるといいんじゃないかなと。

うん。

見てる方もあんまりその政治の世界にデザインが入ってくるっていうことがいかにあんまりやられてないことかっていうそうなんですよね。

なんかデザイン業界の中で多分僕よりもデザイン上手な方って山ほどもういらっしゃるしゃって、なんか自分が語るのもちょっと誤がましいって気持ちなんですけど、

なんかこの政治領域においてこういうチャレンジをしたっていうことはシェアする価値があるものなんじゃないかなっということを思って、その話をちょっとしていけるといいなと思ってます。

じゃあま早速聞いていきたいと思います。

まずじゃあ1つ目のプロダクトの方からいきましょうか。

見ていただければと思います。

で、みらいまる見え政治資金なんですが、

チームみらいが使っているお金がどこから入ってきて、どこに出ているのかを丸見えにしましょうというものになってまして、

公開を10月の前半くらいにしたんですけど、

分かりやすいデザインとしてパッと見て分かるねっていうご評価いただいてました。

ありがとうございます。

このデザイン、何がポイントなんですか?

デザインという観点で、政治領域に求められてるか考えてみたんです。

ざっくり言うと3つあるかなと思っていて、見えにくい、分かりにくい、そしてとっつきにくいと。

政治資金収支報告書、政治家がどういうところにお金を使っているかって、ウェブサイトで検索したら誰でも見ることができるものなんですけど、

なかなかそれを見ても分かりづらいし、見えづらいし、とっつきづらいというのがあるなと思ってて、

どうしたら政治資金であったり、国会の議論であったりを見やすく、分かりやすく、とっつきやすくできるか考えたというのが最初の入り口でして、

その政治資金なんて、まさにその最たる例だと思ってて、

私たち普通の一般国民から見た時に、見て何も気持ちが湧いてこない。

気持ち湧いてこないですね、あれね。

あの、チームみらいの会議の中で頻繁に出てくる気持ちが湧かない。

これ大事です。

気持ちが湧かないねという言葉が何度も出てきてるんですけど、

政治資金収支報告書って気持ちはかないねと。

議事録読んでも、いや、気持ちはかないねと。

プロトタイプをだんだん作ってこのプロダクト磨いてくんですけど、作ってく中でも触ってみたらあんま気持ちがわかないねうんみたいなことを繰り返しながらまあ、磨いていったっていうのが、ま、大きな流れははい。

としてありましたねいや、本当にね、政治資金収支報告書こんな感じの表になってまして、ま、気持ちがわからないんですよね。

そう。

表っていうか、枠、数字、なんかわからん言葉いっぱい並んでる。

これは見てどういう気持ちになったらいいんだろうっていうのがなかなかこう持ちづらいっていうのを作る前、あの、からチームの中で共有しながら、じゃあ、どういうデザインだったらいいんだか、どういう、ま、気持ちが湧いてくるといいのかっていうことを、ま、作っが最初の入り口でしたね。

公開されているっていうことと、うん分かるっていうこととか、とっつきやすいと思えるってことは、これ距離がすごいあるんですね。

だいぶ距離がありますね。

やっぱそれは誰かが意思を持ってあの、作る必要があるなと思ってて、ま、今回はチームみらいがその意思を試しに示したっていうのが今回の丸メッセージそうですけどね。

かなと思いますねね。

じゃあちょっとその、どういう意図でどう作っていったのか、これ聞いてみたいなと思うんですけど。

そうですね。

ま、これウェブサイトぜひこう見ていただきたいんですはい。

けどこだわっポイントとか、あの、色々あるんですけど、考え方みたいなところを、あの、シェアできるといいかなという風に思ってて、私がそのデザインを学ぶ時に、ま、学んで言葉、手を動かしてUIをこう作り始めるよりも前に何っぽく見られたいかっていうことを考えよううっていうのを結構よく言われるんです。

っぽい、色々何でもあると思うんですけど、パッと見た時に、これ、これっぽいですっていう風にプロダクトがこう示してるってことで。

すごく重要だという風に言われてて、イメージがこう湧いてくる。

確かに、確かに。

あるじゃないですか?

例えば、その、さっき見せた政治資金収支報告書、これ最初見た時にめっちゃ個人的な感覚うん。

なんですけどテストの問題用紙みたいだなって。

分かります?

あの、答え書くそうそうそうなんか枠があって、なんか数字があって確かに。

なんか難しい気持ちですね。

岸さんとか岸さんとか来るのかで、ようわからん言葉もあるなみたいな。

これ難しそうやなっていうのと、面倒くさそうっていうか、はい。

がなんかバーっと相手して、見たいものかって言われると、そうじゃないなと思ったと。

このとっつきにくい印象を、ま、どう変えるかっていうのが今回デザインにおける一番大事な役割なんじゃないかっていうことを思って、

できれば進んでみたくなるものに、できればとっつきやすいものにしたいなというのが最初の意図でしたね。

で、今回じゃ具体的にチーム、ま、みらいがですね、そのみらいまる見え政治資金を作るにおいて、ま、何っぽく見られるはい。

というんだろうかっていうことを、ま、考えうん。

ていったんですけど私私の中で2つモチーフがあって、1つは家計簿っぽい。

うん、うん、うん、うん。

家計簿って割と日常的に。

まあ、親しみやすいですね。

1番お金と、ま、自分の生活が密接に結びついているものですね。

そう。

で、家計簿っぽい。

あともう1個が銀行口座っぽい。

銀行口座っぽい。

この2つのなんかモチーフみたいなのをちょっと想定しながらあのUIを作っていきました。

この観点でちょっと実際の画面を見ていただきます。

はい、こちらですね。

お金、収支のサマリがあったり、4月はこのぐらいで、5月はこのぐらいでみたいな、こう時系列での推移があったり、割とこう家計簿アプリ使ってる方は、ああ、なんか確かにと思ってくださると思うんですよね。

で、実際作る時も家計簿のサービスの、あの、UIをリサーチしながら、Xのコメントとかで、なんかこんな家計簿アプリ欲しいみたいなことね言ってくださる方もいて、こんな家計簿が欲しいというツイートがまた別でバズってますね。

ま、これが政党にとっての家計簿ですっていうそうですそうことですね。

家計簿になかなか見ない、あの、形のものが1番上のね、ファーストビルっていうそのパッと1番最初に目に入るところに、あの、サンキーチャートって僕らが呼んでる、どこからお金が入って、何にお金が使われてるかってことを1枚の図にしましたっていう図がにょろにょろって感じのね。

そう、そう。

これはあんまり家計簿アプリで見ることがない形なんですけど、お金の流れがこの1枚に全部まとまってるっていうことにして、うんうんすごく意味があるなという風にたくさんあって、これ全部見たら分かりますって言われるよりも、この1枚で分かるよって言われることの、ま、安心感とか透明うんうん感とか信頼感みたいなものはあるなという風に思ったので、なかなか家計アプリでは見ないチャートですけど、これはとても重要なので一番上にファーストビューとして入れたいなという風に思ったっていうのがありました。

うん。

もう1つ。

はい。

さっき家計簿と銀行口座、はい。

言いましたで銀行口座じゃどこな、どこにあるねんという風に思われると思うんですけど、全ての入出金とはい。

日付があって、カテゴリーがあって、被目があって、お金が並んでるっていう、まあ、これはかなり銀行口座のアプリだったり、銀行の通帳の明細のモチーフをかなり意識しながら作りました。

こういう銀行の口座明細って自分の明細見ることあっても、他の人の明細って見ることないじゃないですか?

これ全部見えちゃっていいのかなっていう気持ちになるぐらい僕らは公開してるっていうこと丸見え度があります。

示せるんじゃないかっていうことで、ちょっと下の方に、まあ、やや、あの、緩いコメントで、党内の機密データ流出事故じゃありませんみたいなコメントを入れて、まあ、なんかちょっと真面目すぎないトーンと、まあ、でもそれでも全部ここに出てますっていう。

真面目なプロダクトなんだけど、ちょっとしたまあ、ユーモアというかがあると、まあ、よりとっつきやすくなるなと思うそうですんですよ。

鹿目津の真顔の超真面目プロダクトっていうよりもちょっと軽やかで、見てもなんか悪い気持ちがしないっていうか、ちょっと楽しそうかなっていう風に思ってもらえるための1つの小さなそう苦しですね。

苦しっていうことであの、あれは入れましたね。

ということで、今のは一例なんですけど、こういう形で私の方でUIを作って、レディスさん、え、をメイン開発者として、まあ、様々な開発のチームの方と爆速で作っていったというのが、みらいまる見え政治資金でありますという感じですかね。

面白いですね、やっぱりこう、ページとして通帳に近いって言われると、通帳っぽいって思うと途端に分かるようになるっていうのは、これはやっぱりデザインの面白さだなと。

いや、本当に見てくださった方ありがとうございます。

じゃ、次のプロダクト行きましょう。

次のプロダクトみらい議会でございます。

今、国会の場合で何が話し合われているのかということを分かりやすく伝えるというプロダクトで、これもまた別の動画で村井さんと私が喋っている動画があるので、そちらぜひチェックしていただきたいです。

まずこのみらい議会、どうデザインしていきましたか?

みらい議会は元々そんなに明確にこういうものを作ろうっていうコンセプトが、ま、まる見えほどは定まってないところから始めましたよね。

どんなプロダクトだといいのかなっていうイメージを、ま、作るところからでした。

安野さん、今回その、総務委員会に配属に。

参議院の中でも本会議っていうのと個別の委員会っていうのがあって、その中の総務省管轄の案件について話し合う総務委員会ってものになりました。

海賊が決まった後、総務委員会ってどんな法案を審議するんだろうっていうので、チームの中で実際に法案を見て味わうかっていうのをやったんですけど、参議院の議案ページというので。

皆さんもぜひ見ていただければと思いますが、出。

こんな感じでこれ見ていただいて、どういう気持ちになるかをちょっと味わっていただきたいんですけど、もうね、もう気持ちがわかないどころじゃないと。

無でしたよね。

無かですね、目が滑るというか、なんか書かれてるな、文字だなっていう壁だなっていう感じですよね。

法案って何なのか、どういうことが書かれてるかっていうことを分かりやすく翻訳するっていう必要があるな。

そのプロセスがまずあった上で普段の生活の中でどういう困り事がありますかとかっていうことを聞いてくっていうのが、なんか順番で言うと必要なんじゃない?

はい。

まず分かるように伝えるっていうことですね。

そう。

なので、実際にその僕らの総務委員会の法案を1つ1つ、ま、見ていきながら、ま、AIの力をこう使いながらですね、聞き取っといて。

気持ちがが湧かない、壁みたいな文章をチャットGPTとかに入れながら、そう、説明してもらったんですね。

そうなんですよ。

で、説明してもらう時にも、ま、分かりやすく説明してとか、ま、色々なプロンプトが、ま、あるんですけど、5歳時に分かるように説明してっていうのが結構良いと。

アメリカでかなりよく使われている、あのELI5っていうそう、Explain Like I'm 5っていう私が5歳時であるかのように説明してくださいっていうのが、ま、よく使われてるプロンプトとしてあったので、ま、それを、その、実際に入れて、その法案の中身を読んでいくと、ま、結構気持ちが湧くなと。

ね、同じ文章を入れてこんなに気持ちが湧くんだと。

それはすごいと。

うん。

分かる速度がもうめちゃめちゃ上がったなと。

うん。

ここではったと気づいたんですよ。

うん。

なんかそもそも国会ってなんかめちゃめちゃ重要なことが議論されていて、めちゃめちゃ重要な法案が、ま、日々あの、議論されているっぽいんだけど、中身うん。

をそんなに1つ1つ見たことがなかったという、ま、うん。

1ユーザーとしての気づきが一応有権者としてのね、気づきがね。

解決するっていうのが結構デザインとして大事な視点なんじゃないかっていうことで、これで最初の方針が決まりました。

大きかったですね、これはね。

どうしたら国会で議論されている法案を分かりやすく、できる限り多くの人に伝えることができるかっていうことでいうわけだったりを考え始めていって、伝えるためのメディアっていうので一番代表的なのは、ま、ニュースですということで、Webのニュースメディアだったり、ま、様々な、あの、ニュースサイト皆さんご覧になってるけど、ニュースメディアのUIをリサーチしながら、どういう形にしていくといいかっていうのを作っていったってのが最初の範囲だったんだと。

でもなんかニュースサイトであまり見たことのないボタンとして、右上のところ、こちらですね。

こちらに詳しくっていうボタンがありますうん。

これは、ま、最初実はわかりやすくチャットGPTに解説してもらったものを、ま、最初入れるだけのバージョンを、ま、プロトタイプとして作ってたんですけど、ま、これま、ある時、はたと分かりやすくするだけでいいのかということちょっと思いまして、どういうことかっていうと、その法案の原文見て、もじもじしくてちょっと頭に入らないっっていうので、あの、見てもらったんですけど、なんかこれを読んだ時に私一方で胸に湧いてきた、熱い思いみたいなものがあって、それ何かっていうと、この法案が、あ、私たちの生活を支えてるのかみたいな。

この法律によって駆動してるのが僕らの社会なのか。

そこでこんな議論がされているみたいなのを見て、うわ、この788年間の歴史の中で、法案の議論っていうのが積み重ねられてきたんだなっていうなんか妙な考えがあった。

法案ってすごい分かりにくいってさっき言ったんですけど、なんか政治家と官僚が積み上げてきた専門知だなと。

これは本当にすごい専門知の塊だなそうと思ったので、なんか分かりやすくしたものだけを、あの、出すのはちょっと良くないなと。

これジレンマですよね。

思ったんですよ。

分かりやすくすればするほど、そう情報としては抜け落ちてしまって、先人のね、引き詰めてきたものがこれ落ちたと。

そう落ちてしまうので、これはどう両立していくかっていうことを考えた時に、複数パターンの翻訳をできるといいんじゃないかということで、ま、この切り替えのはい。

ま、トグルボタンとかって言ったりするんですけど、スイッチのこう、あの、ボタンを入れてで、プロトのための専門用語バージョンと、ま、僕みたいな素人のための優しい言葉バージョンていう2つを切り替えながら見ていけるのが一番ベストなユーザー体験なんじゃないかっていうことを、

はやっチーム、さ、あの、村井さんとか、ま、安藤さんとかと、あの、しながら、あの、作っていったっていうのが、あの、詳しくボタンの背景うん。

感じですね。

あんまり、その、ね、見たことない人も多いかもしれないですが、結構そうこれは将来的には僕はね、当たり前になっていく機能の1つなんじゃないかかなと思って。

結構いろんな世界、各国の、あの、ニュースメディアだったり、オウンドメディアだったりを見て、ああいう似たような機能実装してないかと思って。

あの、探したんですけど、なかなかなくて。

るっていうのはかなり実は勇気がいったんですよね。

なんかあんま見たことなかった。

あんま見たことないですね。

なので、どのぐらいこう受け入れられるのかっていうのが不安に思いながら、あの、出してたんですけど、やっぱり一番目立つ場所に切り替えのボタンがあるべきなんじゃないかっていうことで、右上にあの、トグルボタン、まぁ、スイッチのボタンを配置をして、同じ人でも法案によってこう切り替えながら、これは詳しいから専門用語で読みたいけど、これはあんま詳しくないから優しいバージョンで読みたいみたいな。

なこと、のシーンでこう切り替えるのに使ったり、最初はあの、優しいバージョンで読むんだけど、切り替えてもう詳しいバージョンも読んでみようみたい確かことで、学んでくっていうようなことを支援できるといいなっていうことで、ちょっと勇気を持ってあの場所に、あの、ボタンは、あの、設置をしましたね。

これもね、すごく反響を呼んだ機能ではいや、かなり安心しました。

なんかなんじゃこれって言われないかっていうのを事前に、あの、かなり検証しながら作ってたので、行為的に受け止められそうですね。

あれも同じ考え方ですね。

自分で読み解きながら、内容を紐づけながら法案の内容を理解していくっていうことをサポートできるといいなという風に思って、これは、あの、主にエディさん、作っていただいて、今までの工夫としてあの言うと、読みながら分からない言葉があったらすぐに検索できるようになった方がいいなそういうようです。

ですね。

そう。

で、チャットの画面が立ち上がってバーっと答えてくれるっていうのもありますし、言葉を選択するっていうところからじゃなくてチャットをしてみたいなと思った人がチャットの画面を開いた時に最初の質問考えるのってやっぱちょっとハードルが高いんじゃないかっていうふうに思ったので、質問例みたいなボタンを2、3入れていて、そのボタンをタップするとそのままクイックに質問が流れ始めて、こんな感じで色々聞けるのねと。

みらい議会って何とか、この法案について一言で教えてみたいなことを聞けるんだなっていうことを、それもなんか自然に、ランニングしていけるような言い合いになるといいなっていうことで、ああいう画面を作りましたし、もう1個あげると、スクロールをする時に、下にこう読んでいってる時には、ちっちゃくはい、はい、はいとなって、この言葉何だろうと思って止まると、縁居に質問できますっていう、テキストボックスが大きくなるという、ま、左変の言うはよ。

それもこれ、いずれも、何ていうか、新しい機能なんそうでですね。

法案の説明の中に、このボタンを押すと詳しくなるよとか、ここでテキスト選択すると質問できるよみたいなことのガイドをちょっとそれどなく入れて、めちゃめちゃ悩みながら作ったんですけど、新しい機能を自然に使っていただきながら法案というなかなかとっつきにくいものを分かりやすく理解をつかめるっていうことを、できればいいなということを思いながら我々がどうしてもやろうとしてることが新しい。

優しく機能であるとか、AIアシスタント機能がついてるっていうのも新しくて、全てを本当に分かりやすく伝えるっていうのは、これすごい大事なわけです。

めちゃめちゃ悩みましたね。

ので、ガイドですよね。

途中で説明を結構手厚く入れるっていうのは、本当チームとしても大事にし、かなり大事にしながら作りましたし、漢字だらけになってしまうのも良くなかったので、ひらがなをちゃんと入れるような、あの、読みやすいような、あの、テキストにしようみたいなこともそうでしたし、漢字もそのルビ、フリガナが触れるように、あの、なることで、ま、本当に老若男女、あの、できる限り多くの人に読んでもらえるようにしたいっていうような、ま、フリガナ機能を入れるっていうか、できるだけフレンドリーに、できるだけとっつきやすく、できるだけ分かりやすく国会の議論が開かれていくと意味があるなということを思って、あの、試行錯誤して作ったっていうような感じでございます。

はい。

はい。

ということで、はい。

本当にあの色々な工夫をなるべく我々としてはしつつですね、この2つのプロダクト、10月にみらいまる見え政治資金、みらい議会をお届けいたしました。

色々工夫を我々なりにしてるとはいえ、今のプロダクトも完璧なものでまだまだないうん。

のでまだまだですねはい。

こういろんなフィードバックをいただいて、ここもうちょっとこうするといいんじゃないの? とか、ここはちょっと使いにくいよっていうことを言っていただいたら、それを踏まえて次のね、アップデートにどんどんどんどん向けて動いていきたいなと思って。

でおります。

ので、皆さんもですね、もしそういった気づいた点があったら、今回でYouTubeのコメント欄に是非書き込んでいただければと思いますし、こういったプロダクトいいなとか、山根さんのこのデザインの考え方面白いなと思っていただいたら高評価と、そしてチャンネル登録をよろしくお願いします。

お願いします。

ではではありがとうございました。