Bluesky：アルゴリズムの透明性をデザインする
「すべてを支配する単一のアルゴリズムがあるべきではないと考えています。アルゴリズムは、ラジオ局を選ぶように、自分で選べるものであるべきです。」— Jay Graber、CEO
Blueskyは、アルゴリズムの選択をUXの中核的な要素として設計した初めてのソーシャルネットワークである。設定画面の奥深くに埋もれたトグルスイッチではない。AT Protocol（Authenticated Transfer Protocol）上に構築され、アイデンティティ、データ、アルゴリズムを独立したレイヤーに分離し、そのアーキテクチャをユーザー向けのデザインとして表出させている。Blueskyのフィードをただ使うのではない。誰でも構築できるフィードのマーケットプレイスを閲覧し、気に入ったものをピン留めし、ワンタップで切り替える。これは技術的な目新しさではなく、ソーシャルメディアにおける根本的に異なるインタラクションモデルである。
Blueskyが単なるエンジニアリングプロジェクトではなくデザインスタディである理由は、プロトコルレベルの決定がインターフェースパターンとして具現化されている点にある。アイデンティティのポータビリティ、カスタムフィード、コンポーザブルなモデレーション、ラベリングサービスはすべてプロトコルの機能であり、新しいUXパラダイムを必要とした。Blueskyは、これまでのソーシャルネットワークがユーザーに公開したことのない概念のために、インタラクションパターンを発明しなければならなかった。
Blueskyが重要な理由
Blueskyは1年足らずでゼロから2,500万ユーザーに成長し、インターフェースの作り込みが適切であれば、プロトコルレベルの設計がコンシューマー向けUXとして成立することを証明した。
主な成果： - アルゴリズムによるロックインのない2,500万以上のユーザー - コミュニティが構築した数千のアルゴリズムを持つカスタムフィードマーケットプレイス - ポータブルなアイデンティティを持つ初の主要ソーシャルネットワーク（アカウントを移行してもフォロワーを維持） - コンポーザブルなモデレーション：ユーザーが自分のモデレーションサービスを選択 - 初日からオープンソースのクライアントとフィードジェネレーター - Bluesky以外のサードパーティアプリにもAT Protocolが採用
重要なポイント
- インフラの選択を可視化する — Blueskyはプロトコルアーキテクチャをユーザー向け機能として表出させている。フィード選択、アイデンティティのポータビリティ、ラベリングは設定項目ではなく、主要なインタラクションである
- フィードをプロダクトにすることでエコシステムの価値を生む — 誰でもフィードアルゴリズムを構築・公開できるようにしたことで、コンテンツキュレーションを企業の独占からコミュニティのマーケットプレイスへと転換した
- モデレーションはポリシーの問題だけでなくデザインの問題である — コンポーザブルなモデレーションサービスにより、単一の企業基準を押し付けるのではなく、ユーザーが自分のコンテンツ境界を選べるようになった
- アイデンティティのポータビリティには新しいメンタルモデルが必要 — ユーザーはハンドル、DID、サーバー移行を理解する必要があったが、Blueskyのデザインはドメインベースのアイデンティティを通じてこれらの概念を親しみやすくした
- 馴染みのあるパターンが導入の摩擦を減らす — プロトコルの根本的な違いにもかかわらず、投稿やタイムラインの基本体験は意図的にTwitterの確立されたパターンを踏襲している
コアデザイン原則
1. プライマリナビゲーションとしてのフィード選択
Blueskyで最もラディカルなUXの決定は、フィード選択をナビゲーションのトップレベルに配置したことである。フィードは一度設定して終わりではなく、一日を通して切り替えるタブである。
従来のソーシャルメディア
┌─────────────────────────────────────────────┐
│ [ホーム] [探索] [通知] │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 一つのアルゴリズムがすべてを決定 │ │
│ │ 表示されるものは運営が決める │ │
│ │ 「おすすめ」= ブラックボックス │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
BLUESKYのアプローチ
┌─────────────────────────────────────────────┐
│ [Following] [Discover] [Quiet Posters] │
│ [Science] [Art] [What's Hot] [+ Add Feed] │
│ ← 水平スワイプで切り替え → │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 各タブ = 異なるアルゴリズム │ │
│ │ 表示するタブはあなたが選ぶ │ │
│ │ 誰でも新しいフィードを作れる │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
デザインの洞察： フィードタブはブラウザのタブやテレビのチャンネルと同じメンタルモデルを使っている。「切り替えれば違うコンテンツが見られる」ことをユーザーはすでに理解している。Blueskyはそのパターンをアルゴリズムに適用しただけである。
/* Feed tab bar: horizontal scroll with active indicator */
.feed-tabs {
display: flex;
overflow-x: auto;
scrollbar-width: none;
gap: 4px;
padding: 8px 16px;
border-bottom: 1px solid var(--border-color);
}
.feed-tabs::-webkit-scrollbar {
display: none;
}
.feed-tab {
flex-shrink: 0;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
background: transparent;
border: none;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.feed-tab:hover {
background: var(--hover-bg);
}
.feed-tab.active {
color: var(--text-primary);
font-weight: 600;
background: var(--active-bg);
}
/* Active indicator underline */
.feed-tab.active::after {
content: "";
display: block;
height: 3px;
background: var(--accent-blue);
border-radius: 1.5px;
margin-top: 6px;
}
2. 信頼シグナルとしてのドメインベースアイデンティティ
Blueskyのハンドルシステムでは、自分が管理するドメインをハンドルとして設定できる。ニューヨーク・タイムズのジャーナリストはjournalist.nytimes.comになれる。開発者はalice.devになれる。これにより、DNS — 目に見えないインターネットインフラ — を可視的な信頼シグナルに変えている。
ハンドルシステム
デフォルト: @alice.bsky.social
カスタムドメイン: @alice.dev
組織: @journalist.nytimes.com
@researcher.mit.edu
ユーザーに見える画面:
┌─────────────────────────────────────────────┐
│ ┌────┐ │
│ │ AV │ Alice Chen │
│ └────┘ @alice.dev │
│ ↑ │
│ ドメインそのものが認証。 │
│ 青いチェックマークは不要。 │
│ ドメインを管理していれば、 │
│ アイデンティティを所有している。 │
└─────────────────────────────────────────────┘
Twitter/Xの認証との比較:
- 月額8ドルでチェックマークを購入
- チェックマークは「支払い済み」を意味し「認証済み」ではない
- 暗号学的なアイデンティティ証明なし
- プラットフォームがチェックマークを管理
Blueskyの認証:
- ハンドルを自分のドメインに設定
- DNS TXTレコードで所有権を証明
- 支払いもプラットフォームの承認も不要
- 証明を自分で管理
デザインにとっての重要性： Blueskyは「認証バッジ」のデザイン問題を完全に排除した。ハンドルそのものが認証である。デザイナーはバッジの階層を作ったり、バッジの意味を説明したり、有料認証と実績認証の混乱に対処する必要がない。
3. ユーザーの選択としてのコンポーザブルモデレーション
単一のモデレーションチームがすべてのコンテンツ判断を下す代わりに、Blueskyではユーザーが異なる基準に基づいてコンテンツにタグ付けするモデレーションサービス（「ラベラー」と呼ばれる）を購読できる。
従来のモデレーション
プラットフォーム → 単一のポリシー → 全ユーザーに適用
ユーザーにできること: 「表示を減らす」/ 「ブロック」/ 「報告」
BLUESKYのコンポーザブルモデレーション
┌──────────────┐
│ Labeler: A │ → NSFWコンテンツにタグ付け
│ Labeler: B │ → 誤情報にタグ付け
│ Labeler: C │ → ネタバレにタグ付け
│ Labeler: D │ → コミュニティ固有のルール
└──────────────┘
↓
ユーザーが信頼するラベラーを購読
↓
購読したラベラーによりタグ付けされたコンテンツが
非表示 / 警告表示 / ラベル付きで表示
↓
ユーザーが制御: どのラベラーを使うか、どのアクションを取るか
設定UI:
┌─────────────────────────────────────────────┐
│ コンテンツモデレーション │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ Bluesky Moderation（デフォルト） │ │
│ │ ✓ 購読中 │ │
│ │ ラベル: NSFW、スパム、なりすまし │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ Science Community Labels │ │
│ │ ✓ 購読中 │ │
│ │ ラベル: 未検証の主張、プレプリント │ │
│ └─────────────────────────────────────┘ │
│ │
│ 各ラベルタイプに対して: │
│ [非表示] [警告] [表示] [無視] │
└─────────────────────────────────────────────┘
取り入れたいデザインパターン
フィードマーケットプレイスの発見体験
フィードマーケットプレイスは、Blueskyのプロトコルアーキテクチャがコンシューマー向け機能として具現化される場所である。ユーザーはアプリストアでアプリを探すように、フィードを閲覧し、プレビューし、ピン留めする。
フィードマーケットプレイス
┌─────────────────────────────────────────────┐
│ 新しいフィードを発見 [🔍] │
│ │
│ 人気のフィード │
│ ┌──────────────────────────┐ │
│ │ 🔬 Science │ │
│ │ 科学に関する投稿 │ │
│ │ by @science-feed.bsky │ │
│ │ ♥ 45.2K いいね │ │
│ │ [プレビュー] [+ 追加] │ │
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │
│ │ 🎨 Art Feed │ │
│ │ キュレーションされたアート │ │
│ │ by @art.bsky.social │ │
│ │ ♥ 32.1K いいね │ │
│ │ [プレビュー] [+ 追加] │ │
│ └──────────────────────────┘ │
│ │
│ カテゴリ: │
│ [ニュース] [テック] [アート] [科学] [スポーツ] │
└─────────────────────────────────────────────┘
デザイン上の決定： フィードカードには作成者のハンドル、ソーシャルプルーフとしてのいいね数、コミットする前のプレビューボタンが表示される。これはユーザーがすでに理解しているアプリストアのパターンを踏襲しており、新しい概念の認知コストを下げている。
/* Feed card in marketplace */
.feed-card {
padding: 16px;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--card-bg);
transition: box-shadow 0.15s ease;
}
.feed-card:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.feed-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.feed-card-avatar {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--accent-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.feed-card-meta {
font-size: 13px;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.feed-card-actions {
display: flex;
gap: 8px;
}
.btn-add-feed {
padding: 6px 16px;
border-radius: 20px;
background: var(--accent-blue);
color: white;
border: none;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.btn-preview {
padding: 6px 16px;
border-radius: 20px;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-color);
font-size: 13px;
cursor: pointer;
}
スレッドと引用ポストの会話デザイン
Blueskyのスレッド表示は、Twitterが完全には解決できなかったデザイン問題に対処している。読者の位置を見失うことなく会話のコンテキストを示すことである。リプライスレッドは接続線とともにインデントされ、引用ポストは明確な視覚的階層を持つ埋め込みカードとしてレンダリングされる。
/* Thread connector lines */
.thread-reply {
position: relative;
padding-left: 52px; /* avatar width + gap */
}
.thread-reply::before {
content: "";
position: absolute;
left: 20px; /* center of parent avatar */
top: -8px;
bottom: 0;
width: 2px;
background: var(--border-color);
}
/* Quote post embed */
.quote-embed {
margin-top: 8px;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--card-bg);
font-size: 14px;
}
.quote-embed-author {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 13px;
}
.quote-embed-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
}
.quote-embed-handle {
color: var(--text-tertiary);
}
総合評価
Blueskyは、プロトコルレベルのアーキテクチャがコンシューマー向けのデザイン機能になり得ることを証明した初めてのソーシャルネットワークである。プライマリナビゲーションとしてのフィード選択、信頼シグナルとしてのドメインハンドル、ユーザー設定としてのコンポーザブルモデレーションは、すべてAT Protocolの関心の分離から生まれたパターンである。デザインチームの功績はプロトコルそのものではなく、「アルゴリズムの選択」や「アイデンティティのポータビリティ」といった概念を、タブを切り替えるのと同じくらい自然に感じさせたことにある。デザイナーにとって、Blueskyが示しているのは、最も困難なUX問題はピクセルの話ではなく、目に見えないインフラを人間にとって読み取れるものにすることだということである。
学びのポイント： バックエンドアーキテクチャをUX機能として表出させる手法、抽象的な概念のためのマーケットプレイスパターン、バッジシステムなしの信頼シグナルデザイン、そして「許可」と「削除」の二項対立を超えたモデレーションUX。
よくある質問
BlueskyのフィードシステムはTwitterの「おすすめ」タブとどう違うのか？
Twitterは時系列タイムラインとともに一つの独自アルゴリズムを提供している。Blueskyでは誰でもフィードアルゴリズムを構築・公開でき、ユーザーは複数のフィードをタブとしてピン留めして切り替えられる。例えば「Following」（時系列）、「Science」（トピックフィルター）、「Quiet Posters」（投稿頻度の低いアカウントを浮上させる）、「What’s Hot」（トレンド）すべてをスワイプ可能なタブとしてアクセスできる。各フィードは異なる開発者やコミュニティによって構築されている。
DIDとは何か、なぜデザイナーが知るべきなのか？
DID（Decentralized Identifier）は、ユーザーがハンドルやサーバーを変更しても永続する恒久的なアイデンティティである。デザイナーにとって重要なのは、ドメインベースの認証（ハンドルがそのままドメインになる）、フォロワーを失わないサーバー移行、アプリ横断のアイデンティティといったパターンを可能にする点である。UXの課題はこれを目に見えなくすることだった — ユーザーがカスタムハンドルを設定すれば、暗号基盤を理解しなくても「そのまま動く」のである。
コンポーザブルモデレーションは実際にどう機能するのか？
ユーザーは「ラベラー」— NSFW、ネタバレ、誤情報などのラベルでコンテンツにタグ付けするサービス — を購読する。各ユーザーが信頼するラベラーと、ラベルごとのアクション（非表示、警告、表示）を制御する。これにより、保護者と研究者が同じプラットフォームを異なるコンテンツ境界で使え、どちらも「間違い」ではない。デザインの課題は、これを煩わしい作業ではなく好みの設定のように感じさせることだった。
Blueskyのフィードマーケットプレイスパターンはソーシャル以外のプロダクトにも応用できるか？
もちろんできる。コンテンツキュレーションを持つあらゆるプロダクト — ニュースアグリゲーター、EC、学習プラットフォーム、音楽サービス — がユーザー選択型のアルゴリズムを提供できる。Blueskyの重要なパターンは、アルゴリズムを隠れたインフラの決定ではなく、交換可能で可視的なコンポーネントとして扱うことである。ダッシュボードや分析ツールでさえ、同じタブベースの選択モデルを使って「自分向けにキュレーション」と「コミュニティで人気」のビューを切り替えられるようにできる。
Blueskyは新しいフィードのコールドスタート問題にどう対処しているか？
フィード作成者は、説明、プレビュー、いいね数とともにマーケットプレイスに公開リストとして登録できる。人気のフィードはいいね数や購読者数によるソーシャルプルーフを得る。新規ユーザーにはオンボーディング中に人気フィードやカテゴリに関連するフィードをハイライトした「フィードを発見」画面が表示される。プレビューボタンにより、追加する前にサンプルコンテンツを確認でき、質の低いフィードを追加するリスクを軽減している。