# アクセシブルなアプリを設計するためのベストプラクティス

Analytics アプリでは、複数のアクセシビリティ機能をサポートしています。アプリ制作者はまた、アクセシビリティを向上させ、すべてのユーザーが分析アプリの情報にアクセスできるようにするための特別な措置を講じることもできます。

Analytics アプリでは、次のアクセシビリティ機能をサポートしています。

* 高コントラストの既定の配色

* キーボード ナビゲーションとキーボード ショートカット

  [キーボード ナビゲーションとショートカット](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/UserInterface/keyboard-navigation-and-shortcuts.htm)

* スクリーン リーダーのサポート

  [スクリーン リーダーでの Qlik Sense の使用](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/UserInterface/accessibility.htm#Using)

アクセシビリティを念頭に置いてアプリを設計する場合、従うべき設計のベストプラクティスがあります。さらに、アプリを使いやすくするために使用できる特定のアプリの設定もあります。

## 設計ベスト プラクティス

アクセシビリティを念頭に置いて設計を行う場合は、以下のベスト プラクティスに従います。

* フラットなシート構造を維持する

* 最初に概要を説明する

* アクセスしやすい色を使用する

* アクセシビリティを考慮したビジュアライゼーションを選択する

* ストーリーテリングを避ける

### フラットなシート構造を維持する

ビジュアライゼーションをシートに追加するときは、列と行が少ないフラットな構造を使用してください。フラットな構造にすることで、ユーザーに読みやすくなります。さらに、キーボード ナビゲーションが左上から右下に移動するため、キーボード ナビゲーションも簡単になります。

多くの列や行を持つ複雑なシート レイアウトは、理解しにくく、キーボードでのナビゲーションもより困難です。シートを設計するときは、キーボードでナビゲーションを行ってみて、ユーザーがアプリでどう感じるか試してみてください。

フラットなシート レイアウト

フラットなシート レイアウト

フラットなシート レイアウト ![チャートが均等に 2 列に分かれたフラット シート レイアウト。](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Resources/Images/ui_accessible_flat.png)

複雑なシート レイアウト

複雑なシート レイアウト

複雑なシート レイアウト ![ビジュアライゼーションが不規則に配置された、完全なシート レイアウト。](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Resources/Images/ui_accessible_complex.png)

### 最初に概要を説明する

シートを作成する際は、まず概要を提供し、次に詳細を説明しましょう。こうすることで、ユーザーがシート内の情報を消費しやすくなります。例えば、まずシートで集計や KPI を提供し、次により詳しい表やその他のビジュアライゼーションを提供します。別のシートに詳細を配置することもできます。または、スクロールできるようにシートのサイズを変更し、シートの下の方に詳細を追加することもできます。

### 適切なビジュアライゼーションを選択する

Analytic アプリは、分析で使用するためのさまざまなビジュアライゼーションを提供しています。アクセスしやすいアプリを設計する際、他のビジュアライゼーションよりも適切なビジュアライゼーションがあり、それを選択する必要があります。ビジュアライゼーションを選択する際は、次の点に留意してください。

* データ ビューでチャートを使用する

* ストレート テーブル ビジュアライゼーションを使用する

* マッピング チャートの使用を避ける

* カスタム オブジェクトの使用を避ける

#### データ ビューでチャートを使用する

アプリを設計する際、データ ビュー付きのチャートを使用する。データ ビューを使用すると、ユーザーがチャートをテーブルに変更することができるため、値を検査したり選択したりすることができます。

同じ円グラフをデータ ビューで表示した円グラフ

同じ円グラフをデータ ビューで表示した円グラフ

同じ円グラフをデータ ビューで表示した円グラフ ![円グラフの画像と円グラフのデータ ビュー。](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Resources/Images/ui_accessible-data-view.png)

データ ビューは以下のチャートで使用できます。

* 棒グラフ
* ボックス プロット (1 つまたは複数の軸を含む)
* コンボ チャート
* 分布プロット
* ヒストグラム
* 折れ線グラフ
* 円グラフ
* ピボット テーブル
* 散布図
* ツリーマップ

詳細は、[ビジュアライゼーションのデータの表示](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/Visualizations/viewing-data-visualizations.htm)をご覧ください。

#### ストレート テーブルを使用する

[ストレート テーブル] では、以前の既定の [テーブル] ビジュアライゼーションであるテーブル ビジュアライゼーションと比較して、ナビゲーション エクスペリエンスが向上しています。アクセス可能なアプリにテーブルを追加する場合は、テーブルではなくストレート テーブルを使用します。

詳細については、「[ストレート テーブル](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/Visualizations/VisualizationBundle/sn-straight-table.htm)」を参照してください。

#### マッピング チャートの使用を避ける

マッピング チャートはキーボード ナビゲーションで操作できません。アクセス可能なアプリを作成する際には、地理データを表示する代替方法の使用を検討してください。

#### カスタム オブジェクトの使用を避ける

ダッシュボードまたはビジュアライゼーション バンドルに含まれるチャートは、他のチャートほどアクセスしやすいとは限りません。アクセス可能なアプリでの使用は推奨されていません。さらに、拡張機能を使用する場合は、ユーザーにとってアクセスしやすいかどうかをテストしてください。

### アクセスしやすい色を使用する

色の範囲は、色ベースの視覚障害がある方にとってはより狭くなります。視覚障害のある方は、ビジュアライゼーションを作成意図とは異なって解釈する可能性もあります。たとえば、ビジュアライゼーションの赤や緑が苦手なユーザーもいるかもしれません。色のコントラストが不足していると、折れ線、棒、円グラフも区別しづらくなります。

アプリの配色はシンプルにするのがベストです。デフォルトのアプリの配色は対称的な 12 色です。できれば 3 色から 5 色、あるいは単色を基調とした配色が推奨されます。独自のカスタム カラー スキームを作成し、アクセス可能なすべてのアプリで使用できます。詳細については、「[カスタム テーマの作成](https://qlik.dev/extend/create-custom-themes/)」を参照してください。

テーマとは別に、いくつかの色を手動で設定することもできます。軸の場合、マスター軸の値に色を割り当てるように設定できます。詳細については、「[マスター軸の値への色の割り当て](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/Colors/assigning-colors-to-dimension-values.htm)」を参照してください。式別に色を設定することもできます。詳細については、「[数式による色分け](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/Colors/color-by-expression.htm)」を参照してください。ビジュアライゼーションの色オプションの詳細については、「[ビジュアライゼーションを色分けする](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/Colors/color-a-visualization.htm)」を参照してください。

#### KPI にパフォーマンス指標として図形を追加する

KPI にパフォーマンス指標として図形を追加することを検討してください。これらはコンテキストを追加するため、KPI が使いやすくなります。例えば、不良な結果を示すために空の赤の円を、良好な結果の場合は緑で塗りつぶされた円を使用したり、KPI ステータスが許容できないレベルの場合のみに表示される警告記号として三角形を使用したりすることができます。詳細については、「[KPI に図形を追加する](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/Apps/accessibility-analytic-apps.htm#Adding)」を参照してください。

パフォーマンス指標の図形を用いた KPI

パフォーマンス指標の図形を用いた KPI

パフォーマンス指標の図形を用いた KPI![KPI は、マイナスの結果を下向きの三角形で表し、プラスの結果を上向きの三角形で表します。](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Resources/Images/ui_accessible-KPI-ex.png)

### ストーリーテリングを避ける

ストーリーは所見を提示するのに便利ですが、キーボード ナビゲーションやスクリーン リーダーにとってはシートのほうがアクセスしやすいと言えます。アクセシビリティを念頭に置いて設計されたアプリでは、シートを使用して所見を提示したほうがよいでしょう。

## アクセス可能なアプリ設定

Analytics アプリには、アプリのアクセシビリティを向上させるのに役立つさまざまな設定が搭載されています。

### シート設定

アクセシビリティを向上させるために、シートで変更できる設定がいくつかあります。

* シート タイトルのコントラストを改善する

* ホバーメニューをオフにする

#### シート タイトルのコントラストを改善する

シートと対照的なスタイルにすることで、シート タイトルを見やすくすることができます。

次の手順を実行します。

1. アプリのナビゲーション バーで、アプリ タイトルをクリックします。

2. [the 設定 icon] をクリックして設定を開きます。

3. [シート タイトルのスタイル] で、コントラストを改善するために色の設定を調整します。

4. アプリ ナビゲーション バーで the 詳細 icon をクリックし、the 設定 icon [] をクリックします。

5. メニューで、 [シート ヘッダーのスタイル] タブに切り替えます。

6. コントラストを向上させるには、色の設定を調整します。

#### ホバー メニューをオフにする

ホバー メニューをオフにすると、ナビゲーションがよりスムーズになります。オプションはコンテキスト メニューやキーボード ショートカットからも利用できるため、機能が損なわれることはありません。

次の手順を実行します。

1. アプリのナビゲーション バーで、アプリ タイトルをクリックします。

2. [the 設定 icon] をクリックして設定を開きます。

3. [外観] で [ビジュアライゼーションのホバー メニューを表示] をオフにします。

4. アプリ ナビゲーション バーで the 詳細 icon をクリックし、the 設定 icon [] をクリックします。

5. メニューで [スタイル] タブに切り替えます。

6. [ビジュアライゼーションのホバー メニュー] を無効にします。

### チャート設定

チャートの中には、ユーザーにとって利用しやすくするためのオプションが搭載されているものもあります。次の操作が可能です:

* テキストの説明を提供する

* ビジュアライゼーションで軸値を制限する

* KPI に図形を追加する

#### テキストの説明の提供

ビジュアライゼーションには、タイトル、サブタイトル、脚注のフィールドが付いています。正確なテキスト説明を提供することで、ユーザーがビジュアライゼーションをナビゲートし、シートにコンテキストを提供することができます。コンテキストがないと、ユーザーがシートから興味のある情報を見つけるのに時間がかかります。タイトル、サブタイトル、脚注もすべてスクリーン リーダーで読み取ります。

標準編集モードでビジュアライゼーションを選択すると、[プロパティ] の [プレゼンテーション] > [ラベル] にタイトル、サブタイトル、脚注が表示されます。

詳細編集モードでは、タイトル、サブタイトル、脚注は、プロパティ パネルの [外観] > [全般] で確認できます。

#### ビジュアライゼーションで軸値を制限する

軸で名義データを扱う場合、カテゴリの数が 10 を超える場合は、階層を見つけるか、集計を作成してください。例えば、上位 10 の値を表示し、残りをその他に分類することで、データが理解しやすく、音読しやすくなります。詳細を含める必要がある場合は、シートの最後や他のシートに記載することができます。

次の手順を実行します。

1. ビジュアライゼーションを選択します。

2. プロパティ パネルの [データ] から、軸を選択します。

3. [制限] で、次のいずれかを選択します。

   * [固定数]: 一番上または一番下の値を選択して表示します。値の数を設定します。数式を用いて数値を設定することも可能です。the 式 icon をクリックして、数式エディターを開きます。

   * [厳密値]: 演算子を使用して制限値を厳密に設定します。数式を用いて数値を設定することも可能です。the 式 icon をクリックして、数式エディターを開きます。

   * [相対値]: 演算子を使用して制限値をパーセントで相対的に設定します。数式を用いて数値を設定することも可能です。the 式 icon をクリックして、数式エディターを開きます。

#### 数字を省略する

長い数字を読み、聞き、理解することは困難です。可能な限り数字を省略し、桁数や小数を減らします。

Ceil や Round などの関数を使うと、数値を丸めることができます。たとえば、測定値を小数点以下 1 桁で百万単位に丸めたい場合は、`=Round(Sum(Sales)/1000000, 0.1)` を使用します。

詳細は以下をご覧ください。

* [Ceil - スクリプトおよびチャート関数](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/ChartFunctions/GeneralNumericFunctions/ceil.htm)

* [Round - スクリプトおよびチャート関数](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Sense_Hub/ChartFunctions/GeneralNumericFunctions/round.htm)

#### KPI に図形を追加する

KPI に条件付きの色を使用している場合、色に加えて記号を追加できます。記号は、追加のパフォーマンス指標を提供するのに使用できます。

次の手順を実行します。

1. KPI ビジュアライゼーションを選択し、詳細編集モードでプロパティ パネルに切り替えます。

2. [スタイル] を選択し、[色] を展開します。

3. 必要に応じて、[ライブラリ カラー] をオフにし、[条件付きの色] をオンにします。

4. [限度の追加] をクリックして、新しい制限を作成します。1 つの KPI チャートに複数の制限を追加できます。

5. 制限の値を指定するか、数式エディタを使用して数式を入力します。

6. [値] のカラー バーで、変更する KPI の範囲エリアをクリックします。

7. [色] で、プリセットの色を選択するか、カスタムの色を使用します。

8. [記号] を選択して、KPI が指定された制限内に収まったときに表示される記号を選択します。

#### 動的タイトルを使用する

ビジュアライゼーションを作成する際には、動的タイトルを使用して、チャートの本質を表現します。単なる一般的なタイトルではなく、ユーザーの選択に基づいて動的に情報を提供するタイトルの式の構築を検討してください。

set 分析と max()、min()、rank()、correl() を組み合わせてタイトルを作成することで、より動的に説明的チャートを表示することができます。

例えば、このビジュアライゼーションには静的タイトルがあります。

静的タイトル

静的タイトル

静的タイトル![2018 年から 2021 年にかけて売上高が増加傾向にあることを示す、「年間売上高」という静的タイトルの折れ線グラフ。](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Resources/Images/ui_accessible_static-title.png)

タイトルとサブタイトルに動的な数式を追加すれば、チャートの情報がより動的に表現されるため、ユーザーに提供できる情報が増えます。

動的タイトルとサブタイトル

動的タイトルとサブタイトル

動的タイトルとサブタイトル![「前期売上高 3.2％ 増」という動的タイトルの折れ線グラフ。](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Resources/Images/ui_accessible_dynamic-title.png)

動的タイトルの利点は、ユーザーの選択によってタイトルが変わることです。以下のビジュアライゼーションでは、売上上位 3 カ国が選択され、ビジュアライゼーションのタイトルとサブタイトルが変更されています。

選択後の動的タイトルとサブタイトル

選択後の動的タイトルとサブタイトル

選択後の動的タイトルとサブタイトル![折れ線グラフの動的タイトルが「前期売上高 6.4% 減」に変更されました。](https://help.qlik.com/ja-JP/sense/November2025/Subsystems/Hub/Content/Resources/Images/ui_accessible_dynamic-title-changed.png)