クラウド連携によるスマートライフサービス提供に関する
JEITA標準モデル
Ver 1.0
2020年5月

一般社団法人 電子情報技術産業協会（JEITA）
スマートホーム部会〒100-004 東京都千代田区大手町1-1-3
1

大手センタービル

クラウド連携によるスマートライフサービス提供に関するJEITA標準モデルV1.0 策定にあたって

スマートライフ市場とは、IoT家電等により、宅内外の機器の利用情報や環境情報を収集し、生活上のあらゆる情報をつなげ、消費者のニーズを踏まえこれらの情報(複数の情報を組み合わせ分析した情報を含む)の利活用を推進し、生活の不便を解消するなどの多様なサービスを提供する新たな市場である。
宅内で利用される様々な家電／住宅設備機器等が収集する住まい手の生活データを連携・活用することで、個人のニーズに応えるだけでなく、社会課題の解決にも寄与する様々なサービス等が創出され、我が国が目指す
Society5.0社会の実現にもおおいに貢献が期待されている。
2019年10月には、IoT家電・機器や情報プラットフォームと連携したサービスを生み出す「LIFE UPプロモーション」政策が開始しており、本市場の拡大の一助となっている。
一般社団法人 電子情報技術産業協会（以下、JEITAという）では、スマートライフ市場の更なる拡大に向け、特に消費者にとって分かりやすくサービスを提供できるよう、標準的な消費者へ提示するUI及び事業者間のクラウド連携手法について、本市場に参入を希望する事業者が共通で目標とするべき仕様を明らかにするため、「クラウド連携によるスマートライフサービス提供に関するJEITA標準モデルVer 1.0」を定めた。本標準モデルを機器・サービス・アプリ等の開発時に参照してもらうことで、以下のメリットが期待できる。
機器メーカ／サービス提供事業者：標準モデルに沿ったUIを整備することで、機器のネットワーク接続率やサービス加入者が向上する。
ユーザ：機器のネットワーク接続手順やサービス加入の手順を理解しやすくなり、複数機器の接続意欲が向上する。
販売者：複数メーカ機器の説明が共通化され、商品やサービスを消費者に訴求しやすくるなる。

JEITA標準モデルにより、企業間連携が促進され、スマートライフ市場の拡大が円滑化する一助となれば幸いです。
2

クラウド連携によるスマートライフサービス提供に関するJEITA標準モデルV1.0 構成「クラウド連携によるスマートライフサービス提供に関するJEITA標準モデルVer 1.0」の構成は以下の通り。
本標準モデルを参照することで、ユーザにとって分かりやすく、販売事業者にとっても説明がしやすく、機器メーカにとっても実際の機器接続率が向上する効果が期待できる。
【JEITA版 スマートホーム標準モデル】
・ユーザに提示するＵＩ構成（機器メーカ編）・・・・・・・・・・・・・・・・・・・・・・・・・・・・・P６– 機器接続・機器登録・サービス申し込み手順

・ユーザに提示するＵＩ構成（サービサ編）・・・・・・・・・・・・・・・・・・・・・・・・・・・・・P60– 機器接続・機器登録・サービス申し込み手順•

プラットフォーム間の接合方法・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・P114【注意点】
本標準モデルはユーザに提示するUIの質を高め、プラットフォーム間連携を促進するための、目標とするべき仕様を定めたものであり、標準モデル中に示す画面構成やアイコン等はあくまで例示の位置付けとなります。
また、標準モデル通りの実装を義務付けるものではありませんので、各社の実装や設計手順を考慮していただ
きながら、本標準モデルを実装が可能な範囲内でご採用下さい。
3

クラウド連携によるスマートライフサービス提供モデル
これまでのスマートホームサービスは、１社が自社の方針で機器とサービスを繋ぎ込むことで実現してきたが、今後はクラウド上でID連携を行い低コストで柔軟性の高いサービスを実現する形になる。従い実現性の高い連携方法の標準的なモデルが求められる。

従来のスマートライフサービス提供モデル
サービス

サービス

これからのスマートライフサービス提供モデル

サービス

連携拡大
機器

機器

機器

１社が取りまとめて開発･提供

クラウド上でのID接続による複数社連携•

１社のIDでプラットフォームを垂直統合•

１社で意思決定ができ、投資判断がしやすく比較的立ち上が•複数社でID連携をして相互にプラットフォームを接続

りやすい

•

プラットフォーム同士でIDを連携する仕組みが、簡単•

かつオープン化し、低コストで接続できるサービス向けにプラットフォームを作るので、サービスが立•

ち上げりやすいが、サービスを増やすにはカスタマイズによ

機器とサービスが、クラウド上で接続・連携することで柔軟性の高いサービスを実現る投資が必要で、サービスの種類も増えにくい。
4

クラウド連携によるスマートライフサービス提供に関するJEITA標準モデルV1.0
活用ユースケース
本標準モデルでは、機器メーカA社が製造・販売する機器を活用し、サービサB社（サービス提供事業者）がユーザにサービスを提供するモデルを想定。それぞれのシーンに応じて、ユーザに提示するＵＩ構成モデル (機器メーカ編／サービサ編）をご参照ください。

機器メーカ
A社

ID連携

サービサ
B社

サービス
提供

ユーザ

ロゴ
B社

ロゴ
A社

【活用シーン①】
機器メーカA社が製造・販売する機器をユーザが購入し、機器メーカアプリでサービサーB社と連携する場合

ユーザに提示するＵＩ構成モデル
機器メーカ編P.６以降をご参照ください。

【活用シーン②】
サービサB社が提供しているサービスを加入（今後加入含む）
しているユーザが、新たに機器メーカA社が製造・販売する機器をサービサアプリで追加する場合。

ユーザに提示するＵＩ構成モデル
サービサ編

P.６０以降をご参照ください。

【注意点】
本標準モデル中の「サービス」とは、、サービサが機器メーカとID連携を行い、機器メーカの情報を使って、提供する「サービス」を意味します。尚、機器メーカが自社の機器でサービスを提供する場合はID連携を伴いません。
5ユーザに提示するＵＩ構成モデル
機器メーカ編6

はじめに 機器・サービスの申込みや登録で、ユーザに提示するUIパートについて
消費者に提示するUIとしては、下記7つのパートに分解できる。
本モデルでは、各パートで留意するべき注意点等を示していく。
0.全体パート•

機器購入⇒登録⇒サービス加入等、消費者にUIとして提示する全体像を示す。

1.機器登録パート••

4.サービス解除パート

機器を購入して登録する。（サービスは未加入で、まだ加入予定は無い）
機器を購入して登録する。（サービスには加入しているが、まだ連携を行わない）•

サービスをやめる

2.機器解除パート

5.ID接合パート

・サービス加入済みで連携済みの機器を登録抹消するとき・サービス加入済みで連携済みの機器を連携解除するとき•

3.サービス加入パート

6.データ連携許可/解除パート••

サービス加入済み、機器登録済みで、後からデータ連携を開始す
る・サービス加入済みで連携済みの機器を連携解除するとき・サービス加入済みで連携解除済みの機器を連携許可するときサービスに申し込む。（とりあえず機器連携は、おこなわない）
サービスに申し込む。（機器をもっていない）

7

各パートの記載内容について①標準的な画面フローを記載②各画面の目標仕様を記載
・各画面を誰が表示しているのかを表記
・青字で記載されている事項は、UIの精度を高めるために有用と思われる内容を記載。
・緑字で記載されている事項は、必須ではないがユーザが判断しやすくなると思われる内容を記載。
8

0. 全体パート

9

0. 全体パートのフロー(0.1)導線(0.2)誘導パート(大項目)(0.3)誘導パート(小項目)(0.4)詳細説明

機器メーカ画面

機器メーカ画面

機器メーカ画面

機器メーカ画面各パート実施機器メーカ画面

1.機器登録2.機器削除

3.サービス
加入
4.サービス
解約
5.ID接合6.連携許可/解除

10(0.5)実施可能
パートの提示0.1. 導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面
ロゴや登録商標や社名等を入れて誰が画面を表示しているのか明確にする

ロゴ

ホーム画面や、常時表示のタブに、アイコン等で、機器登録・サービス登録等の導線にすぐに誘導できるルートを確保する。

11

0.2. 誘導パート(大項目)画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

タップすると細かい項目選択画面にに遷移します選択するのに抵抗感がないよう、遷移先は説明ページであることを明記する。

①機器を購入・
廃棄したS②サービスに加入・解約する

ユーザが分かる言葉で選択肢を提示する「機器登録」というワードはユーザが知らないと選択できない③機器情報をサービスに連携許可・連携解除、または、状態を確認する。

S

ボタン(戻る、進む、同意、メニュー、等)
に関しても「色」「形状」の統一を行う。

戻る

12

戻る導線は確保する0.3. 誘導パート(小項目)画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

タップすると詳細説明に遷移します1.
機器を購入した
2.
機器を廃棄した

選択するのに抵抗感がないよう、遷移先は説明ページであることを明記する。
ユーザが分かる言葉で選択肢を提示する「機器登録」というワードはユーザが知らないと選択できない

前頁「誘導パート(大項目)画面の標準モデル」
で選択した内容が本小項目にも漏れなく入って
いること。
戻る

13

戻る導線は確保する0.4. 詳細説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

機器を購入後に「機器登録」
が可能になります。

機器登録を行うと、
1. スマートフォンから機器を遠隔制御
2. ・・・・・

そのシーンで、「①何をすれば」「②何ができるか」を明示する。
「①何をすれば」に関しては、初心者
ユーザ以外が通常メニューから選択して実行するようなこと。
「機器登録」「機器削除」「データ連携設定」等。

ができるようになります。

機器登録
をする

戻る
戻る導線は確保する
14

通常メニューで表示される文言で実行導線をつなぐ

0.5. 実施可能パートの提示画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

機器登録が完了しました

機器登録した機器で、便利なサービスに加入することができます。
サービスを探してみますか？

何の画面かを最上部に記載し、ユーザに明示する。

ユーザが次に何をできるかを提示する。
(P10の選択肢)
この例ではサービスに未加入なので、サービス加入へ誘導。

サービスを
探す
終了しますか？

終了する

15

次への導線を提示する。

1.機器登録パート(機器接続及び機器登録)

16

1. 機器登録フロー Part ①(1.1)メニュー
導線(1.2)事前準備(1.3)接続方法
選択

機器メーカ画面

機器メーカ画面

機器メーカ画面17(1.4)接続手順説明
機器メーカ画面

機器メーカ画面

1. 機器登録フロー Part ②(1.5)機器接続完了(1.6)登録機種
選択(1.7)登録方法
選択

機器メーカ画面

機器メーカ画面

機器メーカ画面

1種類の場合は飛ばす

1種類の場合は飛ばす(1.8)登録手順説明

機器メーカ画面18

機器メーカ画面(1.9)登録完了

機器メーカ画面1.1. 機器接続への導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面

三

メニュー

・・・
・・・

+

機器登録

・・・
・・・

19

機器接続の入り口は「機器登録」というワードに統一。
ユーザに共通意識を持ってもらう。

1.2. 事前準備画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

あらかじめ必要物を明示しておく。
機器接続作業中にユーザが脱落しないため。

機器メーカ画面ロゴ

空気清浄機をネットワークに接続して、アカウントに紐づけること
により、あなたのアカウントから○○ができるようにします。
手順の中で必要なもの
・ルーターの説明書
・無線LANガイドブック

次へ

次画面への遷移ボタンを配置。

20

何の画面かを最上部に記載し、ユーザに明示する。
本例では、
ネットワーク接続のための導入誘導を想定。

1.3. 接続方法選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

ネットワーク
接続方法の選択
WPSボタンがある場合機器に表示されているマークなどを表現するときは、挿絵を挿入して、わかりやすく表現する。
ユーザが短時間で選択肢を判断できるようにし、脱落を防ぐ。

WPSマークルーター本体、またはルーターの説
明書にWPSマークがある場合は、こちらを選択WPSボタンがない場合
はこちらを選択戻る

前画面に戻る導線を確保する。
最初のページからしかやり直しができないことを防いで、ユーザの脱落を防ぐ
21

選択肢がある場合は、必ずどれかに当てはまるように選択肢を用意する。
ユーザが混乱するのを防ぐ為。

1.4. 接続手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

その１

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

ネットワーク
接続方法の選択
接続手順①

１①

ルーター本体、またはルーターの説
明書にWPSマークがある場合はこちらを選択WPSマーク

1画面内に1手順を表示する。
ユーザに易しい作業という印象を与え、脱落させにくくする。

空気清浄機のメニューボタンを3秒以上長押しします。
2
空気清浄機から「ピッ」と音がしたら「次へ」を
WPSマークがない場合は押してくださいこちらを選択戻る

戻る

前画面に戻る導線を確保する。
最初のページからしかやり直しができないことを防いで、ユーザの脱落を防ぐ
22

次へ

必要に応じて、説明図を用いて手順を説明する

次の手順へ進める状態を明示する。

次画面への遷移ボタンを最下部に配置。
画面は上部から下部を見てもらう流れを統一し、ユーザが次の手順に迷わないようにするため。

1.4.接続手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

その２(ポップアップ仕様)

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

ネットワーク
接続方法の選択
接続手順①

１①

ルーター本体、またはルーターの説
無線ボタン
明書にWPSマークがある場合はネットワーク
こちらを選択WPSマーク

接続中

リモコンの××ボタンを3秒間長押しします。
2
エアコンの無線ボタンが点滅したら「次へ」を
WPSマークがない場合は押してくださいこちらを選択

自動で消えるポップアップについては、キャンセルボタンを配置すること。
ユーザの確認を意図するポップアップについては、
OKボタンを配置すること。

キャンセル
戻る

戻る

23

次へ

自動で消えるポップアップの文言は、次の画面でその事象の結果を伝えること例)「ネットワーク接続中」が接続完了時に消えるポップアップの場合、「ネットワーク接続完了」が次の画面に表示されること。

1.5. 機器接続完了画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

機器接続が完了しました続いてアプリケーションに機器を登録して遠隔操作をできるようにし
ます。

登録開始

24

機器登録(次のパート)へ誘導することを明示する。
導線を確保することで、ユーザが迷わないようにする。

1.6. 登録機種選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録する機器を選んでください

何の画面かを最上部に記載し、ユーザに明示する。

必要に応じて、説明図を用いる

エアコン

空気清浄機の型番KP-***(本体電源ボタン上に記載)

25

型番等で選択させる場合には、機器の型番表示箇所をする
迷子になってしまう可能性がある。

1.7. 登録方法選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録方法を選んでください

何の画面かを最上部に記載し、ユーザに明示する。

必要に応じて、説明図を用いる
機器貼付のQRコードを撮影して登録する取扱い説明書P20の手順で登録する
戻る

前画面に戻る導線を確保する。
26

ユーザが迷わない文言を提示する「機器PINコードで登録する」と登録手順を読めば理解できるかもしれないが、最初の選択画面では理解が及ばない場合がある

1.8. 登録手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

機器登録手順①

何の画面かを最上部に記載し、ユーザに明示する。

１♪ピピッ

空気清浄機の[風量ボタン]と[運転ボタン]を同時に3秒間長押ししてください
成功すると「ピピッ」と音が鳴ります。
戻る

必要に応じて、説明図を用いる

次の手順へ進める状態を
明示する。

次へ

次画面への遷移ボタンを最下部に配置。

前画面に戻る導線を確保する。
27

1.9. 登録手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録が完了しました
ホーム画面に戻ります

何の画面かを最上部に記載し、ユーザに明示する。

OK
次画面への遷移ボタン等を配置する。

28

2.機器削除パート

29

2. 機器削除の流れ(2.1)メニュー
導線(2.2)削除機器の選択(2.3)機器削除の実行(2.2)機器管理

機器メーカ画面

機器メーカ画面

機器メーカ画面

機器メーカ画面削除
データ連携許可がされている場合は、解除される

30

2.1. 機器削除の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面

三

メニュー

・・・
・・・

+

機器登録

-

機器削除

・・・
・・・

31

機器削除の入り口は「機器削除」というワードに統一。
ユーザに共通意識を持ってもらう。

2.2.削除機器選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

機器削除リスト

リビングのエアコンを削除する

寝室の空気清浄機を削除する

32

何の画面かを最上部に記載し、ユーザに明示する。

機器を簡単に特定できる表示とする
MACアドレス等、ユーザが調べなければわからない表示はしない。

2.3. 削除機器実行画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ
機器リスト

機器削除時は確認をとる
再登録の手間が大きく、誤って削除した場合は再登録を実行しない可能性がある為。

機器を削除すると
1. 〇〇サービスへのデータ連携が停止
リビングのエアコンを削除する

2.アプリによる遠隔操作ができなくなります
削除しますか？
戻る

寝室の空気清浄機を
削除する
削除する

33

機器削除時の影響を明示する
ユーザが影響を知らなくて削除した場合、再登録を行わない可能性が高い

3.サービス加入パート34

3. サービス加入のフロー(3.1)サービス
加入の導線(3.2)サービ
ス概要・要件

機器メーカ画面

サービサ画面(3.3)サービス契約
サービサ画面35

サービサ画面(3.4)サービス契約完了
後のID接合導線
サービサ画面

3.1. サービス加入の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロ
ゴ

申し込み可能サービス

A社○○サービス

自宅の見守りサービス

B社△△サービス

何の画面かを最上部に記載し、ユーザに明示する。

登録している機器より、申し込み可能なサービスリストを持つ。
同リストは、サービス申し込みの導線を確保しているもの。
必要に応じてサービサ画面に遷移すると明記

遠隔に住んでいる方の見守りサービス

導線を確保する。

サービス内容の説明を簡単に記載
進む

戻る

36

3.2. サービス概要・要件画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

本サービスのご利用にあたっての
注意事項〇〇サービスを利用するには、サービス申し込み後に続けて・空気清浄機・エアコンのデータ情報を連携する必要があります。

サービス
申し込み

戻る

37

何の画面かを最上部に記載し、ユーザに明示する。

データ連携が必要な機器を列挙すること。

3.3. サービス契約標準モデル (ログイン画面)
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

ログイン

ID
PASS

ログイン
アカウント作成

38

何社のログイン画面なのか、
ロゴ、登録商標、社名等を入れて
明確にする

3.3.

サービス契約標準モデル

青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項(申し込み画面)
サービサ画面〇〇サービス
申し込み画面
サービス申し込みに必要な情報を入力する。

申し込む

39

何社のログイン画面なのか、
ロゴ、登録商標、社名等を入れて明確にする

4.4. サービス契約完了後のID接合導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

申し込みが完了しました。

何の画面かを最上部に記載し、ユーザに明示する。

○○にログインし機器データをサービスに連携します。

データ連携設定
設定画面へ
を行う

40

データ連携設定の導線を確保。

4.サービス解約パート

41

4. サービス解約のフロー(4.1)サービス
解約の導線(4.2)サービス
解約時の注意機器メーカ画面

サービサ画面(4.3)サービス解約
サービサ画面42

サービサ画面(4.4)サービス解約完了
サービサ画面

4.1. サービス解約の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

加入サービス

A社○○サービス

自宅の見守りサービス

B社

何の画面かを最上部に記載し、ユーザに明示する。

加入済みサービスリストを表示
必要に応じてサービサ画面に遷移すると明記△△サービス

遠隔に住んでいる方の見守りサービス

導線を確保する。

サービス内容の説明を簡単に記載
進む

戻る

43

4.2.サービス解約時の注意画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

本サービスの解約にあたっての注意事項〇〇サービスを解約すると、・・・
データ連携設定を行っている
・空気清浄機・エアコンのデータ連携設定は解約時に解除されます。

何の画面かを最上部に記載し、ユーザに明示する。

解約時の影響を記載。

データ連携設定が解除されることを明記

導線を確保する。
サービス
解約する

戻る

44

4.3.サービス解約 標準モデル (ログイン画面)
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

ログイン

ID

PASS

ログイン
アカウント作成45

4.3. サービス解約 標準モデル(解約確認画面)
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面〇〇サービス
解約画面
サービス解約に必要な情報を入力する。

解約46

4.4. サービス解約完了画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面〇〇サービスの解約が完了しました

メニューに戻る
設定画面へ

47

何の画面かを最上部に記載し、ユーザに明示する。

導線を確保する。

5.ID接合パート

48

5. ID接合のフロー(5.1)機器メーカ
ログイン(5.2)データ連携
許諾(5.3)データ連携
設定完了

機器メーカ画面

機器メーカ画面

機器メーカ画面49

5.1. 機器メーカログイン画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面
ロ
ゴ

ログイン

ID
PASS

ログイン
アカウント作成

50

何社のログイン画面なのか、
ロゴ、登録商標、社名等を入れて明確にする

5.2. データ連携許諾画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ[サービス名]が次の許可を求めています空気清浄機
データ提供の許可
空気清浄機の情報が〇〇株式会社に提供されます。

連携するサービス(利用目的)を明確にする連携するデータを明確にする。
連携するデータを、ユーザが理解できる粒度にし、細かいデー
タを見たい人は、リンク先で閲覧できるようにする。

データ連携先の企業を明示する
同意
しない

同意
する

同意ボタンは最下部に表示する。

データ連携に同意しない場合の遷移も確保しておく
51

5.3. データ連携設定完了画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録が完了しました
ホーム画面に戻ります

何の画面かを最上部に記載し、ユーザに明示する。

OK
次画面への遷移ボタン等を配置する。

52

6.データ連携許可・解除のフロー53

6. データ連携許可/解除のフロー(6.1)連携許可/
解除の導線(6.2)連携サービ
ス選択(6.3)対象サービスの機器連携設定(6.4)対象サービスの機器連携解除(6.3)対象サービスの機器連携設定

機器メーカ画面

機器メーカ画面

機器メーカ画面

機器メーカ画面

機器メーカ画面解除

ID接合の5.1～5.3を実施

許可(5.2データ連携許諾未認可の場合)

54

6.1. 連携許可/解除の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

機器メーカ画面

三

メニュー

・・・
・・・

+

機器登録

-

機器削除
データ連携設定・・・

55「データ連携設定」の文言で統一する。

6.2. 連携サービス選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

機器メーカ画面ロゴ

データ連携
サービスリスト
A社○○サービス

何の画面かを最上部に記載し、ユーザに明示する。

データ連携している
サービスリストを持つこと
必要に応じてサービサ画面に遷移すると明記

B社△△サービス
導線を確保する。
進む

戻る

サービスの解約通知を受け取った、かつ、
データ連携している機器がないサービスは表示しない。
56

6.3. 対象サービスの機器連携設定画面の標準モデル その１
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

サービス加入後、データ連携できる機器については連携機器一覧に追加する。

機器メーカ画面ロ
ゴA社○○サービス
連携機器一覧

リビングのエアコン
提供する情報何の画面かを最上部に記載し、ユーザに明示する。

現在対象機器がデータ連携中かどうかが分かる表示を持つ。
また、それを変更できる導線を持つ。

機器を簡単に特定できる表示とする。
MACアドレス等、ユーザが調べなければわからない表示はしない。

導線を確保する。

寝室の空気清浄機
提供する情報進む戻る

57

細かい連携データ項目を見たい人へ、
リンク先で詳細を閲覧できるようにする。

6.3. 対象サービスの機器連携設定画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

その２(全ての機器がOFF時)

機器メーカ画面ロ
ゴA社○○サービス
連携機器一覧

リビングのエアコン
提供する情報導線を確保する。

寝室の空気清浄機
提供する情報進む戻る

58

連携サービスで全ての機器連携が解除になった場合、その状態の表示を残す
サービスの解約を行っていないことと、
サービス連携設定をしてサービスを再開しやすくするため。

6.4. 対象サービスの機器連携解除画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

機器メーカ画面ロ
ゴ
A社○○サービス

データ連携を解除すると
1. 〇〇サービスへのデー
タ連携が停止します
リビングのエアコン
提供する情報2. 〇〇サービスで△△の通知を受けれなくなります
解除しますか？
戻る寝室の空気清浄機
解除する
提供する情報59

機器削除時の影響を明示する
データ連携解除でサービスが成り立たなくなる場合は、その旨をわかりやす
く表示すること。

ユーザに提示するＵＩ構成モデル
サービサ編

60

はじめに 機器・サービスの申込みや登録で、ユーザに提示するUIパートについて
消費者に提示するUIとしては、下記7つのパートに分解できる。
本モデルでは、各パートで留意するべき注意点等を示していく。
0.全体パート•

機器購入⇒登録⇒サービス加入等、消費者にUIとして提示する全体像を示す。

1.機器登録パート••

4.サービス解除パート

機器を購入して登録する。（サービスは未加入で、まだ加入予定は無い）
機器を購入して登録する。（サービスには加入しているが、まだ連携を行わない）•

サービスをやめる

2.機器解除パート

5.ID接合パート

・サービス加入済みで連携済みの機器を登録抹消するとき・サービス加入済みで連携済みの機器を連携解除するとき•

3.サービス加入パート

6.データ連携許可/解除パート••

サービス加入済み、機器登録済みで、後からデータ連携を開始す
る・サービス加入済みで連携済みの機器を連携解除するとき・サービス加入済みで連携解除済みの機器を連携許可するときサービスに申し込む。（とりあえず機器連携は、おこなわない）
サービスに申し込む。（機器をもっていない）

61

各パートの記載内容について①標準的な画面フローを記載②各画面の目標仕様を記載
・各画面を誰が表示しているのかを表記
・青字で記載されている事項はUIの精度を高めるために有用と思われる内容を記載。
・緑字で記載されている事項は、必須ではないがユーザが判断しやすくなると思われる内容を記載。
62

0. 全体パート

63

0. 全体パートのフロー(0.1)導線(0.2)誘導パート(大項目)(0.3)誘導パート(小項目)(0.4)詳細説明

サービサ画面

サービサ画面

サービサ画面

サービサ画面

各パート実施機器メーカ画面

1.機器登録2.機器削除

3.サービス加入
サービサ画面

サービサアプリの場合は、機器登録/削除時に各メーカのアプリに遷移させる必要があるので、ユーザに選択してもらう必要がある。
なお、サービサアプリの仕様により様々な遷移の方法が想定される。

64

4.サービス
解約
5.ID接合6.連携許可/解除(0.5)実施可能
パートの提示0.1. 導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面
ロゴや登録商標や社名等を入れて誰が画面を表示しているのか明確にする

ホーム画面や、常時表示のタブに、アイコン等で、機器登録・サービス登録等の導線にすぐに誘導できるルートを確保する。

65

0.2. 誘導パート(大項目)画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面タップすると細かい項目選択画面にに遷移します選択するのに抵抗感がないよう、遷移先は説明ページであることを明記する。

①機器を購入・
廃棄したS②サービスに加入・解約する

ユーザが分かる言葉で選択肢を提示する「機器登録」というワードはユーザが知らないと選択できない③機器情報をサービスに連携許可・連携解除、または、状態を確認する。

S

ボタン(戻る、進む、同意、メニュー、等)
に関しても「色」「形状」の統一を行う。

戻る

66

戻る導線は確保する0.3. 誘導パート(小項目)画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面タップすると詳細説明に遷移します1.
機器を購入した
2.
機器を廃棄した

選択するのに抵抗感がないよう、遷移先は説明ページであることを明記する。
ユーザが分かる言葉で選択肢を提示する「機器登録」というワードはユーザが知らないと選択できない

前頁「誘導パート(大項目)画面の標準モデル」
で選択した内容が本小項目にも漏れなく入って
いること。
戻る

67

戻る導線は確保する0.4. 詳細説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

機器を購入後に「機器登録」
が可能になります。
機器登録を行うと、
1. スマートフォンから機器を遠隔制御
2. ・・・・・

そのシーンで、「①何をすれば」「②何ができるか」を明示する。
「①何をすれば」に関しては、初心者
ユーザ以外が通常メニューから選択して実行するようなこと。
「機器登録」「機器削除」「データ連携設定」等。

ができるようになります。

機器登録
をする

戻る
戻る導線は確保する68

通常メニューで表示される文言で実行導線をつなぐ

0.5. 実施可能パートの提示画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器登録が完了しました
機器登録した機器で、便利なサービスに加入することができます。
サービスを探してみますか？

何の画面かを最上部に記載し、ユーザに明示する。

ユーザが次に何をできるかを提示する。
(P64の選択肢)
この例ではサービスに未加入なので、サービス加入へ誘導。

サービスを
探す
終了しますか？

終了する

69

次への導線を提示する。

1.機器登録パート(機器接続及び機器登録)70

1. 機器登録フロー Part ①(1.1)メニュー
導線(1.2)事前準備(1.3)接続方法
選択

機器メーカ画面

機器メーカ画面

機器メーカ画面71(1.4)接続手順説明
機器メーカ画面

機器メーカ画面

1. 機器登録フロー Part ②(1.5)機器接続完了(1.6)登録機種
選択(1.7)登録方法
選択

機器メーカ画面

機器メーカ画面

機器メーカ画面

1種類の場合は飛ばす

1種類の場合は飛ばす(1.8)登録手順説明

機器メーカ画面72

機器メーカ画面(1.9)登録完了

機器メーカ画面1.1. 機器接続への導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面

三

メニュー

・・・
・・・

+

機器登録

・・・
・・・

73

機器接続の入り口は「機器登録」というワードに統一。
ユーザに共通意識を持ってもらう。

1.2. 事前準備画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

あらかじめ必要物を明示しておく。
機器接続作業中にユーザが脱落しないため。

機器メーカ画面ロゴ

空気清浄機をネットワークに接続して、アカウントに紐づけること
により、あなたのアカウントから○○ができるようにします。
手順の中で必要なもの
・ルーターの説明書
・無線LANガイドブック

次へ

次画面への遷移ボタンを配置。

74

何の画面かを最上部に記載し、ユーザに明示する。
本例では、
ネットワーク接続のための導入誘導を想定。

1.3. 接続方法選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

ネットワーク
接続方法の選択
WPSボタンがある場合機器に表示されているマークなどを表現するときは、挿絵を挿入して、わかりやすく表現する。
ユーザが短時間で選択肢を判断できるようにし、脱落を防ぐ。

WPSマークルーター本体、またはルーターの説
明書にWPSマークがある場合は、こちらを選択WPSボタンがない場合
はこちらを選択戻る

前画面に戻る導線を確保する。
最初のページからしかやり直しができないことを防いで、ユーザの脱落を防ぐ
75

選択肢がある場合は、必ずどれかに当てはまるように選択肢を用意する。
ユーザが混乱するのを防ぐ為。

1.4. 接続手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

その１

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

ネットワーク
接続方法の選択
接続手順①

１①

ルーター本体、またはルーターの説
明書にWPSマークがある場合はこちらを選択WPSマーク

1画面内に1手順を表示する。
ユーザに易しい作業という印象を与え、脱落させにくくする。

空気清浄機のメニューボタンを3秒以上長押しします。
2
空気清浄機から「ピッ」と音がしたら「次へ」を
WPSマークがない場合は押してくださいこちらを選択戻る

戻る

前画面に戻る導線を確保する。
最初のページからしかやり直しができないことを防いで、ユーザの脱落を防ぐ
76

次へ

必要に応じて、説明図を用いて手順を説明する

次の手順へ進める状態を明示する。

次画面への遷移ボタンを最下部に配置。
画面は上部から下部を見てもらう流れを統一し、ユーザが次の手順に迷わないようにするため。

1.4.接続手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

その２(ポップアップ仕様)

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

ネットワーク
接続方法の選択
接続手順①

１①

ルーター本体、またはルーターの説
無線ボタン
明書にWPSマークがある場合はネットワーク
こちらを選択WPSマーク

接続中

リモコンの××ボタンを3秒間長押しします。
2
エアコンの無線ボタンが点滅したら「次へ」を
WPSマークがない場合は押してくださいこちらを選択

自動で消えるポップアップについては、キャンセルボタンを配置すること。
ユーザの確認を意図するポップアップについては、
OKボタンを配置すること。

キャンセル
戻る

戻る

77

次へ

自動で消えるポップアップの文言は、次の画面でその事象の結果を伝えること例)「ネットワーク接続中」が接続完了時に消えるポップアップの場合、「ネットワーク接続完了」が次の画面に表示されること。

1.5. 機器接続完了画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

何の画面かを最上部に記載し、ユーザに明示する。

機器接続が完了しました続いてアプリケーションに機器を登録して遠隔操作をできるようにし
ます。

登録開始

78

機器登録(次のパート)へ誘導することを明示する。
導線を確保することで、ユーザが迷わないようにする。

1.6. 登録機種選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録する機器を選んでください

何の画面かを最上部に記載し、ユーザに明示する。

必要に応じて、説明図を用いる

エアコン

空気清浄機の型番KP-***(本体電源ボタン上に記載)

79

型番等で選択させる場合には、機器の型番表示箇所をする
迷子になってしまう可能性がある。

1.7. 登録方法選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録方法を選んでください

何の画面かを最上部に記載し、ユーザに明示する。

必要に応じて、説明図を用いる
機器貼付のQRコードを撮影して登録する取扱い説明書P20の手順で登録する
戻る

前画面に戻る導線を確保する。
80

ユーザが迷わない文言を提示する「機器PINコードで登録する」と登録手順を読めば理解できるかもしれないが、最初の選択画面では理解が及ばない場合がある

1.8. 登録手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

機器登録手順①

何の画面かを最上部に記載し、ユーザに明示する。

１♪ピピッ

空気清浄機の[風量ボタン]と[運転ボタン]を同時に3秒間長押ししてください
成功すると「ピピッ」と音が鳴ります。
戻る

必要に応じて、説明図を用いる

次の手順へ進める状態を
明示する。

次へ

次画面への遷移ボタンを最下部に配置。

前画面に戻る導線を確保する。
81

1.9. 登録手順説明画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録が完了しました
ホーム画面に戻ります

何の画面かを最上部に記載し、ユーザに明示する。

OK
次画面への遷移ボタン等を配置する。

82

2.機器削除パート

83

2. 機器削除の流れ(2.1)メニュー
導線(2.2)削除機器の選択(2.3)機器削除の実行(2.2)機器管理

機器メーカ画面

機器メーカ画面

機器メーカ画面

機器メーカ画面削除
データ連携許可がされている場合は、解除される

84

2.1. 機器削除の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面

三

メニュー

・・・
・・・

+

機器登録

-

機器削除

・・・
・・・

85

機器削除の入り口は「機器削除」というワードに統一。
ユーザに共通意識を持ってもらう。

2.2.削除機器選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

機器削除リスト

リビングのエアコンを削除する

寝室の空気清浄機を削除する

86

何の画面かを最上部に記載し、ユーザに明示する。

機器を簡単に特定できる表示とする
MACアドレス等、ユーザが調べなければわからない表示はしない。

2.3. 削除機器実行画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ
機器リスト

機器削除時は確認をとる
再登録の手間が大きく、誤って削除した場合は再登録を実行しない可能性がある為。

機器を削除すると
1. 〇〇サービスへのデータ連携が停止
リビングのエアコンを削除する

2.アプリによる遠隔操作ができなくなります
削除しますか？
戻る

寝室の空気清浄機を
削除する
削除する

87

機器削除時の影響を明示する
ユーザが影響を知らなくて削除した場合、再登録を行わない可能性が高い

3.サービス加入パート88

3. サービス加入のフロー(3.1)サービス
加入の導線(3.2)サービ
ス概要・要件

機器メーカ画面

サービサ画面(3.3)サービス契約
サービサ画面89

サービサ画面(3.4)サービス契約完了
後のID接合導線
サービサ画面

3.1. サービス加入の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロ
ゴ

申し込み可能サービス

A社○○サービス

自宅の見守りサービス

B社△△サービス

何の画面かを最上部に記載し、ユーザに明示する。

登録している機器より、申し込み可能なサービスリストを持つ。
同リストは、サービス申し込みの導線を確保しているもの。
必要に応じてサービサ画面に遷移すると明記

遠隔に住んでいる方の見守りサービス

導線を確保する。

サービス内容の説明を簡単に記載
進む

戻る

90

3.2. サービス概要・要件画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

本サービスのご利用にあたっての
注意事項〇〇サービスを利用するには、サービス申し込み後に続けて・空気清浄機・エアコンのデータ情報を連携する必要があります。

サービス
申し込み

戻る

91

何の画面かを最上部に記載し、ユーザに明示する。

データ連携が必要な機器を列挙すること。

3.3. サービス契約標準モデル (ログイン画面)
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

ログイン

ID
PASS

ログイン
アカウント作成

92

何社のログイン画面なのか、
ロゴ、登録商標、社名等を入れて
明確にする

3.3.

サービス契約標準モデル

青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項(申し込み画面)
サービサ画面〇〇サービス
申し込み画面
サービス申し込みに必要な情報を入力する。

申し込む

93

何社のログイン画面なのか、
ロゴ、登録商標、社名等を入れて明確にする

4.4. サービス契約完了後のID接合導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

申し込みが完了しました。

何の画面かを最上部に記載し、ユーザに明示する。

○○にログインし機器データをサービスに連携します。

データ連携設定
設定画面へ
を行う

94

データ連携設定の導線を確保。

4.サービス解約パート95

4. サービス解約のフロー(4.1)サービス
解約の導線(4.2)サービス
解約時の注意機器メーカ画面

サービサ画面(4.3)サービス解約
サービサ画面96

サービサ画面(4.4)サービス解約完了
サービサ画面

4.1. サービス解約の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

加入サービス

A社○○サービス

自宅の見守りサービス

B社

何の画面かを最上部に記載し、ユーザに明示する。

加入済みサービスリストを表示
必要に応じてサービサ画面に遷移すると明記△△サービス

遠隔に住んでいる方の見守りサービス

導線を確保する。

サービス内容の説明を簡単に記載
進む

戻る

97

4.2.サービス解約時の注意画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

本サービスの解約にあたっての注意事項〇〇サービスを解約すると、・・・
データ連携設定を行っている
・空気清浄機・エアコンのデータ連携設定は解約時に解除されます。

何の画面かを最上部に記載し、ユーザに明示する。

解約時の影響を記載。

データ連携設定が解除されることを明記

導線を確保する。
サービス
解約する

戻る

98

4.3.サービス解約 標準モデル (ログイン画面)
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面

ログイン

ID

PASS

ログイン
アカウント作成99

4.3. サービス解約 標準モデル(解約確認画面)
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面〇〇サービス
解約画面
サービス解約に必要な情報を入力する。

解約

100

4.4. サービス解約完了画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

サービサ画面〇〇サービスの解約が完了しました

メニューに戻る
設定画面へ

101

何の画面かを最上部に記載し、ユーザに明示する。

導線を確保する。

5.ID接合パート

102

5. ID接合のフロー(5.1)機器メーカ
ログイン(5.2)データ連携
許諾(5.3)データ連携
設定完了

機器メーカ画面

機器メーカ画面

機器メーカ画面103

5.1. 機器メーカログイン画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面
ロ
ゴ

ログイン

ID
PASS

ログイン
アカウント作成

104

何社のログイン画面なのか、
ロゴ、登録商標、社名等を入れて明確にする

5.2. データ連携許諾画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ[サービス名]が次の許可を求めています空気清浄機
データ提供の許可
空気清浄機の情報が〇〇株式会社に提供されます。

連携するサービス(利用目的)を明確にする連携するデータを明確にする。
連携するデータを、ユーザが理解できる粒度にし、細かいデー
タを見たい人は、リンク先で閲覧できるようにする。

データ連携先の企業を明示する
同意
しない

同意
する

同意ボタンは最下部に表示する。

データ連携に同意しない場合の遷移も確保しておく
105

5.3. データ連携設定完了画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
必須ではないがユーザが判断しやすくなる
挿絵など
黒字：補足事項

機器メーカ画面ロゴ

登録が完了しました
ホーム画面に戻ります

何の画面かを最上部に記載し、ユーザに明示する。

OK
次画面への遷移ボタン等を配置する。

106

6.データ連携許可・解除のフロー107

6. データ連携許可/解除のフロー(6.1)連携許可/
解除の導線(6.2)連携サービ
ス選択(6.3)対象サービスの機器連携設定(6.4)対象サービスの機器連携解除(6.3)対象サービスの機器連携設定

機器メーカ画面

機器メーカ画面

機器メーカ画面

機器メーカ画面

機器メーカ画面解除

ID接合の5.1～5.3を実施

許可(5.2データ連携許諾未認可の場合)

108

6.1. 連携許可/解除の導線画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

機器メーカ画面

三

メニュー

・・・
・・・

+

機器登録

-

機器削除
データ連携設定・・・

109「データ連携設定」の文言で統一する。

6.2. 連携サービス選択画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

機器メーカ画面ロゴ

データ連携
サービスリスト
A社○○サービス

何の画面かを最上部に記載し、ユーザに明示する。

データ連携している
サービスリストを持つこと
必要に応じてサービサ画面に遷移すると明記

B社△△サービス
導線を確保する。
進む

戻る

サービスの解約通知を受け取った、かつ、
データ連携している機器がないサービスは表示しない。
1106.3. 対象サービスの機器連携設定画面の標準モデル その１
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

サービス加入後、データ連携できる機器については連携機器一覧に追加する。

機器メーカ画面ロ
ゴA社○○サービス
連携機器一覧

リビングのエアコン
提供する情報何の画面かを最上部に記載し、ユーザに明示する。

現在対象機器がデータ連携中かどうかが分かる表示を持つ。
また、それを変更できる導線を持つ。

機器を簡単に特定できる表示とする。
MACアドレス等、ユーザが調べなければわからない表示はしない。

導線を確保する。

寝室の空気清浄機
提供する情報進む

戻る111

細かい連携データ項目を見たい人へ、
リンク先で詳細を閲覧できるようにする。

6.3. 対象サービスの機器連携設定画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

その２(全ての機器がOFF時)

機器メーカ画面ロ
ゴA社○○サービス
連携機器一覧

リビングのエアコン
提供する情報導線を確保する。

寝室の空気清浄機
提供する情報進む戻る

112

連携サービスで全ての機器連携が解除になった場合、その状態の表示を残す
サービスの解約を行っていないことと、
サービス連携設定をしてサービスを再開しやすくするため。

6.4. 対象サービスの機器連携解除画面の標準モデル
青字：重要な要素。
ユーザが途中挫折しない事柄に関係するもの等
緑字：あったらよいもの。
ユーザの再現性向上に繋がるもの等
黒字：補足事項

機器メーカ画面ロ
ゴ
A社○○サービス

データ連携を解除すると
1. 〇〇サービスへのデー
タ連携が停止します
リビングのエアコン
提供する情報2. 〇〇サービスで△△の通知を受けれなくなります
解除しますか？
戻る寝室の空気清浄機
解除する
提供する情報113

機器削除時の影響を明示する
データ連携解除でサービスが成り立たなくなる場合は、その旨をわかりやす
く表示すること。

プラットフォーム間の接合方法に関する標準モデル

114

本標準モデルのカバー範囲① 機器はネット接続＆ID登録済みの状況で、サービス連携を開始する場合

機器
ネット
ワーク
接続

ユーザIDと
機器の紐
づけ

サービス
申し込み
ID獲得
ログイン

データ
連携設定

サービス
開始

事前処理

ユーザ
許諾

ユーザID
接合

データ連携
開始

②先にサービスに申し込んでいて、機器を後からネット接続＆ID登録する場合

サービス
申し込み

機器
ネット
ワーク
接続

事前処理～データ連携開始までの順番は変わらない
ユーザIDと
機器の紐
づけ

サービス
ログイン

データ
連携設定

サービス
開始

115

標準モデルがカバーする範囲
・UI実装
・クラウド実装

プラットフォーム接合方法の前提条件• データ連携をクラウド間のWeb APIで行う仕組みであること• データ連携におけるユーザ許諾を書面ではなくUI操作によって取得する仕組みであること

上記前提条件のもと、OpenID Connect方式を用いて、個人情報保護を遵守し、セキュアにデータ連携を行う方法について標準的なモデルを示す。

Web API

ID接合

個人データ

プラット
フォーム

サービス

ID接合

サービス

プラット
フォーム

機器

機器

A社

B社
116

OpenID Connectの利用• OpenID Connectの定義• 原文• https://openid.net/connect/• 日本語訳• http://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html• 概要• OAuth2.0認可+認証を定義したもの• 広く使われてきたOAuth2.0認可の仕組みを使っている• 認可画面のUIを規定しているものではない

次項より、OpenID Connectを使ったときのUIとクラウドのシーケンス図を示す
この時、個人情報保護法で気を付けるべきことも記載。
117

事前～ユーザ許諾のシーケンス図
スマホ(UI)

1

機器メーカクラウド

サービサクラウド
事前(事前)redirect_uriのホワイトリスト登録(事前)clientID/clientSecret発行、許可scopeの連絡※scopeの扱いは補足参照
認可要求(clientID/redirect_uri/scope/state)許諾

OIDCで定義

ログイン画面

ID
接
合
デ
｜
タ
連
携

ID/PASS

118

ユーザ許諾のシーケンス図
スマホ(UI)

2
機器メーカクラウド

サービサクラウド

ユーザが規約同意をしているか確認⇒同意済みの場合は認可画面を省略

認可画面(要求scopeにより認可画面を出し分け)

個人情報保護法

事
前
許
諾

第二十三条
個人情報取扱事業者は、次に掲げる場合を除く
ほか、あらかじめ本人の同意を得ないで、個人データを第三者に提供してはならない。

ID
接合

２ 次に掲げる事項について、個人情報保護委
員会規則で定めるところにより、あらかじめ、
本人に通知し、又は本人が容易に知り得る状態に置く
一 第三者への提供を利用目的とすること。
二 第三者に提供される個人データの項目
三 第三者への提供の方法

同意

同意を得た旨をDBに記録

119

デ
｜
タ
連
携

ID連携のシーケンス図
スマホ(UI)

機器メーカクラウド

サービサクラウド
事
前redirect_uri(code/state)stateの検証
token要求(code/redirect_uri/clientID/clientSecret)許諾

IdToken/access_token/refresh_token

OIDCで定義

連携完了の表示120

tokenをサービサで管理している
IDに紐づけ

ID
接
合
デ
｜
タ
連
携

データ連携のシーケンス図1

スマホ(UI)

機器メーカクラウド

サービサクラウド
事
前

機器情報取得API(access_token)
access_tokenの検証

機器情報
ログ保存

ログ保存

許
諾

個人情報保護法
個人情報保護法第二十六条
３ 個人情報取扱事業者は、第一項の規定による確認を行ったときは、個人情報保護委員会規則で定めるところにより、当該個人データの提供を受けた年月日、当該確認に係る事項その他の個人情報保護委員会規則で定める事項に関する記録を作成しなければならない。
４ 個人情報取扱事業者は、前項の記録を、当該記録を作成した日から個人情報保護委員会規則で定める期間保存しなければならない。

第二十五条
個人情報取扱事業者は、個人データを第三者（第二条第五項各号に掲げる者を除く。以下この条及び次条において同じ。）に提供したときは、個人情報保護委員会規則で定めるところにより、当該個人データを提供した年月日、当該第三者の氏名又は名称その他の個人情報保護委
員会規則で定める事項に関する記録を作成しなければならない。
２ 個人情報取扱事業者は、前項の記録を、当該記録を作成した日から個人情報保護委員会規則で定める期間保存しなければならない。

原則3年間

原則3年間

121

ID
接
合

デ
｜
タ
連
携

データ連携のシーケンス図
スマホ(UI)

2
機器メーカクラウド

サービサクラウド
access_token有効期限が切れた時
token_refresh(refresh_token)

access_token

OIDCで定義

事
前
許
諾
ID
接
合

もし、refresh_tokenの有効期限が切れた場合は、ユーザの操作を伴う「ユーザ許諾のシーケンス図 1」の認可要求から再度行なわなければならない

122

デ
｜
タ
連
携

補足：機器メーカクラウドのDBの持ち方
個人情報保護法第二条 この法律において「個人情報」とは、生存する個人に関する情報であって、次の各号のいずれかに該当するものをいう。
一 当該情報に含まれる氏名、生年月日その他の記述等（文書、図画若しくは電磁的記録（電磁的方式（電子的方式、磁気的方式その他人の知覚によっては認識することができない方式をいう。次項第二号において同じ。）で作られる記録をいう。第十八条第二項において同じ。）に記載され、若しくは記録され、又は音声、動作その他の方法を用いて表された一切の事項（個人識別符号を除く。）をいう。以下同じ。）により特定の個人を識別することができるもの（他の情報と容易に照合することができ、それにより特定の個人を識別することができることとなるものを含む。）

容易照合性に関して

個人情報扱いユーザIDのDB

ユーザID

氏名

内部ID

許諾

機器情報DB

機器管理DB

…

内部ID

機器ID

・・・

機器ID

操作履歴

日時

アクセス権限を分ける

アクセス権限を分ける

各DBにおいて、閲覧権限者を整理し、セキュリティを高めるのは重要。
ただし、それを「容易に照合できない」とみなすものではない⇒機器管理DB、機器情報DBも個人情報扱いに。
123…

補足：scopeの実装

scopeを「許諾画面で表示するデータ単位」で切ると実装上都合が良い
例)
scope
・エアコンデータ読み取り
・空気清浄機データの読み取り

機器情報取得API(access_token)
で実際にデータを取得されるとき

クラウド

認可要求(clientID/redirect_uri/scope/state)を受けて表示の出し分けが可能

access_tokenがJSON Web Tokenになっており
紐解くとscopeを抽出できる。
エアコンの情報取得APIの場合は許可し、冷蔵庫の情報取得APIの場合は棄却できる

機器メーカ
データ連携規約
目的：○○サービス
データ連携先：S社
連携データ：
・エアコンの情報
・空気清浄機の情報
同意

124

お問合せ

標準モデルのパワーポイント形式での配布、また、標準モデルの不明点、開発／連携時のご不明点等がございましたら、以下の事務局まで
お問合せ下さい事務局・問い合わせ：一般社団法人 電子情報技術産業協会 IoT事業推進部〒100-0004 東京都千代田区大手町1-1-3
電話：03-6268-0003

125