見出し画像

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

これはdesigning plus nine Advent Calendar 11日目の記事です。

こんにちは。ritarと申します。

Slackに昨年追加された「キャッチアップ」という機能がめちゃめちゃ便利で毎日使っているのですが、ご存知ですか?

画像
各チャンネルがカードになっている。右にスワイプすると既読にできる

Slackには、メッセージを送れる「チャンネル」が多数あり、それぞれで独立した会話が起こります。
普通は、「チャンネル一覧」から一つずつ開いて、その中に届いている新着メッセージを読みます。しかし、大きい組織だとどんどんチャンネルが増えていき、既読をつけるのが大変になります。

そこで導入されたのがキャッチアップです。この画面では各チャンネルがカードになっており、それを左右にスワイプしていくことで、既読にするか未読にするかを選ぶことができます。
何も考えずにただ左右にスワイプしていくだけでよい、とっても楽で快適なUIです。

ところで、考えなくていいUIといえばショート動画ですよね。

画像
TikTok

何も考えることなく、ひたすら下にスワイプしていけば面白い動画が出てくる。疲れた日はありがたいけど、いつの間にか1時間過ぎていて恨めしいこともあります。

「考えなくていいUI」、すなわち余計なことを考えさせないUIは、場合によって薬にも毒にもなります。
迷わず簡単に扱えるUIはデザイナー・ユーザー両者の古くからの願いである一方で、あまりにも考えなくてよいとつい見すぎてしまうUIになることもあります(ショート動画の見すぎは脳に悪影響があるという調査結果もあるようです)。

ところで、Slackのキャッチアップとショート動画。この2つのUIが「考えなくていい」という感覚になるのは、なぜなのでしょうか?
どんなUIなら「考えなくていい」のか分かれば、よりよいUIデザインに役立つかもしれません。
今やAIに頼めば誰でもアプリを作れてしまう時代です。デザイナーに限らず、UIデザインへの解像度を上げておくのは、日常を生きる上で悪くないのでは?

この記事では「考えなくていいUI」がどのように作られるかと、そのメリット・デメリットについて考えたり、逆に「考えさせるUI」とは何かについて考察していきます。
さらに、様々な情報システムを「考えなくていいUI」に近づけるために、AI (LLM) が大きな役割を果たすことについて話します。しばしお付き合いください!

(※ AIが登場するのは文章の後半ですが、そこまでの前提があっての話なので、少し辛抱強く読んでいただければと思います……!)

「考えなくていいUI」たらしめるもの

最初から結論なのですが、これらを「考えなくていいUI」にしている最大の要因は、注意を向ける場所を選ぶ必要がないことではないでしょうか。

改めて、先ほど述べたSlackのキャッチアップ機能について考えます。
キャッチアップを使わない場合の、通常のSlackの画面はこんな感じなのですが……

画像
チャンネル一覧画面。どのチャンネルを最初に開くべきでしょう?

未読のチャンネル(太字になっているもの)がたくさんあり、見たいチャンネルを選ぶ必要があります。
チャンネル一覧を見るたび、「このチャンネルは大事なことが書いてあった気がするから後回し」「あのチャンネルはずっと放置しているから早く読まなきゃ」……などと、考える隙が与えられます。

一方キャッチアップでは、今自分が見るべきものが次々に目の前に出てきます。どこから見始めようか、次はどれを開こうかと考える隙もなく、次のコンテンツが出てくる。これが、「考えなくていいUI」の所以なのだと思います。

画像
次に見るべきチャンネルが、どんどん表示される

人間の注意は、その構造上、一つずつ順番にしか意識を向けることができません。大量のアイテムや複雑な構造を把握する場合にも、一つずつ順番に、優先順位をつけて見ていく必要があります。次に何を見るかを決めるのには、無意識的にですが頭を使っています。

「考えなくていいUI」では、次に見るべき対象を、自分ではなくシステムが決めてくれます。つまり、注意の働きをUIが代替してくれるのです。だからこそ、「考えなくていい」という感覚が生まれていると考えられます。

TikTokもまったく同じです。どの動画を見るか考える必要がなく、勝手に次々と見るべき動画が出てきます。

このような、注意を向ける場所を考える必要がないUIを、ここではタイムライン的なUIと呼ぶことにします。
タイムライン的なUIでは、アイテムが自分が見るべき順番(=タイムライン)に勝手に整理されて表示されます。

タイムライン的でないUI

逆に、タイムライン的UIではないUIとして、Googleドライブが挙げられます。

Googleドライブのフォルダを共有されると、私たちは「まずどこから見ようか?」「次はどのファイルを開こうか?」と考えます。フォルダに深く潜って、入っているものを確認して、やっぱ違ったわとなり、また階層を遡って別のファイルを開く。その一つ一つの段階で、次はどこに注意を向けるべきか判断が必要です。

画像
どのフォルダを最初に開こうか、どのファイルを最初に見ようか

GoogleドライブのようなUIでは、何を見るべきかという優先順位がついておらず、それそのものの構造が、ありのまま表示されています。このようなUIのことを、タイムライン的なUIと対比する意味でトポグラフィ的なUIと名付けることにしましょう(トポグラフィの意味は後ほど説明します)。

Googleドライブで見るべきフォルダを選ぶ感覚は、Slackの「チャンネル一覧」を眺めているときの、どれを開くべきか考える感覚にも似ていますね。「チャンネル一覧」も、Googleドライブと同様に注意を向ける場所を選ぶ必要があるため、トポグラフィ的UIとなります。 

一方、タイムライン的UIではそのような判断が発生しません。どんどんコンテンツが出てきて、どんどんさばいていくだけ。このように、注意を向ける対象を決断する必要がないことが、「考えなくていいUI」の肝であると考えられます。

(※補足)
ここでは情報の種類の話ではなく、見せ方の話をしています。
情報マネジメントの世界で古くからある概念として、ストック情報とフロー情報があります。しかしこれは情報自体の性質の話であって、それがどう表示されるか・こちらにどう受け取られるかという話ではありません。
先ほど挙げたSlackのキャッチアップとチャンネル一覧は、どちらもチャットであるためフロー情報に分類されるでしょう。しかし、見せ方として「直線的/構造的」という違いがあり、ここではそれを「タイムライン的/トポグラフィ的」と名付けています。
これに関してはCosenseの開発者の方が素晴らしいまとめをしてくださっているのを見つけたので、ご興味のある方はそちらをご覧ください。

トポグラフィ的なUIは、「優先順位付けされることなく、構造がそのまま表示されている」もの全般を指します。Googleドライブのようなフォルダ構造はその一例にすぎません。

例えばFigmaやホワイトボードツールのように位置や大きさを持ったアイテムが配置された画面や……

画像
まずどこから見始めよう? (miro)

……Wikipediaのようにリンクで繋がったネットワーク構造になっているもの。

画像
次はどのページを読もう?

これらはいずれも、それそのものの構造を優先順位付けせずありのまま表示する、トポグラフィ的UIということができます。そのため、次に見たいものを自分で選び取っていく必要があるわけです。

ここで改めてSlackのキャッチアップの画面を見てみると、今自分がやるべきことが非常に明確なことがわかります。明確すぎて遊びの余地がないといってもいいくらいです。これが「考えなくていいUI」です。

画像

タイムライン的UIの条件

タイムライン的UIを使っているときは、注意が次々と別のアイテムに誘導されるため、「考えなくていい」状態を実現できます。
では、具体的にどんな条件を満たすUIなら、注意を誘導できるのでしょう?その条件を以下の4つに整理してみました。

条件1. アイテムが一直線に並んでいる

まず、考える隙を与えずに次々見られるようにするためには、各アイテムが一直線に並んでいる必要があります。
これはXのタイムラインが最もわかりやすいでしょう。投稿がリストに並べられているため、順番に見ていくことができます。

画像

必ずしもリストの見た目をしている必要はなく、例えばキャッチアップではカードを重ねたUIを使って一直線に並べています。TikTokは、見た目はXのようなリストではありませんが、縦一直線にスクロール可能なので実質的にリストと同じです。

逆に、アイテムが一直線に並んでいないUIはタイムラインにはなり得ません。例えばFigmaやホワイトボードツールのように、各アイテムが空間的に配置されていたら、どこから見るか考える必要が出てきます。

条件2. 主な目的がそのリスト内で完結する

次の条件として、主な目的がそのリスト内で完結する があります。
例えば、Slackのチャンネル一覧(キャッチアップではない方)では、チャンネルが一直線のリストに並んでいるため、条件1を満たしています。しかし、一番見たいコンテンツ(メッセージ)は、各チャンネルを選択しないと見ることができません。そのため、リストから毎回離脱してメッセージ画面に潜る必要があります。このようなUIでは移動が発生するため、「何も考えなくてよい」は実現されません。

一方キャッチアップでは、その画面内にメッセージが表示されているため、そこから離れることなく目的を達成できます。だからこそ、「左右にスワイプしているだけ」という感覚になるわけです。

画像
メッセージが見えない「チャンネル一覧」vs. 画面内でメッセージを見られる「キャッチアップ」

条件3. 見るべき順番にアイテムが並んでいる

ここが注意を誘導する上でキモとなる部分です。
Xでは、新しい順もしくはおすすめ順にアイテムが並んでいるので、上から眺めていくだけで目的を達成することができます。
Xを見ているとき、「どのツイートを読み始めようかな」とか、「次はどのツイートに行こうかな」とか考えている人はいません。次に読むべきツイートはシステムが決定します。

画像

Slackのキャッチアップでは、勝手にチャンネルが適当な順番で表示されます。普通に考えたらどのチャンネルを最初に見るかは選べたほうがいいような気がしますが、その選択肢を大胆に削ることで、注意を向ける先を考える必要がなくなっています。

条件4. 見るべきでないものの視覚的な優先度が低くなっている

そして、今見るべきでないものや見終わったものが画面から取り除かれることも重要です。なぜなら、ずっと表示しておくとそちらに注意が行ってしまう可能性があるからです。

Slackのキャッチアップでは、見終わったものは消えていき、まだ見るべきでないものは後ろに隠れているため、強制的に一つずつ順番に見る体験になります。
TikTokやXは、スクロールを使って視覚的な優先度づけを実現しています。まだ見るべきでないものや見終わったものは、スクロール範囲の外に押し出されていきます。

このように視覚的に優先順位をつけることで、(良くも悪くも)システムが意図した通りのアイテムに、意図した順番で注意を誘導することができます。


以上の4つの条件を多く満たしているほど、注意を誘導するタイムライン的な性質が強い、「考えなくていいUI」であるといえます。

注:タイムラインとトポグラフィは連続的なもので、どちらか片方に必ず分類されるわけではありません。あくまでどちらの度合いが強いか、どの側面を導入しているか、という視点で見ていきます。

トポグラフィと管理の必要性─メモアプリ

以上のような視点を踏まえて、別のジャンルのUIを眺めてみることにしましょう。ここではメモアプリに注目してみます。

ここまでは、Slackのキャッチアップ・TikTok・Xと、受動的に情報を見るためのUIに着目してきました。しかし、メモアプリのような情報の制作や管理のためのUIにおいても、少し形を変えた「考えなくていいUI」が存在します。

例えばAppleの「メモ」アプリは、書いたメモが時系列に並んでいきます。最新のものが一番上、古いものが一番下。書いたメモはどんどん下に流されていきます。

画像
「メモ」アプリ (iPad版)

これは受動的に情報を消費するUIではありませんが、一直線のリスト明確な順番付け古いものがどんどん流されていくという点を見ると、タイムライン的な側面を持っているといえます。

一方、Notionはフォルダ構造を持ったメモアプリで、ページの中に子ページを作ることができます。こちらは明確にトポグラフィ的なUIになっています。

画像
Notionの画面。常にフォルダ構造を意識させられる(赤枠)

この2つを比べた際に現れる、「考えなくていいUI」のもう一つの特徴があります。それは管理の必要性です。

  • Appleのメモでは、自分が書いたものは自動的に一直線のタイムライン上に並びます。そして、昔のメモたちはスクロールの彼方に隠されています。これはシステムが勝手に優先順位をつけて、「新しいメモのほうがアクセスしたい可能性が高いだろう」という決めつけを行っているからです。この決めつけのおかげで、何も考えなくても自動的に一直線に並び、明示的に整理をする必要がありません。

  • 一方、Notionのようなトポグラフィ的UIには配置が存在し、昔のものだからといって消えたりはしません。そのため、定期的にちゃんとフォルダ分けして整理しておかないと、どこに何を置いたかわからなくなります。見るときも書くときも、「どこに置いたのか」を常に意識し、アクティブに管理する必要があります。

このような違いがあるため、タイムライン的UIは管理をする必要がないという意味でも、「考えなくていいUI」に近い存在であるといえます。

こちらも、人間の注意の視点から捉えることができます。
タイムライン的なUIでは、昔書いたものや優先順位が低いものを勝手にスクロールの彼方に追いやることで、素早く移り変わりどんどん忘れていく人間の注意と似たような体験を提供しています。
(ただし逆に、どんなに重要なことも流れていってしまうという欠点も持っています。)

ここでお伝えしておきたいのは、トポグラフィ的UIは悪ではないということです。
むしろ、Notionには配置があることで、綺麗に管理する手間をかければ、誰が見てもわかりやすいようにトピックベースで整理・表示できます。これは大人数で使う社内Wikiなどにはもってこいの性質です。
また、タイムライン的UIと異なり勝手に流れていってしまうことがないというのも明確なメリットです(その代わり、自分で優先順位をつけて整理しないといけません)。

事例その2─ウィンドウ管理

続いて、スマホとPCの複数アプリケーションの管理画面を見てみます。

画像
iOSのアプリスイッチャーと、macOSのデスクトップ

この2つは、「アプリケーションが並んでいる」という点では共通していますが、その性質は大きく異なります。

スマートフォンのアプリスイッチャーは、時系列の順番になっている、完全にタイムライン的なUIです。
最新のもの以外はすべて後ろ側に隠されて表示されます。これは、「最近使ったものであるほど次に開く可能性が高い」という決めつけをしているといえます。

勝手に時系列になっていくので管理の必要がありません。相当古いスマホを使っていない限り、アプリを開きすぎたから閉じなきゃというような、明示的な管理は必要ないはずです。
昔のものは気にも留めることなく、どんどん忘れていきます。まさに人間の意識の延長のような、「何も考えなくていいUI」です。

一方、PCのデスクトップにはそれぞれのウィンドウに配置・大きさが存在するため、トポグラフィ的なUIといえます。自分が決めた位置にウィンドウがとどまり、自分が手動で閉じない限り消えることはありません。

ウィンドウには位置・大きさがあるため、開きすぎると管理の必要が生じます。きちんと管理していないと、今のタスクと関係あるウィンドウを選ぶのにも時間がかかるし、どこに置いたかわからないといった状況が発生します。まさにトポグラフィ的なUIの特徴です。

(※補足)
先述のストック・フローの話で言えば、アプリケーションウィンドウはそもそも蓄積される情報ではないのでどちらにも分類できません。PCのウィンドウが「ストック」なのかも怪しいです。
一方タイムライン・トポグラフィは純粋にUIの表示レイヤーの話であるため、幅広いUIをこの枠組みに当てはめて考察することができます。

とはいえ先述した通り、トポグラフィ的なデスクトップにも利点があります。一覧性が高いこと、配置による空間的記憶、横並びで表示するなど複雑な構造の表現。これらはタイムライン的UIでは実現が難しい、トポグラフィならではのメリットです。

「考えさせるUI」としてのトポグラフィ

少し脱線しますが、トポグラフィ的なUIが「考えなくていい」から遠い、もっと言えば「考えさせるUIである」ということは、メリットと捉えることもできないでしょうか。

タイムライン的なUIを使っている間は「考えなくていい」のですが、それはつまりシステムが優先順位を勝手に決め、ユーザーに押し付けているということです。
一方トポグラフィ的なUIは、ユーザーの自由な発想による探索を促します。
Wikipediaを自由に探索しているときの楽しさ。ホワイトボードを自由に眺めて、思い思いの場所に書き込むときの楽しさ。これは、自分の外部の環境とのインタラクションを楽しむことです。まるでオープンワールドゲームで遊んでいるような感覚ですね。

先ほど、タイムライン的なUIの説明の際にやることが明確すぎて遊びの余地がないという表現を使いました。
次は何をやってみようかと、自分で考える余地がある。トポグラフィ的なUIは、創造性と密接に関わっているといえそうです。

(UIデザインでいうとこれはモードレス/モーダルと強く関係していそうですが、長くなってしまうので本稿では省きます)

タイムライン・トポグラフィの「変換」と、LLM

このように、タイムライン的なUIとトポグラフィ的なUIにはそれぞれメリット・デメリットがあるため、目的によってどちらを使うべきかが変わります。
そこで、タイムラインとトポグラフィの間の「変換」を行うUIについて紹介しようと思います。

まずは、ずっと事例として出しているSlackのキャッチアップです。
元々は「チャンネル一覧→チャンネル詳細」という入れ子構造(トポグラフィ的)であったものを、タイムライン的なカードUIに変換して見せることで、タイムラインのメリットを取り込んでいます。

画像

そして、ここで登場するのがLLMでありAIです。(2025年の皆さん、大変お待たせしました!!)

今年はCursorやClaude Codeなど、AIコーディングソフトが大躍進した年でしたね。ここまでの議論を踏まえると、AIコーディングソフトは、AIがトポグラフィをタイムラインに変換してくれる装置であり、それがバイブコーディング = 「考えなくていい」コーディングを実現する一つの要素だといえます。

画像
Cursorの画面

最も有名なAIコーディングソフトであるCursorでは、左側(青枠)に普通のコードエディタ、右側(赤枠)にAIとのチャット欄が表示されています。

コードエディタは、コードそのもののフォルダ構造を普通に表示する、トポグラフィ的なUIです。
一方AIとのチャット欄は、明らかにタイムライン的なUIです。一直線、最新のものが一番重要、古いものは押し流されていく。どこをとってもタイムライン的です。
Cursorはトポグラフィとタイムラインが左右に並んだUIになっており、これが非常に重要です。

通常、ソフトウェア開発の際には、まずどのファイルを開くべきか考え、そこからリンクされている別のファイルに飛び……と、ファイルを閲覧・編集するために注意を向ける先を考え、一直線の手続きにする必要があります。
そしてそれは、集中を阻害する大きなネックになり得ます。大きなリポジトリを読むとき、フォルダ構造や参照が複雑に絡み合っていて、次にどこを読めばいいのか途方に暮れた経験は、両手の指では数え切れません……。

しかしAIとのコーディングでは、チャット欄でAIに「◯◯に関係あるファイルを全部洗い出して」など指示することで、それをチャットというタイムラインに変換することができます。
しかも、「◯◯を編集して」と伝えれば、自分でトポグラフィ的なUIに触れずとも、チャットというタイムラインにいながらにして編集まで完結できてしまいます。
コードベースという深いトポグラフィに潜らずとも、自分の思ったことを思った順番にタイムラインに記していけば、AIが適宜注意力を使って多数のファイルを編集してくれるわけです。

このように、注意を向ける先を考えなくてよくなることが、AIコーディングに感じる「楽」さの所以であり、「考えなくていいUI」に近づいている要因であると考えられます。

今最も強力に業界が変わりつつあるのはコーディング分野ですが、これが有効なのはコーディングに限りません。
最近はExcelでもAI (Copilot)とチャットできるようですね。これも、複雑なトポグラフィである表を、AIを経由してタイムラインから遠隔操作している点で、全く同じ議論が適用できます。

今後数年で、難解なPDFの読解・プレゼンの作成・データ解析など、注意を向ける先を考えながら行わなければならない複雑な作業全般で、AIによるトポグラフィのタイムライン化を享受できるようになるはずです。

なお、これは「すべてがタイムライン化しているから、トポグラフィはなくなる」という話ではないことに注意が必要です。基盤としてトポグラフィがあって、それをタイムライン的に操作できるという話です。
最近またAIによってUIなくなる・なくならない論争がにわかに発生していますが、自分はなくならないと思っています。詳しくは昨年の文章(↓)をご覧ください。

逆変換─タイムラインからトポグラフィへ

逆に、タイムラインから距離を置きたくなることもあります。タイムラインは複雑な構造を表現できない・すぐに忘れていってしまう・何も考えなくてよいせいで中毒性があるという問題があるからです。

例えば、デジタルガーデンというムーブメントが近年流行の兆しを見せています。
これは、タイムラインの流れに一喜一憂するソーシャルメディアとは別に、自分用に考えを整理して保管する場所 =「デジタルな庭」を作ろう、という試みです。

画像
デジタルガーデンに興味を持つ人々に人気のメモツールObsidian。記事同士でリンクして、その全体像をこんなグラフビューで見ることができます

タイムライン的なメディアでは、最近起こったことでフィードが埋め尽くされ、すぐに忘れ去られていきます。半年前に話題だったニュースの話は、それがどんなに自分に関係あるものだったとしても、全く目にすることがなくなります。
タイムラインから一部を切り取り、自分のデジタルガーデンに「配置」しておけば、後からまたそこに訪れて、他のページとつないだり情報を付け足したりして、時間とともに思考を深めていくことができます。

実はタイムライン・トポグラフィという単語は、デジタルガーデンの実践者のブログからの拝借です。これを個人的な情報管理だけでなく、UIデザイン全般に適用したらどうなるんだろう、というのが本稿の始まりでした。
トポグラフィとは「地形」という意味です。流されずにとどまり続ける、配置を持ったシステムを表すのにぴったりな表現です。

他の事例としては、手前味噌ですが、昨年ベータリリースしたCelboというデータ解析ソフトがあります。
「一直線にしか情報を表現できないJupyter Notebookでは、実際のデータ解析の過程で生じる複雑な構造を可視化できないのではないか」ということに着想を得て、Figmaのような配置というトポグラフィ性を導入しています。

(いつかこれを実用レベルで完成させたいと思っているのですが、なかなか時間が取れていない……泣)

さらに別の例を挙げると、Slackというサービス自体、それまでは一直線のタイムラインになってしまっていたチャットに、トピックごとのフォルダ構造に分けるというトポグラフィ的側面を取り入れたものといえます。
つまり、最近キャッチアップをリリースしたSlackは、タイムラインに一度トポグラフィを導入したあと、さらにそれをタイムライン的に消費するためのUIを導入し直したといえます。

おわりに

「考えなくていいUI」について考えたら、人間の注意の働きに寄り添うタイムライン的UIと、外部の環境として構造をありのままに提示するトポグラフィ的UIの違いが見えてきました。
さらに、その2つを変換するデザインパターンや、AIとの関わりまで考えることができました。

この対立構造、そして両者の間を変換できることを知っているだけでも、日々の情報システムとの付き合い方が変わってくるはずです。
タイムライン的なUIばかり見ている日は、今日は疲れてしまったのかなと一日を振り返る。トポグラフィ的なシステムに遭遇してうまく使えなかったら、AIにタイムライン化を頼んでみる。たまには脳の体操として、トポグラフィ的なUIの中を散歩したり手入れをする日を意識的に作ってみる。
ユーザーとして健康なデジタル生活を送るためには、そんなことを意識してみるとよいかもしれません。

今後ますます人間との融合が進むUIの世界をこれからも見守りつつ、自分自身もうまく付き合いながら暮らせていけたらと思います。

【著者の近況】
改めまして、ritarと申します。現在は東京大学の葛岡鳴海研究室で、博士課程の学生をしています。
研究に関する議論、仕事・執筆・共同研究のお誘い、友達になりたいなどのご相談がありましたら、XBlueskyにてお気軽にご連絡ください。

また、少し前からチップ機能を導入してみました!いただいたチップは調査や執筆のために使わせていただきます。



いいなと思ったら応援しよう!

ritar 読んでいただきありがとうございました。サポートがたまったら執筆時に飲む用のちょっといいお茶を買おうかなと思います!

この記事が参加している募集

コメント

コメントするには、 ログイン または 会員登録 をお願いします。
買うたび 抽選 ※条件・上限あり \note クリエイター感謝祭ポイントバックキャンペーン/最大全額もどってくる! 12.1 月〜1.14 水 まで
「考えなくていいUI」を考える|ritar
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1