Matt Raeによる作品
モバイルアプリのデザインプロジェクトでは、エクスペリエンスやセグメントをより忠実なモックアップに入れ込む前に、ワイヤフレーム作成から開始する方が良いでしょう。ワイヤフレーム作成のプロセスにより、ユーザーフローのギャップの特定がしやすくなり、また、時間をかけてインターフェイスを詳細に作る前に相違点を見つけやすくなります。
このチュートリアルでは、モバイルアプリの新規登録フローのワイヤフレーム作成作業をご紹介します。基本シェイプとグレースケールの配色を使用した画面を数個、フローに配置します。カラー、グラフィック、最終タイポグラフィ等の詳細を含める前に、環境を検証とテストするためです。
基本パーツの作成
ワイヤフレームは、通常、グレースケールや落ち着いたカラーの単純なパーツで構成し、長方形や楕円等の基本シェイプで単純化させます。これらのオブジェクトの多くは繰り返し使用するので、再利用可能パーツの基本ライブラリを作成します。
そのためには、まず長方形を描画し、ボタン等の特定のパーツであることを示すため、必要に応じてスタイルを設定します。デザインの忠実度に合わせて、ボタンにプレースホルダーテキストを追加すると便利です。ボタンは、新規登録フローの次の段階に進むために使用されます。そこで、テキストボックスを追加し、alignmentツールでボタンシェイプの中央に配置します。
次に、これらのパーツをグループ化し、右クリックのオプションからコンポーネントにします。この処理をしておくと、パーツをドラッグして繰り返し使用できるようになるので、ボタンパーツが必要になる度に作り直す必要がなくなります。
ナビゲーションバー、画像プレースホルダー、ブロック、その他の一般的なパーツを使用して、このプロセスを繰り返します。共通パーツの設定を行うことにより、プロセス全体で時間を節約できるようになりました。また、これらのコンポーネントは、後々の作業でデザイン精度を高めるために使用できます。
これらのパーツは、プラグインとUIキットを使用して作成することもできます。Quick Mockupのようなプラグインでは、コンポーネントにすばやく変換でき、そのまま使用もできるワイヤフレームパーツのコレクションが提供されています。
新規登録フローの重要な手順
この新規登録フローでは、最初に、様々な画面の各アートボード、またはプロセスの各ステップを作成します。通常の新規登録フローには、次のものが含まれます（これ以外の場合もあり得ます）。
ホームページ： 通常、サービスにログインや新規登録するオプションと共に、「ようこそ」メッセージやアプリのロゴを含めます。
新規登録ページ：一ページまたは複数ページの場合があります。電子メールアドレスや名前、その他のアカウント作成に必要な情報の収集に使用します。
成功ページとエラーページ：アカウント作成が成功したか、失敗したかというステータス、およびエラーを修正する方法等のフィードバックをユーザーに提供するのに不可欠です。
このチュートリアルでは、新規ユーザーがアカウント登録を行う新規登録フローに取り組んでいきます。
ここで示す手順は、既存アカウントを持つユーザーのログインページのデザインにも応用できます。違いは、アカウント作成用の情報を入力するか、ログイン処理用のユーザー名とパスワードを入力するかです。
ホームページのレイアウト
ホームページ（スタート画面）には、含めるべきパーツがいくつかあります。用途により、要件や目標は異なります。実際のデザインには、ご自身のものを反映させてください。通常、含まれるものは次の通りです：
・アプリロゴ
・「ようこそ」メッセージ
・新規登録オプション、または新規登録ページへのリンク
・ログインオプション、またはログインページへのリンク
このページでは、通常、ログインオプションまたは新規登録オプションが強調されます。新規ユーザー登録をよりスムーズにするため、このワークフローでは新規登録オプションを強調し、ログインオプションはページ下部に控えめに配置します。
作成しておいた一般的なブロックコンポーネントをドラッグし、画面上部に拡張し、時計、信号、その他のOSレベルの詳細用プレースホルダーを作成します。次に、基本的な長方形または画像プレースホルダーと進め、ロゴのプレースホルダーを作成し、画面中央に配置します。
次に、「ようこそ」メッセージのプレースホルダーを追加します。テキストツールで書くか、単純な角丸長方形をで表現しましょう。デザインの初期段階では、書く内容を気にせず、単にテキストをシェイプでブロックする方がいいかもしれません。
ページ下部には、新規登録（アカウント作成）オプションや、既存ユーザー用ログインオプションを含めます。
GoogleやFacebookアカウントでの新規登録等、サードパーティの認証サービスオプションが必要な場合もあります。
この場合のデザインには、これらのオプション用に、新規登録ボタンが複数含まれることになります。
このチュートリアルでは、アカウントを作成ボタンを一つだけ作成します。これは、ユーザーがアカウント作成用の詳細情報を入力する画面に進むボタンです。
ボタンパーツを使用し、ぺージ下部３分の１、「ようこそ」メッセージの下、水平方向の中央に配置します。その下に、ボタンの幅より広い横線を描き、その下にログインボタンを追加します。このボタンはサブオプションなので、それを反映させたスタイルに変更してもいいでしょう。
新規登録フォームの作成
これでメインページが完成したので、フロー内の次のビューの作成に進めます。前の画面で作成したアカウントを作成ボタンをクリックすると表示されるページです。このページでは、ユーザーは、アカウント作成用に名前、電子メール、パスワード等、様々な情報を入力します。
このビューでは、前の画面でボタンにラベル付けしたのと同様に、入力欄を識別するためのテキストパーツを追加します。ページタイトルのテキストを追加するか、単にテキストプレースホルダーを複製してページ最上部に配置します。
タイトルの下には、後々、フォームの様々なパーツを配置します。ここでは便宜上、基本的なブロックパーツを使用するか、線を含む入力欄パーツを作成します。1つをページ中央に配置し、テキストツールを使用して、左上に氏名というラベルを追加します。これは、この入力欄のラベルとして機能します。テキストは、タイトルと混同されない程度に小さくします。
次に、入力欄パーツを再度コピー&ペーストし、新規登録時に収集する電子メール、パスワード、その他のデータを表す追加欄を作成します。パーツをグループ化すると、この処理が簡単になります。フォーム送信に使用するボタンパーツを下部に追加し、フォームの入力を完了します。
新規登録フローでは、フォームが長すぎたり、質問が多いと、ユーザー登録を思いとどまらせ、コンバージョン率が低下する可能性があります。フォームは明確で簡潔なものにしましょう。別のアプローチとして、個々のフォームを別々のビューに分割し、一画面で1つのステップに集中してもらうという方法もあります。この場合、ビューは入力欄一つだけになり、続けるまたは次へというボタンを含めます。それぞれの方法を使用してフローを試作し、どちらがターゲットオーディエンスに最適かをテストしましょう。
プロトタイプの画面遷移の設定
Adobe XDでワイヤフレームを作成するメリットはたくさんあります。その一つは、デザインを別のアプリケーションに書き出すことなく、作成するフローをリアルタイムでプロトタイプ化できるという点です。
プロトタイプリンクを設定するには、画面上部のタブから、プロトタイプモードに切り替えます。プロトタイプモードでは、アートボードやパーツをクリックすると青い矢印が表示され、好きな場所にドラッグできます。
ここまでで作成した画面で試してみてください。Tapトリガーを使用して、様々なアクションを試してみてください。ワイヤフレームの段階のデザインでは、Dissolveまたはスライド等でシンプルにしておきます。複雑なアニメーションを使用すると、デザインのこの段階でテストしようとしているものから注意が逸れてしまいます。
フローの完了
新規登録フローがほぼ完了しました。それでは、新規登録が成功したかどうかのフィードバックをユーザーに提供する画面を1セット追加しましょう。成功メッセージ、エラーメッセージは、優れたエクスペリエンスにとって重要です。ワイヤフレームに必ず含めた方がいいでしょう。
成功メッセージには、送信ボタンをクリックすると表示される個別ページが適しています。処理中を示す画面を表示してから、成功メッセージを表示します。エラーメッセージの進行も同様ですが、できれば、エラー箇所を示すといいでしょう。つまり、電子メールやパスワードに問題がある場合はその入力欄をハイライトし、修正するべき内容を伝えることです。
成功画面の作成
成功画面は、最初の画面をコピーし、新規登録ボタンと横線を削除するだけで作成できます。次に、正方形のプレースホルダーをチェックマークのアイコンに置き換えて、成功を示します。または、テキストプレースホルダーを「登録が完了しました」等の実際のメッセージに置き換えることもできます。
エラー画面の作成
エラー画面を作成するには、フォームページをコピーします。具体的にエラーを示すには、このページを操作します。この例では、電子メール欄が犯人です。そのブロックを選択し、入力欄のスタイルを設定して、濃いグレーの線を含めます（最終デザインでは赤になる可能性があります）。テキストツールで、入力欄の下に「エラー：無効な電子メールフォーマットです」等、テスト中のエラーを反映する適切なメッセージを追加します。
送信ボタン等、ページ上の他のパーツは、エラーを反映するように編集したり、エラーが解決されるまで進行できないようにします。
エラー画面や成功画面をプロトタイプに接続するには、一つずつ接続するか、フローから他の画面を複製して、エラー用と成功用の2つの別々のフローを作成します。これにより、両方のユーザーのワークフローをテストでき、繰り返せます。
または、送信ボタン上部のにターゲットポイントとして透明な長方形を作り、各長方形が成功画面かエラー画面を示すようにし、テストに謎を加えることもできます。
これは非常に低い精度のワイヤフレームであり、ここで重要なのは、様々な画面とビューがどのように連携してユーザーをナビゲートしていくか、を理解することです最初に基本パーツをグループ化してコンポーネントにすることで、再利用可能になり、より高精度な段階に簡単に移行できます。コンポーネントスタイルはプロジェクトの各段階に応じて変更し、デザイン全体に適用することで、プロジェクトを通して繰り返しがより効率的に行えます。
フィードバック用にワイヤフレームを共有する
最後に、Adobe XDの共有モードを使用し、リモートユーザーテストまたは通常のデザインフィードバック用にフローを共有しましょう。フローを選択した状態で、link typeドロップダウンからDesign ReviewまたはUser Testingを選択します。このリンクは配布可能で、繰り返し処理完了後はワンクリックで簡単に更新可能です。
これで、Adobe XDによる新規登録フローのワイヤフレームが作成されました。次は、学んだ内容を、このアプリデザインのログインフローにも応用してみてください。
