洋菓子店の注文通知には、もともと管理画面のURLが文字列で入っていた。
タップできる。動く。問題があるわけではない。ただ、70文字を超えるURL文字列が通知の中に浮いている見た目は、洋菓子店のブランドとは合わない。
「注文を確認する」というラベルのついたボタンを、通知の中に置くことにした。
洋菓子店のカラーコードを決める
洋菓子店のデザインカラーはクリーム×キャラメル×ゴールドだ。商品ページのボタンには #b5838d という少しくすんだローズを使っている。
Flex Messageのボタン色にも同じ値を使った。
footer: {
type: 'box',
layout: 'vertical',
contents: [{
type: 'button',
style: 'primary',
color: '#b5838d',
action: { type: 'uri', label: '注文を確認する', uri: adminUrl }
}]
}注文通知とWebの管理画面が同じカラーで統一されている。オーナーが受け取ったLINEのボタンをタップして管理画面を開いたとき、同じ世界観のまま続きが読める。
テキスト通知からFlex Messageへの移行
変更前はLINE Messaging APIのtext型メッセージを送っていた。
messages: [{ type: 'text', text: bodyText }]変更後はflex型に切り替えた。altText はFlex Messageが表示できない環境（通知バナーなど）で代わりに表示されるテキストだ。
messages: [{
type: 'flex',
altText: '📦 新しいご予約が届きました',
contents: { /* bubble構造 */ }
}]送信先URLとヘッダーは同じだ。messages の中身だけが変わった。
管理画面URLのキャッシュバイパスも同時に対処した
ボタンに設定するURLに ?t=${new Date().getTime()} を追加した。
焼き菓子店で先に遭遇した問題と同じだ。LINEブラウザは同じURLをキャッシュする。URLにタイムスタンプが乗ることで、毎回新しいURLとして認識される。
通知が届くたびに新しいURLが生成される。管理画面のCSSを更新してもすぐに反映される。
ボタンの存在が運用を変える
テキスト通知のときは、オーナーがURLを目で探してタップする必要があった。Flex Messageにするとボタンが目に入る。「ここをタップすれば確認できる」という文脈が見た目から伝わる。
コードの量はほぼ同じだ。JSONの構造が変わっただけで、通知の体験が変わった。
*シンプルシステム株式会社 代表 伊藤勝彦*