Superhuman

「私たちは単なるメールクライアントを作っているのではない。スピードそのものが製品となる体験を作っているのだ。」

哲学

Superhumanは一つの執念を体現している：コア機能としてのスピード。50msの応答時間からキーボードファーストのナビゲーションまで、すべてのデザイン決定がこの唯一のビジョンに奉仕している。その結果、操作するツールではなく、思考の延長のように感じられるメールクライアントが生まれました。

創業者たちは、生産性ソフトウェアにゲームデザインの原則を適用しました：ストーリー（あなたはメールを征服するヒーロー）、美学（美しく、ミニマル）、メカニクス（ゲームプレイとしてのキーボードショートカット）、そしてテクノロジー（徹底したパフォーマンス最適化）。

重要なポイント

真の目標は100msではなく50ms - Superhumanは公式には100msを閾値として掲げていますが、内部では50〜60msを目標にしています。「速い」と「思考のように感じる」の違いは知覚可能です
コマンドパレットはユーザーを卒業させる - Cmd+Kを使うたびにキーボードショートカットを表示することで、数回使用後には筋肉記憶が引き継ぎ、パレットが不要になります
Vimナビゲーションパターンは実証済み - 垂直移動にJ/K、水平移動にH/Lを使うことで、パワーユーザーが数十年のエディタ使用で既に知っている空間的メンタルモデルが形成されます
オンボーディングは説明ではなく練習 - Superhumanの30分間の1対1セッションでは、合成メールを使って筋肉記憶を訓練します。ユーザーはデモを見るのではなく、習慣を身につけます
スピードにはオプティミスティックUIが不可欠 - アクションはサーバー確認前に視覚的に完了します。セーフティネットはローディングスピナーではなく、取り消し機能です

パターンライブラリ

100msルール（実際は50〜60ms）

Superhumanの有名な「100msルール」は、実際には内部でより厳しく設定されています。研究によると、体感レスポンスは100msを超えると著しく低下するため、Superhumanはすべてのインタラクションで50〜60msを目標としています。

// パフォーマンスバジェット定数
const PERFORMANCE_TARGETS = {
  // 内部目標（Superhumanが実際に目指す値）
  keyRepeatRate: 65,        // ms - macOSデフォルト（100ms）より高速
  actionResponse: 50,       // ms - アーカイブ、送信、移動
  searchResults: 100,       // ms - 最初の結果が表示されるまで
  composeOpen: 60,          // ms - 新規作成ウィンドウ

  // ユーザー知覚の閾値（研究に基づく）
  instantaneous: 100,       // 瞬時に感じる
  responsive: 300,          // まだレスポンシブに感じる
  noticeable: 1000,         // ユーザーが遅延を認識する
} as const;

// 楽観的UIパターン - サーバー確認前にアクションが完了
function archiveEmail(emailId: string) {
  // 1. UIを即座に更新（体感0ms）
  removeFromList(emailId);
  showUndoToast();

  // 2. 次のメールにフォーカスを移動（キーボード操作の流れを中断しない）
  focusNextEmail();

  // 3. サーバー同期はバックグラウンドで行われる
  syncQueue.add({ action: 'archive', emailId });
}

デザインの洞察：キーリピートレートはmacOSデフォルトの100msに対して65msに設定されています。この速いレートにより、j/kを押し続けてメールをスクロールする操作が顕著に速くなります。

トレーニングホイールとしてのコマンドパレット

Cmd+Kコマンドパレットは、キーボードショートカットを段階的に教えるトレーニングシステムとしても機能します。

interface CommandPaletteResult {
  action: string;
  shortcut?: string;
  description: string;
}

function CommandPalette({ query }: { query: string }) {
  const results = searchCommands(query);

  return (
    <div className="command-palette">
      {results.map(result => (
        <div className="command-row" key={result.action}>
          <span className="command-name">{result.action}</span>
          <span className="command-description">{result.description}</span>

          {/* 学習のポイント：常にショートカットを表示 */}
          {result.shortcut && (
            <kbd className="command-shortcut">{result.shortcut}</kbd>
          )}
        </div>
      ))}

      {/* 選択後のさりげない補強 */}
      <div className="palette-footer">
        ヒント: 次回は <kbd>{selectedResult?.shortcut}</kbd> を試してみてください
      </div>
    </div>
  );
}

// 利用状況の追跡がトレーニング効果を示す
const ONBOARDING_IMPACT = {
  shortcutUsage: '+20%',      // 30分のオンボーディング後
  reminderUsage: '+67%',      // 機能の採用率
  week1Activation: '+17%',    // リテンション指標
};

デザインの洞察：Cmd+Kでコマンドを検索するたびに、そのショートカットが表示されます。数回使用すると、マッスルメモリーが定着し、そのアクションにはパレットを使わなくなります。

Split Inbox アーキテクチャ

SuperhumanのSplit Inboxは、メールを3〜7つの集中したストリームに自動分類し、統合受信トレイの認知負荷を軽減します。

interface InboxSplit {
  id: string;
  name: string;
  filter: EmailFilter;
  position: number;
  color: string;
}

const DEFAULT_SPLITS: InboxSplit[] = [
  {
    id: 'important',
    name: '重要',
    filter: { from: 'vip-list', or: { hasReply: true } },
    position: 0,
    color: 'blue'
  },
  {
    id: 'team',
    name: 'チーム',
    filter: { domain: 'company.com' },
    position: 1,
    color: 'green'
  },
  {
    id: 'calendar',
    name: 'カレンダー',
    filter: { from: ['[email protected]'] },
    position: 2,
    color: 'purple'
  },
  {
    id: 'news',
    name: 'ニュース＆更新情報',
    filter: { category: 'newsletter' },
    position: 3,
    color: 'orange'
  },
  {
    id: 'other',
    name: 'その他',
    filter: { default: true },
    position: 4,
    color: 'gray'
  }
];

// H/Lキーによるナビゲーション
function SplitNavigation({ splits, activeSplit, onSelect }) {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'h' || e.key === 'H') {
      // 前のスプリット
      const prev = splits[Math.max(0, activeSplit - 1)];
      onSelect(prev);
    }
    if (e.key === 'l' || e.key === 'L') {
      // 次のスプリット
      const next = splits[Math.min(splits.length - 1, activeSplit + 1)];
      onSelect(next);
    }
  };

  return (
    <nav className="split-tabs">
      {splits.map((split, i) => (
        <button
          key={split.id}
          className={`split-tab ${i === activeSplit ? 'active' : ''}`}
          style={{ '--accent': split.color }}
        >
          {split.name}
          <span className="unread-count">{getUnreadCount(split)}</span>
        </button>
      ))}
    </nav>
  );
}

デザインの洞察：スプリットではvim風のH/Lナビゲーション（左/右）を使用し、J/Kはスプリット内のナビゲーション（上/下）に使用します。空間モデルは一貫しています。

キーボードファーストデザイン

100以上のキーボードショートカットを備え、Superhumanはキーボードを主要な入力デバイスとして扱っています。

// コアナビゲーションショートカット（vim風）
const NAVIGATION_SHORTCUTS = {
  // メールリスト
  'j': 'next-email',
  'k': 'previous-email',
  'o': 'open-email',
  'u': 'go-back',

  // スプリットナビゲーション
  'h': 'previous-split',
  'l': 'next-split',

  // アクション
  'e': 'archive',
  '#': 'trash',
  'r': 'reply',
  'a': 'reply-all',
  'f': 'forward',
  'c': 'compose',

  // パワー機能
  'Cmd+k': 'command-palette',
  'Cmd+/': 'shortcuts-help',
  '/': 'search',
  'z': 'undo',
};

// すべてのキー入力に視覚的フィードバック
function KeypressIndicator({ lastKey }: { lastKey: string }) {
  return (
    <div className="keypress-toast" role="status">
      <kbd>{lastKey}</kbd>
      <span>{getActionName(lastKey)}</span>
    </div>
  );
}

// 遅延ゼロのアクションフィードバック
function handleArchive() {
  // 触覚的な視覚フィードバック
  animateEmailOut('slide-right', { duration: 150 });

  // 次のメールに即座にフォーカス
  focusNextEmail();

  // 取り消しトーストを表示
  showToast({
    message: 'アーカイブ済み',
    action: { label: '取り消し', shortcut: 'z' }
  });
}

デザインの洞察：アクションにはアニメーション遅延がありません。Eを押すと、メールは即座に消えます。アニメーションは視覚的な完了感のためであり、ブロッキング操作ではありません。

ホワイトグローブ・オンボーディング

Superhumanの有名な30分間の1対1オンボーディングセッションは、説明ではなく実践を通じてマッスルメモリーを形成します。

interface OnboardingSession {
  duration: '30-minutes';
  format: '1:1-video-call';
  structure: OnboardingPhase[];
}

const ONBOARDING_PHASES: OnboardingPhase[] = [
  {
    name: 'シンセティック受信箱',
    duration: '10分',
    description: '実際の受信箱に触れる前にダミーメールで練習',
    exercises: [
      'Eキーで10件のメールをアーカイブ',
      'Rキーで3件のメールに返信',
      'J/Kキーで移動',
      'Cmd+Kでコマンドを検索'
    ]
  },
  {
    name: 'スプリット設定',
    duration: '10分',
    description: 'ワークフローに合わせてスプリットを設定',
    exercises: [
      '重要な連絡先用のVIPスプリットを作成',
      '仕事用ドメイン向けのチームスプリットを設定',
      'H/Lでスプリット間を移動'
    ]
  },
  {
    name: 'パワー機能',
    duration: '10分',
    description: '高度な機能の紹介',
    exercises: [
      'Cmd+Shift+Enterで送信予約',
      'Hキーでメールをスヌーズ',
      'Cmd+Shift+Rでリマインダーを設定'
    ]
  }
];

// オンボーディング効果指標
const ONBOARDING_RESULTS = {
  shortcutUsageIncrease: 0.20,    // +20%
  reminderFeatureAdoption: 0.67,  // +67%
  week1ActivationLift: 0.17,      // +17%
  npsScore: 70,                    // 業界トップクラス
};

デザインの洞察：シンセティック受信箱により、ユーザーはリスクゼロの練習で筋肉記憶を構築できます。実際のメールに触れる頃には、ショートカットはすでに自動的に使えるようになっています。

ビジュアルデザインシステム

タイポグラフィ：Messinaファミリー

SuperhumanはLuzi TypeのMessinaフォントファミリーを使用しています。これはサンセリフ、セリフ、モノスペースが統一されたシステムです。

:root {
  /* Messina Sans - プライマリUI */
  --font-sans: 'Messina Sans', -apple-system, sans-serif;

  /* Messina Serif - メール本文、長文用 */
  --font-serif: 'Messina Serif', Georgia, serif;

  /* Messina Mono - コード、タイムスタンプ、メタデータ */
  --font-mono: 'Messina Mono', 'SF Mono', monospace;

  /* タイプスケール - スキャン用に最適化 */
  --text-xs: 11px;    /* タイムスタンプ、メタデータ */
  --text-sm: 12px;    /* 補足情報 */
  --text-base: 14px;  /* メインUIテキスト */
  --text-lg: 16px;    /* メール本文 */
  --text-xl: 18px;    /* メール件名 */
}

/* メールリスト：高速スキャンに最適化 */
.email-row {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.4;
}

.email-subject {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;  /* 見出し用にタイトに */
}

.email-sender {
  font-weight: 600;
  color: var(--text-primary);
}

.email-preview {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

カラーシステム：ミニマルなクローム

Superhumanは色を控えめに使用し、主にステータスとフォーカスのために使い、装飾には決して使いません。

:root {
  /* ニュートラルな基盤 */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #ebebeb;

  /* テキスト階層 */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;

  /* アクセント: インタラクティブ要素にブルー、プレミアム要素にパープル */
  --accent-primary: #0066ff;
  --accent-secondary: #7c3aed;

  /* ステータスカラー */
  --status-unread: #0066ff;
  --status-starred: #f59e0b;
  --status-snoozed: #8b5cf6;

  /* フォーカス状態 - 高コントラスト */
  --focus-ring: 0 0 0 2px var(--accent-primary);
}

/* 未読メール：控えめながら明確な区別 */
.email-row[data-unread="true"] {
  background: linear-gradient(
    to right,
    var(--accent-primary) 3px,
    var(--bg-primary) 3px
  );
}

.email-row[data-unread="true"] .email-sender {
  font-weight: 700;  /* 未読メールはより太く */
}

アニメーションパターン

即座のアクション、滑らかなトランジション

アクションは即座に完了し、アニメーションはブロックせずに視覚的な完結感を提供します。

/* メールのアーカイブ：即座に削除、滑らかな視覚効果 */
.email-row.archiving {
  animation: slide-out-right 150ms ease-out forwards;
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100px);
    opacity: 0;
  }
}

/* 次のメールが上にスライドして隙間を埋める */
.email-row.moving-up {
  animation: slide-up 150ms ease-out;
}

@keyframes slide-up {
  from {
    transform: translateY(var(--row-height));
  }
  to {
    transform: translateY(0);
  }
}

/* コマンドパレット：キビキビしたスプリング */
.command-palette {
  animation: palette-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes palette-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

アンドゥトーストパターン

function UndoToast({ action, onUndo }: { action: string; onUndo: () => void }) {
  const [timeLeft, setTimeLeft] = useState(5);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(t => {
        if (t <= 1) {
          clearInterval(timer);
          return 0;
        }
        return t - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="undo-toast">
      <span>{action}</span>
      <button onClick={onUndo}>
        元に戻す <kbd>Z</kbd>
      </button>
      <div
        className="toast-timer"
        style={{ '--progress': timeLeft / 5 }}
      />
    </div>
  );
}

学んだ教訓

1. スピードは機能である

パフォーマンスは技術的な要件ではありません—それが製品そのものなのです。ソフトウェアを使う際の感情的な体験はレスポンスの速さによって形作られるため、1ミリ秒たりとも無駄にはできません。

2. 段階的トレーニングとしてのコマンドパレット

コマンドパレットを単に機能を公開するためだけに使ってはいけません。ショートカットを教えるために活用しましょう。毎回キーボードショートカットを表示することで、ユーザーは自然と直接呼び出しへと成長していきます。

3. キーボードファーストはVimにインスパイアされている

vimのj/k/h/lナビゲーションパターンは、パワーユーザーにとって実証済みのメンタルモデルを提供します。この規約との一貫性は、開発者やパワーユーザーの学習曲線を緩やかにします。

4. オンボーディングは説明ではなく実践

30分間の1対1セッションでは機能を説明しません。筋肉記憶を訓練するのです。ユーザーはショートカットが自動的に身につくまで、合成データを使って練習します。

5. 楽観的UIはスピードに不可欠

サーバーの確認を待つことは、スピードの幻想を壊してしまいます。アクションはサーバーが応答する前に視覚的に完了し、取り消し機能がセーフティネットとなる必要があります。

6. スプリットは認知負荷を軽減する

統合された受信トレイは、絶え間ないコンテキストスイッチを強いられます。事前に分類されたスプリットにより、ユーザーは異なるメンタルモードに切り替え、類似したメールをまとめて処理できます。

よくある質問

Superhumanの「100msルール」とは何か、なぜ実際には50msを目標にしているのか？

Superhumanは公式には100msルール（インタラクションが瞬時に感じられる閾値）を提唱しています。しかし、内部的にはすべてのアクションで50〜60msを目標にしています。50msと100msの差は知覚可能です。50msはアクションが完了する前にインターフェースが応答したように感じられ、100msは単に「速い」と感じるだけです。この積極的な目標値は、知覚される応答性に関するゲームデザイン研究から来ています。

Superhumanのコマンドパレットはどのようにユーザーにキーボードショートカットを学習させるのか？

Cmd+Kでコマンドを検索するたびに、パレットはその横にキーボードショートカットを表示します。これにより受動的な学習が生まれます。暗記しようとしなくても、ショートカット（例：アーカイブの「E」）を繰り返し目にするのです。数回使用すると、マッスルメモリーが形成され、パレットを開く代わりに自然とEを直接押すようになります。パレットは本質的に、パワーユーザーにとって自らを不要にする仕組みなのです。

Vimのナビゲーションパターン（上下移動のJ/K、左右移動のH/L）は、指がホームローウに置かれた状態での空間的なメンタルモデルを作り出します。数百万人の開発者がコードエディタからこれらのキーを既に知っています。 Superhumanはこれをメールに拡張しています：J/Kでリスト内のメール間を移動し、H/Lで受信トレイのスプリット間を移動します。この一貫性により、パワーユーザーはキーボードを見ることなく、思考の速度でナビゲートできます。

Superhumanの30分間のオンボーディングセッションでは何が行われるのか？

オンボーディング担当者は機能を説明するのではなく、マッスルメモリーを鍛えます。ユーザーは偽のメールが入った合成受信トレイで練習し、Eで10通のメールをアーカイブし、Rで返信し、J/Kでナビゲートします。ショートカットが半自動的になって初めて、実際の受信トレイに触れます。この練習優先のアプローチにより、自己学習型オンボーディングと比較して、ショートカットの使用率が20%、機能の採用率が67%向上します。

Superhumanはサーバー同期を伴いながら、どのようにして瞬時に感じられるアクションを実現しているのか？

Superhumanはオプティミスティック UIを使用しています：Eを押してアーカイブすると、メールは即座に消え、フォーカスが次のメッセージに移動します。サーバー同期はバックグラウンドで行われます。同期が失敗した場合（稀ですが）、メールはエラーとともに再表示されます。「Z」ショートカット付きの取り消しトーストがセーフティネットを提供します。このパターンにより、実際の操作がサーバー上で完了するまでに数百ミリ秒かかるにもかかわらず、ユーザーにとって知覚できる遅延はゼロになります。

参考文献

Superhuman デザイン哲学プレゼンテーション
Rahul Vohra（CEO）のプロダクトデザインに関するインタビュー
生産性ソフトウェアに適用されたゲームデザイン
パフォーマンス最適化のケーススタディ
オンボーディングの効果指標とユーザーリサーチ

Superhuman：スピードこそが製品