初めてデザインする人
画面の目標を1つ書き出しましょう。それは、利用者が予約時間を選べるようにすることです。色を選ぶ前に、日付、予約可能な時間枠、確定操作をリストアップします。
小さく検証可能な画面の要件をまとめると、最初の作業を予約タスクに集中させられます。
アクセスガイド
ブラウザーで無料のアプリデザインに取り組む方法
まずは1つの画面と明確なユーザータスクを決め、大きなデザインに取りかかる前に、リンク先で実際に何ができるか確認しましょう。App Designにはブラウザーからアクセスできますが、このページでは、支払いなしで利用できる機能があるかどうかは確認できません。
事前に必要なもの
画面の目標、必要なコンテンツの一覧、結果を評価する方法が必要です。計画を始める段階で、完成したビジュアルシステムは必要ありません。
一通りの実践例
予約アプリを例に考えてみましょう。タスクを定義し、予約画面をスケッチしてから、利用者が時間を選べるか、次に何が起こるか理解できるかを確認します。次の4つの視点から見ると、より有益なレビューができます。
プロダクトの創業者
サービスの選択から予約確定までの流れをスケッチしましょう。空き状況、所要時間、キャンセル条件をどこに表示する必要があるかを記します。
レビューできる形で流れを示すと、細部のビジュアル制作に入る前に不足している情報が見えてきます。
モバイルデザイナー
狭い画面でも、時間枠、ラベル、確定操作が読みやすく、タップしやすいか確認します。
モバイルの制約を、後から修正する項目ではなく、デザイン要件に組み込みます。
チームのレビュー担当者
選んだ時間枠がたった今利用できなくなったユーザーの立場で、画面を操作してみます。表示されるメッセージと、次に取れる操作を記録します。
理想的な予約の流れだけでなく、エラー時の状態もレビュー対象に含めます。
選択肢の表
以下を、必要な作業量が少ない順に並べた3つの出発点として考えてください。今のデザイン上の疑問に答えられる、最も手軽なものを選びましょう。いずれもリンク先の利用条件を保証するものではありません。
-
1
画面を説明する
アイデアがまだ曖昧な場合に最適です。ユーザー、予約タスク、必要な情報、起こりそうなエラー時の状態を書き出します。どのツールを開いても再利用できるよう、自分のメモに簡潔にまとめておきましょう。
-
2
フローをスケッチする
その画面が一連の操作のどこに位置するか不明確な場合に最適です。選択、確認、確定の各段階をシンプルな枠で描き、時間枠が利用できない場合に何をすべきか決めます。
-
3
1つのインターフェースを磨く
フローがすでに整理できている場合に最適です。モバイル画面サイズのレイアウトで、ラベルの分かりやすさ、タップ領域、コントラスト、主な操作を確認します。選んだ編集ツールが、必要な変更に対応しているかも確かめましょう。
うまくいかないこと
ブラウザーからアクセスできることは、編集、エクスポート、共同作業、公開を無制限に行える証拠にはなりません。これらの機能を当てにする前に、リンク先の最新の利用条件を確認してください。
1
すべての機能が使えると思い込む
Webページにアクセスできても、どのデザイン操作が利用可能か、継続利用に条件があるかは分かりません。
代わりにすべきこと
プロジェクトを広げる前に、リンク先の最新の利用条件を確認し、画面作成に必要な機能を1つ試してください。
2
完成したアプリを期待する
画面のコンセプトに、動作する予約ロジック、空き状況のデータ、通知、公開済みのモバイルアプリが自動的に含まれるわけではありません。
代わりにすべきこと
画面設計の概要と開発要件を分け、実装が必要な操作を一つずつ記録します。
3
実機での確認を省く
幅の広いブラウザー画面では見やすいレイアウトでも、スマートフォンでは文字が折り返されたり操作ボタンが密集したりして、使いにくくなることがあります。
代わりにすべきこと
狭い画面向けの表示を確認し、設計に関わっていない人に予約手順を試してもらいます。
4
見た目の仕上げだけから始める
予約の手順で次に何をすべきかが不明確だったり、エラーメッセージがなかったりする問題は、色やアイコンでは解決できません。
代わりにすべきこと
文字や色を調整する前に、ユーザーが行う操作と、画面に必要な各状態を確認します。
ブラウザーで作業を続ける
取り組む操作を一つに絞り、画面に必要な内容と、デザインを通じて答えを出したい質問を一つ用意してください。リンク先をブラウザーで開き、現在の作業手順と利用条件を確認しましょう。一般的なデザインガイドに書かれた機能がすべてそこで使えるとは限りません。
よくある質問
リンク先をブラウザーで開き、最初の作業手順を確認できます。このページでは、現在利用できる機能は確認していません。特定の操作を無料で行えると考える前に、リンク先の利用条件を確認してください。
画面設計の概要を書いたり、紙に操作の流れをスケッチしたりするのに、インストールは必要ありません。リンク先はブラウザーで開けますが、現在の利用要件と対応している操作は、そこで確認してください。
ユーザーが行う操作を一つ、画面に表示すべき情報、そしてユーザーが次に取るべき行動を用意してください。予約画面なら、選択した時間枠が利用できない場合にどうなるかも含めます。
いいえ。画面デザインはレイアウトと想定される操作を伝えるものです。動作するアプリには、実装、データ処理、テストも必要です。デザインはそれらの仕組みが存在する証拠ではなく、レビューするための仕様として扱ってください。
ユーザーが予約時間を見つけて確認できるかなど、範囲を絞った問いを1つ設定してください。必要なコンテンツや状態を用意されている操作で表現できるか確認し、その結果をモバイル画面のサイズで見直してください。