非デザイナーがServiceNow デザインシステム「Horizon」の世 界を味わってみる 2024年12月11日 (水) SNUG東京ミートアップ イヤーエンドパーティー24 石川 大地

はじめに 本LT登壇は ServiceNow Advent Calendar 2024 11日目（シリーズ1） [ServiceNow] 非デザイナーがServiceNowデザインシステム「Horizon」の世界を味わっ てみる をもとにしたものです 決してデザインシステムの専門家ではありませんので，発表者の誤った理解があれ ば優しくご指摘ください それでは，れっつすたぁと (｀・ω・´)ｼｬｷｰﾝ

ねぇねぇ， 「Horizon」って 知ってる (・ω・)??

Horizon 水平線 またの名を 地平線

Horizo n は ServiceNow のデザイン システム であり、 プラットフォーム全体のクリエイターを支援し、 加速させるために構築されています。

そもそも， デザインシステム って何よ (・ω・)??

アジェンダ 1. そもそもデザインシステムって何よ 🎨 OpenFrame ウィンドウを開く: Shift + Alt + Z 2. Horizonサイトをプレビューしてみよう🌅 Theme Builder 3. 非デザイナー的にはコレが使えそう✅ ，，，地味ので割愛（付録）

デザインシステム 製品やサービスのデザインを統一し， 効率的に開発するためのルールやガイドラインの集まり ※細かい定義は各自で調べてください Google Material Design Microsoft Fluent 2 Design System Salesforce Lightning Design System

Horizon Design System ServiceNowのデザインシステムであり，主要なアプリフレームワークごとに 「UIコンポーネント」「パターン」「スタイル」「ガイドライン」 を提供する Workspace Core UI App frameworks Native Mobile Service Portal ServiceNow Horizon Design System UIコンポーネント ガイドライン パターン スタイル etc.

アジェンダ 1. そもそもデザインシステムって何よ🎨 製品やサービスのデザインを統一し， 効率的に開発するためのルールやガイドラインの集まり 2. Horizonサイトをプレビューしてみよう 🌅 Theme Builder 3. 非デザイナー的にはコレが使えそう✅ ，，，地味なので割愛（付録）

Horizonサイト Workspace を対象にして， Horizonサイトコンテンツを眺めてみる

Horizonサイト Workspace に関するHorizonサイトコンテンツ Workspace overview Workspaceの概要 Basics Structure等の基本要素に ついて説明 Foundations Horizonデザインシステム の基盤となる要素の解説 Patterns コンポーネントの推奨設定 とベストプラクティス Components インターフェースを構成する UI部品のライブラリ

Components セクション インターフェースを構成するUI部品のライブラリ コンポーネント名による検索，カテゴリやリリースによるフィルタリングも可能

Components セクション 例えば，読み込み中の状態を示すLoaderコンポーネントにおいて， Propertiesの値を変更することで，インタラクティブに出力イメージを確認できる デフォルト Properties 変更後

アジェンダ 1. そもそもデザインシステムって何よ🎨 製品やサービスのデザインを統一し， 効率的に開発するためのルールやガイドラインの集まり 2. Horizonサイトをプレビューしてみよう🌅 いくつかのセクションから構成されている 3. 非デザイナー的にはコレが使えそう ✅ ，，，地味なので割愛（付録）

なるほどなるほど！ 自分には関係ないわ (((・ω・))) ﾎﾟﾜﾜｰﾝ

「良い例」と「悪い例」が具体的にわかる！ 例えば，色に関するアクセシビリティについて， ✅良い例 🚫悪い例 ⚠色だけだと正しく意味が伝わらない

「良い例」と「悪い例」が具体的にわかる！ Recommendations として「良 い例」と「悪い例」が 具体的に紹介されており， 非デザイナーの方でも デザインの参考にしやすい ＆言語化できる

アジェンダ 1. そもそもデザインシステムって何よ🎨 製品やサービスのデザインを統一し， 効率的に開発するためのルールやガイドラインの集まり 2. Horizonサイトをプレビューしてみよう🌅 いくつかのセクションから構成されている 3. 非デザイナー的にはコレが使えそう✅，，，地ので割愛（付 「良い例」と「悪い例」が具体的にわかる！

さいごに ServiceNowデザインシステム「 Horizon」を紹介しました 今後，ServiceNow を扱う上での参考情報になれば幸いです 本共有により、少しでも Horizon サイトにアクセスしてみる方が増えると良いなぁ，と (｀・ω・´)ｼｬｷｰﾝ なぜHorizonという名称なのかは迷宮入りしたままですが、 もし知っている方いればこっそり教えてくださいな

Thank you!!

参考資料 ● [Qiita] [ServiceNow] 非デザイナーがServiceNowデザインシステム「Horizon」の世 界を味わってみる https://qiita.com/mucho243/items/0a9bd706297b1f53806c ● [Horizon] Horizon Design System - ServiceNow https://horizon.servicenow.com/ ● [Google] Material Design https://m3.material.io/ ● [Microsoft] Fluent 2 Design System https://fluent2.microsoft.design/ ● [Salesforce] Lightning Design System https://www.lightningdesignsystem.com/