世界を動かす技術を、日本語で。

私たちのウェブサイトはオペレーティングシステムのように見えます

2025年9月12日原文(posthog.com)

概要

  • PostHog.com の新しいサイト体験の背景と課題
  • タブの乱立 や従来のウェブデザインの問題点の指摘
  • OS風インターフェース 導入による新たなUXの提案
  • 技術的な工夫や 実装ポイント の紹介
  • 今後の展望とユーザーへの呼びかけ

技術系Webサイトにおける「タブ乱立」問題と従来デザインの課題

  • 技術系の 大規模Webサイト では、複数ページを同時参照したいニーズが高い現状

  • CMD + クリック で多数のタブが開き、全て同じfaviconで区別が困難な課題

  • PostHog.comも同様の問題を抱え、製品数増加に伴い 可読性・操作性の低下 が顕著

    • 長大なスクロール
    • 過剰なフッター
    • 不自然な余白
  • これらの従来型Webデザインは「下までスクロールさせる」ことが目的化し、 本来のコンテンツ消費体験を損なう傾向

新しいPostHog.comのUX設計と特徴

  • マルチタスク可能 なUI設計
    • 複数記事を同時に開き、自由にウィンドウ移動が可能
    • ウィンドウスナップ、キーボードショートカット、ブックマーク機能を搭載
  • OSライクな操作感 の実現
    • ウェブブラウザ上でOS並みの操作体験
    • ニュースレター閲覧、デモ動画視聴、ゲーム(Hedgehog Mode)同時進行が可能
  • 初見では 違和感 があるが、使い込むほどに快適さを実感
  • 開発者・チーム内でも高評価、従来のWeb体験には戻れない印象

サイト内のユニークなUI・機能例

  • Windows File Explorer風 のUIを兼ねたマーチストア
  • PowerPoint風 プロダクトページ
  • 実際に編集可能 なドキュメントエディタ
  • Outlook Express風 フォーラム
  • QuickTime風 メディアプレイヤー
  • スプレッドシート形式 の製品ページ
  • スクリーンセーバーやデスクトップ背景集
  • 豊富な キーボードショートカット

技術的ハイライトと運用ノウハウ

  • ビジュアル層とコンテンツ層の分離
    • 全てのプロダクトページは JSONファイル で管理
    • レイアウト、内容、比較表、スクリーンショット(ライト/ダーク両対応)をJSONで制御
    • 将来的にはアプリ本体と 情報ソースの共通化 を計画
  • テーマ・カラースキーム管理
    • ライト/ダークモードと複数アクセントカラーの調和を実現
  • リファレンス顧客データベース
    • 顧客ごとに利用製品、個別コメント、SVGロゴ(ライト/ダーク両対応)を一元管理
    • 任意の製品ページで 動的に引用・表示 可能
  • TypeScriptとTailwind によるUI構築
    • サイト全体は既存サイトのGitブランチとして実装、同一コードベースで運用
    • 本番環境でのプロトタイピング により、実用的な機能追加を実現
    • 必要時のみBalsamiqでアイデアを補完

今後の展望とユーザーへのメッセージ

  • 現時点では MVP的な段階、今後も継続的な改善を予定
  • ユーザーには 好奇心を持って新しい体験を楽しんでほしい 旨を強調
  • サイトの技術的詳細に興味があれば、 さらなる情報提供 も予定

PostHog.com の新しいOS風Web体験は、従来型のWebサイトが抱える多くの課題を解決し、より直感的かつ効率的な情報消費を実現する試み。今後も進化が期待される。

Hackerたちの意見

「マルチドキュメントインターフェース」って昔呼ばれてたやつ、ずっとアンチパターンだと思ってる。いいウィンドウマネージャーがあるのに、なんでどのアプリも自分専用の互換性のない、しかも大体劣ったウィンドウマネージャーを内蔵しなきゃいけないの?(モバイルでは、正直なところ、いいウィンドウマネージャーがないし、ほとんどのアプリの複数インスタンスも開けないんだけど…)

長年のMacユーザーとして、MDIはアプリごとにウィンドウを管理できないOSの穴埋めみたいに感じてる(例えば、特定のアプリに属するウィンドウを全部隠したり、別のデスクトップに移動したりできること)。macOSではすごく違和感があるし、PhotoshopもCS4あたりで突然MDIタイプのUIを導入したけど、Photoshopが登場して以来ウィンドウやパレットが自由に動いてたのに。いつもオフにしちゃう、なんか圧迫感があるんだよね。

火に油を注ぐようだけど、これがずっとtmuxに対する自分の気持ち。優れたOSのウィンドウシステムで管理された複数のターミナルウィンドウを開けるのに、なぜ不完全なターミナルウィンドウシステムを使う必要があるの?(とはいえ、tmuxが唯一の選択肢の時もあるから、その時は納得できるけどね)

「なんでどのアプリも自分専用の互換性のない、しかも大体劣ったウィンドウマネージャーを内蔵しなきゃいけないの?」 自分で答えを出してるよ。多くのアプリが複数のプラットフォームで動くから、OSのウィンドウマネージャーの機能がわからないと、体験をコントロールするためには抽象化する必要があるんだ。

「Gimp」の体験と比べると、1つのウィンドウに収まってる方が好きだな。そうじゃないと、2つか3つのアプリを同時に動かすと「ウィンドウどこだっけ?」ってゲームになっちゃうし。ツールバーが別のウィンドウになるのは嫌だな。

問題は、ほとんどのOSのウィンドウマネージャーが、小さなウィンドウをたくさん画面に表示するのを最適化してないことだと思う。アートソフトやCADソフトのカスタムウィンドウマネージャーはそういうのが得意なのにね。主にタイトルバーがどれだけスペースを取るか、無駄にするかの問題だよ。

MS WindowsのMDIはOSの一部だと思ってたんだけど、実行時に変更できるプログラムもあるんだね。正直、これは結構すごいと思う。

「私は完璧なウィンドウマネージャーを持っているのに、なぜすべてのアプリが独自の互換性のない、通常は劣ったウィンドウマネージャーを内蔵する必要があるのか?」 確かに、アプリによっては同じアプリケーションコンテキスト内で複数のウィンドウが必要な場合もあるよね。画像編集ソフトなんかがその例だと思う。ほとんどの一般的なMDI実装(Win32やQtなど)は、正直言ってかなりシンプルすぎるのが残念だよ。例えばKritaを使ってるときに、複数のウィンドウを表示したいんだけど、QtのMDIサポート(Kritaが使ってるやつ)はWindows 95よりも劣ってるんだよね。

ほとんどのUNIXコマンドは、出力を列、テーブル、リスト、ファイル、TTY(エマックスやスクリーン、他のカースベースのユーティリティなど)にフォーマットする独自の方法があるんだよね。ls だってテーブル形式のロジックがあるし。これでUNIXのネイティブな抽象化は比較的シンプルに保たれてる。全てが「ただのテキスト」だから。でも、エコシステムはかなり豊かで、各ユーティリティには実際に多くの異なる要件があるんだよね。もしそれが避けられたら、「ただのテキスト」の上に他の抽象化が現れてたかもしれないけど、そういうのも見かけないよね。

このウェブサイト、めっちゃ好き。ありふれたSaaSマーケティングサイトの中で際立ってる。でも、この記事で説明されてるように使う人はいないと思う。サイト特有のウィンドウ管理を覚えて使うほど、誰もこのサイトを使わないよ。

これが私の反応。めっちゃ印象的。楽しい。会社の理念をうまく売り込んでる。でも、実際にはあんまり使えないかな。まあ、これがあんまり重要じゃないと思うけど。

うーん、UXはすごく自明だと思うな。しかも楽しいし。こういう製品はすぐに離れちゃうことが多いけど、これは5~10分くらいはじっくり見ちゃったよ。

Hacker Newsで議論の続きを見る