【公式】tripla(トリプラ) - AIチャットボットとホテル・旅館公式HP向け予約システム
“お知らせ機能”は、例えば、会員特典を表示することで会員登録率をアップさせたり、クーポンコードを表示させることでお客様の顧客体験をアップさせることが期待できます。
色を付けたり画像を入れたり、お客様の目に留まりやすいお知らせ機能のアレンジ術をご紹介します。
※2022年3月更新
お知らせ機能とは
お知らせのアレンジ術
お知らせのコツと注意点
“お知らせ機能”とは
”お知らせ機能” は、お客様画面で目に留まりやすい箇所に、お客様へのご案内メッセージを表示できる機能です。
お知らせは、ブランド管理画面と施設管理画面にそれぞれ設定メニューがあり、表示させたい対象単位によって使いわけることができます。ブランド管理画面からは施設単位で、施設管理画面からはプラン単位で設定ができます。どちらの設定も表示される箇所は、検索結果ページ以外は全て同じです。
お知らせ機能のヘルプページはこちら
表示させると便利なお知らせの例
① 特典情報（公式サイト限定特典や会員特典など）
② クーポンキャンペーンのクーポンコード
③ キャンペーンなどのご案内や概要
④ 新サービスやサービス改定などのお知らせ
⑤ 改装や休館のお知らせなど
おしらせ機能の設定方法（ブランド管理画面編）
ブランド管理画面より[予約エンジン設定]→[追加質問・お知らせ設定]を選択し、[お知らせ]タブの[お知らせを設定する]をクリックすると設定画面が開きます。[タイトル][質問タイプ][表示条件]を入力し、保存します。詳細は以下の動画もしくはヘルプページよりご確認ください。ヘルプページはこちら
お知らせのアレンジ術
1. 文字をアレンジしてメリハリをつける
文字のアレンジは、文字入力欄の上部にある以下のマークダウンボタンを使用します。アレンジしたい文字をドラッグして選択し、対象のアイコンボタンをクリックします。
お知らせアレンジ例）
文字の大きさを調整する
文字の大きさは、H1, H2,H3のボタンを使用します。大きくしたい文字をドラッグして選択しボタンをクリックしすると、＃がつきます。＃の数が多いほど文字が小さくなります。H3より小さくしたいときは手入力で＃を追加できますが、最大5つまでです。アレンジしたら、アイコンの目のマークをクリックすると、実際の表示が確認でいます。(アイコンをもう一度クリックすると元の表示に戻ります。)
文字を太くする
文字の太さは、Bのボタンを使用します。太くしたい文字をドラッグして選択しボタンをクリックしすると、**が対象の文字の前後つきます。アルファベットや数字の場合 * をひとつにすると文字が斜体になります。アレンジしたら、アイコンの目のマークをクリックすると、実際の表示が確認でいます。(アイコンをもう一度クリックすると元の表示に戻ります。)
文字にリンクを付ける
文字にリンクを埋め込む場合は、リンク埋め込みボタンを使用します。埋め込みたい文字を選択しボタンをクリックすると、文字が[ ]で囲まれます。その後ろに(http://)と表示されるので、http://をリンクを飛ばしたいURLに差し替えます。アレンジしたら、アイコンの目のマークをクリックすると、実際の表示が確認でいます。(アイコンをもう一度クリックすると元の表示に戻ります。)
文字に色を付ける
文字の色付けはマークダウンボタンからできません。直接コードを記述します。文字色を付けたい文字を以下のコードで囲みます。
<span style="color:#カラーコード
#カラーコードに使いたい色のカラーコードを入れます。例えばトリプラのロゴのピンクのカラーコードはC21E58なので、<span style="color:#C21E58;">色を付けたい文字</span>になります。
カラーコードはこちらのサイトで確認できます。
改行する
改行は改行したい位置に半角スペースを2つ入れます。※改行はお客様が見ているディバイスのスクリーンの幅に合わせて、改行を指定していない箇所でも改行されることがあります。指定している改行位置は固定です。
2. 画像を挿入して目立たせる
画像データがある場合は、画像を使用すると、お知らせがぐっと目に留まりやすくなります。
画像を挿入する
①まずは表示させたい画像を管理画面にアップロードします。管理画面の[メディア]機能でアップロードができます。メディア機能の使い方はこちらから確認できます。
②画像をアップロードしたら、アップロードした画像をクリックで選択し、右画面に表示された画像の上で右クリックします。「画像アドレスをコピー」をクリックします。
③お知らせ機能の文字入力欄に、以下のコードをコピペで入力します。※モバイル画面にも対応しています。
<div class="d-lg-flex"><img class="w-100" style="max-width: 305px" src="メディアのアドレス"/><br/></div>
③赤文字メディアのアドレスに、②で「画像アドレスをコピー」でコピーした画像アドレスに差し替えます。
④アイコンの目のマークをクリックするとプレビューが表示され、画像が挿入されていることが確認できます（アイコンをもう一度クリックすると元の表示に戻ります。）
画像とテキストを横並びにする
以下のアレンジ例のように画像の横にテキストを表示させる方法です。
【注意】横並びにするテキストのアレンジはマークダウンボタンではできません。別途CSSコードが必要です。方法についてはインターネットやweb制作会社様などでご確認ください。(※恐れ入りますが、CSSコードについてはトリプラではご回答しかねます。) 画像の下にテキストを入れる場合はマークダウンが機能します。
①上記の「画像を挿入する」の方法で、以下のコードで画像を挿入します。
画像挿入のコード<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>テキスト</div></div>
↑ のアレンジ例で使用しているコードは以下です：
<div class="d-lg-flex"><img class="w-100" style="max-width: 305px"src="https://cdn0.tripla.ai/assets/sampleimage.jpg"/> <br><div><br><font color="#C21E58"><H3><b>会員特典キャンペーン実施中</b></H3></font> <br>
今なら以下の特典がついてきます。<br>
【特典１】大人一人10％オフ <br>
【特典２】さらにポイント10％還元 <br>
【特典３】さらに施設内でのお買い物が10％オフ <br>
<br>
<b>お得な会員登録は<a href=”リンクしたいURL“>こちら</a>から！！</b>
</div></div>
お知らせのコツと注意点
1. 文字数は少なく、アピールポイントを簡潔にまとめる
文字数が多いと、読み飛ばされてしまう可能性が高いです。文字数はできるだけ最小限にし、アピールポイントを簡潔にまとめましょう。特にスマートフォンの場合、文字数が多いとスクロールが増えてしまい、一番大事な検索結果まで何度もスクロールが必要になり、機会損失にもなりかねません。
2. 改行を入れる
キャンペーン特典や会員特典などは、改行を使ってできるだけ細かく分けると、お得感がボリュームアップします。
3. モバイル画面での表示も確認する
設定したら、必ずモバイル画面でもプレビューを確認しましょう。パソコンではきれいにレイアウトされていても、スマホで見ると見づらい場合があります。