なぜ私たちのウェブサイトはOSのように見えるのか

• 多くの大規模な技術系ウェブサイトでは、複数のページを同時に参照しようとするとタブが増えすぎる問題が発生する
• PostHog.comも同様の問題を抱えており、これを解決するためにOSスタイルのUIを導入した
• 新しい構造では、マルチタスク、ウィンドウスナップ、キーボードショートカットなど、さまざまなインタラクション機能を提供する
• 視覚的階層とコンテンツの分離、JSONベースのコンテンツ管理、顧客データベースなどの技術的革新が適用されている
• 当初は慣れない面もあったが、開発体験と利用体験は前向きに変化し、柔軟性と拡張性を確保できた

---

問題意識: 技術系ウェブサイトのタブ過多

• 多くの大規模な技術系ウェブサイトでは、一度に複数のページを参照しようとすると CMD + クリックで新しいタブをいくつも開くことになる
• 同じファビコンと似たデザインのため、各タブを見分けるのが難しい
• PostHog.comもサービスの成長に伴って同じ問題を抱え始め、有料プロダクトの増加やページ数の増加によって識別しづらさがさらに深刻になった

代替案の模索とUIの革新

• 既存のマーケティングサイトやドキュメントサイトのスクロール中心のインターフェース、大きなフッター、過剰な余白に疑問を持った
• 意味のないスクロールを促すのではなく、より良いコンテンツ消費の方法が必要だと認識した
• これを解決するため、新しいPostHog.comではマルチタスク、複数の記事の同時閲覧、画面内での自由な移動ができるよう設計した

OSのように動作するサイト

• 新しいUIでは、ウィンドウスナップ、キーボードショートカット、ブックマークアプリなどの機能を実装した
• ブラウザ内のOSのように、複数の作業を同時にこなせる体験を提供する
• 例として、エンジニア向けニュースレターを見ながら、デモ動画を視聴し、ゲーム（ヘッジホッグモード）を同時に動かせる

初期適応とユーザー反応

• OSスタイルのインターフェースは、最初はやや見慣れない体験を与えることがある
• 従来のブラウザパターンから外れているため違和感を覚えることもあったが、繰り返し使ううちに慣れ、前向きに受け止められるようになった
• 社内の同僚たちからもこの新しい体験には好意的なフィードバックがあり、もはや従来のやり方には戻りにくいレベルに達した

構築プロセスと技術的ハイライト

• Eli KinseyとともにTypescript、TailwindベースでUIを設計・開発し、サイトを構築した
• 5年分のコンテンツを拡張可能に整理する方法を考案する過程で、さまざまな技術的アプローチを探った

主な技術ポイント

• 視覚的階層とコンテンツの分離

  • すべてのプロダクトページをJSONファイルベースでレンダリングする
  • JSONがページレイアウト、コンテンツの展開、機能ごとの競合比較、さまざまなテーマ（ライト/ダークモード）のスクリーンショットを直接制御する
  • 長期的には、この構造をPostHogアプリと共有するリポジトリへ移し、単一の情報源にする計画だ

• テーマとカラースキニング

  • ライトモードとダークモードを維持しつつ、主要・補助・第三の色など多様なテーマを調和させて適用する方法を検討した
  • これに関する経験は、今後別の記事で共有する予定だ

• リファレンス顧客データベース

  • コード内で単一の顧客レコードを定義し、プロダクトごとの利用状況、顧客の引用文、SVGロゴ（ライト/ダークモード対応）の情報を保存する
  • ページごとに異なるプロダクトに関連する引用文、名前、写真、会社ロゴを自動で読み込めるため、柔軟性を確保できる

開発手法とプロトタイピング

• TypescriptとTailwindでUIを実装しながら、サイト設計と開発を同時進行で進めた
• 新しいアイデアの創出や機能拡張がしやすい、本番環境内でのプロトタイピング方式を選択した
• 必要に応じてBalsamiqなど外部のモックアップツールも併用し、コンセプトを具体化した

結論と今後の改善方向

• 現在は初期のMVP段階にあたり、今後も多くの改善が必要な状況だ
• ユーザーがPostHog.comの新しいUXを楽しみ、サイト探索とともに面白さも感じてくれることを期待している
• サイトの動作原理に関する技術文書は別途提供している