このガイドでは、既存の iOS モバイル デザインを、基本的な Android UX パターンとマテリアル デザインを使用して Android に変換することで、Android デザインを始める方法について説明します。
設計のパリティを確保するためにアウトライン化され、効率性を高めるために順序付けされています。共有のベース デザイン システムを使用している場合は、マテリアル 3 ではなく独自のシステムでデザインを変換できます。Android と iOS の両方で、コンテンツが最優先であるという考え方が守られています。
その後、色、タイプ、形状でブランディングを行うことができます。これにより、コンテンツの可読性が高まるだけでなく、一貫性のあるコンテンツを作成しやすくなります。
iOS の設計から始める
始める前に、iOS アプリのコピーを作成します。iOS アプリは、バー、ビュー、コントロールの 3 つの領域に分類されます。この構造を使用して、翻訳を進め、最後にスタイル設定を行います。
Android アプリの各部分をご覧ください。
1. iOS システム UI を削除する
ステータスバーとホーム インジケーターを削除します。この操作がより簡単になりました。
2. フレームのサイズを変更する
Android のコンパクト サイズ（412 dp）を使用できます。ただし、ウィンドウ クラスサイズ内でも、さまざまなデバイスを考慮してください。たとえば、360 dp でテストして、小さい画面に対応し、すべてのウィンドウ クラスのサイズで適応させます。
3. Android システムバーに置き換える
Android システム UI は、ユーザーのデバイスや設定によって異なりますが、標準のシステム UI を表示することで、デザインのコンテキストをより明確にできます。通知バーを上部に、ジェスチャー ナビゲーションまたは 3 ボタン ナビゲーション バーを下部に配置します。
詳しくは、Android のシステムバーをご覧ください。
4. ナビゲーションによって異なります
Tabbar（ボトム ナビゲーション）をナビゲーション バーに置き換えます。
フローマップを振り返ってみましょう。iOS アプリでその他メニューを使用していますか？（HIG のベスト プラクティスでは、このパターンを使用しないことが推奨されています）。アイテムは 5 つ以下に抑え、下部ナビゲーション バーはメイン ナビゲーションに限定します。プロフィールや設定などのセカンダリ アクションを上部アプリバーに移動できるかどうかを評価します。また、メイン アクションを FAB に変換できるかどうかを評価します。
メイン ナビゲーションは、常に親ビュー（フローマップのセクションの最上位）に表示されるようにします。キッズビュー（保護者の方向けの表示の下にあるもの）は、ナビゲーション階層の上位にあり、モーダルでない場合は、プライマリ ナビゲーションを含めることができます。
適切なアイコンとラベルでボトム ナビゲーション バーを更新します。どちらのプラットフォームでも、ナビゲーションのデスティネーション間の横方向の移動は回避されます。
5. ナビゲーション バーからトップ アプリバーへ
セクションごとに分解します。まず親ビュー、次に子ビューです。アプリバーは、左側のナビゲーションとタイトル、右側のアクション アイテムで構成されます。
アプリが下部のナビゲーション バーではなくナビゲーション ドロワー メニューを使用している場合、すべての親ビューにドロワー アイコンが表示されます。
アプリにレールまたはドロワーがない場合、親ビューにはプライマリ ナビゲーション アイコンが表示されません。
Android のアプリバーでは、タイトルはデフォルトで左揃えになります。
子ビューは、ナビゲーション アイコンの場所に上矢印を表示します。「戻る」と混同しないようにしてください。上矢印は、ユーザー フロー内のアプリのナビゲーション階層を 1 つ上のレベルに移動させますが、戻るボタンやエッジ スワイプはシステム ナビゲーションに存在し、ユーザーを前に戻したり、アプリから移動させたりします。
モーダルビューはどうですか？全画面モーダル（動画プレーヤーや画像など）の場合、これは子ビューのアプリバーに似ていますが、ナビゲーション アイコンは閉じるアイコンに変更され、モーダルを閉じます。
6. 少しだけモダリティを追加
ユーザーの注意をタスクに集中させるのに最適な、大きなモーダルビューから始めます。iOS では、これらはシートとして表示されることが多く、ユーザーはシートを下にスワイプできます。
アプリバーの入れ替えを完了します。iOS シート モーダルでは、最上部のシート部分と背景のピークを全画面ダイアログのアプリバーに置き換えます。
ボーナス: iOS モーダルシートをボトムシートに変換できるかどうかを確認します。
Action シートと Activity シートを Bottom シートに変更しました。（共有シートも翻訳できるようになりました）。
アラートには、システムのダイアログを使用します。ユーザーに何らかの方法で確認してほしい重要な情報に使用している場合は、システム ダイアログに置き換えてください。この時点で、入力とピッカーを入れ替えることも忘れないでください。
7. 兄弟姉妹のコンテンツ
タブ、ビューページャ、スワイプタブ。iOS でセグメント化されたコントロールを使用している場合、Android ではタブに変換されます。どちらも、類似しているが同一ではない情報のビューをフィルタする手段として機能します。Android のタブは通常、アプリバーに付加され、コンテンツ間をスワイプできるという利点があります。
8. コンテンツとコントロール
制約やサイズ変更の動作の設定によっては、ほとんどのコンテンツのサイズがすでに変更されている可能性があります。この機会に、余白を確認して設定してください。小画面では 16 dp が適切な標準です。
ベースラインのグリッドは、コンポーネントでは 8 dp、文字とアイコンでは 4 dp のグリッドに基づいています。8pt グリッドは iOS でうまく機能するため、両方のプラットフォームの出発点として検討することをおすすめします。
コントロール。これらの切り替えを Android の切り替えに切り替えます。Android のチェックボックスとラジオボタンを使用します。Android にはこれらがすべて搭載されています。
フォームがある場合は、iOS のテキスト フィールドを Android のテキスト フィールドに置き換えます。マテリアルにはアウトラインや塗りつぶしなどのオプションが用意されているため、ブランドに最適なものを選択してください。
マテリアル リストは、iOS のテーブル セルと比較すると、いくつかの違いがあります。
- 区切り線は控えめに使用します。
- リストでは、視覚的なノイズを最小限に抑えるためにインジケーターは使用されません。
- ディメンションは 8 dp グリッドに準拠します。
9. スタイル
色: UI の色は、カラーパターンで組み立てられたアクセント カラー、セマンティック カラー、サーフェス カラーで構成されます。これらの色は、ロールごとに UI に適用されます。
タイプ: システム フォントを使用する場合は、San Francisco を置き換えます。Roboto は、Android のデフォルトのシステム フォントです。ただし、テーマ設定やダウンロード可能な Google フォントを使用して、ブランド独自のスタイルを表現することをおすすめします。
アイコン: これも同様。SF シンボルを使用している場合は、すべてがマテリアル アイコンまたはシンボルに変換されていることを再確認してください。ブランドに適したバリエーションを選択します。マテリアル アイコンはあらゆるプラットフォームで使用できることをご存じですか？
モーション: Android と iOS ではモーション デザインが異なるため、各プラットフォームに合わせて調整する必要があります。マテリアル モーションは、情報提供、フォーカス、表現を目的としています。リップルは、コンポーネントで使用される明確なハイライトで、タップ フィードバックを提供します。モーション システムは、コンテナ変換、共有軸、フェードスルー、フェード アニメーションを活用するための遷移パターンのセットです。デザイン内の要素に永続コンテナがあるかどうか、要素間の関係、要素の出入り方法を検討します。
10. 整理
プロトタイプを翻訳する場合は、ここで配線を変更することをおすすめします。メイン ナビゲーションに戻ります。次に、アップとバックの違いを考慮して、Android に適したページ遷移（ステップ 9 で説明）を選択して、アプリバーを作成します。
完全に機能するプロトタイプが準備できているはずです。サイズ変更も完了しているので、引き渡し準備が整っています。
スタイルとコンポーネントのガイド
既存のデザイン システムやスタイルガイドがある場合は、iOS のガイダンスと併用する場合と同様に、マテリアル デザインと併用できる独自の基盤スタイル（色、書体、アイコン、シェイプ）があるかもしれません。マテリアル テーマ設定を使用すると、色、タイプ、シェイプを使用して、ブランド独自のスタイルでマテリアル コンポーネントをカスタマイズできます。
マルチプラットフォーム プロダクトでプラットフォーム固有のガイドラインを設けることは珍しくなく、独自のデザイン システムをよりユーザー中心にすることができます。
最後に、カスタム デザイン システムなしで作業している場合は、すべてのアプリやプロダクトに完全なカスタム デザイン システムが必要なわけではないことを知っておいてください。1 枚のスタイルガイドを作成することを検討してください。スタイルガイドは、デザインの基本的な仕様を概説するドキュメントです。多くの場合、ブランド ガイドラインにはスタイルガイドが含まれています。
これは Android 用にコピーして、スタイル（またはシンボル、コンポーネント、ライブラリ）を更新するためのソースとして使用できます。