LINE Botのリッチメニュー画像ファイルの作成方法

## 概要
- AWS LambdaとDynamoDBを使ってLINE Botを作ったので、その備忘録の1つです。
- この記事では、LINE Botのリッチメニューの画像ファイルをCanvaを使って簡単に作成する方法を説明します。

## 前提条件
- Webブラウザで作業するので、特に環境構築はなし。

## 事前準備
- Canvaアカウントを作成。
    - プランは、Free, Pro, Teams, とありますが、有料スタンプや高度機能を使いたいなどのニーズがなければ無料のFreeプランでOK。
    - Canvaの商用利用について
        - 基本的には、プランに関わらず商用利用可能。
        - 詳細は[公式サイトの解説1](https://www.canva.com/ja_jp/learn/commercial-use/), [公式サイトの解説2](https://www.canva.com/ja_jp/help/licenses-copyright-legal-commercial-use/)を参照のこと

## リッチメニューとは？
- LINEのトーク画面下部に固定で表示されるメニュー機能です。
    - [公式説明](https://www.linebiz.com/jp/manual/OfficialAccountManager/rich-menus/)も参照のこと。
    - みなさんも使ったことがあるかと思います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/e8fa9931-d10d-c0fb-4edc-de76cf18e611.png" width="50%">

- リッチメニュー画像は、指定のサイズに準拠する必要があります。
    - この記事では、 2500px × 1686px のサイズのサンプルを作成します。 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/6935c53e-2bc5-5351-fa27-ef202a835c02.png" width="80%">


## リッチメニュー画像の作り方
### 作りたい画像のイメージを作る
- まずは作りたい画像のイメージを作ります。（手書きでもExcelでもOKです）
    - ボタンの数は何個か？
    - 文字やイラストはどんな内容にするか？
    - 色はどうするか？
    - などなど。完全に決めないでCanva上で操作しながら固めていく方法でも構いません。
- 今回の仕様は以下の通りにします。
    - ボタン数: 6個
    - ボタンの文言: 検索、新製品、スケジュール、登録、Q&A、アクセス
    - 色: 
        - 背景(緑): #7CA646
        - ボタン(黄緑): #C1FF72
        - アイコン(グレー): #4D4D4D
        - 文言(グレー): #4D4D4D
        - アイコン: Canva上でテキトーに選ぶ
- Excelで作ったイメージ図です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/5d39e1ef-344e-52fb-402d-5dd1796e20ab.png" width="50%">

### 実際にリッチメニューをCanvaで作る
- それでは実際に作ってみます。
- 一から自分で作るのではなく、テンプレートを利用して作成するのが簡単でおすすめです。
- トップページ -> テンプレート　をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/f4fefb14-3a93-a60c-d466-a0af17c0802e.png)

- 検索バーに `lineリッチメニュー` を入力して検索。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/c0beb492-d532-e28c-36fe-9d9a6bd8042b.png)

- そうすると、LINEリッチメニューのテンプレートがたくさん表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/70bd3de2-9d90-b6da-a4b4-2db36b320a88.png)

- その中から、自分が作成したいボタン配置のイメージに近いものを選びます。
    - 対象をクリック -> 『このテンプレートをカスタマイズ』をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/7a90103b-fa79-67f8-f9d6-1e37e835720c.png)

- すると別タブで、編集画面が開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/04be3b7d-a0df-4a1d-228f-57f23b2c705a.png)

- 操作自体は、直感的で分かりやすいので、サクサク進むと思います。
    - ちなみにYoutubeで　`canva line リッチメニュー` で検索すると操作方法を学べる動画がたくさんあります。
- 作成が完了しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/7ddbef9b-ebd1-c76f-66de-0fd4606a28b2.png)

- 作成した画像をダウンロードします。
    - ファイル -> ダウンロード -> ダウンロード をクリック
    - 画像サイズがリッチメニュー仕様に適合しているか確認してください。(今回は 2500x1686px)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/e91be268-a498-042c-6a06-d6e24c6078ac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/0de37d79-e88a-e234-1c54-9f06525f59df.png)

- 今回作成した画像はこちらです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1834744/1f6a81c1-22e9-37b2-0911-c332b6c37ecb.png" width="50%">

- 以上でLINEリッチメニュー画像の作成完了です