行政機関等・民間事業者向け画面デザインガイドライン（統合後）

1. 概要

「マイナアプリ」は、マイナンバーカードを使った本人確認や、マイナンバーカードの機能のスマートフォンへの追加などを行える、iOS/Androidアプリです。2026（令和8）年夏頃を目標に、多くの国民の皆さまにご利用いただいている「マイナポータルアプリ」に、官民の幅広いサービスで導入が進んでいる「デジタル認証アプリ」の仕組みを統合し、「マイナアプリ」として提供します。

本ガイドラインでは、国民の皆さまが安心してマイナンバーカードでの認証・署名を行えるよう、マイナアプリを活用する官民サービスの画面において表示すべき内容をご案内します。

マイナアプリとは

マイナアプリの統合について

デジタル認証サービス（現：デジタル認証アプリサービス）を導入する民間事業者・行政機関の皆さまは、本ガイドラインに従い、利用者にとって分かりやすいUIを設計してください。また、マイナポータルアプリの外部インターフェースを活用してサービスを提供する皆さまも、参考として本ガイドラインをご活用ください。

※ 本ガイドラインにおける単位表記「px」は、すべてCSSピクセルを指します。

2. 要件

マイナアプリを用いた認証・署名を開始する前の画面で、以下の要件を満たしてください。

2-1. マイナンバーカードの利用の明示

利用者が、これからマイナンバーカードを利用することを明確かつ正しく理解できるよう、認証・署名開始前の画面において、「マイナンバーカード」という名称をページタイトルや説明文など、目に入りやすい位置に表示します。

表示例（タイトル）

マイナンバーカードで本人確認

マイナンバーカードで署名

表示例（説明文）

マイナアプリ（旧マイナポータルアプリ）を使って、マイナンバーカードでの本人確認を行います。

マイナンバーカード（実物またはiPhoneのマイナンバーカード）を使って〇〇市○○サービスにログインします。

---

2-2. 目的の明示

利用者が、なぜ認証・署名や情報の連携が必要なのかを明確かつ正しく理解できるよう、認証・署名開始前の画面で目的を明確に説明します。

表示例（説明文）

マイナンバーカードでの本人確認を行います。

年齢確認のために認証を行います。

申請に使うために、マイナンバーカードから情報を取得します。認証を行った後に、氏名などの情報を連携します。

---

2-3. 取得する情報の明示

マイナンバーカードから氏名などの情報を取得する場合は、利用者が意図しない情報の読み取りが行われないよう、透明性を確保することが重要です。取得する情報は、事前に過不足なく提示します。

表示例（説明文）

あわせて申請に使う情報をマイナンバーカードから取得します。

## 取得する情報
- 氏名
- 生年月日
- 住所
- 性別
- マイナンバー
- 利用者証明用電子証明書
- 顔写真
- 市町村コード

あわせて申請に使う情報をマイナンバーカードから取得します。

## 取得する情報
- 氏名
- 生年月日
- 住所
- 性別
- マイナンバー
- 署名用電子証明書及び署名値
- 顔写真
- 市町村コード

氏名・生年月日をマイナンバーカードから読み取ります。

---

2-4. 手続に必要な準備物の案内

利用者が円滑に手続を進められるよう、認証・署名開始前の画面で事前に準備すべきものを明示します。

代理申請などで、本人以外のマイナンバーカードでの認証・署名を含む場合は、誰のマイナンバーカードが必要かを必ず表示します。

スマートフォンのマイナンバーカードについては、利用者の使用端末に応じて「iPhone のマイナンバーカード」「Androidスマホ用電子証明書」 といった形で OS に応じた表記を出し分けることを推奨します。

準備物として記載する用語

※以下は記載例です。手続に応じて、該当するもののみを選択して記載してください。

• マイナアプリ
• 実物のマイナンバーカード
• 利用者証明用暗証番号（数字4桁）
• 署名用パスワード（英数字6~16文字）
• 券面事項入力補助用暗証番号（数字4桁）
• iPhoneのマイナンバーカード
• Androidスマホ用電子証明書（2026年秋以降は Androidのマイナンバーカード ）

表示例（説明文）

## 準備するもの
- 実物のマイナンバーカード、またはiPhoneのマイナンバーカード
- マイナアプリ

お手元に実物のマイナンバーカード、またはAndroidスマホ用電子証明書を用意して進めてください。

お手元に実物のマイナンバーカード、またはiPhoneのマイナンバーカード/Androidのマイナンバーカードを用意して進めてください。

子どもなどの実物のマイナンバーカードを用意します。

---

2-5. アプリストアへの導線の表示

マイナアプリを事前にダウンロードしていない利用者にも分かりやすいよう、認証・署名開始前の画面でアプリストアへの導線を表示します。

• iOS
• Android

※上記のリンク先では、マイナアプリが公開されるまでの間、従来のマイナポータルアプリの情報が表示されますので、ご留意ください。

以下の要素を含めます。

---

2-6. アクションボタンの表示

マイナアプリへ移動する際に、利用者が常に一貫した体験を得られるよう、統一されたアクションボタンを使用します。アクションボタンは、配布されているPNG素材をそのまま実装する方法と、ガイドラインに従って独自に実装する方法のいずれも可能です。いずれの場合も、ボタンの形状および色は指定されたデザインから変更しないでください。

構成要素

アクションボタンは、以下の3つの要素で構成します。

スクリーンリーダー利用者がボタンにフォーカスした時点でわかるよう、ボタンの読み上げテキストにも「マイナアプリがひらきます」または「新しいタブがひらきます」を含めることを推奨します。

その際、補足テキストは読み上げ対象外に指定することで、ボタンと補足テキストで読み上げの重複を回避することを推奨します。

Web（HTML）の実装イメージ

<button aria-label="マイナンバーカードで本人確認（マイナアプリがひらきます）">マイナンバーカードで本人確認</button><p aria-hidden="true">マイナアプリがひらきます</p>

ボタンのパターン

• ボタンのスタイルには、塗りボタンとアウトラインボタンの2種類を定義しています。塗りボタンの使用を推奨しますが、提供するサービスのスタイルに合わせて、隣接色のコントラスト比を確保できる方を選択してください。
• ボタンの状態は、デフォルト、ホバー、アクティブの3つの状態があります。フォーカスインジケーターなど、アクセシビリティに関する詳細はデジタル庁デザインシステムを参照してください。
  • デジタル庁デザインシステム
• ボタンのモードには、ライトモードおよびダークモードがあります。モードに合うよう実装してください。

ラベル

アクションボタンのラベルは、マイナンバーカードを使った認証・署名を行う目的が利用者に端的に伝わる表現を、表示言語に応じて選択してください。

アクションボタンを画像素材を使用して実装する場合

配布しているPNG形式の画像素材を使用して実装する場合、以下のリンクからダウンロードしてください。

アクションボタン素材

• ボタンの高さは必ず56px以上としてください。

アクションボタンを独自に実装する場合

アクションボタン用アイコンの素材は以下のリンクからダウンロードしてください。

アクションボタン用アイコンの素材

• カラー

• ラベル

  • 独自にフォントサイズを定義する場合、16px以上にしてください。
  • ボタンラベルのフォントはSans-serifを使用してください。推奨フォントはNoto Sans JPまたはNoto Sansです。
  • ボタンラベルの行高はフォントサイズの1.3倍にしてください。
  • ボタンラベルは左揃にしてください。
  • 表示エリアの制約などで、改行の必要な場合は、下記の位置で改行してください。
    • 日本語：「マイナンバーカードで」の後ろ
    • 英語：「with」の前

• 余白とサイズ（フォントサイズを A とした場合）

  • ボタン内要素はボタンの中央に配置してください。

  • 左右の余白はボタンラベルのフォントサイズ以上の領域を確保してください。

  • 上下の余白はボタンラベルのフォントサイズの0.75倍以上の領域を確保してください。

  • アクションボタン用アイコンの高さは、ボタンラベルのフォントサイズの1.5倍以上の領域を確保してください。

  • アクションボタン用アイコンとボタンテキストとの間隔は、ボタンラベルのフォントサイズの0.75倍以上の領域を確保してください。

  • 余白の基準としてボタンラベルのフォントサイズをAとします。

    

• 角丸の半径

  • サービスのスタイルに合わせて調整可能です。

• アイソレーションエリア（保護領域）

  • ボタンの周囲には、上下左右それぞれボタンラベルのフォントサイズの0.5倍以上のアイソレーションエリアを確保してください。アイソレーションエリアの基準としボタンラベルのフォントサイズをAとします。

    

  • アイソレーションエリア内に背景画像やボタンのドロップシャドウが含まれることは問題ありません。ただし、隣接色に対するコントラスト比が3:1以上となるボタンのフチの色としてください。

  

• サイズ

  • ボタンラベル、余白、角丸の半径、保護エリアについてのガイドラインを満たすサイズでアクションボタンを実装してください

  

---

2-7. アプリ統合に関する案内の表示

2026年夏頃の「マイナポータルアプリ」と「デジタル認証アプリ」の統合に伴い、これらのアプリ利用者が混乱することなく手続きできるよう、認証・署名開始前の画面にアプリ統合に関する案内を表示することができます。案内の表示は任意とし、表示期間は統合から概ね1年間を想定しています。本案内は、サービスの種別に応じて以下の2種類を用意しています。該当するパターンを選択して表示してください。

マイナアプリの統合について

---

3. 表示例

表示例1

表示例2

表示例3

4. 参考

マイナアプリの広報物等のデザインについては、下記のガイドラインをご確認ください。

マイナアプリ 広報・告知物制作のガイドライン