Siri QAテスターが、ツール間のデータのコピーではなくテストに時間を使えるようにするにはどうすればよいでしょうか？ テスターが毎日使っていたmacOSアプリは、機能をひとつずつ追加するうちに複雑になり、再設計の時期を迎えていました。
担当 プロダクトデザイナー（UX・UI）、リデザインのリード
ツール Sketch、Xcode、SwiftUI、Claude Code
注記 NDA対象のため、掲載しているビジュアルはすべてサンプルデータを使った説明用の概略図で、実際の画面ではありません。
再設計したテストウィンドウの概略図：左にテストケース、右に選択したケースとそのフォーム
Siri QAテスターがテストリクエストの実行、結果の記録、不具合の報告に使う、ネイティブmacOSアプリの再設計をリードしました。テスターは毎日このツールを使っていたため、まずフィールド調査とインタビューで、どこで時間を失っているのかを調べました。
テストが失敗すると、テスターは別のトラッカーでチケットを起票していました。失敗したテストには、テストケース、リクエスト、ビルド、デバイス、言語、地域、手順、録画など、チケットに必要な情報のほとんどがすでにそろっています。テスターはそのすべてをもう一度入力していました。
フィールド調査では、トリアージ担当者が過去のチケットやアプリから詳細をチケットにコピーし、ときには抜け漏れが出る様子を目にしました。また、テスト実行を離れることで、テスターはテストパスのどこまで進んだかを見失っていました。
「Create Ticket」はテスト実行から約20項目を自動入力し、テスターが判断する4項目だけを残します
すべてのテストケースのフッターで、Submitの隣に「Create Ticket」ボタンを追加しました。ボタンを押すとチケットのシートが開き、テスターは内容を確認して起票します。チケットは実行にリンクされるので、どちらからも関連をたどれます。
シートには実行からわかるすべての項目が入力され、セッションの録画、ログ、スクリーンショットが添付されます。
テストケースからチケットまでのテスターのフロー
テストが失敗すると、証拠をもとに入力済みのチケットが実行の中で開きます。チケットとテスト結果はまとめて送信され、テスターは次のケースに進みます。
チケットトラッカーは、どのチームも使う自由入力のテキストボックスです。新しいフォームでは各チケットに必要な情報がテスターに示されるので、トリアージ担当者は一度で受け付けられます。
新しい機能が加わるたびに、メニュー項目やキーボードショートカットが増えていきました。経験豊富なテスターはそれを覚えていましたが、新しいユーザーは手作業でメニューを探し、機能があることに気づかないこともよくありました。
コマンドバーは名前や目的からアクションを見つけ、それぞれのショートカットも表示します
どこからでも⌘Kで開けるコマンドバーをデザインしました。やりたいことを数文字入力すると、別名や動詞からでもアクションが見つかります。各結果にはショートカットも表示されるので、テスターは作業しながら自然に覚えられます。
何も入力していないときは、その人が最近使ったアクションやよく使うアクションが表示されます。登録の仕組みを用意したので、新しい機能は初日からバーに表示されます。
ユーザーテストとアンケートの両方で、テスターがキーボード操作の充実を求めていることがわかったため、コマンドバーはホットキーとともにリリースしました。テスターは普段から⌘-SpaceでmacOSを操作しているので、なじみのあるパターンです。メニューを再編成すると、どこに何があるかを把握している経験豊富なテスターの操作感覚を壊してしまうところでした。
エラー状態の例：未入力の項目、トラッカーの利用不可、既知の問題
どのエラーでもテスターの作業は失われず、未入力の項目のハイライトから、トラッカー停止時の下書き保存まで、次にとるべき行動が示されます。
同じボタンでも画面ごとに見た目が違い、新しい画面は毎回ゼロから作られていました。再設計を定着させるため、デザインとコードの両方でコンポーネントライブラリを構築しました。
すべてのカラートークンに共通する命名ルール
既存のコントロールをすべて監査して役割ごとにグループ化したところ、名前の違いで見えていなかった重複が明らかになりました。カラートークンは color-{element}-{priority}-{state} という1つの命名ルールに従うので、数を少なく保て、命名をめぐる議論もなくなりました。各コンポーネントには、すべての状態、ライトとダークの外観、使いどころのガイドラインが含まれます。
AIはデザインと開発の両方を加速させています。FigmaのデザインをSwiftUIの動くコードに変換し、開発者がそれをアプリに組み込みます。また、デザインとコードのライブラリを同期させるためのコンポーネント監査にもAIを使っています。
最大の制約は、ツールが稼働中だったことです。再構築の間もテスターはテストを止められないため、一度に大きく変えるのではなく、レビューしやすい小さなステップで画面を新しいコンポーネントに移行しました。
デザインとコードのライブラリも同期させる必要がありました。大きな更新のたびに両者を照らし合わせて監査し、開発者が使うライブラリがデザインと一致するようにしました。キーボード操作、VoiceOverのラベル、コントラストも全体を通して確認しました。
チケットの起票は3クリックで完了し、約20項目の入力とセッションのファイル添付はツールが行います。再設計前は、チケットの起票に平均2〜5分かかっていました。現在は、ツールから起票されたチケットについて、追加情報を求めて差し戻されるケースが大幅に減ったと、トリアージ担当者から報告を受けています。
チームはすべてのトークンを移行済みで、コンポーネントの約90%が新しいライブラリを使っています。新機能はすべて新しいコンポーネントを使っており、残りはレガシーコードの整理を待っている状態です。
お問い合わせ