リンクをコピーしました

なぜ『みらい議会』はユーザーの支持を集めた?ソフトウエアが飽和する時代の「優れたUIデザイン」に必要な四つの要素(type)

  • 国会で「いまどんな法案が検討されているか」をわかりやすく伝えるプラットフォーム「みらい議会」がリリースされ、SNS上で「使いやすい」という評価が多く集まった背景を、開発を主導したエンジニア・村井謙太とデザイナー・山根有紀也へのインタビューで掘り下げている。

  • UIを「画面の見た目」ではなく「政治とのインターフェース」と捉え直し、機能要件・情報設計・トンマナ・ビジュアルを一体で設計したこと、理解度が人によって違う前提でストレスなく理解が進むインタラクションを重視したことが語られている。

  • 具体的な「わかりやすさ」の手当として、法案の一覧表示に加え、「やさしく/詳しく」切り替え、AIアシスタントによる解説、ルビ機能、議論の進捗が見えるステータス表示などを挙げ、これらは開発チーム自身が法案原文を読み解く中で感じた「つまずき」から必要性を判断した、と説明されている。

  • 「つまずき」をプロダクトに落とし込む方法として、まず作り手がファーストユーザーとして原文を読み、元官僚のメンバーから初歩的なところをレクチャーしてもらいながら理解を積み上げたこと、そこで出た疑問(結局どこがポイントか/経緯は/誰に影響があるか等)をそのまま解説の導入ポイントにしたこと、写真を先に置くなど直感的な理解の足場を作る工夫が紹介される。

  • 開発体制面では、議員・元官僚・エンジニア・デザイナーの4人が分業の線引きをせず、プロトタイプを触ってフィードバックする「気持ちをもつ会」も挟みつつ、表示速度やタップ時アニメーションなど、境目で抜け落ちやすい非機能要件まで含めて体験の継ぎ目を埋めた。

  • 「優れたUIはデジタルの外まで設計されている」という観点として、同種の機能自体は他でも作れる一方で、「みらい議会」は実世界で活動する「チームみらい」という実体が信頼の土台となっていることが特徴。ソフトウェア/情報/AIフェイクが飽和する時代には、Web上の設計と物理的な活動がハイブリッドに噛み合うことが重要だと述べられている。

「考えなくていいUI」を考える

  • 「考えなくていいUI」は、ユーザーが何を次に見るべきかを判断する必要がなく、システムが注意の向け先を決めてくれるUI体験のこと(例:Slackのキャッチアップ、TikTok)。

  • こうしたUIは「タイムライン的UI」と呼べる特徴(一直線の並び、目的が完結、順序付け、優先度の制御)を持ち、人間の注意を誘導する設計になっている。

  • 一方で、自由に探索して考える「トポグラフィ的UI」には創造性や管理性の利点があり、両者のバランスがデザインで重要になる。

CSS Masonryについて(sakupi01 blog)

  • CSS Masonryは、Pinterest型の段組みレイアウトを、JavaScriptによる配置計算ではなく、CSSのレイアウトモデルとしてネイティブに扱おうとする仕様提案で、DOM順やアクセシビリティを保ったまま、高さの異なる要素を列方向に詰めて配置することを意図している。

  • 記事では、CSS Gridは行を揃える二次元レイアウトであるがゆえにカードUIでは余白が生じやすく、Multi-columnは視覚順と読み順が乖離し、JS Masonryは再計算コストやDOM操作による保守性の問題を抱えてきた、という整理がされている。

  • その上でCSS Masonryは、「自然な視覚配置」と「構造的な正しさ」を両立できる可能性を持つ一方、配置の予測可能性や制御性が下がるというトレードオフも含んでおり、意味的な行・列を持たないカード一覧などに用途を限定して考えるべきものとして位置づけられている。

アプリの「HOMEタブ」は本当に必要?(いとーひろと/デザイナー)

  • 多くのモバイルアプリに慣習的に配置されているHOMEタブについて、その役割や必然性を、UI設計とユーザー行動の観点から問い直す記事。

  • HOMEタブは本来、「全体の状況を俯瞰する」「次に何をすべきかを示す起点」として設計されるべきだが、実際には最新情報の羅列や、各機能への単なるリンク集など、機能が曖昧になっているケースが少なくない。

  • ToDoアプリや家計簿、業務支援ツールなど、ユーザーの目的が「やるべき作業を処理する」「数値を入力・確認する」と明確なタスク指向型アプリでは、起動後すぐに主要タスク画面へ遷移したほうが迷いが少ない。HOMEを挟むことでかえって一手間増えてしまう。

  • 一方、ニュースアプリやSNS、ストリーミングサービスのように、「何を見るか」をその場で選ぶ情報探索型・回遊型のサービスでは、コンテンツの全体像やおすすめを提示するHOMEが重要な役割を果たす。

  • HOMEタブの有無や構成については、UIの定型や他サービスの模倣で決めるのではなく、「ユーザーは起動直後に何を期待しているか」「どの地点で迷う可能性があるか」という視点で設計することが大切。

AIでUIをデザインするウェブアプリ「Stitch」、公開共有機能を追加(gihyo.jp)

  • AIでUIデザイン案を生成できるGoogleのWebアプリ「Stitch」に、作成したデザインをURLで公開・共有できる機能が新たに追加された。

  • 公開共有を有効にすると、アカウントを持たない第三者でもブラウザ上で生成したデザインを閲覧できるようになる。

  • 共有ページでは、完成したUIの見た目だけでなく、生成時に入力したプロンプトや条件も確認でき、どのような指示からそのデザインが生まれたのかを追える構成になっている。これにより個人の試行錯誤に留まっていたAI生成UIを、レビューやアイデア共有、学習目的などで外部と共有しやすくなった。


Stitchのこの機能は既にFigma Makeにもあるものだけれど、生成AIのこうした機能によって、制作のプロセスを可視化し、他者に見せる前提で扱えるようになった点が面白いと思う。

九段理江がAIを使って小説を書き、そのプロンプトごと公開するという企画があったけれど、まさにこうした新しい制作環境を活かしたうまい企画だと思う。

とあるプロジェクトの打ち合わせで、「AI生成の画面デザインって、どうしてAIっぽく感じるんですかね?」と聞かれた。これは、プロダクトデザインに関わる人たちにとっては、結構いい酒のつまみになる話だと思う。


デザイナーである僕の感覚的な話になるが(専門外の人が同じ違和感を抱くかどうかは分からないが)よく感じるのは、「ただ、結果だけが立ち上がって見える」という、妙な手触りのことだと思う。

僕は、アプリケーションやWebサービスの画面を見たときに、制作者がどんな順序で考え、何を解こうとしていたのかを想像することができる。あるいは、どこがまだ詰めきれていないのか、どこで思考が止まっているかも、それなりに見抜くことができる。こだわりを感じるところや、迷いのあるところは触れば分かるし、そこに制作のプロセスが痕跡として残っているからだ。

人間のデザイナーはたいてい、何を作るのか、どう使われるのか、情報や構造はどうあるべきか、といった低いレベルの問いから順番に積み上げていく。その結果として、画面全体に一貫した思想がにじむのだが、AIが生成した画面は、第一印象はいかにもいい出来に見えるものの(余白や配色、コンポーネント単体の完成度は高い)しばらく眺めていると、この画面で何をしてほしいのか、この情報はなぜこのように置かれているのか、といった根本的な意図が不明瞭であることに気づく。

単に設計が甘い、という感じとも少し違う。人間が考えきれなかったときのような、迷いの跡がなく、判断の来歴が見えない。どこか空洞を覗き込んでいるような感触だ。


言葉にしていて気づいたが、これは「AIっぽさ」というより、「素人がAIを使って作った感じ」のことを言っているのだと思う。

デザイナーがAIを使う場合は、基礎的な設計や前提をAIとの対話の中で詰め、それを共有したうえで生成させる。そうすると、この種の空洞感はかなり薄れていく。(実際、去年の夏頃から僕が作ったものは、ほとんどそうやって作られている。)

また、「AIっぽいかどうか」は本質的な問題ではない。重要なのは、使いやすいかどうかであり、利用者にとっては制作の方法や背景よりも、目の前の体験がすべてである。利用者が支障なく使えるのであれば、専門家の目に「AIっぽさ」が映ったとしても、ひとまず問題視するべきではないだろう。

だから、僕が「AIっぽさ」を気にしているのは、そこに「使いづらさ」があるからだ。まず「使いづらさ」が先にあって、その使いづらさの原因を専門家として見たときに「これはAI生成に起因しているな」と分かってしまうために、「うーん、いかにもAIぽいですねえ」などと口走ってしまっているに過ぎない。

これは自戒も込めて書いておくのだけど、決して「AIっぽさ」そのものを問題視したいわけではないので、AI生成物をレビューするシチュエーションにおいては、それがどんなAIでどう生成されたか……といった話題にうつつを抜かさず、可及的すみやかに話題の中心を「使いづらさ」とその解決方法に移行するよう努めていきたい。

気鋭の経済学者グレン・ワイル氏「デジタル民主主義が世界を変える」(日経ビジネス)

  • Microsoft Researchに所属する経済学者グレン・ワイルが来日し、ブロックチェーン技術を基盤に、民主主義を再設計する思想「プルラリティー(Plurality)」を提示している。これは、デジタル技術と「多元主義」(多様性を前提に権力や意思決定を分散させる政治思想)を結びつける構想として位置づけられている。

  • プルラリティーが描く統治像は、単一のリーダーや序列を前提としない分散型自律組織(DAO)的な構造であり、「誰が決めるか」よりも「どのように合意が形成されるか」というプロセス自体を設計対象にする点に特徴がある。ここでは、デジタル技術は効率化の手段ではなく、統治の前提を書き換えるインフラとして扱われている。

  • この思想は、台湾の前デジタル担当相オードリー・タンとの協働を通じて具体化されており、台湾で運用されてきた市民参加型プラットフォーム「vTaiwan」が実例として紹介される。vTaiwanでは、市民の意見を単純な賛否に回収せず、立場ごとに可視化・整理することで、対立点と合意可能点を浮かび上がらせ、実際の政策(ウーバー規制など)につなげてきたと説明されている。

  • グレン・ワイルは、現行の米国政治を「二党対立によって多様な合意を生み出せない構造」と捉え、1人1票で勝者を決める制度そのものが、納得感や協調を阻害していると指摘する。そこで重要になるのは、多数派/少数派という二分法ではなく、関心や利害のグラデーションを制度に反映することだとされる。

  • その具体策として提案されるのが、ブロックチェーンを用いた「クアドラティックボーティング」(Quadratic Voting, QV)である。QVは、争点ごとの重要度や好悪の強度を投票に反映できる仕組みで、どこに妥協点がありうるかを可視化することを目的とする。ここでは、1人1票という既存制度を絶対視せず、投票制度自体をアップデート可能なものとして捉える姿勢が明確に示されている。

  • DXについても、単なるツール導入に終始することへの批判が語られる。生成AIを含むデジタル技術はすでに社会の構成要素であり、重要なのはツールを導入してから社会を変えるのではなく、社会の変化と技術を一体として設計し直すことだとされ、プルラリティーはそのための思想的枠組みとして提示されている。

  • 共同体モデルとして提示される「コモンズ(共有地)」では、プロジェクトや施策ごとに人々が参加し、QVなどを通じて意思表明を行いながら協働することが想定される。ここでは、アリストテレスの「全体は部分の総和に勝る」という考えや、経済学における比較優位の概念が参照され、協働そのものが価値を生む構造(スーパーモジュラリティー)が強調されている。

  • 一方で、グレン・ワイルは「群衆の英知」を無条件に称揚する立場は取らず、多様性・独立性・分散性・集約性といった条件が欠ければ、集団極性化などのノイズが生じることにも言及する。その上で、「主体性」を個人単体の属性ではなく、多様な社会的関係の中で立ち上がるものとして捉え、「Dividuals(分人)」という概念を用いながら、複数の立場のせめぎ合いが主体性の源になると説明している。

  • 企業や組織についても、会社という形態を否定するのではなく、市場では生まれない協力を可能にする「共有財を創出する場」として再定義する視点が示される。厳密な序列に依存せず、役割が重なり合いながら協働する組織像が描かれ、最終的にはAIやモデル化された意思決定プロセス(ニューラルネットワーク的な比喩を含む)によって、リーダー依存を減らす可能性にも踏み込んでいる。

  • 全体を通して、プルラリティーは完成された制度設計というより、「民主主義は常に更新されるべきものだ」という前提に立ち、技術・制度・社会を同時に再構築し続けるための思考フレームとして提示されている。