アプリUI 仕事の進め方

6-4. 動作検証

執筆 金 伯冠
エンジニア
読了時間の目安
3

動作仕様に関して実装に問題がないかを検証します。コンポーネント単位で手動テストを行いコンポーネントの機能が仕様通りに動作しているか、仕様の抜け漏れがないかを検証してます。ブラウザチェックごとの動作差異もこの時点で確認し、後工程のブラウザチェックの負荷を減らします。

動作検証チェックリストの作成

UIデザイナーからUIコンポーネントごとに動作仕様の情報をエンジニアと連携し、エンジニアは仕様に合わせて検証リストを作成します。

ウェブアプリケーションでは動作検証の確認観点が多いため、HTMLモックアップでどこまでの動作を保証するかはお客さまと事前に確認します。

動作仕様の認識合わせ

UIコンポーネントの動作仕様に関して、事前の連携情報をもとにUIデザイナーとエンジニア間でミーティングを行い、内容の認識合わせをします。これにより、仕様を明確にして実装時の抜け漏れをなくします。例えば、動作仕様のパターン、ステータス、具体的な操作の方法をUIデザイナーから説明し、エンジニアから「このパターンではどのように動作する想定か」などのフィードバックをすることで、仕様の漏れを確認します。

UIコンポーネントの動作仕様

チェックリスト項目の作成

ウェブアプリケーションではボタン・入力フォーム・チェックボックスなど、どのプロジェクトでも共通で使われるUIコンポーネントがほとんどです。そのため、ベイジでは動作検証用のチェックリストのテンプレートを準備しています。UIデザイナーと認識を合わせた仕様をもとに、エンジニアがテンプレートから必要なチェック項目に絞り込みます。操作ごとにJava Scriptイベントを分類して、操作時の動作を細かく記載します。

チェックリスト項目

対象ブラウザの確認

PCはWindowsのEdge、Chromeと、MacintoshのSafari、スマートフォンはiOS最新版のSafari、Android最新版を基本とし、プロジェクトの要件に合わせて追加・削除を行います。その上で、対象ブラウザごとに検証します。

チェックリストに応じた動作検証

動作検証を行う前にUIデザイナーがスタイリングレビューを行い、スタイリングに関する大きな問題はすべて解消しておきます。スタイリングレビュー完了後には作成したチェックリストの順番で検証します。基本的には、ストーリーブックからUIコンポーネントを分類して検証します。ストーリーブックの機能を使って検証後の修正によるスタイルのずれを確認し、納品後にお客さま側でUIコンポーネント単位でブラウザ上で確認ができる環境を準備します。

※ストーリーブック:UIコンポーネントをカタログ化して開発を支援するツール。様々な機能があるが、主にUIテスト、UIコンポーネントのドキュメント化に活用している。


ベイジに問い合わせる
1週間で18件のお問い合わせが入りました 1ヶ月間で72件のお問い合わせが入りました