複数のデバイスおよびプラットフォーム向けにデザインする場合は、モバイル、タブレットおよびデスクトップの解像度の画面サイズに対してシームレスな操作性を作成しておく必要があります。
複数の画面サイズのデザインをする場合、XD はレスポンシブサイズ変更と呼ばれる機能をサポートしています。これにより、オブジェクトのサイズを変更する際、空間関係を維持しながら様々な画面サイズに最適なサイズで適応させることができます。詳細は、レスポンシブサイズ変更とコンストレイント参照してください。
最終更新日 :
2021年4月28日
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
アクセシブルデザインを制作して、様々な技能を持つデザイナーのために XD を包括的で使いやすくする機能について説明します。
XD のアクセシビリティ機能は、聴覚、運動、視覚または認知能力で様々な障害を持つユーザーのために簡単に使用できるようになっています。
XD は、World Wide Web Consortium の WCAG 2.1 ガイドラインによって定義されたアクセシビリティの AA 合格基準に準拠するように変更されます。
XD の様々なアクセシビリティ機能について詳しくは、以下を参照してください。
macOS の音声コントロールを使用して、XD のデザインとプロトタイプを作成
macOS の音声コントロールを使用して、プロパティインスペクターや、XD アプリケーションメニュー内の描画ツール、レイヤー、プロパティなど、XD の基本的なコアデザイン機能の一部にアクセスできます。例えば、「レイヤー 1 をクリック」、「すべてを選択」、「水平方向に分布をクリック」と言うことで、キャンバス上のレイヤーを有効化して、そのレイヤー内のすべてのオブジェクトを選択し、キャンバス上のオブジェクトを水平方向に分布することができます。
XD での音声コントロールの使用について詳しくは、Adobe ブログの Adobe XD での macOS 音声コントロールの記事を参照してください。
通常は従来の入力デバイスを使用して実行する様々な操作を、次の音声コマンドを使用して実行することができます。
| MAC での音声コマンド | ||
|---|---|---|
| 選択 | マージンの種類 |
ぼかしを適用 |
| 長方形 |
マージンをリンク |
ぼかしの不透明度 |
| ペン |
上マージン |
ぼかしの種類 |
| 楕円形 |
右マージン |
ポイント X |
| 多角形 |
下マージン |
ポイント Y |
| 線 | 左マージン |
垂直方向に分布 |
| テキスト | コーナーカウント |
水平方向に分布 |
| アートボード | 角丸の半径 |
選択範囲を追加 |
| ズーム | スター比率 |
選択範囲を削除 |
| アセット | 不透明度 |
選択範囲を交差 |
| プラグイン | 不透明度（スライダー） |
ぼかしの明るさ |
| レイヤー | グリッドを表示 |
ぼかしの明るさ（スライダー） |
| 水平方向に揃える |
垂直方向に揃える |
上揃え |
| 下揃え |
左揃え |
右揃え |
| グリッドカラー |
グリッド列のカラー |
グリッド列 |
| グリッド段間幅 |
グリッド列の幅 |
グリッド方眼の大きさ |
音声と再生機能を使用して、アクセス可能なデザインを作成
XD の音声機能を使用すると、音声コマンドによってデザインとプロトタイプを作成できます。詳細は、音声機能付きプロトタイプのデザインを参照してください。
音声のトリガーと再生
プロトタイプにサウンド効果を追加する場合は、XD のオーディオ再生機能が便利です。例えば、メールが正常に配信されたときに、オーディオによって確認できます。オーディオ再生について詳しくは、「プロトタイプに再生を追加する」を参照してください。
ナビゲーションにキーボードを使用
Adobe XD のキーボードショートカットを使用して、特定のデスクトップの要素や XD の UI コントロールを検索することができます。
ただし、XD はキーボードのアクセシビリティを完全な形ではサポートしていません。例えば、プロトタイプモードでは、プロパティインスペクターの UI 要素のキーボードフォーカスを設定した後で、Tab キーを使用して UI コントロールに移動する必要があります。
テキストの読みやすさとカラーコントラストのサポート
XD は目の不自由なユーザーもサポートしています。XD の UI 要素を高コントラストの背景に設置することで、テキストやアイコンが簡単に識別できるようになります。
アクセシブルデザインを作成するための XD プラグインの使用
包括的なデザインを作成する場合、デザインの包括性をテストしやすくするために様々な Adobe XD プラグインが用意されています。色覚異常の状態をシミュレートしてカラーコントラストを確認するために、色覚異常とカラーコントラストのプラグインを確認してください。
複数のデバイス用にレスポンシブサイズ変更を作成
希望する言語での操作
XD は、多言語プラットフォームで利用できるようになりました。そのため、オペレーティングシステム間での共同作業、デバイス間の操作のプレビュー、希望する言語での作業ができるようになります。サポートされている言語には、英語、フランス語、ドイツ語、日本語、中国語、韓国語、ブラジル語、ポルトガル語、スペイン語が含まれます。XD でのアプリケーションの言語の切り替えについて詳しくはアプリケーションの言語を切り替える方法を参照してください。
OS ごとのアクセシビリティの環境設定
Adobe XD は引き続きアクセシビリティに焦点を当てており、現在の機能を向上させるための計画をしています。
聴覚、視覚、音声、運動、認知に障害のある人に対するソリューションについて詳しくは、以下の Adobe XD アクセシビリティ対応レポートをご確認ください。
Adobe XD アクセシビリティ対応レポート（Web 版）
Adobe XD アクセシビリティ対応レポート（Windows 版）
Adobe XD アクセシビリティ対応レポート（macOS 版）
