🚀サービス概要
空港カウンターでの手続きが煩雑で時間がかかるという課題に対し、事前のオンライン手続きを導入することで、現場での手続きの簡略化・混雑緩和を実現するサービスを開発しました。

🏢クライアント様
ANA福岡株式会社様

💡当社スコープ
▪️空港手荷物配送サービスにおける事前手続きプロセスの設計
▪️UI/UXデザインおよびプロトタイプ作成
▪️ワイヤーフレーム／ユーザーフローの設計

🧱体制
▪️ディレクター：1名
▪️エンジニア：1名
▪️デザイナー：1名

🪐期間
▪️ユーザーリサーチ・要件整理：1ヶ月
▪️情報設計・ワイヤー作成：1ヶ月
▪️UIデザイン・プロトタイプ制作：1ヶ月
▪️実装：1ヶ月

プロジェクト概要

ANA福岡株式会社様（以下、ANA福岡様）より、空港カウンターでの混雑・手続きの煩雑さを解消するため、空港手荷物配送依頼のオンライン化についてご相談をいただきました。

当初の課題

• 空港カウンターでの手続きに時間がかかり、混雑が発生しやすい

• 手続きの流れが分かりづらく、利用者との認識のズレが生じやすい

ユーザー体験と業務効率の両立を目指し、ユーザーの行動や心理を丁寧に分析したうえで、最適な導線設計やUIのあり方を検討しました。

あわせて、ヒアリングを通じて業務上の制約や運用実態を把握し、カウンター業務の負担を軽減するためのフローや情報整理の方針も設計。

その結果、誰もが迷わず操作できるオンライン手続きのプロトタイプを開発し、実際の運用を想定した検証を行いました。

成果物

▪️利用者向け：オンライン配送依頼システム（Web）
・搭乗前に配送情報を入力し、依頼完了後にQRコードを発行
・配送先情報や希望日時などを事前に登録でき、空港での手続きを簡略化

▪️現場スタッフ向け：配送確認・対応システム（Web）
・利用者が提示したQRコードを読み取り、配送内容を確認
・確認後に送り状をその場で印刷し、荷物を航空便へ搭載

▪️プロトタイプ画面の設計・UIデザイン
・現場スタッフの業務フローを踏まえて画面構成を設計
・必要な情報を一目で把握できる視認性と、迷わず操作できる操作性を実現

①UI/UX検討段階

📍開発プロセス

1. お客様のご要望を詳しくヒアリング

2. ユーザー体験を整理 ユーザージャーニー作成

3. ワイヤーフレームの作成

4. デザイン作成

1. お客様のご要望を詳しくヒアリング

現場での運用実態や利用者の課題について丁寧にヒアリングを行い、次のようなニーズを明確化しました。

• カウンター対応時間を短縮し、混雑や待機列を緩和したい

• 利用者が迷わず操作できる、わかりやすい手続き導線を整備したい

• 現場スタッフの業務負荷を軽減し、正確・迅速な処理を実現したい

これらのご要望を出発点に、利用者・現場スタッフの双方にとってストレスの少ない体験を実現するためのサービス設計に取り組みました。

2. ユーザー体験を整理 ユーザージャーニー作成

ヒアリングで抽出した課題と実際の運用状況をもとに、

利用者と現場スタッフ、それぞれの行動・思考・接点を時系列で整理したユーザージャーニーを作成しました。

例：利用者のユーザージャーニー

ジャーニーマップを作成することで、利用者と現場スタッフそれぞれの行動や心理、システム利用のタイミング、接点での情報伝達手順などを具体的に可視化することができました。

その結果、サービス全体の流れが整理され、情報設計・UI設計の精度向上だけでなく、現場運用に即した設計へとつなげる大きな礎となりました。

3. ワイヤーフレームの作成

ユーザージャーニーで明らかになった課題や導線設計をもとに、実際の利用シーンを想定した画面構成を検討し、ワイヤーフレームとして具体化しました。

利用者によるオンライン入力から現場スタッフによる確認・処理までの一連の流れを踏まえ、「どの画面で、どの情報が、どのように表示されるべきか」という視点で構成を設計。業務の流れやユーザー行動に即したUIの基盤を構築しています。

📍特に重視したポイント：

• 利用者がストレスなく入力できるフォーム構成

• 現場スタッフが情報を即時に把握できる視認性と、誤操作を防ぐ配置設計

• ANAブランドのトーンに準拠しつつ、集中して操作できるデザイン

4. デザイン作成

ワイヤーフレームで設計した画面構成をもとに、UIデザインを制作。

ANA福岡様のブランドトーンに沿った信頼感のあるビジュアルと、現場スタッフの直感的な操作を支える視認性と操作性を両立するUI構成を目指し、情報の優先順位や表示方法を丁寧に検討しました。

📍デザインの工夫ポイント：

• 入力項目の最小化とステップ構成による手続きの最適化
  ・ ユーザーが迷わず進められる直感的な導線を実現

・QRコードを活用した手続きの円滑化
　・利用者と現場スタッフ間の認識ズレを減らし、確認作業の負担を軽減

②開発について

🚀 技術スタック

Amplify Gen2 / Next.js / Nest.js /Type Script

全体的な基盤については、Amplify Gen2を採用して高速開発を行いました。

重要な決済システムに関しては、PCI-DSS に準拠した Stripeを採用しました。
世界各国のお客様のご利用が想定されるため、多彩な決済手段を単一 API で提供でき、将来の国際線向け機能追加にも追加開発なしでスムーズに対応できます。

また、配送連携に関しては、配送業者様のAPIを使用しました。

利用者向けサイトの構成図

現場スタッフ向けのサイトの構成図

最後に

本プロジェクトでは、「誰もが迷わずスムーズに手続きを完了できる体験」の実現を目指し、現場の声に丁寧に耳を傾けながら、設計の細部に至るまで徹底的にこだわりました。

こうした取り組みを通じて得られた知見や姿勢を、今後のサービス開発や他プロジェクトにおいても継続的に活かしてまいります。