学習内容
前回の内容はこちら
今回はOutsystemsのStyle Guide（スタイルガイド）について学習していきます。
割とふわっと説明されていて次にやるCustom Style Guideがよくテストに出るため簡単に見ていきます。
Style Guide（スタイルガイド）とは
Style Guide（スタイルガイド）とLive Style Guide（ライブスタイルガイド）
Style Guide（スタイルガイド）とはWebサイトやアプリのデザインの統一性を確保するためのルールを定めたもので、Live Style Guide（ライブスタイルガイド）はリアルタイムで反映できる動的なスタイルガイドを指しています。
- Style Guide（スタイルガイド）
- ブランドのビジュアル表現を明確にし、一貫性を持たせるためのドキュメント
- Live Style Guide（ライブスタイルガイド）
- Style Guideを元にして作成される、ブランドのテーマ、色、パターンを含むライブドキュメント（どうやらForgeで提供されている？）
Style Guide（スタイルガイド）の構成
Style Guide（スタイルガイド）は「テーマ・テンプレート・パターン」の3つで構成されていて、Outsystems UIのデザイン統一を支えています。
- テーマ（Theme）：外観を決定するCSSスタイルやクラス
- テンプレート（Template）：レイアウトやメニュー、ロッグイン画面を含み、テーマを参照
- パターン（Patterns）：再利用可能なUIコンポーネント
スタイルガイドアーキテクチャの重要性
スタイルガイドアーキテクチャを採用する理由は下記3つになります
- 必要なリソースのみを読み込むことによるパフォーマンスの向上
- 新しいアプリに簡単に適用可能なため保守性が向上
- モジュールの分散を避けることでスケーラビリティ（拡張性）管理の易化
Built-in Style Guide(組み込みスタイルガイド)（頻出？）
スタイルガイドの組み込み手順について説明していきます。
書いてて思い出したのですが、テストの問題である図が示されて
「この場合は組み込みスタイルガイド、カスタムスタイルガイドのどちらが適している？」
みたいな問題が出ていた気がしますので下の図とセットで流れだけでも追えるようにしておけるといいと思います。
- 最初のUIモジュールはテンプレートのクローンとして作成
- ここでクローンしたテンプレートはOutSystems UI Themeを参照しています。
- メニューやログインフローを含む
- アプリ内に作成した当テーマを認証などにも使用するためメインメニューとLoginフローを含ませる
- OutSystems UIのテーマを参照
- Outsystems UI Themeと紐付ける
- 他のモジュールは当モジュールを参照
- Applcation内に作成したモジュールは今作成したAppThemeを参照するようにする
まとめと次回予告
今回はBase-Style-Guide-Architecture(基本スタイルガイドアーキテクチャ)についてつらつらと説明してしまいました。演習問題を見つけたら追記したいと思います。
次回はCustom Style Guide Architecture（カスタムスタイルガイドアーキテクチャ）について記載していきたいと思います。
コメント