【簡単】条件付きロジックで迅速なフォームフィールドプロトタイプの作成

フォームフィールドの検証は、すべてのアプリとウェブUXデザインの核心です。これは、ユーザーエラーを防ぎ、オンラインフォーム記入時にスムーズな体験を提供します。デザイン段階でフォーム検証のプロトタイプを作成することで、デザイナーはユーザーフローに関する有用なフィードバックを得て、正しい情報が入力されるようにし、時間とリソースを節約できます。

これを実現するには、デザインに条件付きロジックを完全に適用できるツールが必要です。この記事では、ProtoPieを使用して入力フィールドをプロトタイプする方法を説明し、実際のテキスト入力キーボードを使用して自身のデバイスで簡単にプロトタイプをテストすることができます。

概要

必須フィールド検証とは？

- ProtoPieで必須フィールド検証をプロトタイプする方法

範囲検査とは？

- ProtoPieで範囲検査のプロトタイプを作成する方法

一貫性検査とは？

- ProtoPieで一貫性検査を開始する方法

データタイプ検証とは？

- ProtoPieでデータタイプ検証をプロトタイプする方法

パターンマッチングとは？

- ProtoPieでパターンマッチングのプロトタイプを作成する方法

ProtoPieでより良いユーザー体験を設計する

始める前に

このチュートリアルに積極的に参加するには、以下のサンプル.pieファイルをダウンロードし、シーン間の切り替えをトグルしてください。空のプロジェクトから始めることをお勧めします。練習を通じて完成したプロジェクトを見ながら、自身の進捗状況を確認してください。プロトタイピングを楽しんでください！

フォームフィールドのPieをダウンロード

必須フィールド検証とは？

必須フィールド検証は、フォーム検証技術の一つで、入力フィールドが埋められていない場合にフォームを送信できないようにするものです。これは、ユーザーが必要なデータを提供することを保証します。この検証は通常、赤いアスタリスク(*)で示され、必須フィールドを示す一般的な方法です。

テキスト、検索、URL、電話番号、メール、パスワード、日付、数値、チェックボックス、ラジオボタン、ファイルなど、さまざまな入力タイプに使用されます。この検証は不完全なフォーム送信を防ぎ、ユーザー体験を向上させます。ProtoPieの入力レイヤー機能により、このプロセスは簡単に行えます。

ProtoPieで必須フィールド検証をプロトタイプする

ここでは、必須項目として名前を要求するテキストフィールドの例を見てみましょう。初期プロジェクトには、デザインとインタラクションが準備されています：

• デザイン面では、画面にエラーメッセージが表示されます。これはユーザー入力に応じて表示または非表示にするために後でアニメーション化されます。

• インタラクション面では、「Text Field」のデフォルトおよびフォーカス状態を「Focus」トリガーを使用して設定しました。

まず、エラーメッセージを非表示にしましょう。これには不透明度を0に設定します。

テキストフィールドに何かを入力し、テキストフィールドの外部をクリックするか、キーボードのエンターキーを押します。この時点でテキストフィールドがまだ空であるかどうかを確認します。テキストフィールドが空であれば、テキストフィールドのエラーステートと共にエラーメッセージが表示されます。

1. 「Focus Out」トリガーに条件を追加します。条件をText of Text Field = "NONE"に設定します。この条件はテキストフィールドが空であるかを確認します。

2. 条件が満たされると、エラーステートをアニメーション化します。

• 「Error Message」レイヤーに「不透明度」応答を追加して不透明度を100に設定します。

• さらに「Text Field」レイヤーに「外枠」応答を追加して枠に赤を設定します。

3. 次に、テキストフィールドが内容を検出した場合にエラーメッセージが消えるように追加のインタラクションを導入します。これには「Detect」トリガーを使用します。Detectトリガーは対象オブジェクトの変更を継続的に監視します。

• 「Text Field」レイヤーに「Detect」トリガーを追加し、「テキスト」属性を検出します（入力レイヤーの場合、テキスト属性はフィールド内部の内容を示します）。

• テキストフィールドが埋められているかを確認する条件を作成します。Text of Text Field ≠ "NONE"　条件を使用します。

• この条件から、エラーメッセージを消すために「不透明度」応答を適用して不透明度を0に設定します。

範囲検査とは？

範囲検査は、入力データが事前定義された範囲内にあることを確認する入力検証の一種です。範囲検査の例は次のとおりです：

• 年齢: 例えば、中学生の年齢は11歳から16歳の間である可能性が高いです。コンピュータは11から16の間の数字のみを許可するようにプログラムできます。

• 地理データ: 緯度と経度は地理データで一般的に使用されます。緯度の値は-90から90の間でなければならず、経度の値は-180から180の間でなければなりません。この範囲外の値は無効です。

• 文字列: 文字列の最小および最大長を検査します。例えば、パスワードが8文字から16文字の間であることを確認します。

ProtoPieで範囲検査のプロトタイプを作成する方法

サンプルプロジェクトの「Range Checking」シーンに移動します。

中学生が自分の年齢を入力し、年齢が11歳から16歳の間であるかを確認する例を見てみましょう。

このインタラクションは最初の例に基づいており、ユーザー入力要件を保証します。このシナリオの事前設定されたインタラクションは、インタラクションパネルの「Age」グループ内にあります。

ユーザーがテキストフィールドを離れるときに入力値を検証するようにProtoPieを設定します。

1. 「Focus Out」トリガーにもう一つの条件を追加します。ユーザーが11未満の年齢を入力した場合を処理するために、Text of Text Field - Age < 11条件を設定します。次の応答を実装します：

• 条件が満たされるとエラーメッセージを表示します。「Error Message - Age」レイヤーに「不透明度」応答を追加して不透明度を100に設定します。

• 「Text Field - Age」レイヤーに「外枠」応答を追加して枠に赤を設定します。

2. ユーザーが16より大きい年齢を入力した場合を確認するために、Text of Text Field - Age > 16条件を追加します。前の条件と同じインタラクションをコピーして貼り付け、エラーメッセージを表示します。

次の例として、パスワードの長さを検証します。パスワードは8文字から16文字の間でなければなりません。

インタラクションパネルの「Password」グループには事前に作成されたインタラクションがあります。

それでは、「Focus Out」のエラー状態を設定します。

1. 最初の条件は、パスワードが短すぎるかどうかをチェックするために使用されるので、length(`Text Field - Password`.text) < 8 を使用します。length()は ProtoPie の関数で、文字列の長さをチェックします。

2. 2つ目の条件は、パスワードが長すぎるかどうかを確認することです:

   length(`Text Field - Password`.text)> 16

一貫性検査とは？

一貫性検査は、入力されたデータが論理的に一貫していることを確認するデータ検証の一種です。データの内部矛盾をチェックします。例えば：

• パスワード確認: 再入力されたパスワードが最初に入力されたパスワードと一致するか確認します。

• 注文と配送日: 配送日が発送日以降であることを確認します。また、発送日は注文日より前であってはなりません。

ProtoPieで一貫性検査をプロトタイプする方法

ユーザーがパスワードを再入力する必要がある例を見てみましょう。

サンプルプロジェクトの「Consistency Checking」シーンに移動します。パスワードフィールドのインタラクションはすでに準備されています。今は「Confirm Password」フィールドに注目します。

1. インタラクションパネルの「Confirm Password」グループで「Mouse Out」トリガーを見つけます。

2.  「Text Field - Confirm Password」のテキストが「Text Field - Password」のテキストと異なる場合を確認する条件を追加します。Text of Text Field - Confirm Password ≠ Text of Text Field - Password

この条件は、2つのパスワードが一致しないことを示します。

3. この条件の下で、テキストフィールドの枠を赤くし、エラーメッセージを表示してエラーステートを構成します。

   
   

   

データタイプ検証とは？

データタイプ検証は、入力フィールドに入力されたデータが期待されるデータタイプと一致することを確認する入力検証の一種です。例えば：

• 年齢: 年齢フィールドは通常、数字のみを許可します。オンラインフォームを記入するとき、年齢フィールドは非数字の入力を拒否します。

• クレジットカード番号: クレジットカード番号を入力する際、数字のみが許可されます。文字や特殊文字は拒否されます。

• 都市名: 一部のアプリケーションでは、都市名フィールドに文字のみを許可します。例えば、「Toronto123」のような入力は拒否され、「Toronto」のようなアルファベットの入力のみを許可します。

ProtoPieでデータタイプ検証をプロトタイプする方法

ここでは、入力フィールドが整数の数量を要求する実用的なシナリオを見てみましょう。

この例は、サンプルプロジェクトの「Data Type Validation」シーンにあります。

1. 「Mouse Out」トリガーでユーザーの入力を検証する条件を作成します。

2. この条件では、数字でない入力を厳しく拒否する必要があります。次の条件を使用します：regexextract(Text Field.text, "[0-9]+") ≠ Text of Text Field

• regexextract(): 指定された正規表現パターンに一致する最初の部分文字列を抽出する関数です。

• Text Field.text: 「Text Field」入力のテキストコンテンツを指します。

• [0-9]+: 一つ以上の数字に一致する正規表現パターンです。

方程式の左側(regexextract(`TextField`.text,[0-9]+)は、入力したテキストから数字の数字からなる最初のサブストリングを抽出します。 たとえば、次のようになります:

• 「123abc」と入力すると、「123」が返されます

• 「def456」と入力すると、「456」が返されます

条件は、この抽出された数値部分文字列が「Text Field」の元のテキストと一致しないかどうかを確認します。一致しない場合、入力に非数値文字が含まれていることを意味します。

3. この条件の下で、テキストフィールドの枠の色を赤に設定し、エラーメッセージを表示して指定された条件のエラーステートを設定します。

   
   

   

パターンマッチングとは？

入力検証におけるパターンマッチングは、特定のパターンや形式を定義し、入力データがこのパターンに適合するかどうかを確認することを含みます。通常、ソフトウェア開発では正規表現（regex）を使用します。

正規表現は、文字列内の特定の文字や単語を検索するためのパターンを指定することで機能します。コードを書くのが苦手な場合は、AIを活用して必要なコードを生成することもできます。

例えば：

• メールアドレスの検証: メールアドレスの有効性を確認するには、"@" 記号の前に文字があり、その後に追加の文字があり、最後にピリオドがあり、その後に少なくとも2文字のアルファベットがあるかどうかを確認します。

• パスワードの検証: パスワードは、少なくとも1つの数字、1つの大文字、および1つの小文字を含み、8文字以上である必要があります。

正規表現の詳細については、このクイックガイドを参照してください。コードを書くのが難しい場合は、AIの助けを借りてください。

ProtoPieでパターンマッチングをプロトタイプする方法

サンプルプロジェクトの「パターンマッチング」シーンで、ユーザーがパスワードに少なくとも1つの大文字と3つの数字を含める必要がある場合を見てみましょう。

1. 「Mouse Out」トリガーで、パスワードが大文字の要件を満たしているかどうかを確認する最初の条件を作成します。次のように条件を構成します：regexextract(`Text Field - Password`.text, "[A-Z]") = "NONE"

• [A-Z]: このパターンは、大文字の文字に一致し、最初の大文字を返します。例えば、「abcDE」と入力すると「D」が返されます。

• 「NONE」が返される場合、条件が満たされていないことを示し、フィールドのエラーステートをアニメーション化できます。

2. 次に、パスワードに少なくとも3つの数字が含まれているかどうかを確認するための条件を設定します。次の要件を使用します：regexextract(`Text Field - Password`.text, "^(.?[0-9]){3,}.$")= "NONE"

• ^: 文字列の開始を示します。

• (.*?[0-9]): 数字の後に任意の文字列（非貪欲的）と一致します。

• {3,}: このパターンが少なくとも3回出現する必要があります。

• .*: 残りの文字に一致します。

• $: 文字列の終了を示します。

この関数は、指定された要件を満たす文字列を厳密に確認して返します。「NONE」が返された場合、条件が満たされていないことを示し、この場合、パスワードフィールドのエラーステートをアニメーション化する必要があります。

ProtoPieでより良いユーザーエクスペリエンスを設計する

フォームフィールドは、ProtoPieが効率的に作成する製品デザインの多くの要素の1つです。必須フィールドチェック、範囲検証、一貫性チェック、データタイプ検証、およびパターンマッチングなどの検証パターンを簡単に統合できます。

ProtoPieの高精度プロトタイピング機能を活用して、デザインの全体的な効果を向上させましょう！

ProtoPie無料ダウンロード