OutSystemsで最高のUIをデザインする秘訣＝Live Style Guideとは？（vol.9）
- 公開日：
- 最終更新日：
ローコード開発をする際、ユーザーインターフェース（UI）デザインにおいて便利な「OutSystems UI」をご存知でしょうか？
OutSystems UIは、OutSystems標準のデザインフレームワークであり、色やフォントなどのスタイルの定義から、基本的なウィジェット、そしてRating（レーティング）やStacked Cards（スタックカード）などの高機能で便利なUI部品が揃っています。
豊富なデザイン定義が揃ったOutSystems UIを活用することで優れたUIを作ることができますが、そのためにはOutSystems UIのデザイン定義をアプリケーションの設計者や実装者が十分に理解していることが重要となります。なぜなら、設計者がUI部品を知らなければ優れた画面は設計できませんし、実装者がスタイルを知らなければ適切なカスタマイズを実装できないからです。そこで、OutSystems UIをフル活用するために役立つアプリケーションである「Live Style Guide」が重要となります。
本ブログ記事では、この「Live Style Guide」とは一体どのようなものなのか、具体的な活用例も交えて解説します。
また、アーキテクチャのご説明を交えた「Live Style Guide」の導入およびカスタマイズ方法についても解説します。
目次
OutSystemsのLive Style Guideを活用してUIデザインを理解しよう
まずは、「Live Style Guide」とは、一体どのようなものかを解説します。
一般的に言う「Style Guide（スタイルガイド）」とは、色やフォント、画面部品などのデザインのルールを定めたドキュメントのことです。
スタイルガイドからは、「通常のフォントサイズは12pxであり、”font-size-base”というCSSクラスを適用すると反映される」といった情報を得ることが出来ます。開発者はこの情報をもとに画面を設計・実装します。
OutSystems UIは、実装者が強く意識しなくてもふさわしいスタイルが適用された画面を作ることが出来ますが、ユーザーからの細かなUIへのリクエストに応じるためには、スタイルガイドの存在が不可欠です。
Live Style Guideは、その名の通り、“生きた”スタイルガイドです。OutSystemsのアプリケーションとしてドキュメントが提供されており、ブラウザで開いて参照できます。OutSystems UIで定義されているCSSクラスの基本的な情報に加え、部品を実際に操作して確認することができます。
ここで、OutSystems社が公開しているLive Style Guideのページをいくつかご紹介します。
このように、Live Style Guideは、OutSystems UIで定義されているデザインが分かりやすく解説されている画期的なドキュメントなのです。
OutSystemsのLive Style GuideでUIデザインを開発者に周知しよう
本章ではLive Style Guideの活用方法を2つご紹介します。
一つ目は、開発者がドキュメントとして参照し、OutSystems UIの理解を深める使い方です。
公開されているLive Style Guideを読み込むか、自環境にLive Style Guideそのものをインストールします。公開されているLive Style Guideは最新バージョンのOutSystems UIを参照しているため、自環境のバージョンとの差異が大きい場合はLive Style Guideをインストールする方が適しているでしょう。
二つ目は、独自のデザイン定義を効率的にアプリケーションに適用する使い方です。
先述の通り、Live Style Guideもアプリケーションの一つですので、自環境にインストールすればカスタマイズすることができます。
例えば、OutSystems UIの標準のボタンサイズを小さくしたい場合、インストールしたLive Style Guideのデザイン定義を上書きします。生成されるLive Style Guideのドキュメントに反映されますが、それだけではありません。他のアプリケーションもLive Style Guideのデザイン定義を参照することで、カスタマイズしたボタンを使えるようになります。
Live Style Guideが真価を発揮するのは二つ目の使い方です。自環境で開発するアプリに独自のデザインを施したい時は、Live Style Guideにより、拡張性・効率性に優れたデザインアーキテクチャを構築することができます。
次章では、二つ目の使い方にフォーカスして、実際にLive Style Guideを導入し、デザイン定義をカスタマイズしてみます。
OutSystemsのUIデザインに欠かせないLive Style Guideの導入とカスタマイズ方法
Live Style Guideは、OutSystemsが拡張部品を公開しているForge（アプリケーションマーケットサイト）からインストールすることができます。
自環境へ導入する際には、ForgeからLive Style Guideに関する次の3つのアプリケーションをインストールします。
- OutSystems UI Style Preview
Live Style Guideとなるアプリケーションです。「2. OutSystems UI Style Guide Theme」で定義されているデザイン定義に即したドキュメントを表示します。 - OutSystems UI Style Guide Theme
OutSystems UIのデザイン定義をそのまま継承しているアプリケーションです。編集しなければそのまま自環境のバージョンのOutSystems UIのデザイン定義をLive Style Guideに反映します。独自のデザインを反映したい場合は、このアプリケーションのデザイン定義をオーバーライドします。 - OutSystems UI Reactive Style Guide Template（任意）
「2. OutSystems UI Style Guide Theme」のデザイン定義を反映したアプリケーションを新規作成する時に利用できるアプリケーションテンプレートです。独自のデザインを反映する予定がなければインストールしなくても構いません。
それでは、デザイン定義をカスタマイズして、独自のLive Style Guideを作成してみましょう。
例えば、複数のアプリでメインカラーをスカイブルーに統一することになったとしましょう。
まずは、「2. OutSystems UI Style Guide Theme」アプリケーションの「StyleGuideTheme」モジュールを開きます。
続いてModuleメニューから「Clone」を押下してこのモジュールを複製します。
今後複数のLSGを作成する可能性があるため、オリジナルのモジュールは編集しないようにしましょう。
複製したモジュールは分かりやすいように、名前を変更します。
次に、「Interface」タブ→「Themes」フォルダ→「StyleGuideTheme」を選択して、プロパティを確認します。
このモジュールのデフォルトに設定されている「StyleGuideTheme」は、OutSystemsUIをベースにしていることがBase Theme欄から分かります。
この「StyleGuideTheme」をダブルクリックして表示されたスタイルシートの右上「Open Theme Editor」ボタンを押すと、基本的なデザイン定義を変更できるポップアップが表示されます。
今回の要件は「メインカラーをスカイブルーにすること」でしたので、Primaryの色を変更します。
「Done」を押して完了です。
先ほどのスタイルシートをもう一度開くと、タブが一つ追加されています。
内容を見ると、「Theme Editor」で設定したメインカラーの変更がCSS変数の”–color-primary”として反映されていることが分かります。
＊「CSS変数？」という疑問を持った方は、上記Live Style Guideの「色に関するCSSクラスの定義」のページをご覧ください。
これでカスタマイズは完了です。モジュールをパブリッシュします。
次に、このデザイン定義を既存のモジュールに反映させます。
対象のモジュールを開き、「Manage Dependencies」で「StyleGuideTheme」を参照に追加します。
「Interface」タブの最上部にあるモジュールの全体設定を選択して、プロパティの「Default Theme」を、参照に追加した「StyleGuideTheme」に変更しましょう。
メインカラーを使用していたパーツに設定が反映されました！
今回の変更が反映されたLSGを作成するには、インストールした各アプリケーションの全てのモジュールに対し、複製→モジュール名の変更→参照先の変更を行います。
今回は、ご説明のためにメインカラーの変更というシンプルなカスタマイズでしたが、これに留まらずCSSやJavaScriptで設定できるUIのカスタマイズはどんなものでも可能です。工夫すればOutSystems UIの便利な機能を活かしながら全く異なる見た目の画面を構築することができます。
まとめ
本ブログでは、OutSystems UIの活用に欠かせない「Live Style Guide」というアプリケーションをご紹介しました。OutSystemsは、デフォルトのデザイン定義に豊富な画面パーツが含まれているだけでなく、それらが自由にカスタマイズ可能であることもご理解いただけたかと思います。
本ブログ記事が、皆さまのUI開発の一助になりましたら幸いです。
なお、ユーザーインターフェース（UI）の枠を超え、ユーザーエクスペリエンス（UX）を向上させるためには、上述のUI開発スキルに加え、UXデザインスキルも重要となります。
弊社電通総研には、OutSystemsを用いた開発において、最適なUXの実現を支援可能な「UXデザインセンター」という組織が存在します。
OutSystemsを用いたUI開発やUX向上でお悩みの場合は、是非、弊社電通総研にお声掛けください。
https://itsol.dentsusoken.com/outsystems/inquiry/