概要
- 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サイトが抱える多くの課題を解決し、より直感的かつ効率的な情報消費を実現する試み。今後も進化が期待される。