目に留まる!”お知らせ機能” のアレンジ術

【公式】自社開発AIチャットボットと宿泊予約エンジン|トリプラ > 目に留まる!”お知らせ機能” のアレンジ術

“お知らせ機能”は、例えば、会員特典を表示することでや会員登録率をアップさせたり、クーポンコードを表示させることでお客様の顧客体験をアップさせることが期待できます。

 

色を付けたり画像を入れたり、お客様の目に留まりやすいお知らせ機能のアレンジ術をご紹介します。

お知らせ機能とは

お知らせ機能の表示例

お知らせ機能の設定方法

お知らせのアレンジ術

文字に色を付ける

文字の大きさを調整する

文字を太くする

文字にリンクを付ける

文字数を少なくする

文字を改行する

スマホ画面を確認する

画像を挿入する

画像とテキストを横並びにする

 


 

“お知らせ機能”とは

”お知らせ機能” は、お客様の画面で目に留まりやすい箇所に、お客様へのメッセージを表示する機能です。具体的には、検索結果画面、お客様情報入力画面、予約完了画面、予約関連メールに表示が可能です。

表示箇所のサンプル一覧はこちら

 

表示させると便利なお知らせの例

①  特典(一般特典、会員特典など)

②  クーポンコード

③  キャンペーンの詳細

④  新サービスのお知らせ

⑤  改装のお知らせなど

 

 

おしらせ機能の設定方法

お知らせ機能の設定方法はこちら


 

お知らせのアレンジ術

 

1. 文字をアレンジしてメリハリをつける

色を使う、文字サイズを調整するなど、文字にメリハリをつけましょう。

 

お知らせアレンジ例)

 

文字に色を付ける

① 色を付けたい文字の前後に、<font color="#カラーコード">色を付けたい文字</font>を追加してください。

 

② 上記の"#カラーコード"を、使いたい色のカラーコードに置き換えます。例えばトリプラのロゴのピンクのカラーコードは、C21E58なので、<font color="#C21E58">色を付けたい文字</font>になります。

カラーコードはこちらのサイトで確認できます。

 

アイコンの目のマークをクリックするとプレビューが表示され、色が付いていることが確認できます。(アイコンをもう一度クリックすると元の表示に戻ります。)

 

アレンジ例で使用したコードはこちら:<font color="#C21E58">会員特典キャンペーン実施中</font>

 

 

文字の大きさを調整する

文字の大きさは、大きくしたい文字をの前後に<H1>大きくしたい文字</H1>を追加してください。使用したい文字サイズによって以下を使い分けてください。

大サイズ: <H1>大きくしたい文字</H1>

中サイズ: <H2>大きくしたい文字</H2>

小サイズ: <H3>大きくしたい文字</H3>

 

アレンジ例で使用したコードはこちら:<H3>会員特典キャンペーン実施中</H3>

 

文字を太くする

文字の太さは、太くしたい文字の前後に<b> テキスト </b>を追加してください。管理画面上で確認するには、アイコンの目のマークをクリックするとプレビューが表示され、太く表示されていることが確認できます。(アイコンをもう一度クリックすると元の表示に戻ります。)

 

アレンジ例で使用したコードはこちら:<b>会員特典キャンペーン実施中</b>

 

 

文字にリンクを付ける

リンクを付ける場合は、リンクを付けたい文字の前後に<a href="リンクしたいURL">テキスト</a>を追加してください。

 

会員登録ページのURLは、予約ウィジェットが設置してあるページのURLの末尾に以下を追加してください。

?tripla_booking_widget_open=signUp 

 

アレンジ例で使用したコードはこちら:お得な会員登録は<a href="https://tripla.io/?tripla_booking_widget_open=signUp">こちら</a>から!!

 

 

2. アピールポイントを明確にする

不要な情報はお知らせには記載せず、文字数はできるだけ減らしアピールポイントを簡潔にまとめましょう。特にスマートフォンで見る場合、文字数が多いと視認性がさがります。すっきりさせましょう。

 

 

3. 特典はたくさんあるように見せる

特典はできるだけ細かく分けて、特典ごとに改行して、お得感をボリュームアップしましょう。

 

文字を改行する

改行したい位置に<br>と入力します。管理画面上で確認するには、アイコンの目のマークをクリックするとプレビューが表示され、改行されていることが確認できます。(アイコンをもう一度クリックすると元の表示に戻ります。)

 

アレンジ例で使用したコードはこちら:今なら以下の特典がついてきます。<br>【特典1】大人一人10%オフ <br>【特典2】さらにポイント10%還元 <br>【特典3】さらに施設内でのお買い物が10%オフ <br>

 

 

4. モバイル画面での表示も確認する

設定したら、必ずモバイル画面でもプレビューを確認しましょう。パソコンではきれいにレイアウトされていても、スマホで見ると見づらい場合があります。

 

 

 

5. 画像を使用して目立たせる

画像データがある場合は、画像を使用すると、お知らせがぐっと目に留まりやすくなります。

画像を挿入する

①まずは表示させたい画像を管理画面にアップロードします。管理画面の[メディア]機能でアップロードができます。メディアの使い方はこちらから確認できます。

 

②画像をアップロードしたら、アップロードした画像を選択し、右画面に表示された画像上で右クリックします。「イメージアドレスをコピー」を選択します。

 

③お知らせ機能のお知らせテキスト入力欄に、以下のコードを入れてください。※モバイル画面にも対応しています。

 

<div class="d-lg-flex"><img class="w-100" style="max-width: 305px" src="メディアのアドレス"/>  <br/></div>

 

③赤文字は、先ほど「イメージアドレスをコピー」でコピーしたアドレスに差し替えます。

 

④アイコンの目のマークをクリックするとプレビューが表示され、画像が挿入されていることが確認できます(アイコンをもう一度クリックすると元の表示に戻ります。)

 

 

画像とテキストを横並びにする

上記の画像を挿入するコードの中に、以下の青文字のコードを追加します。テキストには表示したいテキストを入力してください。

<div class="d-lg-flex"><img class="w-100" style="max-width: 305px" src="メディアのアドレス"/><br/>
<div>テキスト</div></div>

 

 

こちらのお知らせアレンジ例で使用したコードは以下です:

<div class="d-lg-flex"><img class="w-100" style="max-width: 305px" src="メディアのアドレス"/> <br><div><br><font color="#C21E58"><H3><b>会員特典キャンペーン実施中</b></H3></font> <br>
今なら以下の特典がついてきます。<br>
【特典1】大人一人10%オフ <br>
【特典2】さらにポイント10%還元 <br>
【特典3】さらに施設内でのお買い物が10%オフ <br>
<br>
<b>お得な会員登録は<a href="リンクしたいURL">こちら</a>から!!</b>
</div></div>


特集記事「予約率250%アップにつなげる”会員機能”活用のコツ」はこちら