本文へスキップ

ユーザーエクスペリエンスの向上

テキスト入力の設定​

タッチ式携帯電話でのテキスト入力は、画面が小さくソフトウェアキーボードを使用するため困難です。しかし、必要なデータの種類に応じて、テキスト入力の設定を適切に行うことで、容易にすることができます。

  • 最初のフィールドに自動的にフォーカスする
  • プレースホルダーテキストを期待されるデータ形式の例として使用する
  • 自動大文字化と自動修正を有効または無効にする
  • キーボードの種類を選択する（例：メール、数値）
  • リターンボタンで次のフィールドにフォーカスするか、フォームを送信する

その他の設定オプションについては、TextInput ドキュメントをご覧ください。

キーボードが表示されているときのレイアウトの管理​

ソフトウェアキーボードは画面のほぼ半分を占めます。キーボードによって隠れてしまう可能性のあるインタラクティブ要素がある場合は、KeyboardAvoidingViewコンポーネントを使用して、それらにアクセスできるようにしてください。

タップ可能な領域を大きくする​

携帯電話では、ボタンを押す際に正確に操作することが困難です。すべてのインタラクティブ要素を44x44以上にする必要があります。これを行う1つの方法は、要素に十分なスペースを残すことです。padding、minWidth、minHeightスタイル値は、この点で役立ちます。あるいは、レイアウトに影響を与えることなくインタラクティブ領域を拡大するために、hitSlopプロパティを使用することもできます。デモはこちら

Android Rippleを使用する​

Android API 21以降では、マテリアルデザインのリップルを使用して、ユーザーが画面上のインタラクティブな領域に触れたときにフィードバックを提供します。React Nativeでは、これをTouchableNativeFeedbackコンポーネントを通じて公開しています。不透明度やハイライトの代わりにこのタッチ可能なエフェクトを使用すると、多くの場合、アプリがプラットフォームにより適したものになります。ただし、iOSまたはAndroid API 21未満では動作しないため、iOSでは他のTouchableコンポーネントのいずれかを使用する必要があります。プラットフォームの違いを処理するために、react-native-platform-touchableのようなライブラリを使用できます。

画面方向のロック​

Dimensions APIを使用していて方向の変更を処理していない場合を除き、複数の画面方向はデフォルトで問題なく動作します。複数の画面方向をサポートしない場合は、画面方向を縦向きまたは横向きのいずれかにロックできます。

iOSでは、Xcodeの[General]タブと[Deployment Info]セクションで、サポートするデバイスの向きを有効にします（変更を行う際は、[Devices]メニューから[iPhone]を選択していることを確認してください）。Androidでは、`AndroidManifest.xml`ファイルを開き、アクティビティ要素内に`'android:screenOrientation="portrait"'`を追加して縦向きにロックするか、`'android:screenOrientation="landscape"'`を追加して横向きにロックします。

詳細情報

マテリアルデザインとヒューマンインターフェースガイドラインは、モバイルプラットフォーム向けの設計について学習するための優れたリソースです。