契約管理モバイルアプリの
サンプル制作

概要

自社には対外的にアピールするための、スクリーンショットを掲載できる制作実績がありませんでした。
契約上の制約なのでやむを得ないものの、新規に案件を獲得するために、汎用的な契約管理のモバイルアプリをサンプルとして制作し、自社サイトに掲載することになりました。

案件詳細

指示は画面名のみ

指示としては「汎用的なもの」であり、「契約一覧」「契約詳細」「契約更新」「お知らせ管理」「お問い合わせ管理」の5画面、加えて「代表的な1画面を業界別に特化させたもの」という画面名のみが提示されました。
そこで、AIと相談しながら「汎用的」とはどういったものなのかというところから、構成を考えて制作しました。

掲載画面の選定

制作過程において「契約更新」は魅力が低く、「業界別特化」は項目名や項目数が変わるだけで、アピール効果は薄いと判断しました。
そのため、これらの画面は不要であると進言し、承認を得て除外しています。
結果として、汎用的な「契約一覧」「契約詳細」「お知らせ管理」「お問い合わせ管理」の4画面を掲載することになりました。

URL

https://www.advn.co.jp/service/software/

コピー

コピーしました

※該当画面はページ中ほどに表示されています

制作環境

デザインツール： Figma

参画期間

2025年6月（2週間）

各画面のデザインについて

契約一覧画面

想定ユーザー

営業担当

利用シーン

営業の外回りや顧客訪問時に、契約内容や支払状況を素早く確認したいとき。

デザインポイント

上部に検索・絞り込み機能や「期限切れ」「未払い」といった重要な絞り込みを配置、且つ契約カードの右上に重要なアイコンを設置することで、移動中の隙間時間でも、必要な情報に即座にアクセスできるように設計しました。

契約詳細画面

想定ユーザー

営業担当

利用シーン

顧客と商談中に、契約内容や現在のステータスを素早く確認したいとき。

デザインポイント

ヘッダに契約者名と契約ステータスを固定表示することで、スクロールをしても重要な情報を常時把握できるようにしました。
画面下部には「編集」「契約更新」「削除」ボタンを固定表示し、詳細情報を確認しつつ、すぐに次のアクションへ移れるようにしました。
これにより、商談中でもページ遷移を最小限にし、業務の効率化を図りました。

お知らせ管理画面

想定ユーザー

システム管理者・マーケティング担当

利用シーン

全契約者やシステムの運用担当、または特定のユーザーグループに向けて、システムメンテナンスや重要なお知らせ、キャンペーン情報などを配信・管理したいとき。

デザインポイント

お知らせの予約や下書き機能を用意し、外出先でも柔軟に情報を発信できるようにしました。
また、当日に配信されるお知らせがある場合は、上部に「本日投稿予定」の絞り込みを配置、配信前に作成者や関係者が内容に問題が無いか確認できます。

配信ミスがあった場合には配信を停止し、履歴は残しつつ非表示アイコンを付与、カードを薄く表示することで判別が付くようにしています。
これらにより、誤配信リスクの低減と、配信履歴の透明性を保ちました。

お問い合わせ管理画面

想定ユーザー

カスタマーサポート・営業担当

利用シーン

外出先からでも顧客のお問い合わせに迅速に対応したいとき。

デザインポイント

「未対応」「返信待ち」「私が対応」といったアクションステータスを用意し、それぞれ緑の濃淡で配色しました。
ヘッダでは質問内容ごとに「すべて」「アカウント」「ご利用方法」といったカテゴリを用意。各カテゴリに、アクションステータスの配色に応じたドットを表示することで、残タスクを一目で判断できます。
これにより、画面遷移を行わずとも、必要な対応の優先順位を即座に把握できます。

上部に「本日中対応」や「要注意」といった重要な絞り込みを配置、下部にはアクションステータス別の絞り込みを固定表示しています。
「私が対応」という、自分が担当者となっている案件には、カードの縁にハイライトを付与して目立たせています。
これにより、緊急度の高い案件に素早く気づき、対応漏れを防ぐように設計しました。

所感

初めてモバイルアプリのデザインを制作しました。
これまでは、モバイルアプリのUIを意識的に分析したことは無かったため、系統が近いと感じたフリマアプリや決済アプリを参考に構成を検討しました。

限られた画面スペースに多くの機能を収める必要があったため、視線誘導を意識して、目立つ色を重要な箇所にのみ配置しました。
一方で、絞り込みや並び替えといった補助的な機能は、標準の文字色で表現するなど、情報の優先度に応じた配色設計を行いました。
今回の経験を経て、Webでは避けられる配色や構成であっても、モバイルでは妥当なケースがあることを強く実感しました。

今回は文字主体のアプリでしたが、画像主体のアプリをデザインする際には、また異なる発見があると考えており、今後挑戦していきたいと思っています。