個人創業者
サービスのルールが固まる前に、予約のコンセプトを示す必要があります。
テンプレートの大まかな流れは維持し、空き状況とキャンセルに関する前提をレビュー用に明記します。
モバイル画面の出発点
無料のモバイルアプリデザインテンプレートの使い方
無料のモバイルアプリデザインテンプレートをお探しですか？テンプレートはアプリデザインの画面構成を示してくれますが、ユーザーにとって重要なタスク、コンテンツ、状態までは決められません。完成品ではなく、検証するための下書きとして使いましょう。
出発点となるレイアウトであり、完成したアプリではない
テンプレートの価値は、画面構成を確認できることにあります。見た目の仕上げに時間をかける前に、画面の流れを検討しましょう。
-
1
ユーザーのタスクを1つ選ぶ
予約するなど、その画面で行える必要がある操作を明確にしましょう。色が魅力的なだけのものではなく、情報の流れが近いテンプレートを選んでください。
-
2
サンプルの内容を差し替える
現実的なラベル、ボタンの文言、入力例を書きましょう。そうすることで、仮のテキストでは見えにくい、アプリデザインの下書きの窮屈な箇所や分かりにくい選択肢が明らかになります。
-
3
不足している状態を確認する
データの読み込み前、リストが空のとき、エラーの発生後、操作の成功後に何を表示するか、ラフに描いてみましょう。テンプレートの整ったメイン画面が、すべての状態を網羅しているとは限りません。
テンプレートから始める3つの方法
出発点によって、解決できる課題は異なります。レイアウトを見つける、画面を形にする、必要なデザイン機能を見極めるなど、目的に合わせて選びましょう。
出発点を選び、目的に合わせて調整する
詳細を作り直す前に、この手順に沿って比較し、テンプレートがタスクに合うか判断してください。
| テンプレートから始める方法 | 白紙の画面から始める方法 | |
|---|---|---|
| 最初のステップ | 類似したユーザータスクに沿って構成されたレイアウトを探します。 | タスク、必要な情報、主要なアクションを洗い出します。 |
| 画面構成 | 用意された情報の階層を確認し、不要なブロックを削除します。 | 装飾を加える前に、重要度に応じてコンテンツを配置します。 |
| コンテンツ | サンプルのラベルと画像をすべて、実際に使えそうなコンテンツに置き換えます。 | レイアウトを組み立てながら、実際に使うラベルを書きます。 |
| 操作時の状態 | 不足している空、エラー、読み込み中、成功の画面を追加します。 | 標準の画面とあわせて、それらの状態も計画します。 |
| ビジュアルの一貫性 | 引き継いだ文字スタイル、余白、操作部品が今も適切か確認します。 | 作業を進めながら、繰り返し適用できるルールを少数定めます。 |
| 適した用途 | タスクが既存のパターンによく合う場合に便利です。 | フローやコンテンツが特に固有な場合に便利です。 |
チームごとの制約と注意点
モバイル用テンプレートを使えば最初の案を素早く作れますが、何が不足するかは、誰がその画面を使い、主要なアクションの後に何が起こるかによって変わります。
プロダクトデザイナー
モバイルのアカウント画面を、既存のコンポーネントシステムに合わせる必要があります。
テンプレートはコンテンツのチェックリストとして扱い、最終的な文字組みや操作部品の基準にはしないでください。
学生
サンプルのナビゲーションパターンがなぜ機能するのかを理解したいと考えています。
1つのフローを現実的なコンテンツで作り直し、ルートごとに画面がどう変わるかを比較します。
少人数のチーム
複数のメンバーが、初期段階の同じアプリデザインの方向性をレビューしています。
色や画像について話し合う前に、主なタスクと不足している状態について合意します。
ビジュアル案の制約と対応しきれない部分
これらは参考例であり、変換の過程や生成結果を示すものではありません。情報の優先順位を比較し、モバイル向けの方向性に、実際のラベルや小さい画面、初期状態以外の状態を収める余地があるか確認してください。
構成の参考例モバイル向けテンプレートの方向性要件を明確にして次の画面へ
アプリデザインを進める前に、ユーザーの目的、画面の主なアクション、テンプレートには示されていない状態を1つ書き出してください。その要件をブラウザーの入り口に持ち込み、そこで利用できる選択肢を確認します。
無料のモバイルテンプレートに関する質問
まずユーザーのタスクを明確にし、流れが似ているレイアウトを探しましょう。サンプルのコンテンツをすぐに実際の内容に置き換えると、その構成が画面に合うか判断できます。
通常、それだけでは足りません。テンプレートは主な画面の参考にはなりますが、アプリ全体ではナビゲーション、アクセシビリティ、コンテンツ、空の状態やエラー状態についても検討が必要です。
色を調整する前に、ラベル、サンプルデータ、主要なアクションを変更しましょう。実際に近いコンテンツを入れると、スペースや情報の優先順位の問題を見つけやすくなります。
ブラウザ上で画面を計画・確認する際に、テンプレートを参考にできます。ただし、特定のテンプレートファイルを読み込んだり編集したりできるかは、ツールとファイル形式によります。使うと決める前に確認しましょう。
テンプレートの主要なアクション、コンテンツの順序、ナビゲーションを、ユーザーが完了すべきタスクと比べましょう。流れの大部分を置き換える必要があるなら、白紙の画面から始めるほうがわかりやすいかもしれません。