インフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Hatebuこんにちは!ソリューションコンサルタントの田上です。Builder」はWebアプリケーションのUIデザインをドラッグ&ドロップで作成することができるローコードツールです。「テーマ機能(色・フォント)」を使用することで、Webアプリケーション全体の「色やフォントをカンタンに統一すること」ができます。Webアプリ開発に関わるメンバー数が多くなるにつれて、色やフォントといった「外観を統一させる仕組み」は重要になります。Webアプリケーションのテーマを統一しつつ、エンドユーザー企業のコーポレートカラーに合わせて「それぞれ個別のテーマに切り替えたい」といった需要も多くあると思います。このような場合にも、カスタムテーマを作成することができるため「A社向けのテーマ」「B社向けのテーマ」「C社向けのテーマ」といった様に、Webアプリケーションのビジュアルに視覚的な特徴を持たせることができます。6パターンの「テーマ(色・フォント)」を使用できます。「カスタムテーマ(色・フォント)」を作成することが可能です。「エンドユーザー別」にカスタムテーマの切り替えるといったことが可能です。WebComponents)」を自動生成することができる「WYSIWYGエディタ」になっており、デザインからプログラミングの業務フローを効率化できるローコードツールになっています。それでは、早速見て行きましょう。実際に操作したい場合は、無料トライアルへご参加ください。下記の様なテーマの作成画面があり、自分好みの「カスタムテーマ」を作成できる機能が提供されています。設定できる項目は下記です。etc)文字体裁(フォントタイプ)円形(ボタンの角の形)標高(ボタンの影の有無)この設定は「Webアプリケーション全体」に対して変更されるため、色やフォントを「カンタンに統一」することができます。テーマの作成画面この「テーマの作成」画面を起動するには、「カスタムテーマ」を選択して「編集ボタン」を押下することで、「テーマの作成」画面を起動することができます。上での「テーマの選択方法」は左メニューの「テーマボタン」を押下して、「デフォルトテーマ」もしくは「カスタムテーマ」を選択することで、カンタンに切り替えることができます。1~3」を例に見てみましょう。「プライマリー色とセカンダリー色の2色」が異なるだけですが、比較したときのイメージが大きく違うのではないでしょうか。3いかがでしたでしょうか。同じデザインのWebアプリケーションであっても、例えばエンドユーザー企業の「コーポレートカラー(ロゴやアイコン)」に合わせて、「プライマリー色とセカンダリー色の2色」を設定することにより、「A社向けのテーマ」「B社向けのテーマ」「C社向けのテーマ」といった、ビジュアルに視覚的な特徴を持たせて提供することができます。これは開発現場から、エンドユーザーや関係部門の責任者といったキーパーソンへ「Webアプリケーションをプレゼンテーション」する際にとても大きなインパクトになるでしょう。バックグラウンドカラーの設定方法(プライマリー、セカンダリー)では次に、UIコンポーネントに対して「バックグラウンドカラーを設定する手順」を見て行きましょう。設定方法はとてもカンタンです。手順1.UIコンポーネントをクリック選択する画面中央の「キャンバス」にて、色を変更したい対象のUIコンポーネントを「クリック選択」してください。すると、画面右に「プロパティ」がリスト表示されますので、右下の「外観」を確認していきます。例:UIコンポーネントに色を設定する手順2.「外観」で「バックグラウンドの塗りつぶし」を設定する外観のプロパティから「バックグラウンドの塗りつぶし(Bg.Fill)」の色をクリックしてください。700」といった色の強度を設定する色の「選択フォーム」が表示されます。濃淡の強度」を選択することができます。700」を選択しています。700」で再現することができます。「6つのデフォルトテーマ」も用意されているため、併せてご紹介です。「テーマ(色・フォント)機能」を活用することで、Webアプリケーションの「テーマを統一」することができました。エンドユーザー企業のコーポレートカラーに合わせて「それぞれ個別のテーマに切り替えたい」といった様なケースで、効果的なアプローチになると思います。すべての機能は無料でお試しいただけます。無料トライアルにアクセスして、最新バージョンを入手してください。「どうやって実装すれば良いの?」といった開発上の疑問にソリューションコンサルタントが直接お答えします。まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。ルーティング機能(よくあるご質問...こんにちは!ソリューションコンサルタントの田上です。インフ...2024-03-2612個のテンプレートでウェブアプリを高速デザインしよう(よくあるご質問解説)こんにちは!ソリューションコンサルタントの田上です。»Aboutインフラジスティックス・ジャパンのチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Reserved引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。