24日目にLINEミニアプリが完成する初心者 ―― Day23. 審査依頼前の確認事項


# はじめに

前回は「24 日目に LINE ミニアプリが完成する初心者 ―― Day22. ローディングアニメーションを表示する」と題して、を実装しました。

https://qiita.com/non_watanabe/private/4134392deaf33c8d0a91

<br/>
今回からは最後の総仕上げとして、LINEミニアプリの審査について紹介して行きたいと思います。

# 審査の概要

LINE ミニアプリチャネルを作成した段階では、LINE ミニアプリは未認証ミニアプリで、一部機能が制限されています。

開発した LINE ミニアプリを認証済ミニアプリにするには、LINE ヤフー株式会社による審査を受ける必要があります。

今回私が作ったアプリは審査には出しませんが、実際に審査に出す場合に備えてあらかじめ学習しておきたいと思います。

# LINE ミニアプリの審査依頼前の確認事項

審査前には以下の確認を行います。

- LINE ミニアプリのアイコン
  - 【必須】アイコンのサイズ
  - 【必須】ロゴのサイズ
  - 【推奨】ロゴのデザイン
  - 【禁止】LINE ミニアプリのロゴ使用
- ランドスケープモードのセーフエリア
  - ノーマルモード
  - ランドスケープモード
- 読み込み中アイコン
- カスタムアクションボタン
  - シェアターゲットピッカーの利用
  - カスタムシェアメッセージのフォーマット
- LINE ミニアプリポリシー
- プロバイダー名
- チャネル説明
- プライバシーポリシー
- 本番用チャネルと審査用チャネル

詳しくは以下でそれぞれ説明を行います。

## LINE ミニアプリのアイコン

アイコンはモバイル端末などで小さく表示される場合があるため、ユーザーがアイコンを視認しやすいようガイドラインが定められています。

### 【必須】アイコンのサイズ

アイコンの背景領域のサイズは 130\*130px にすることが定められています。

実際のサイズで言うと以下です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/86471c05-6d18-0ef5-5578-65fb8e7e09e7.jpeg" width="130px" height="130px" />

背景領域すですのでこの画像で言うと水色の部分を指します。

### 【必須】ロゴのサイズ

ロゴのサイズは以下の範囲内で設定することが求められます。

先ほどのアイコンで言うとアザラシの部分です。

|                |              |
| -------------- | ------------ |
| 最小サイズ     | 54\*54px     |
| **推奨サイズ** | **76\*76px** |
| 最大サイズ     | 90\*90px     |

### 【推奨】ロゴのデザイン

これは必須ではありませんが、ロゴは単独のシンボル、またはワードマークとしてデザインすることが推奨されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/a7dd6cdd-840f-87dc-5f37-45f4776d0be2.png)
(参照: https://developers.line.biz/ja/docs/line-mini-app/design/line-mini-app-icon/#logo-size)

### 【禁止】LINE ミニアプリのロゴ使用

無いとは思いますが、ロゴの中に LINE ミニアプリ（または LINE MINIAPP）のロゴを含めるのは禁止となっています。

# ランドスケープモードのセーフエリア

スマホの画面にくぼみ等がある端末でも、CSS を使って LINE ミニアプリの全てが表示できるようにすることが推奨されています。

LINE ミニアプリページの padding をそれぞれ設定しましょう。

## ノーマルモード

ノーマルモードは一般的な縦向きの表示の場合です。

画面の下部分 34px に padding を設定しましょう。

```css
 {
  padding-bottom: 34px;
}
```

## ランドスケープモード

ランドスケープモードは横向き表示の場合です。

左右に 44px、下に 21px の padding を設定しましょう。

```css
 {
  padding-right: 44px;
  padding-bottom: 21px;
  padding-left: 44px;
}
```

# 読み込み中アイコン

画面読み込み中には読み込み用のアイコンを表示することが推奨されています。

LINE 公式から svg ファイルが提供されているため、これを使用して設定しましょう。

- [ライトモード用スピナー](https://developers.line.biz/media/line-mini-app/LINE_spinner_light.svg)
- [ダークモード用スピナー](https://developers.line.biz/media/line-mini-app/LINE_spinner_dark.svg)

スピナーのサイズは、30x30px で、画面中央に表示しましょう。

# カスタムアクションボタン

LINE ミニアプリではヘッダーとは別で、LINE ミニアプリをシェアするカスタムアクションボタンを実装することが出来ます。

カスタムアクションボタンからカスタムシェアメッセージを送信する場合は、ユーザーがメッセージの内容を早くかつ正確に把握できるように、ガイドラインに沿った実装にする必要があります。

## シェアターゲットピッカーの利用

カスタムアクションボタンがタップされた時には、LIFF SDK のシェアターゲットピッカーの機能を使って、グループまたは友だちを選択する画面を表示するように実装する必要があります。

# カスタムシェアメッセージのフォーマット

カスタムシェアメッセージは Flex Message のバブルコンテナを使用して作成を行う必要があります。

カルーセルコンテナは使用しないよう注意しましょう。

また細かいガイドラインについては以下に記述がありますのでご確認ください。

https://developers.line.biz/ja/docs/line-mini-app/develop/share-messages/#custom-share-message-format

# パフォーマンスガイドライン

アプリを作る際に共通して言えることですが、パフォーマンスにも注意する必要があります。

パフォーマンス計測には Google が提供する[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview?hl=ja)や[PageSpeed Insights](https://pagespeed.web.dev/)などのパフォーマンス計測ツールを利用することが勧められています。

LINE 公式の推奨スコアは以下の通りです。

| パフォーマンス計測ツール | スコア               |
| ------------------------ | -------------------- |
| Lighthouse               | Performance: 50 以上 |

:::note warn
**注意**

- LINE ログインが実行されない状態で計測してください。LINE ログインが実行されると、LINE ログインのページのパフォーマンスが計測され、LINE ミニアプリのパフォーマンスは計測されません。
- プロダクション環境（本番環境）で計測してください。スコアは、ネットワーク環境などの影響を受ける場合があります。

:::

# LINE ミニアプリポリシー

LINE ミニアプリは以下の LINE ミニアプリポリシーを遵守している必要があります。

https://terms2.line.me/LINE_MINI_App?lang=ja

審査の前には目を通しておきましょう。

# プロバイダー名

プロバイダー名は LINE Developers トップ画面のプロバイダー設定から確認することができます。

プロバイダー名はサービス提供者と同一である必要があるため、一時的な名前にしている場合は忘れず修正しておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/ae3fa529-6eb8-c046-c50d-6d7ebd97daf1.png)

# チャネル説明

チャネル説明は LINE Developers からチャネルを選択した際に表示されるチャネル基本設定で確認ができます。

ここには正しいサービス内容が記載されている必要があるため、内容を確認しておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/3e433b5a-722c-111f-2d98-6d9be371eff8.png)

# プライバシーポリシー

プライバシーポリシーでは、ユーザー情報を取得する会社をプロバイダー名と同じ会社に設定する必要があります。

# 本番用チャネルと審査用チャネル

審査の際、LINE ヤフー株式会社では審査用チャネルの LIFF URL を確認しますが、念の為本番用チャネルの LIFF URL と審査用チャネルの LIFF URL が同じサービスを反映しているかどうか、審査前に確認しておくようにしましょう。

# まとめ

ここまでで、審査の注意事項を確認してきました。

次回は最終回！審査の流れについて確認して行きたいと思います。

残りは 1 日！
気になる方は是非フォローやカレンダー購読をお願いします:star: