モバイルデザインテンプレート

本記事では、UIテンプレートの構成内容と活用方法について解説します。

目的

このアプリの目的は、アプリ開発者がユーザーフレンドリーで、一貫性があり、効率的なモバイルアプリケーションを作成できるよう支援することです。モバイル体験を念頭に置いてアプリを構築することで、モバイルデバイス上での利便性が向上します。

このアプリは、Tulipアプリケーションの外観例を示し、アプリケーションで使用できる一般的なステップレイアウトを紹介します。ベースレイアウト、ヘッダー、フッターに含まれるべき要素の概要を説明しており、アプリ開発者がTulipアプリケーションの開発を容易に開始できるようになっています。 このテンプレートを使用すると、アプリ開発者はステップレイアウトをアプリケーションにコピー＆ペーストできるため、アプリ開発が大幅に簡素化されます。これにより、時間を節約できるだけでなく、このガイドを使用して構築されたすべてのアプリで統一された外観を確保できます。

セットアップ

さまざまなデバイスで画面サイズが幅広いことから、モバイルアプリにおいて解像度は極めて重要です。現在、このアプリではモバイル設定として「モバイル横向き」と「モバイル縦向き」の2つのオプションが用意されています。新しいモバイルデバイスについては、19.5:9の縦向きおよび横向きの解像度を使用することをお勧めします。

機能の概要

最初の6つのステップはデザインガイドとして機能し、アプリケーションで使用される色、ボタン、ボタンアイコン、タイポグラフィを紹介します。これらの要素を定義することで、企業全体やインスタンス全体で一貫したインターフェースを維持しやすくなります。

「色」のステップでは、アプリケーション構築に使用されるすべての色と、それに対応する16進数コードを確認できます。複数のステップにわたって色の変更を適用する必要がある場合、任意の色を変数として保存することで、アプリ全体での一貫性を確保できます。

「ボタン」および「ボタンアイコン」のステップでは、ライトモードとダークモードの両方のアプリで一般的に使用されるボタンと、それに関連するアイコンを定義します。ボタンアイコンは、アイコンの意味が一目瞭然である場合に、テキストと組み合わせて使用することで、視認性を高め、スペースを節約できます。各アイコンは、アプリ内のすべてのステップ、そして理想的にはワークスペース内のすべてのアプリにおいて、一貫した意味を持つようにする必要があります。

このセクションの最後のステップは「タイポグラフィ」ステップで、タイトルや段落テキストのフォントサイズやスタイルを定義します。モバイルアプリの場合、読みやすさを高めるために、フォントサイズを20px以上に保ち、背景とのコントラストを高くすることを推奨します。

次のセクションでは、アプリビルダーが自分のアプリに最適な基本レイアウトを設計できるよう支援します。ここでは、基本レイアウトにコピー＆ペーストできるさまざまなヘッダーやフッターが用意されています。基本レイアウトにナビゲーションバーを追加することで、ユーザーは異なるステップへ移動したり、ページを更新したり、マシンのステータスを確認したりできるようになり、ワークフローが向上します。 アプリビルダーは、ライトテーマまたはダークテーマのベースレイアウトのいずれかを選択できます。

また、このアプリには「ステップテンプレート」用のステップセットと「ステップレイアウト」用のステップセットが含まれています。これらには、メニュー、モーダル、作業手順、画像キャプチャなどが含まれます。

詳細情報

アプリデザインのベストプラクティスについては、こちらの記事をご覧ください。

モバイルデバイス向けアプリケーションの設計についてさらに詳しく知りたい場合は、モバイルUI/UXのベストプラクティスに関するコミュニティディスカッションをご覧ください。