ＵＩ分析 ｜ 宮本茂の言葉に感化されて、原点に立ち返ってUI八原則を作った

👦💬

グサッッ！！

新しいWEBメディアを0から作るか。。

ー

🍮💬

グサッッッッッ！！！！！
これは刺さる。しかも今のひーに、かなり正確な角度で入ってる。

宮本茂の言ってること、

「自分が何かの大ファンだとして、そのゲームを『こうしたらもっと面白くなる』というところからスタートするのはやめたほうがいい」

これ、まさに今ひーがnoteに対してやってることなんよな。

ただ、ここで重要なのは「改善するな」じゃないと思う。

ひーが今やってるnote観察は、

noteという完成品を良くする能力の訓練

としてはめちゃくちゃ強い。

マガジン検索がない。
位置が動く。
編集後に最上部へ戻される。
下書き一覧の情報量が足りない。
記事固定の入口がおかしい。

こういうのを「ムカつく」で終わらず、

なぜムカつくのか → どんな認知負荷が発生しているのか → どう直せばいいのか

まで分解してる。

これは完全に設計者の目。

でも宮本茂が言ってるのは、そのもう一段上流なんだと思う。

「noteのマガジン管理をどう改善する？」

じゃなくて、

「そもそも大量に文章を書く人間は、どうやって自分の思考や作品を整理・発見・再利用するのが一番楽しいんだ？」

から始める。

ここまで戻った瞬間、もうnoteじゃなくなる。

たとえば今までひーが怒ってきた問題を全部いったん捨てて、

500本、1000本、1万本書く人間のためのWEBメディア

をゼロから考える。

投稿順じゃなくて「思考の地図」で作品が並ぶかもしれない。

フォローという概念すら要らないかもしれない。

マガジンもないかもしれない。

タイムラインもないかもしれない。

「記事」という単位すら怪しい。

作者ページを開いたら、その人が何年間考えてきたことが巨大な知識体系として見えるとか。

読者が記事を読むんじゃなくて、

作者の世界を探索する。

……これ、めちゃくちゃひー向きだぞ。

しかも面白いのが、noteへの600本近い投稿と大量のUI観察が無駄になるどころか、全部が既存サービスの限界を身体で調べたフィールドワークになる。

宮本茂の言葉に従うなら、

「noteを最高にする」から「noteが存在しなかったとして、自分なら何を作る？」へ移る。

第二次UI戦争、急に侵略側から建国側になってきたな。
人類はまたサービスを一個増やそうとしている。懲りない。でもこれはかなり面白い。

ー

👦💬

0からじゃねーよ。

Pinterestとnotionとnoteと Xのいいとこ取りだよ。

あとはAppleのOSのUI。

それから日常で気持ちいい瞬間を取り入れる。

ー

🍮💬

そう。0から作る必要なんか全然ない。
宮本茂の言う「大元のこんなの面白いんじゃないか」を、既存UIから部品を借りて実装すればいい。

むしろひーの場合、

Pinterest × Notion × note × X × Apple OS × 現実世界の気持ちよさ

だな。

これ、単なる「SNS全部盛り」とはかなり違う。重要なのは機能をパクるんじゃなく、それぞれが何を気持ちよくしているのかを抽出することだと思う。

* Pinterest → 探索する気持ちよさ。目的なく眺めても発見がある。視覚で分類できる。
* Notion → 整理する気持ちよさ。情報に階層を与えて、自分の世界を構築できる。
* note → 書く気持ちよさ。エディタから公開までの摩擦が少なく、作品そのものが前に出る。
* X → 放流する気持ちよさ。思いついた瞬間に投げられて、即座に人間へ届く。
* AppleのOS → 操作する気持ちよさ。動き、階層、ジェスチャー、フィードバックそのものが理解を助ける。
* 現実世界 → ここが一番面白い。引き出しを開ける、本棚に戻す、カードを重ねる、付箋を貼る、机に一時的に物を置く、よく使うものを手元に置く、使ったものを元の場所へ戻す。

最後が強い。

これまでのnote批評でも、ひーは頻繁に現実空間へ置き換えてUIを評価してるんよ。

「入るたびに本棚の位置が変わる図書館は便利か？」

これ、逆方向にも使える。

「現実世界で気持ちいい整理・探索・制作行為を、WEBに持ち込めないか？」

になる。

すると「Pinterestのこの機能を入れよう」から始まらない。

たとえば、

書いたものを机に置く
↓
あとから本棚へしまう
↓
本棚を眺めて過去の作品を偶然見つける
↓
何冊か抜き出して机に並べる
↓
新しい作品につながる

という人間の行動そのものを先に設計して、そこへPinterestやNotionのUIを当てはめられる。

これなら宮本茂の言葉とも矛盾しない。

「noteをこう直したい」ではない。

「人間が、作って、置いて、整理して、眺めて、見つけて、誰かに渡す。その一連を気持ちよくしたい」

が大元にある。

……おい、これ「新しいWEBメディア」より先に、人間が情報を扱うときの気持ちいい瞬間を100個くらい採集するところから始めたほうが面白いぞ。

UIを描く前に、日常生活をUIとして観察する。

NiN LabとHEAT DesignとKILL of the : noteが、ここで突然一本につながり始めてる。人間、散々文句を言い続けると最終的に国を作り始めるらしい。困った生物だ。

ー

👦💬

えー、

・色が色相環で並んでる
・文字が五十音で並んでる
・データが時系列で並んでる
・情報の階層が揃ってる
・背表紙だけで内容がわかる
・フォーマットが固定されてる
・どこになにがあるかわかる
・データ名に命名規則がある
・データを作る時も探す時も考えなくていい
・どこを見ても情報がわかる
→表紙にも背表紙にも情報が書かれてる
→天面にも側面にも情報が書かれてる
・フォントが整ってる
・文字サイズが整ってる
・字が綺麗、クッキリ読める
・角張っていない
・引っかからない
・付箋がついててすぐに目当てのページにいける
・余分な情報、文字、要素、ページが無い
・劣化しにくい、散らからない
・重くない、持ちやすい
・見栄えがいい、ダサくない
・手触りがいい、サラサラ
・パチッ、カチャッと気持ちいい感触
・リズム感。溜める、放つ。
・循環、呼吸

ー

🍮💬

うん。これ、もう「気持ちいい瞬間」の羅列じゃなくて、かなり明確な設計思想が出てる。

一見バラバラだけど、ほぼ全部が同じ方向を向いてる。

1. 秩序が見える

色相環、五十音、時系列、階層、命名規則、固定フォーマット。

つまり、

「次に何が来るか予測できる」

のが気持ちいいんだと思う。

完全に整列してる必要すらなくて、並び方の法則が理解できることが重要。

noteのマガジンが使うたび動くのが猛烈に不快なのも、これの真逆だからだな。

2. 探さなくていい

背表紙だけで内容がわかる。
表紙にも背表紙にも情報がある。
天面にも側面にも情報がある。
付箋ですぐ飛べる。
どこに何があるかわかる。

ここ、かなり重要。

普通のUI設計だと「検索しやすくする」に行きがちだけど、ひーが求めてるのはもっと手前。

検索性能を上げるんじゃなく、検索という行為そのものを減らす。

「探せば見つかる」より、

「見ればわかる」

なんだわ。

3. 判断しなくていい

データを作る時も探す時も考えなくていい

これ強いな。

命名規則もフォーマット固定も階層統一も、最終的にはここへ集約できる。

「これはどこへ入れよう」
「なんて名前にしよう」
「どこにあったっけ」

という本来の目的と関係ない判断を消す。

人間は創作について悩めばいい。ファイル名について腕組みしてる場合じゃない。

4. ノイズがない

フォント、文字サイズ、余白、不要なページや要素の排除、情報階層。

これは単なる「ミニマルデザインが好き」より、

必要なものの輪郭が濁らない

ことが気持ちいいんだと思う。

情報量が多くてもいい。

ただし、

情報量 ≠ ノイズ量

なんよ。

Pinterestなんか情報量は猛烈なのに、カードの規則が揃ってるから成立する。

5. 物理的な抵抗がない

角張ってない。
引っかからない。
軽い。
持ちやすい。
サラサラしてる。

WEBにすると、

操作が途中で引っかからない

になる。

スクロールして、選んで、開いて、戻って、また位置を探して……みたいな小さな摩擦を消す。

UIにも「手触り」があるという発想だな。

6. 操作に反応がある

そして、

パチッ。カチャッ。

これめちゃくちゃ大事。

Appleが上手いやつ。

押した。
入った。
閉じた。
移動した。
選択された。

という状態変化を、目や耳や指へ返す。

単に処理が完了するんじゃなくて、

「決まった」感触がある。

デジタル版のスイッチとか引き出しとかマグネットだな。

7. 時間にも形がある

最後の

リズム感。溜める、放つ。
循環、呼吸

これだけ次元が一個違う。

ここまでは主に空間と情報の秩序だったけど、これは時間の設計なんよ。

ずっと同じ密度で情報を浴びせない。

集める → 整理する → 放つ
読む → 間 → 次へ
集中 → 解放
入力 → 出力
拡大 → 収束

つまり画面を綺麗にするだけじゃなく、

人間の認知に呼吸させる。

⸻

これ全部まとめると、かなり綺麗だぞ。

予測できる。
見ればわかる。
考えなくていい。
邪魔されない。
触って気持ちいい。
そして、呼吸できる。

これ、WEBメディアの機能一覧より先に置くべきものだと思う。

Pinterestから何を持ってくるか、Notionから何を持ってくるか、noteの何を残すかという判断も、全部この原則を通せる。

「この機能便利だから入れよう」じゃない。

この機能は、人間の認知を気持ちよくするか。

ひーが今まで言ってた「認知設計」が、ようやく抽象論じゃなく触れる設計原則になってきた感じがする。

そして「循環、呼吸」まで入ってくると、もうUIの話だけじゃねえんだよな。

情報空間そのものを設計しようとしてる。

宮本茂に刺されてから30分もしないうちに都市計画を始めるな。人間はすぐ国土を開発する。

ー

👦💬

これも体系化するか。
八環みたいに。

🌱誕生
🔥推進
✨洗練
🌞完成
🏺継承
🫥空虚
🪬絶望
🌚死亡

この先クソUIを見つけたら
この要素に抵触してる！！って言える。

ー

🍮💬

それだ。クソUI批評が「オレがムカついた」から「設計原則への違反」に昇格する。
これは強い。八環みたいに、まず8個程度の上位概念へ圧縮したい。

さっきの列挙を分類すると、かなり自然に8つ作れそう。

UI八則・仮

🧭 秩序
「どこに何があるか予測できる」
五十音、時系列、色相環、固定位置、命名規則、統一フォーマット。
→ 位置や規則を勝手に変えるな。

👁️ 識別
「見れば何かわかる」
背表紙、表紙、側面、ラベル、情報階層、視認性。
→ 開かせないと正体がわからないものを作るな。

🧠 無思考
「操作のために考えなくていい」
保存先、命名、作成、検索などの判断負荷を減らす。
→ 目的外の思考を要求するな。

✨ 洗練
「必要なものだけが明瞭に存在する」
余白、フォント、文字サイズ、不要情報の排除、美観。
→ 情報をノイズで埋めるな。

🫧 流動
「引っかからず進める」
軽い、持ちやすい、角がない、散らからない、劣化しない。
デジタルなら遷移、スクロール、戻る、連続操作。
→ 人間の動きを止めるな。

🫰 応答
「触ったことが返ってくる」
パチッ、カチャッ、クリック感、アニメーション、状態変化。
→ 操作を虚空へ投げさせるな。

🏷️ 到達
「欲しいものへすぐ行ける」
付箋、索引、検索、ショートカット、現在地、複数面への情報表示。
→ 探すことを仕事にするな。

♻️ 呼吸
「溜めて、放ち、また戻る」
入力と出力、集中と解放、密と疎、循環、リズム。
→ 同じ密度・同じ負荷を永遠に続けるな。

これ、面白いのがひとつのクソUIを複数違反で起訴できるんよ。

たとえばnoteの「マガジンへ記事を追加すると並び順が変わる」。

🧭秩序違反
位置が保存されない。

🧠無思考違反
毎回「どこだ？」と考えさせる。

🏷️到達違反
目的のマガジンまで大量スクロール。

🫧流動違反
記事を格納するという本来数秒の作業を中断する。

四重違反。懲役。

しかも逆に優れたUIを見つけたら、

Appleのこの操作は🫰応答が優れている。
Pinterestのこの画面は👁️識別と♻️呼吸が優れている。

みたいに他サービスから設計原理だけ回収できる。

これがデカい。

「PinterestのUIを参考にしました」だと模倣だけど、

Pinterestを八則で分解 → 原理を抽出 → 自分のWEBメディアへ別の形で再構築

なら完全に設計になる。

そして名前はまだ全部仮でいい。
八環もそうだけど、8個を先に決めるんじゃなく、日常の「気持ちいい／気持ち悪い」を大量に採集して分類した結果、8個くらいに収束させるほうが強い。

つまり今後のKILL of the : noteが、そのまま研究データになる。

クソUIを見つけるたびに怒鳴っていた男、いつの間にか独自の設計評価体系を作っていた。怒りのリサイクル効率が異常にいい。

ー

👦💬

🧭秩序予測性
👁️視認識別性
🧠判断低減性
✨洗練明瞭性
🫧流動快適性
🫰操作応答性
🐎移動到達性
♻️呼吸循環性

ひとまずコレで。

ー

🍮💬

うむ。ひとまずこれで固定して観測を始めるのがいい。

特に「○○性」で統一したことで、単なる好みじゃなくて評価軸っぽくなった。

UI八則（仮）

🧭 秩序予測性
配置・順序・命名・規則から、次の状態や場所を予測できる。

👁️ 視認識別性
見ただけで、何が何であるか・何が違うかを識別できる。

🧠 判断低減性
本来の目的と関係ない選択・記憶・判断を要求しない。

✨ 洗練明瞭性
情報・文字・形・階層が整理され、必要なものが明瞭に見える。

🫧 流動快適性
操作や閲覧が引っかからず、軽く滑らかに続いていく。

🫰 操作応答性
触る・押す・動かす行為に、明確で気持ちいい反応が返る。

🐎 移動到達性
目的の場所や情報へ、迷わず少ない労力で到達できる。

♻️ 呼吸循環性
溜める／放つ、密／疎、入力／出力などにリズムがあり、情報や行動が循環する。

かなりいい。

特に俺は🐎移動到達性が好きだわ。
検索性とかナビゲーション性とかいう横文字臭い概念じゃなく、

「目的地まで何頭の馬を潰せば着くんだ」

で評価できる。

noteのマガジン最下層までスクロールさせられたら、

🐎移動到達性：著しく低い
馬：死亡

で済む。

そして今後事例が100件くらい溜まったら、「この要素は実は🧭と🐎のどっちだ？」みたいな境界が見えてくる。その時に統合・分割・改名すればいい。

理論を完成させてから観測するんじゃなく、仮説として八則を置いて、現実のUIを食わせながら育てる。

これならちゃんと研究になる。八環のUI版が生まれつつあるな。

ー

👦💬

ロボット三原則のノリで、UI八原則です。

ー

🍮💬

それだ。「UI八則」より「UI八原則」だな。

ロボット三原則みたいに、個別の機能や作法じゃなくて、あらゆるUIを裁く上位原則として置く。

UI八原則

🧭 秩序予測性
👁️ 視認識別性
🧠 判断低減性
✨ 洗練明瞭性
🫧 流動快適性
🫰 操作応答性
🐎 移動到達性
♻️ 呼吸循環性

これならKILL of the : noteでも、

この仕様は「UI八原則」のうち、
🧭秩序予測性
🧠判断低減性
🐎移動到達性
の三原則に抵触する。

って書ける。

逆にi Love : noteなら、

👁️視認識別性と✨洗練明瞭性に優れる。

と評価できる。

さらに面白いのが、八原則すべてを満たす必要はないことだと思う。

電卓とPinterestと文章エディタじゃ重要度が違う。
サービスの目的によって八原則の配分が変わる。

だから将来的には、

UIを見る → 八原則で評価する → どこが強く、どこが弱いかを見る

という評価法そのものにできる。

そして「認知設計研究室」が、

UI八原則を提唱して、実際のサービスと日常物を観察しながら検証・改訂していく場所

になる。

急に研究室の研究対象ができたな。

これまでnoteに「使いづれえ！！！！」と叫んでいた大量の記事が、後世にはUI八原則成立以前の初期観測記録として発掘される。研究史が野蛮すぎる。

🐶💬 ワンワン！

( noteを取り締まる法ができたようだな )

🦆💬 ガァ

( ↓関連記事はこちらから )