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

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

概要

  • 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分くらいはじっくり見ちゃったよ。

私もそう思う、すごくいいよね:) でもHNのコメントの大半はあんまり好きじゃないみたいだね。

いい感じだけど、動きが遅い。いくつか開いてウィンドウを動かそうとしたら…静的に生成されたウェブページの方がマシだわ。もしマルチウィンドウのウェブページみたいなものを作るなら、ちゃんとしたものを作ってほしい。昔はこれ、SEO的に大問題だったからね。検索エンジンがコンテンツを効率よくインデックスして、検索結果で上位に表示されるためには良いSEOが必要だった…今は、もうその船は出航して、どこか西海岸で沈んじゃったけど。

SEOはドキュメントのことだった。今はみんなゲームを作りたいって。ゲームはどうやってランク付けするの?

どんなものを使ってるの?パフォーマンスの問題が出てるのは。最初のウィンドウで遊んでるときは夢のようにサクサク動くよ。2つ目のウィンドウを開いて動かすと一瞬カクつくけど、その後はフルスピードに戻るし、その後のウィンドウもフルスピードだよ。(ブラウザが「おっと、ほんとに毎フレームその機能使ってるんだね。最適化するから、次回の実行のためにできるだけ早くするよ」って感じかな)

法律で必要なクッキーバナー > PostHog.comはサードパーティのクッキーを使ってないし、社内のクッキーだけだよ。君はそのクッキーをオプトアウトする権利があるんだ。サイトの機能に必須じゃない限り、バナーは必要ないはずだよ。

ログインシステムがあるから、クッキーにはログイン情報(多分JWT形式)が含まれてるんじゃないかな。これがサイトの機能に必須ってことになるよね。だからバナーがあるのは、もしなかったら「クッキーバナーどこ?」って言われるからなんだよね。つまり、実際には法律で必要ってわけじゃないけど、実質的には必要なんだ。バナーがないと法律違反じゃないってことをみんなに知らせるためにね。

その通り。もし本当にクッキーを必須機能のためだけに使ってるなら、こういうジョークバナーは訪問者のプライバシーを尊重する選択を逆にイライラさせるだけだよね。もっと悪いのは、EUの法律がただの迷惑行為に見えるから、実際には悪質なサイトが訪問者を監視する権利を主張してるってこと。ほんとに驚きだよ。

2025年だってのに、まだクッキーを視覚的にオプトアウトしたいの?なんでそれを自動でやってくれるブラウザがないんだろうね。

どの国がクッキーに対してバナーを強制しているのか、ちょっと気になるな。EUはトラッキングクッキーに対してだけ要求してるし、このサイトではその目的で使われてるかどうかも明記されてないしね。自分も「必要だから」という理由でクッキーバナーを作ったことあるけど、実際にはクッキーなんて使ってなかったりする。全てのウェブサイトにクッキーバナーが必要だって考え方の方が、クッキーバナーそのものよりも厄介だよね。

もしかして、サードパーティのクッキーがない場合はバナーを表示する必要がないって知らなかったのかな?それとも、サードパーティのクッキーを使ってないって自慢したいだけなのか?

法律は地域によって異なるからね。自分で収集したデータに識別情報が含まれている場合、GDPRみたいな法律は収集する前にインフォームドコンセントを得ることを求めてくるし、データ削除の方法も提供しなきゃいけないし、その他もろもろがあるんだ。

どこにもクッキーが保存されてるのは見当たらないな。ただ、localStorageに4つの変数があるのは見たけど。デモを開くとYouTubeも埋め込まれてて、ユーザーを追跡してるし(そう、クッキーなしのサブドメインでもね: https://dustinwhisman.com/writing/youtube-nocookie-com-will-...)。ウルズラ・フォン・デア・ライエンはあまり誇りに思わないだろうね。

サイトの機能に不可欠でない限り、バナーは全く必要ないよ。いや、これは「GDPRの同意」とePrivacy指令を混同してる。ePDによると、サービスを提供する会社がEUに拠点を置いている場合、バナーは常に表示されなきゃいけないんだ。

法律で、そのクッキーをオプトアウトさせる必要があるんだよね。サイトの機能に必須じゃない限り、バナーなんて必要ないはず。もっとシンプルに言うと、追跡に使われないクッキーならバナーはいらないんじゃない?例えば、ソート順を記憶するためのクッキーは、クッキーバナーを必要としないと思う。(クッキーの話じゃなくて、追跡の話なんだ。)

言葉がうまく見つからないけど、頑張ってみるね:あなたは素晴らしい仕事をしました。ウェブ開発に何年も携わってきて、悪いUIにいつもイライラしてた私としては、これは本当に素晴らしいです。見た目もすごくクリーンで構造的で、ただの「見た目」だけじゃなくて、使ってみたときの「感じ」も、今まで試した「ブラウザ風OS」ページの中で一番近いと思う(たくさん試したけど…)。唯一足りなかったのは、背景を右クリックしたときにコンテキストメニューに「リフレッシュ」がなかったことかな。確かに役に立つ効果はないけど、デスクトップを使ってる感じが100%満たされると思った:D だから、要するに:素晴らしい仕事、素晴らしいウェブサイトだね!

あなたのためにリフレッシュボタンを考えてみるよ。優しい言葉をありがとう。

これが今のデザインと比べてすごく魅力的に感じる理由は、心理学者や認知科学者、神経学者が答えるべきことかもしれないね。ソフトウェア業界が急いで書いたブログ記事よりも、もっと深く研究されるべき何かがあると思う。でも、少なくとも一つの側面については話せるよ。高級ウェブサイトや大規模なSaaS製品の戦略を扱う会社で働いていて、そういうウェブサイトのターゲットオーディエンス(ディレクターやVPエンジニア)でもあるからね。トップナビゲーションメニューを使って、欲しいものを見つけるスピードと簡単さは、今まで見た中で最高だと思う。すぐに34個の製品が7つのカテゴリーに分かれているのがわかったし、5つは人気、4つは新しいものだった。試してみたい場合は:Docs > Product OS > Integration > Install and configure > Install PostHog。エンジニアリングについて少し学びたいなら:Company > Handbook > Engineering > Internal Processes > Bug prioritization。価格については:Pricing calculator > select product > set usage, select addons。これらのやり取りはすべて数秒で済んだし、以前開いた製品概要ページと今開いた価格ページの間を、ウェブサイト全体が再読み込みされることなく切り替えられたよ(右クリックして新しいタブで開いてスクロールする必要もなかった)。言ったように、見た目だけじゃない何かがここにはあるんだ。もしかしたら、現在のUI/UX哲学が知らず知らずのうちにユーザーにとって敵対的になってしまったのかもしれないね。

確か、彼らはほとんどすべてを同じCMSに統合していて、特にディスカッションやヘルプフォーラムがメインサイトに組み込まれているんだ。私にとっては、過去に似たような仕事をしてきたからこそ、その違いがわかる。彼らはフロントページのコンテンツを一元的に管理しているんだよ。ページの上部に誰がどれだけ目立つかを競い合うような、12のグループがあるわけじゃないし、各部門のサブドメインに誘導するためのポータルでもない。こういうウェブサイトを作るには、そのCMSがすべてを統一している必要があると思うし、そういうCMSを持つには、組織的に意図的にそうする必要があると思う。どの組織でも、VPたちが支配する広がりのある封建的な状態になりがちだからね。

これはHNで見つけるには驚きの意見だね。通常、JavaScriptに少しでも重いものが含まれていると、悪いデザインで使えない、移植性がないっていうのが一般的な考え方だから。これが基本的にJavaScriptの最大主義だとは。

自分が欲しいものをそのトップナビゲーションメニューで見つけるスピードと簡単さは、今まで見た中で最高だよ。ウェブがまた過去に追いついてきたね。:-) すべての現代的な「楽しい」インターフェースの試みにもかかわらず、しっかりしたメニューバーはやっぱり最高だね。

デザインは見た目が好きだけど、メニューに何が革新的なの?

この感覚を一般化するのはちょっと慎重になった方がいいと思う。私には、そのインターフェースは daunting で、認知的に負担が大きい感じがする。CLIやコマンドパレットと比べるとね。

ほぼ完璧。インスピレーションを受けるね。ただ、何もクリックしない時にドラッグできる小さなボックスを作る必要があったかな、OSのデスクトップみたいに。だから、これをコンソールに投げ込んで夢を叶えてみて: (() => { let startX, startY, box, dragging = false; const style = document.createElement('style'); style.textContent = .___selection-box { position: absolute; pointer-events: none; border: 1px dashed #2b76d6; background: rgba(43,118,214,0.12); z-index: 999999; }; document.head.appendChild(style); function onDown(e) { if (e.button !== 0) return; // 左クリックのみ startX = e.pageX; startY = e.pageY; dragging = true; box = document.createElement('div'); box.className = '___selection-box'; box.style.left = startX + 'px'; box.style.top = startY + 'px'; document.body.appendChild(box); e.preventDefault(); } function onMove(e) { if (!dragging) return; const x = e.pageX, y = e.pageY; const left = Math.min(x, startX); const top = Math.min(y, startY); const width = Math.abs(x - startX); const height = Math.abs(y - startY); Object.assign(box.style, { left: left + 'px', top: top + 'px', width: width + 'px', height: height + 'px' }); } function onUp(e) { if (!dragging) return; dragging = false; console.log('選択矩形:', box.getBoundingClientRect()); box.remove(); box = null; } window.addEventListener('mousedown', onDown); window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); console.log("選択が有効になりました。左クリックでドラッグしてね。矩形はコンソールで確認してね。"); })();

いいアイデアだし、実装も素晴らしいけど、お願いだからやめて。新しいUIとUXを学ばなきゃいけないし、ウィンドウの中にウィンドウを整理しなきゃならない。ウェブサイトは、超 fancy なインターフェースよりも、テキストの塊みたいな方がいいな。

もう A/B テストを実施したのかな、それともまだやってるのかな。もし実施して、これが前のデザインよりも成功したら、ウェブサイトデザインについての考え方が大きく変わるね。

最近、彼らのウェブサイトでドキュメントを探さなきゃいけなくて、すごくバカらしくてイライラした。サービスを使いたいと思わせるものじゃなかった。確かに、OSのようなインターフェースは本当に印象的でスリムだけど、それを使うのは簡単なドキュメントページが欲しい時には最悪だった。同時に、彼らのドキュメントもひどいし…だから、すごく時間をかけてこのウェブサイトを開発したんじゃなくて、製品やドキュメントを改善する方に時間を使ってほしかったな。