お問い合わせ
未分類

OLTANAホームページでLINE予約を促進

この記事では、WordPressテーマ「OLTANA」を使用する皆さんが、ホームページに友だち追加ボタンやQRコードを設置し、2025年3月にリリースされた「LINEで予約」機能を活用した予約を促進する手順を解説します。美容サロンやクリニックなど、OLTANAのユーザー層に合わせた具体例を交え、初心者でも迷わず進められるよう、スクリーンショット付きで丁寧に説明します。この記事を終える頃には、ホームページからLINE予約へのスムーズな導線が完成し、集客が強化されます。

Contents

この記事の目的

  • OLTANAの「カスタマイズ」セクションに友だち追加ボタンを設置する。
  • QRコードを設置し、LINEアカウントへのアクセスを容易にする。
  • キャッチコピーを追加して予約を促進。
  • デザインをOLTANAのテーマに合わせ、ol-content-frameやol-animationを活用。
  • 推奨配置を考慮し、モバイル表示を最適化。

対象読者

  • OLTANAを購入し、公式LINEアカウントと「LINEで予約」の予約フォーム、リッチメニュー、自動応答を設定済みのユーザー
  • OLTANAの「カスタマイズ」セクションの基本操作に慣れている方。
  • 美容サロン、クリニックなどの店舗運営者で、LINE予約を強化したい方。

必要なもの

  • PC（WordPress管理画面、LINE Official Account Managerを使用）。
  • 公式LINEアカウントの友だち追加URLとQRコード。
  • OLTANAのホームページ（公開済みまたは編集中）。
  • （推奨）画像編集ツール（例: Canva、無料プランで可）。

手順1：友だち追加ボタンの設置

  1. 友だち追加URLを確認
    • LINE Official Account Managerにログイン。 
    • 左メニュー「友だち」→「友だち追加」を選択。 
    • 「友だち追加URL」セクションでURLをコピー（例: https://lin.ee/XXXXXXX）。
      ヒント: このURLは、顧客をLINEアカウントの友だち追加画面に誘導します。
  2. 「カスタマイズ」セクションにアクセス
    • WordPress管理画面（your-site.com/wp-admin）で「外観」→「カスタマイズ」を開く。 
    • 「セクションの設定」に移動し、ボタンを設置したいセクションを選択（例: トップページ下部、コンタクトセクション）。
  3. カスタムHTMLにボタンを追加
    • 「カスタムHTML」欄に以下のコードを入力: <div class="ol-content-frame ol-animation"> <h2>LINEで簡単予約！</h2> <a href="https://lin.ee/XXXXXXX" target="_blank" class="line-button">今すぐ友だち追加</a> </div>
    • https://lin.ee/XXXXXXXを実際の友だち追加URLに置き換える。 
    • ol-content-frameでコンテンツ幅を統一、ol-animationでアニメーション（例: フェードイン）を追加。
  4. カスタムCSSでデザインを調整
    • 同じセクションの「カスタムCSS」欄に以下のCSSを入力:
.line-button { display: inline-block; padding: 15px 30px; background-color: #F06292; /* No.001ピンク系 */ color: #FFFFFF; text-align: center; border-radius: 8px; text-decoration: none; font-size: 16px; transition: background-color 0.3s ease; } .line-button:hover { background-color: #D81B60; /* ホバー時の濃いピンク */ } h2 { color: #F06292; text-align: center; margin-bottom: 10px; } @media (max-width: 768px) { .line-button { padding: 10px 20px; font-size: 14px; } }
  1.  
  2. CSSはボタンのデザインをOLTANAのテーマカラー（例: No.001ピンク系）に合わせ、モバイル表示を最適化。No.003（ブルー系）の場合、背景を#1976D2、ホバーを#0D47A1に変更。
  3. 動作確認
    • ホームページをプレビューし、ボタンが正しく表示されるか確認。 
    • ボタンをクリックし、LINEの友だち追加画面に遷移するかテスト。 
    • モバイル表示でボタンが小さすぎないか（例: 幅200px以上）をチェック。

スクリーンショット例: 「カスタマイズ」セクションのカスタムHTML/CSS入力、ボタン表示、モバイル表示。

手順2：QRコードの設置

  1. QRコードを確認
    • LINE Official Account Managerの「友だち」→「友だち追加」→「QRコード」セクションで、QRコードをダウンロード（PNG形式、例: line_qr_salonname.png）。 
    • QRコードをスマートフォンで読み取り、友だち追加画面に遷移するか確認
  2. QRコードをメディアライブラリにアップロード
    • WordPress管理画面の「メディア」→「新規追加」でQRコード画像をアップロード。 
    • 「代替テキスト」に「公式LINE友だち追加QRコード」と入力（SEOとアクセシビリティ向上）。
  3. カスタムHTMLにQRコードを追加
    • 「カスタマイズ」→「セクションの設定」で、QRコードを設置したいセクション（例: コンタクトページ）を選択。 
    • 「カスタムHTML」欄に以下のコードを入力: <div class="ol-content-frame ol-animation"> <h2>QRコードでLINE予約！</h2> <p>スキャンして友だち追加♪</p> <a href="https://lin.ee/XXXXXXX" target="_blank"> <img src="your-site.com/wp-content/uploads/line_qr_salonname.png" alt="公式LINE QRコード" class="line-qr"> </a> </div>
    • https://lin.ee/XXXXXXXを友だち追加URL、your-site.com/wp-content/uploads/line_qr_salonname.pngをメディアライブラリのQRコードURLに置き換える。 
    • ol-content-frameとol-animationでデザインを統一。
  4. カスタムCSSでデザインを調整
    • 「カスタムCSS」欄に以下のCSSを追加: .line-qr { width: 200px; height: 200px; display: block; margin: 0 auto; border-radius: 8px; border: 2px solid #F06292; /* No.001ピンク系 */ } h2 { color: #F06292; text-align: center; margin-bottom: 10px; } p { text-align: center; margin-bottom: 15px; } @media (max-width: 768px) { .line-qr { width: 150px; height: 150px; } }
    • CSSはQRコードのサイズ（モバイルで150px）、枠線をテーマカラーに合わせ、キャッチコピーを中央配置。No.003（ブルー系）の場合、枠線を#1976D2に変更。
  5. 動作確認
    • ホームページをプレビューし、QRコードが正しく表示されるか確認。 
    • スマートフォンでQRコードをスキャンし、友だち追加画面に遷移するかテスト。 
    • モバイル表示でQRコードが読み取りやすいか（例: 150px以上）をチェック。

スクリーンショット例: メディアライブラリへのQRコードアップロード、カスタムHTML/CSS入力、QRコード表示。

手順3：キャッチコピーで予約を促進

  1. キャッチコピーの作成
    • 友だち追加ボタンやQRコードの近くに、顧客の行動を促すキャッチコピーを追加。
      • 例:
        • 美容サロン: 「LINEで簡単予約！初回10%OFF♪」 
        • クリニック: 「LINEで健康診断予約！24時間受付中」
    • 短く、店舗の魅力や特典を強調（30文字以内推奨）。
  2. キャッチコピーの設置
    • 上記のカスタムHTMLコードにキャッチコピーが含まれている（<h2>と<p>）。必要に応じて調整:
      • 例: <h2>今すぐLINEで予約！</h2>を「今すぐLINEで10%OFF予約！」に変更。
    • キャッチコピーのフォントや色をCSSでカスタマイズ（例: font-size: 20px、テーマカラー）。
  3. デザインの統一
    • キャッチコピーの配色をOLTANAのテーマに合わせ:
      • 例: No.001（ピンク系）なら#F06292、No.003（ブルー系）なら#1976D2。
    • テキストがボタンやQRコードと重ならないよう、CSSで余白を調整（例: margin-bottom: 15px）。

スクリーンショット例: キャッチコピー付きのボタンとQRコード、テーマカラー調整。

手順4：推奨配置とモバイル表示の最適化

  1. 推奨配置場所
    • ファーストビュー: トップページのメインビジュアル下にボタンやQRコードを設置。例: 「LINEで簡単予約！」とキャッチコピー。 
    • コンタクトページ: 問い合わせフォームの横にQRコードを配置し、LINE予約を促す。 
    • 追尾サイドバー: OLTANAの追尾サイドバーにボタンを固定（「カスタマイズ」→「サイドバー設定」）。 
    • フッター: 全ページ共通のフッターに小さめのQRコードを設置。
      例: 美容サロンならファーストビューに大きく、クリニックならコンタクトページに控えめに。
  2. OLTANAテーマ別の配置例
    • No.001（ピンク系）: ピンクの友だち追加ボタンをファーストビュー中央に、QRコードをコンタクトページに。 
    • No.003（ブルー系）: ブルーのQRコードを追尾サイドバーに、ボタンをフッターに。 
    • ol-content-frameで幅を統一、ol-animationでスムーズな表示効果を追加。
  3. モバイル表示の最適化
    • WordPress管理画面の「カスタマイズ」→「プレビュー」でモバイル表示を選択。 
    • ボタンやQRコードが小さすぎないか（例: ボタン幅200px、QRコード150px以上）を確認。 
    • CSSの@mediaルールでモバイル向け調整（上記CSSに含まれる）。 
    • キャッチコピーが画面からはみ出ないよう、フォントサイズや余白をチェック。

スクリーンショット例: ファーストビューとコンタクトページの配置例、モバイル表示確認。

手順5：動作テスト

  1. ボタンとQRコードのテスト
    • ホームページを公開またはプレビュー。 
    • 友だち追加ボタンをクリックし、LINEの友だち追加画面に遷移するか確認。 
    • QRコードをスマートフォンでスキャンし、正しく遷移するかテスト。
  2. 予約導線の確認
    • 友だち追加後、トーク画面でリッチメニュー（関連記事）が表示されるか確認。 
    • 「予約する」をタップし、「LINEで予約」フォームにアクセス可能かテスト。 
    • ダミー予約を入力（例: 「カット、5月1日14:00」）し、Googleカレンダーに反映されるか確認。
  3. デザインとユーザビリティの確認
    • ボタンとQRコードのデザインがOLTANAのテーマ（例: No.001ピンク系）に合っているか確認。 
    • モバイル表示で要素が崩れず、キャッチコピーが読みやすいか検証。 
    • ol-animationのアニメーション（例: フェードイン）がスムーズか確認。
      ヒント: 「LINEで予約」は4タップで予約完了（Post:4,7）。顧客視点でシンプルさを重視。

スクリーンショット例: ボタンとQRコードの動作テスト、リッチメニューからフォームへの導線、モバイル表示。

OLTANAユーザー向け推奨設定

  1. ブランドデザインの統一
    • ボタンとQRコードの配色をOLTANAのテーマカラーに合わせる:
      • 例: No.001（ピンク系）なら#F06292ボタン、#FCE4EC背景。 
      • 例: No.003（ブルー系）なら#1976D2枠線、#E3F2FD背景。
    • 店舗ロゴをQRコード近くに小さく配置（例: <img src="your-site.com/logo.png" alt="Logo" style="width: 50px;">）。
  2. 配置の最適化
    • 美容サロン: ファーストビューに大きくボタンを配置、キャッチコピー「初回10%OFF」で訴求。 
    • クリニック: コンタクトページにQRコードを控えめに、キャッチコピー「24時間予約受付」で信頼感を。 
    • 追尾サイドバーで常時表示し、どのページからもアクセス可能に。
  3. キャッチコピーの工夫
    • 美容サロン: フレンドリーなトーン（例: 「LINEで予約♪ 今すぐ10%OFF！」）。 
    • クリニック: 丁寧なトーン（例: 「LINEで簡単予約。健康診断はこちら」）。 
    • キャンペーンと連動（例: 「5月限定！予約でクーポン」）。

スクリーンshot例: 美容サロン/クリニック向けボタンとQRコードデザイン、キャッチコピー例。

よくある質問（FAQ)

Q1: 友だち追加ボタンとQRコード、どちらを優先すべきですか？
A: ファーストビューにはボタン、コンタクトページにはQRコードが効果的。店舗のターゲット層に応じて調整してください。

Q2: QRコードが読み取れない場合、どうすればいいですか？
A: 画像サイズを150px以上に設定し、枠線のコントラストを高めてください（例: 白背景に濃い枠）。 

Q3: 「カスタマイズ」セクションでデザインが崩れる場合は？
A: ol-content-frameクラスを確認し、CSSのmarginやpaddingを調整してください。

Q4: 複数のセクションにボタンを設置できますか？
A: はい、各セクションの「カスタムHTML」に同じコードを追加してください。デザインはセクションごとの「カスタムCSS」で調整。

Q5: キャッチコピーの効果的な書き方は？
A: 短く（30文字以内）、特典（例: 割引）や緊急性（例: 「今すぐ」）を強調。店舗の特徴を反映してください。

次のステップ

OLTANAホームページでのLINE予約促進の設定が完了しました！次は、予約システムを運用し、効果を測定・改善する方法を学びましょう。
👉 関連記事: LINE予約システムの運用と改善

Related Post

関連記事はこちら

View All
CONTACT

お問い合わせ

CONTACT
3営業日以内に返信いたします。
お問い合わせ
新商品のお知らせ（NEW）

PAGE TOP