---
title: "モバイルアプリのテーマ設定は、ユーザー満足度を向上させます"
date: "2022-03-02"
categories: 
  - "app-development"
  - "mobile-development"
  - "mobiletogether"
tags: 
  - "mobile-app-themes"
  - "mobile-app-user-interface"
  - "mobile-development-tools"
  - "mobiletogether"
description: モバイルアプリのテーマ機能が、チャートの色や表示方法のカスタマイズを可能にすることで、ユーザー満足度をどのように向上させるかを探求します。MobileTogetherの強力なデザインツールを活用して、その効果を検証します。
---
Status: #blog

Tags:  #mobile-app-themes #mobile-app-user-interface #mobile-development-tools #mobiletogether

Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md)
# モバイルアプリのテーマ設定は、ユーザー満足度を向上させます

モバイルアプリのテーマ機能は、ユーザーが個人の好みに合わせてアプリの外観をカスタマイズできるため、ユーザー満足度を向上させます。データレポートや可視化を行うアプリで複数のテーマを実装する一つの方法は、ユーザーにチャートやグラフの色使いを選択肢として提供することです。MobileTogetherは、ドラッグ＆ドロップによるUIデザイン、イベント処理のための強力なビジュアルプログラミング言語「Action Tree」、そしてデータ選択と処理のための標準的な関数型プログラミングを組み合わせることで、開発者は日々MobileTogetherを活用しています [洗練された、クロスプラットフォーム対応のアプリケーションを開発する](https://www.altova.com/ja/mobiletogether) あらゆる一般的な形式で、豊富なグラフや図表をご利用いただけます。

モバイルアプリの開発者は、メインのチャート設定で、内蔵されている4つのカラーパレットから選択したり、アプリのデザインに合わせて独自のカラーパレットを定義したりすることができます。さらに、ダークモードとライトモードの表示設定と組み合わせることで、表示カスタマイズのバリエーションが10種類に広がります。開発者は、デザイン時に色を固定するのではなく、MobileTogetherの機能を利用して、ユーザー自身が好みの色を選択できるようにすることができます。具体的な例を見てみましょう。

![](/blog/images/mt_darktheme_blog_3.jpg)

<!--more-->

以下に、モバイルアプリで使用される配色テーマ選択ダイアログと、屋上太陽光発電システムの発電量を報告するモバイルアプリのグラフの画像を示します。

[![モバイルアプリのテーマを、チャートの色使いに基づいて定義します](/blog/images/user-schema-def.png)](user-schema-def.png)

開発者は、グラフ設定ダイアログでカスタムのカラー設定を適用しました。その結果、背景となるエリアグラフはオレンジ色で塗りつぶされ、棒グラフは青色で表示されます。もしグラフにさらに要素が含まれている場合、次の色は緑、黄、紫などが使用されます。

開発者は、ドロップダウンメニューから、用意されているカラーテーマを自由に選択することができました

[![内蔵されたカラーテーマを使用することで、様々なモバイルアプリのデザインを作成できます](/blog/images/schema-choose.png)](schema-choose.png)

### **モバイルアプリのテーマを作成する**

モバイルデバイス上で、アプリケーションが実行される際に、ユーザーが自由に配色テーマを選択できるようにする戦略について見ていきましょう。このアプリケーションにはすでに設定画面があるため、そこにデザインテーマを選択できる機能を追加するのが自然な場所です。まず、各配色テーマに対応したラジオボタンとカラーサンプルを配置したテーブルを作成します。以下は、MobileTogether Designerで作成された完成品の画面です

[![MobileTogetherデザイナーに表示される、モバイルアプリのテーマ選択テーブル](/blog/images/theme-buttons-1.png)](theme-buttons-1.png)

MobileTogetherは、一般的な選択コントロールをすべてサポートしています。例えば、テーブルの上部にコンボボックスが表示されます。モバイルアプリのテーマに関しては、すべてのカラーオプションを同時に表示するために、ラジオボタンのセットを選択しました。

このアプリのグラフは、それぞれ1つまたは2つの要素しか表示しないため、各色の組み合わせは、各スキーマにおけるリストの最初の2つの色を示しています。以下に、MobileTogetherシミュレーターウィンドウの同じ設定画面の一部を表示します

[![MobileTogetherシミュレーターに表示される、カラーテーマ選択機能](/blog/images/theme-buttons-2.png)](theme-buttons-2.png)

メインのチャート設定ダイアログでは、開発者が、面積グラフ、棒グラフ、ローソク足グラフ、メーターグラフ、円グラフなど、ほぼすべてのデータセットを視覚化するための最適なチャートを、迅速に設計できます。さらに、複数のチャートタイプを重ねて表示することも可能です。上記の月次生産グラフは、棒グラフを重ねて表示したレイヤーチャートの一例です。

しかし、チャートの各要素は、アプリケーションの実行中に処理されるXPath式の結果として定義することも可能です。動的なXPath設定ダイアログで設定された内容は、元の基本的なチャート設定を上書きします。

![動的なXPath設定による、カラーテーマの選択機能](/blog/images/dynamic-xpath-settings.png)

「動的なXPath設定」ダイアログでは、XML要素の「graphColorBase」を通じて、各グラフの色設定を指定できます。アプリケーションの設定画面にあるラジオボタンの表では、「graphColorBase」に以下の文字列値のいずれかを割り当てることができます。「Default」（デフォルト）、「Grayscale」（白黒）、「Colorful」（カラフル）、「Pastel」（パステル）、または「User」（ユーザー指定）。

以下に、Androidスマートフォンでダークモードを使用している状態で、モバイルアプリのテーマを選択できる最終版のアプリのスクリーンショットを示します

[![Androidスマートフォンにおけるモバイルアプリのテーマ選択](/blog/images/android-example.png)](android-example.png)

そして、iPhoneのライトモードにおける、標準カラーとグレースケールカラーの配色例を以下に示します

[![iPhoneで表示されるモバイルアプリのテーマ](/blog/images/iphone-example.png)](iphone-example.png)

白黒表示のカラー設定は、色覚異常の方にとって最適な選択肢かもしれません。

弊社のMobileTogetherをご覧ください [ビデオデモンストレーション](https://www.altova.com/ja/mobiletogether/demos#video_Demos), もっと [サンプルアプリケーション](https://www.altova.com/ja/mobiletogether/demos), または、さらにその [オンラインマニュアル](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) MobileTogetherに関するあらゆる情報を詳しく知りたい場合は、こちらをご覧ください。モバイルアプリのデザインテーマを通じて、お客様のクロスプラットフォームアプリのユーザー満足度を向上させる準備が整ったら、ぜひご検討ください [MobileTogether Designerをダウンロードしてください](https://www.altova.com/ja/mobiletogether/download).