【Polaris和訳】Foundations/Mobile
この記事について
この記事は、Polaris/Foundations/Mobileの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
モバイル
ウェブ用にデザインしたものをモバイル用に変更することがよくあります。このような場合、モバイルはより高品質でパーソナライズされた体験をもたらすことなく、ウェブの適応で終わってしまいます。ウェブとモバイルを同時にネイティブに扱うべきなのです。
クロスプラットフォームな体験をデザインする
マーチャントは Shopify のデスクトップアプリケーションだけに頼ってストアを運営していると思いがちですが、ワークフローの大部分は複数のアプリケーションやデバイスを必要とします。優れたクロスプラットフォーム体験をデザインするためには、これらのワークフローやタスクがどこでどのように始まり、終わるのかを理解する必要があります。
考えてみてください。
- ウェブ、モバイル、アプリ間の情報の流れ方
- マーチャントが各プラットフォームで行うこと
- 体験が一貫性を保ち、作り込まれているかどうか
- パスワードマネージャ、通知、触覚フィードバックなど、活用できる組み込み技術があるかどうか
モバイルウェブとモバイルネイティブ
モバイルブラウザで Shopify を使用する場合、ネイティブアプリと比べて多くの違いがあります。
モバイルウェブは、Shopify を小さなブラウザウィンドウで使用するのと同じです：小さなビューポートに適応したウェブベースのコンポーネントに依存しています。レイアウトやユーザーインターフェースを機能的にすることに重点を置いています。
ネイティブアプリでは、プラットフォームのネイティブな機能によって拡張されます。ネイティブアプリは、組織的なスキーム、ナビゲーション、モーション、ネイティブコンポーネント、通知、認証など、すべてがモバイル体験をよりスピーディーに、より洗練されたものに、よりパーソナルなものに、そして「ウェブ」ではないものにするために貢献しています。
今日では、使い勝手の良い体験（モバイルウェブ）を作ることと、より効率的でカスタマイズされた体験（モバイルネイティブ）を作ることには大きな違いがあります。
✅ 推奨
- ネイティブコンポーネントを使用したモバイルネイティブ体験の設計
- デバイスとネイティブアプリの機能を活用する
- プラットフォーム間の情報の流れを考慮する
- 可能な限りディープリンクを使用する（モバイルブラウザではなく、モバイルアプリを開くようにする）。
❌ 禁止
- モバイル Web コンポーネントの使用
- ウェブビューをデフォルトで使用する
- モバイルブラウザ上で使い手を Shopify にリダイレクトする（常にアプリに送る）。
モバイルでの労力、疲労、不和の管理
優れたモバイル体験は、直感的で信頼性が高く、やりがいのあるものでなければなりません。モバイルデバイスでは労力と不和が蓄積されやすく、人々は困難に感じるとタスクを後回しにする傾向があります。
不和や疲労を防ぐためには、労力を最小限に抑え、不必要なやりとりや遷移を避ける必要があります。
✅ 推奨
- ジェスチャー、アクション、インタラクションが接続されたときの感触を評価する。
- ワークフローを実行する頻度を検討する
- タスクを完了するためにどれだけの労力が必要かを考える
❌ 禁止
- 長時間の体験をデザインする
- 絶対に必要とは言えない、新しいパターンを作る
- ワークフローを完成させるために、使い手をアプリの外に送り出す
情報密度
モバイルにおける情報密度は、デザインとユーザビリティのベストプラクティスが交わる部分です。
情報密度を下げる
モバイル画面の面積はデスクトップやラップトップに比べてごくわずかであり、すべての情報を表示するのに十分なスペースがあるとは言えません。必要なものを慎重に選択することで、情報密度を下げ、集中力を高め、人々がより速くタスクを達成できるようにします。
✅ 推奨
- 重要な情報とアクションを中心に体験を構築する。
- 長い説明文、競合するコールトゥアクション、窮屈な見た目は避けてください。
- アクションが明らかな場合は、コールトゥアクションを短くするチャンスを探しましょう。例えば、画面に周囲の状況が表示されている場合は、"商品を保存"ではなく"保存"とすることができます。
- 間隔のガイドラインと推奨されるタッチターゲットのサイズを参照してください。
❌ 禁止
- コンポーネント間にカスタムスペーシングを使用する
- 窮屈な見た目をデザインする
- 使い手に選択肢を与えすぎる
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion