社内業務に関するシステムを一元化して運用・管理できるクラウドサービス「ServiceNow」。
株式会社ＫＹＯＳＯでは、これまでの豊富な運用経験をもとに、ServiceNowの企画立案から運用・保守、内製化までトータルでサポートしています。
目次
はじめに
ServiceNowを使っていると、「本番とサブ本番の画面がそっくりで間違えそう…」とか、
「会社のロゴやカラーをもっと反映させたいな」と思ったこと、ありませんか？
そんなときに便利なのがテーマビルダーです。
テーマビルダーは画面の色やロゴ、フォントなどを自由にカスタマイズできる機能です。
このブログでは、テーマビルダーを使ってServiceNowのデザインを変える目的やメリットを紹介しつつ、
実際にどうやって設定するのか、ざっくりと手順もご紹介していきます。
前提条件：ServiceNowの環境
- 作成 ・・・ PDI
- バージョン ・・・ Yokohama（XanaduからYokohamaにアップグレード）
- 操作 ・・・ System Administrator (admin)
なぜテーマを変えるの？
テーマビルダーを使うことで、ただの“見た目のカスタマイズ”以上の効果が期待できます。
たとえば、こんな理由でテーマを変えることがあります。
- 本番とサブ本番の見分けをつけるため
- 会社のブランドカラーやロゴを反映して統一感を出す
- 利用者の視認性や使いやすさを向上させる
- 社内ポータルとしての印象を良くする
実際にやってみよう！テーマビルダーの使い方
1．テーマビルダーの起動
アプリケーションメニューで [Now Experience フレームワーク] ＞ [テーマ管理] ＞ [テーマビルダー➚] へ
移動します。
テーマビルダーが起動すると、ホーム画面が表示されます。
ホーム画面では、テーマビルダーの概要をご確認いただけるほか、画面下部には便利なリンクも掲載されています。
操作方法や詳細を知りたい場合は、これらのリンクから製品ドキュメントにアクセスできます。
2．テーマの作成
それでは、さっそくテーマを作成してみましょう。
ホーム画面の [テーマを作成] ボタンをクリックしてください。
[テーマを作成] ボタンをクリックすると、初期設定のための画面が表示されます。
全部で9つのステップがあり、画面の案内に沿って設定を進めていくことで、テーマの基本情報を簡単に登録できます。
ここで設定した内容は後からいつでも変更可能ですので、まずは気軽に入力してみてください。
設定をざっと進めるだけでも、こんな感じでテーマが完成します。
プレビュー画面では、ヘッダーやボタン、テキストの色などをすぐに確認できます。
自動で設定された配色は、[色] タブで確認できます。
この画面（エディターページ）から、色を個別に変更することができます。
3．テーマの編集
リンクテキストの変更
細かい確認や調整は、[コンポーネントスタイル] で個別に行えます。
ここでは例として、リンクテキストのスタイルを変更してみます。
More_menuから [コンポーネントスタイル] を選択します。
テキストリンクの [プライマリ] を選択し、右側の詳細画面にある [コンポーネントエディターに移動] ボタンをクリックします。
次に、ベースの色を変更します。
変更したい色を選び、[変更内容を保存] ボタンをクリックします。
プレビュー画面で、リンクテキストの色が変更されていることが確認できます。
ナビゲーションの背景色の変更
ナビゲーションの背景色は、[色] タブ内の [プライマリーナビゲーションブランド] の設定を変更することで調整できます。
変更したい色を選択して [変更内容を保存] ボタンをクリックします。
変更結果はプレビュー画面にすぐに反映されます。
ロゴを変更する
あらかじめ、ロゴを用意しておきます。
登録できる仕様は「ロゴ」の右に表示される吹き出しをご参照ください。
「ロゴ」タブをクリックします。
[ファイルを参照] をクリックし、ロゴファイルを選択します。
プレビュー画面で結果を確認します。
4．テーマの公開
マネージャーページビューを選択して、作成したテーマを表示します。
未公開セクションから、公開するテーマを選択します。
公開するテーマから その他のアクションアイコンを選択し、[公開] を選択します。
公開すると公開済みセクションに表示されます。
ブラウザーを更新すると公開したテーマが反映されます。
※もとに戻したい場合
もとに戻したい場合はその他のアクションアイコンを選択し、[非公開] を選択します。
※テーマを公開する際は、以下の点にご注意ください。
- テーマを1つだけ公開した場合
そのテーマが デフォルトテーマ として設定されます。
- 複数のテーマを Web インスタンスに公開した場合
ユーザーの [テーマ] 設定でテーマを選択できるようになります。
デフォルト設定を変更する際は、[デフォルトとマークする] を選択します。
ちょっとした工夫でさらに便利に
✨ユーザーにいくつかのテーマから選択してもらうようにしたい
複数のテーマを作成し公開することで、ユーザーは自分のプロフィール設定からテーマを選択することができます。
✨アクセシビリティ（利用しやすさ）にも配慮したい
配色を選ぶ際に表示されるアクセシビリティのヒントを活用して、視認性の高い色の組み合わせや、コントラスト比の基準を自然と満たすデザインに仕上げることができます。
特別な知識がなくても、ヒントに沿って編集すればアクセシビリティの基準を自然とクリアできるのが嬉しいポイントです。
アクセシビリティの改善方法
アクセシビリティインスペクターを表示し、改善したい項目の編集画面を開きます。
次に、編集画面でボタンの境界色を編集します。
例として、境界線の色を少し濃い色を選択します。
コントラスト比 2.9:1から4.4:1に変更されました。
境界線が少しはっきりし、視認性が向上しました。
コントラスト比が改善され基準を満たすことができたため、境界線に表示されていた警告が
表示されなくなりました。
テーマビルダーを使ってみて気づいた注意点
- テーマのクローンができない
既存テーマをベースに少しだけ変更…ということができず、毎回ゼロから作成する
必要があります。
- OOTBテーマの微調整が難しい
標準テーマ（Out-of-the-Box）をちょっとだけ変えたい場合も、新規作成しか
選択肢がありません。
- 画面ごとの確認が必須
設定した色やフォント、ロゴなどが、すべての画面で意図通りに表示されているかを
確認する必要があります。
特に、ワークスペースや各種モジュールでの表示に差異が出ることがあります。
- サービスポータルは非対応
Next Experience用のテーマはサービスポータルには適用されないため、
同じような色使いにしたい場合は別途サービスポータル側で設定が必要です。
さいごに
ServiceNowのテーマビルダーを使ったデザイン変更は、単なる見た目のカスタマイズにとどまりません。
環境の識別を明確にしたり、企業のブランドを反映させたりすることで、業務の効率化やユーザーの安心感にもつながります。
実際に使ってみると、テーマビルダーは意外とシンプルで直感的。色やロゴの変更も数クリックでできるので、初めてでも気軽に試せます。
ただし、既存テーマのクローンができなかったり、OOTBテーマを少しだけ変更することが難しいなど、一部制約もあるため、事前に把握しておくと安心です。
それでも、ちょっとした工夫でユーザー体験が大きく変わるのがテーマカスタマイズの魅力です。
「使いやすい」「見やすい」「間違えにくい」そんな環境づくりの第一歩として、ぜひ取り入れてみてください。
参考
投稿者プロフィール
- 主にシステム開発の仕事に携わってきました。
[HTML/CSS/JavaScript/C#/VB.NET など]
2023年より開発業務と並行してServiceNowの学習を始めました。
CIS資格取得にも取り組んでおり、さまざまなServiceNowの研修を通して知識やスキルを磨いています。
保有資格
- ServiceNow Certified System Administrator
- ServiceNow Certified Application Developer
- ServiceNow Certified Implementation Specialist - Customer Service
Management
- ServiceNow Certified Implementation Specialist - IT Service Management
最新の投稿
- 2025-08-28技術ServiceNowのテーマビルダーで“見た目”以上の価値を
- 2025-04-25技術Yokohamaリリースから強制されるMFA認証を今すぐチェック！
- 2025-02-28技術【従業員センター】ナレッジ記事が検索できない！を解決
- 2024-07-25技術すぐ使える！ ServiceNow Data Discoveryのご紹介