Jordan B Vidrine
Oct 23, 2025 • 9 min read
Horizonは、管理者が余分な手間をかけることなく、コミュニティに優れたユーザーエクスペリエンスを提供するために設計された、シンプルで美しいテーマです。
ほとんどのオープンソースソフトウェア組織と同様に、Discourseは当初、主にエンジニアリング主導で運営されていました。コアデベロッパーたちはデザイン作業のために2人のデザイナーと契約する以前に、機能の多くを構築していました。やがて、Discourseの最初のリリースからほぼ4年後となる2017年に、フルタイムのデザイナーが採用されました。デザイナーやプロダクトマネージャーを増員するにつれ、機能はエンジニア、プロダクトマネージャー、デザイナーで構成されるプロダクトチームの体制を中心に開発されるようになりました。デザイナーは特定のチームに所属しながらも、より大きなデザインチームのメンバーであり続けました。Peter Merholzはこの構造を「Centralized Partnership（集中型パートナーシップ）」と呼んでいます。
時を経て、Discourseはデザインチームが組織全体にもたらす影響力と思考を高く評価するようになりました。そのため、デザインチームが最大のプロジェクトの一つであるHorizonという新しいテーマの作成をリードすることが決まったときは、非常に興奮しました。この名前は、Discourseを利用できる人々やDiscourseコミュニティの可能性についての、より広い視野を表したいという私たちの希望を反映しています。
Horizonの対象ユーザーとその必要性
お客様へのインタビューを通じて、Discourseのデザインは全般的に「魅力に欠ける」と認識されており、技術的な知識を持たないユーザーがDiscourseによって最も恩恵を受けられていないことがわかりました。こうしたユーザーには、デフォルトの外観を変更するためのスキルやリソースがありませんでした。私たちはこの情報を活用して、テーマの対象とする2つのペルソナを定義しました。
- 小規模なソフトウェア会社における、技術的な知識を持たないサイト管理者
- 教育者のための実践コミュニティにおける、一般的なメンバー
私たちは技術的な知識を持たないサイト管理者に対して、追加のカスタマイズを必要とせずに、すぐに優れたエクスペリエンスを提供したいと考えました。一般的なメンバーは、技術的に高度なパワーユーザーと、フォーラムを受動的に閲覧するだけの匿名ブラウザのちょうど中間に位置しています。
このプロジェクトのためにペルソナを設定したことで、誰のためにデザインしているかという点に立ち戻ることができ、提示されたデザインの批評や分析を導くための基盤が得られました。
デザイン原則の定義
ペルソナによって築かれた基盤をさらに強固にするため、Horizonテーマのデザイン原則を導くための以下のリストを絞り込みました。
- より彩り豊かで快適なユーザーエクスペリエンス（ダイナミックでカラフルなカテゴリーインジケーター、カテゴリーバッジへの絵文字・アイコンの使用を可能にする）
- 可読性の向上と情報過多の軽減（よりシンプルなトピックカード、大きな本文フォント、余裕のある入力フィールド）
- オンラインコミュニティに対するユーザーの期待により合致したモダンなデザイン（ヘッダーへの検索機能の露出、角丸）
私たちはユーザーが確信を持って見て、理解し、行動できるようにしたいと考えました。目標は、ユーザーのタスクをサポートしない不要な要素やコンテンツを取り除くことでインターフェースをシンプルにすることでした。
デザインプロセス
最初からペルソナと原則を定義しておいたことで、デザインの範囲内での目標と制約について共通の理解を持つことができました。その結果、より良い批評ができるようになっただけでなく、批評やフィードバックをより適切にサポートするために、組織の文化やディスカッションのダイナミクスにも徐々に影響を与え始めました。
インスピレーションから始める
白紙のキャンバスを前に、私たちは特にインスピレーションを感じたデザインを集めた大きな「ムードボード」の作成から始めました。サイドバー、チャット、カードに収められたコンテンツ、投稿、返信など、私たちと類似した要素を持つサイトから素材を収集しました。各デザイナーが大きなボードにスクリーンショットを投稿する時間を取り、デザインセッションの一つで全員で一緒に整理しました。その中から、最も気に入ったUXのアイテムや要素を選び出し、それが作業を始めるための基盤となるボードになりました。
反復、フィードバック、批評
メンバーエクスペリエンスチームのデザイナーであるCharlieがプロジェクトのリードを担いました。私たちは細部をほとんど詰めていない、シンプルで大まかなモックアップから始めました。Bill BuxtonによるSketching User Experiencesに触発され、私はCharlieに「太いマーカー」でのスケッチに集中するよう促しました。これは、高い精度での描画やモックアップに入る前に、非常に低い忠実度でアイデアを探るという手法です。細部に入る前に全体的なアイデアとスペーシングを正しく把握することが重要だと感じていました。
各チームメンバーは、毎週のデザインセッションを通じてコメント、批評、フィードバック、提案をする機会がありました。セッションではCharlieが前週のフィードバックをもとにした最新の反復について説明しました。
Charlieは新しいフィードバックを取り込みながら、前のボードに隣接する形で新しいボードを作成し続けました。これにより、各フィードバックセッションで要素がどのように変化したかを確認することができました。これまでに試みたことと、デザインが目指す方向性を明確に把握するのに役立ちました。
時を経て、設計と構築に十分な注力が必要と思われる部分が浮かび上がり始め、複数のチームメンバーで作業を分担するようになりました。これらの実行可能なアイテムをそれぞれ個別のタスクとして分離し始める必要があることは明らかでした。
Horizonを際立たせるもの
Horizonテーマを構成する要素は数多くありますが、中でも特に際立っているのがトピックリストアイテム、ウェルカムバナー、カラーパレットとセレクターの3つです。CharlieとデザインチームがテーマのNew領域を反復し続ける一方で、メンバーエクスペリエンスチームのエンジニアたちと私は並行してこれらのコンポーネントの実装に取り組みました。
トピックリストアイテム
トピックリストアイテムは、Horizonテーマのためにデザインした主要な要素の一つです。Discourseのデフォルトのトピックリストアイテムとは多くの点で異なります。目標は、カードに表示される情報量を簡素化しつつ、作成者、返信数、最後に投稿したユーザー、最後のインタラクションの時刻、カテゴリー、そしてトピックがアクティビティで「ホット」とみなされているかどうかといった最も重要な情報のみを明確に強調表示することでした。
変更前
変更後
ウェルカムバナー
検索バナーはこれまでも管理者がサイトにインストールできるものとして提供されていましたが、この人気のテーマコンポーネントを製品自体に組み込むことでプロセスを簡略化することにしました。これにより、管理者がテーマやコンポーネントのインストールの詳細を把握している必要がなくなりました。
カラーパレットとセレクション
私たちはoklch()システムを使用して、基本色のセットからカラーシステムを構築しました。カスタマイズされたCSSスタイルシートを作成し、色を設定したいアイテムや領域を定義する代わりに、ユーザーは1色を選択するだけでビジュアル体験全体を変えることができるようになりました。このテーマに追加した愛らしいイースターエッグは、カラーオプションの名前です。Clover、Marigold、Royal、Violet、Lilyはすべて、Discourseのチームメンバーの子どもたちに関連した名前です。すべてのカラー名をカバーするために、私たちは全員、Discourseの従業員に次に生まれる子どもはHorizonと名付けなければならないという協定に署名しました。
メンテナビリティの制約
ここまではHorizonテーマのプロダクトおよびデザイン上の動機について主に話してきましたが、他の要因も関係していました。
意見を持った決定
最初から、Horizonはさらなるカスタマイズを前提として構築される他のテーマとは少し異なるものになることはわかっていました。しかし、技術的な知識を持たない管理者向けにHorizonを構築していたため、すぐに優れたエクスペリエンスが得られるように、より主観的な判断を持ちたいと考えました。
これは、このテーマがほとんどのサードパーティコンポーネントやプラグインをサポートしないことを意味します。これは今でも強く支持している決断です。テーマを当初のビジョンの範囲内に収めることで、通常の制約なしに作業するために必要なスペースを確保できました。これが最終的により良い結果につながったと信じています。
カスタマイズによってテーマを意図した以上に拡張できるようにすることはHorizonの全体的な成果を損なう可能性があったため、私たちはこの判断で問題ないと考えました。
二重の目的
Horizonテーマが私たちの作業の明白な成果である一方、Discourseのテーマを作成したいと思う誰もがより簡単に作成できるようにする方法にも目を向けていました。Discourseの特定の側面をカスタマイズすることが難しいと感じた際には、マークアップをクリーンにし、将来のデベロッパーやテーマ作成者が同じ領域をカスタマイズしやすくするために、それらの領域にCSSバリアブルを実装しました。
技術的負債の最小化
私たちはDeveloper ExperienceチームのエンジニアたちとDeveloper Experienceチームと連携し、私たちの追加や変更が時間とともに技術的負債を増加させるものにならないよう努めました。これは、安全かつセキュアな方法で既存の要素をカスタマイズ・置き換えることができる、Discourseにすでに組み込まれているツールを最大限に活用するよう努めることを意味していました。小さな例として、Horizonのトピックリストアイテムコンポーネントをどのように構築したかはこちらをご覧ください。
すべてのテスト
私たちは主に3つの方法でテーマをテストしました。
- 社内のワークコミュニティ（Dev）
- サポートフォーラム（Meta）
- 特定のお客様サイトによるベータテスト
私たちが業務で使用している社内およびコミュニティフォーラムには、数百人のユーザーによる12年以上のディスカッションが蓄積されています。これらのインスタンスでテーマをテストすることで、多くの決断が検証されました。これらのコミュニティはテーマのすべての要素を徹底的にテストするためのさまざまな形式のコンテンツを提供してくれました。この方法を使って公開リリース前に多くの視覚的および機能的な問題を先取りし、反復と修正ごとに完成度を高めることができました。
自社でテーマをドッグフーディングした後、ベータテストに移行しました。Horizonをデザインする際に想定していたペルソナに合致するお客様を特定しました。これにより、いくつかの異なるコミュニティにテーマをインストールし、そのユーザーとフォーラムを運営する管理者の両方からフィードバックを受けることになりました。
Horizonをテストしたすべてのユーザー（社内外を問わず）が、私たちが行った主観的な決断の一部を特に気に入っていたわけではありませんでした。私たちはペルソナを通じてフィードバックを絞り込み、それが技術的な知識を持たない管理者や一般的なメンバーにとってデザインをより良くするものかどうかを判断しました。
重要な教訓
オープンなデザイン
Horizonテーマの進捗を議論し批評するための毎週のデザインミーティングは、毎週社内フォーラムに公開される形でまとめられました。これにより、デザインチーム以外のメンバーも、私たちが取り組んでいた深さ、詳細、反復を見ることができました。これはデザイン思考とプロセスをチーム全体に広めるための素晴らしい方法でした。オープンなディスカッションに招待することで、デザインチームは他のチームメンバーが自分たちのフィードバックやアイデアがプロジェクトに取り込まれるのを目にするにつれ、信頼関係を築くことができました。
振り出しに戻る
ユーザーとのテストでは、デザインセッションでは必ずしも予測できないニーズが明らかになります。一つの重要な洞察は、トピックリストアイテムで行った決断を再考することでした。カードに表示されるアバターは最新の返信者ではなく、元の投稿者であるべきだと強く感じていました。最終的にはその選択を維持しましたが、最後に返信またはコメントしたユーザーも同様に見たいというフィードバックが集まり始めました。これにより振り出しに戻り、それに対応するためにトピックリストアイテムの要素の配置を微調整することになりました。
Centralized Partnership（集中型パートナーシップ）
この構造はプロジェクトにおいて非常にうまく機能しました。Charlieはメンバーエクスペリエンスチームの一員としてHorizonテーマを「所有する」メインデザイナーでしたが、それはデザインチーム全体からインプットを得ることを妨げるものではありませんでした。他のデザイナーやエンジニアも、テーマのサブ要素の実装を担当するために協力することができました。これは非常に新鮮な働き方であり、今後もさらに多くの機会があることを願っています。
今後の展望
Horizonは現在、新しいDiscourseインスタンスを起動する際にインストールされるデフォルトテーマになっています。
今後、このデザイン駆動プロセスを活用して取り組みたいプロジェクトがさらにあります。
- Discourseで利用できる新しいテーマ
- カテゴリーとスペースのセットアップの探求
- 管理者および新規ユーザーのオンボーディング
Horizonの成功は、デザイン駆動開発が歴史的にエンジニアリング主導の企業でも活用できることを証明しています。明確に定義されたペルソナと原則、自由なフィードバック、そしてユーザーニーズへのコミットメントが、誰もが認める結果をもたらす力を持っていることは明らかです。
原文はこちら：
Good Loopでは、Discourseのセルフホスティングを安価で提供しています。開発元であるCDCK社の協力のもと、公式ブログ記事の翻訳・公開など、日本での普及にも努めています。