個人創業者
機能一覧だけではアイデアを評価しにくい相手に、予約サービスの構想を見せたい場合。
関連する画面を調整すれば、装飾ではなく、選択肢やラベル、次の操作に話し合いを集中できます。
テンプレートを使ったワークフロー
次のコンセプトに無料のFigmaモバイルアプリテンプレートを使う方法
無料のFigmaモバイルアプリテンプレートがあれば、アプリデザインのプロジェクトを目に見える形から始められます。目的に合うレイアウトを選び、サンプルの内容を差し替えて、操作の流れが自然かどうかを確かめましょう。
この始め方と一般的な始め方の違い
テンプレートを使う方法では既存の画面パターンから始めます。一方、一般的なアプリデザインでは課題から始め、その後でパターンを選びます。以下の比較で、その違いを具体的に示します。
このアプローチが特に役立つ3つの点
役立つテンプレートには、画面の構成、繰り返し使える視覚的なパターン、具体的に検討できる素材があります。大切なのは、どの部分を残すべきか判断することです。
プロダクトデザイナー
モバイルでの購入手続きを構成する2つの方法を比較している場合。
テンプレートを候補の1つとして使い、完成形とみなすのではなく、目的に照らして情報の優先順位を評価しましょう。
Androidに特化したチーム
サンプル画面は洗練されて見えても、そのナビゲーションは想定するデバイスの利用状況に合わない場合があります。
役立つコンテンツ構成は維持しながら、プラットフォームで期待される操作、余白、タッチターゲットを見直します。
初めてデザインする人
画面は編集できても、最初に何を変えるべきか迷うことがあります。
ユーザーの主なタスクを起点に、ラベル、状態、視覚的な優先順位を順を追って検討します。
始め方
テンプレートは、プロダクトに関する判断を省く近道ではなく、検討すべき下書きとして扱いましょう。
-
1
タスクを明確にする
誰がその画面を使い、何を達成する必要があるかを書き出します。アプリデザインでは、「モダンなホーム画面を作る」よりも「訪問を予約する」のほうが、方向性が明確になります。
-
2
近いパターンを選ぶ
タスクとコンテンツの優先順位が似ているテンプレートを探します。時間をかける前に、利用規約と編集可能かどうかを確認しましょう。見た目が合うだけでは不十分です。
-
3
差し替えて確認する
実際に使われるラベルとコンテンツを入れます。主要な操作から次の画面までたどり、エラー、結果なし、確認画面など、欠けている状態がないか確認します。
テンプレートと白紙からの制作の詳細
この比較を使って、既存のモバイルレイアウトが今回のアプリデザインのタスクに役立つか判断しましょう。
| Figmaテンプレートから始める場合 | 一般的なアプリデザインから始める場合 | |
|---|---|---|
| 最初に決めること | タスクに最も近い既存の画面はどれか？ | ユーザーは何を達成する必要があるか？ |
| 最初に用意するもの | 作成者が利用を許可している既存のレイアウト | タスクの説明、大まかなフロー、または白紙のキャンバス |
| 最初から得られる利点 | 評価・変更できる視覚的な階層構造 | スタイルを整える前に構造を決められる自由 |
| 主なリスク | タスクに役立たない魅力的な要素を残してしまうこと | どこから始めるかを決めるのに時間をかけすぎること |
| コンテンツに関する作業 | サンプルの文章、画像、データを差し替える | 配置する前に必要なコンテンツを定義する |
| フローに関する作業 | 提供された画面の前後に何が起こるかを確認する | 個々の画面を磨き込む前にフローを整理する |
| レビュー時の問い | 何を削除または調整すべきか？ | どのような構造を作るべきか？ |
念頭に置くべき制限
このガイドはFigmaに関連するものですが、App DesignはFigmaではなく、Figmaのテンプレートライブラリを提供・検証するものでもありません。
1
テンプレートをダウンロードできる保証はありません
このページは特定のFigmaファイルを提供するものではなく、サードパーティーのファイルが現在も利用可能かどうかも確認していません。
代わりにすべきこと
見つけたテンプレートの提供元と、現在の利用条件を確認してください。
2
製品に合うとは限りません
別のアプリ向けに作られた画面を使うと、ユーザー、コンテンツ、ナビゲーションについて未決定の点を見落とすおそれがあります。
代わりにすべきこと
残す前に、目立つ要素をすべて、書き出したタスクと照らし合わせましょう。
3
ライセンスがあるとは限らない
無料と記載されたテンプレートにも、クレジット表記、再配布、商用利用に関する条件が付いている場合があります。
代わりにすべきこと
改変する予定のファイルについて、作成者が定めたライセンスを確認しましょう。
4
テストの代わりにはならない
洗練された画面だけでは、ユーザーが操作の流れを理解できるか、タスクを完了できるかは分かりません。
代わりにすべきこと
現実的なシナリオに沿って操作し、ラベルや次の手順のどこで迷いが生じるかを観察しましょう。
画面のアイデアを次の段階へ進める
ユーザーのタスク、その画面に必要なコンテンツ、続くアクションを明確にしましょう。外部のテンプレートを改変する場合も、テンプレートを使わずに始める場合も、こうした判断がアプリデザインの土台を強くします。
よくある質問
作成者が公開しているテンプレートを探し、各配布元の現在のアクセス条件と利用規約を確認してください。このページではテンプレートの評価と改変の方法を説明しています。Figmaテンプレートの一覧ではありません。
検索結果にある「無料」という言葉ではなく、個々のファイルに付随するライセンスによります。製品に組み込む前に、商用利用、クレジット表記、再配布に関する条件を確認してください。
既存の画面があれば、情報の優先順位や余白を確認しやすくなります。それでも初心者は、サンプルのコンテンツを置き換え、想定される操作の流れを理解し、自分のアプリに役立たない要素を見直す必要があります。
まず、主なタスクと画面の大まかな流れを書き出しましょう。その流れに合うテンプレートを選べば、使いやすいレイアウトに合わせて製品を作り変えずに済みます。
このページではFigmaファイルやテンプレートライブラリの提供を約束しておらず、App DesignはFigmaと提携していません。このガイドを参考にテンプレートを起点とした進め方を計画し、外部リソースは元の提供元で確認してください。