OLTANAのホームページにLINE友だち追加ボタン・QRコードを設置する方法
この記事では、WordPressテーマ「OLTANA」のユーザー向けに、ホームページに公式LINEの友だち追加ボタンを設置する方法を解説します。
「ホームページとLINEを連携して、予約までの流れをスムーズにしたい」という方にぴったりの内容です。
美容サロンやクリニックなど、OLTANAユーザー層に合わせた具体例を交え、初心者でも迷わず進められるよう、スクリーンショット付きで紹介します。
記事を読み終える頃には、ホームページのデザインに馴染む、LINE友だち追加ボタンをスムーズに設置できるようになります。
準備するもの
- PC（WordPress管理画面、LINE Official Account Manager を使用）
- スマートフォン（動作確認用）
- Canva（バナー画像作成用）
- LINE公式アカウント
- OLTANAのホームページ
手順1：LINE公式アカウントの友だち追加URLを取得する
まずはLINE Official Account Manager にログインします。
「ホーム」→「友だちを増やす」→「友だち追加ガイド」をクリックします。
「オンラインで宣伝する」エリアにある「URLを作成」をクリックします。
画面に表示された「コピー」ボタンをクリックして、URLをコピーします。
このURLが、ホームページに設置する「友だち追加ボタン」のリンク先になります。
手順2：OLTANAのホームページにボタンを設置する
取得したLINEの友だち追加URLを、OLTANAのホームページ上にボタンとして設置していきます。
主な設置場所は以下の3つです。
それぞれの編集方法を順番に解説していきます。
①お問い合わせボタンを編集する
まずは、WordPressの管理画面から「外観」→「カスタマイズ」を開きます。
次に、左メニューから「電話番号／お問い合わせボタン」を選択します。
下記の項目を編集していきましょう。
- ボタンのテキスト：例「LINE予約」「LINEで予約する」
- アイコン（任意）：LINEアイコンを設定すると視認性がアップする
- リンク先URL：手順1（LINE公式）で作成した友だち追加URLを入力する
- 別タブで開く：ページを離れずにLINEを開けるため、「オン」を推奨
ボタンの設定が完了したら、「表示設定」でボタンの表示位置を調整します。
- ヘッダーに表示（PC専用）
- 営業時間エリアに表示
- お問い合わせセクションに表示
必要に応じて表示箇所を選びましょう。
②スマホフッターボタンを編集する
↑スマホフッターボタン
スマートフォンで閲覧した際に、画面下部に表示される「スマホフッターボタン」に、LINEの友だち追加リンクを設定することも可能です。
スマホユーザーにとって、目に入りやすく、行動に促しやすい導線になります。
設定するには、WordPressの管理画面から「外観」→「カスタマイズ」を開きます。
メニューから「スマホフッターボタン」を選択します。
PC画面では、「スマホフッターボタン」が表示されないため、画面左下のスマホアイコンをクリックして、スマホ画面に切り替えます。
画面を下にスクロールしていくと、「スマホフッターボタン」が表示されます。
「ボタン【左】の設定」を以下のように編集していきます。
- ボタンテキスト：例「LINE予約」
- サブテキスト：例「24時間オンライン受付」（任意）
- アイコン：LINEアイコンを設定（任意）
- リンク先URL：手順1（LINE公式）で作成した友だち追加URLを入力する
- 別タブで開く：ページを離れずにLINEを開けるため、「オン」を推奨します
③SNSアカウントを編集する
「OLTANA」では、SNSアカウントの一つとして、LINEの友だち追加リンクを設定できます。
InstagramやX（旧Twitter）などと並べて表示できるため、SNS一覧の中に自然にLINEへの導線も組み込めるのがメリットです。
以下の手順で設定していきましょう。
まずは、WordPressの管理画面から「外観」→「カスタマイズ」を開きます。
メニューから「SNSアカウント」を選択します。
「LINEアカウントのURL」の項目に、手順1（LINE公式）で作成したURLを入力します。
入力が完了すると、画像右下のようにLINEのアイコンが表示されます。
LINEのアイコンをクリックすると、友だち追加ページに遷移します。
手順3：記事（コラム）内にLINE追加ボタンを設置する
ここでは、OLTANAの「ボタン」ブロックを使って、ブログ記事やお知らせページなどにLINE友だち追加ボタンを設置する方法を紹介します。
「ホームページをすべて見た後に、そのままLINEに誘導したい」「記事を読んだタイミングで予約につなげたい」といった場面で便利です。
以下の手順で、ボタンを設置していきましょう。
まずは、ボタンを設置したい投稿画面で「/ボタン」と入力、または「+」→「ボタン」ブロックを選択します。
ボタンのテキストを入力します。（例：LINEで予約、LINE友だち追加はこちら）
次にボタンブロックを選択して、画面右側の設定から、以下の内容を調整します。
- デザイン選択：ボタンデザインを選択する
- URL設定：手順1（LINE公式）で作成した友だち追加URLを入力する
- 別タブで開く：ページを離れずにLINEが開けるため、「ON」を推奨
- マイクロコピー：ボタン上部に補足説明を表示する
これだけで、投稿内に公式LINEへ誘導するボタンが完成します。
補足：LINE追加用QRコードをトップページや記事内に掲載する方法
ここでは、トップページや記事内にQRコードを掲載する方法を紹介します。
QRコードを掲載すると、PCで見ているユーザーもスマホで簡単に読み取れるため、友だち追加ページへのアクセスがスムーズになります。
①QRコードを取得する方法
まずはQRコードを取得する方法から解説します。
LINE Official Account Manager ダッシュボード「ホーム」→「友だちを増やす」→「友だち追加ガイド」の順にクリックします。
「友だち追加QRコードを作成」をクリックします。
以下のいずれかの方法でQRコードを取得します。
- 画像をダウンロード
- HTMLコードをコピー
②トップページにQRコードを掲載する
ここからは①で取得したQRコードを実際にホームページに掲載していきます。
トップページにQRコードを掲載する方法はいくつかありますが、ここでは以下の2パターンで掲載する方法を紹介します。
- 営業時間エリアに掲載する方法
- バナーとして掲載する方法
それぞれ順番に見ていきましょう。
営業時間エリアに掲載する方法
WordPressの管理画面から「外観」→「カスタマイズ」を開きます。
次に、左メニューから「電話番号／お問い合わせボタン」を選択します。
「ボタンのテキスト」欄に、①で取得したHTMLコードを貼り付けると、QRコードが掲載されます。
「リンク先URL」は手順1で取得したLINE友だち追加のURLを入力します。
こうすることで、スマホでQRコードをタップした際にも反応し、LINE追加ページに遷移します。
バナーとして掲載する方法
バナーとして掲載する場合は、Canvaなどのツールを使ってダウンロードしたQRコード画像を使い、オリジナルのバナーを作成します。
💡 バナーの推奨サイズ：801×336
例えば、今回は以下のようなバナーを作成してみました。
作成したバナーをトップページに掲載するには、以下の手順で設定します。
WordPressの管理画面から「外観」→「カスタマイズ」を開きます。
次に、左メニューから「LINK（バナー）」を選択します。
作成したバナー画像をアップロードし、リンク先を設定します。
「公開」をクリックして保存すれば、設定完了です。
③記事内にQRコードを掲載する
記事内にQRコードを掲載する方法は2つです。
- カスタムHTMLを使う方法
- 画像として掲載する方法
それぞれ見ていきましょう。
カスタムHTMLを使う方法
WordPressの投稿画面で「/カスタム HTML」と入力、または「+」→「カスタムHTML」を選択します。
①で取得したHTMLコードをブロック内に貼り付けます。
「プレビュー」をクリックすると、表示を確認できます。
画像として掲載する方法
WordPressの投稿画面で「/画像」と入力、または「+」→「画像」を選択します。
「アップロード」をクリックし、ダウンロードしたQRコードの画像を挿入すれば、掲載が完了です。
手順4：スマホ対応（レスポンシブ）の確認する
スマホ画面の表示崩れやリンクの不具合は、PCの編集画面だけでは気づきにくいことがあります。
LINE友だち追加ボタンを設置したら、スマートフォンでの表示・動作確認も忘れずに行いましょう。
①トップページの確認方法
「カスタマイズ」画面の左下にあるスマホアイコンをクリックすると、スマホ表示でトップページを確認できます。
ホームページ全体のレイアウトやボタンの位置をチェックするのに便利です。
②投稿ページ（ブログ記事など）の確認方法
投稿ページでスマホ表示を確認するには、以下の2つの方法がおすすめです。
デベロッパーツールを使って確認する方法
デベロッパーツールの使い方は、以下の通りです。
投稿の編集画面、右上にある「PCのアイコン」→「新しいタブでプレビュー」をクリックします。
新しいタブで記事が表示されたら、「右クリック」→「検証」をクリックします。
画像上部の赤枠をクリックすると、スマホの機種を切り替えられます。
スマホで実際に確認する方法
最も確実なのは、スマートフォンで直接表示を確認することです。
スマホで確認すると、ボタンをタップした直後にLINEアプリへ遷移するため、連携動作のチェックもしやすいのが利点です。
③チェックするポイント
スマホで表示・動作確認を行う際は、以下の点をチェックしましょう。
- ボタンの文言が読みやすいか（長すぎて改行されていないか）
- タップ時に正しくLINEアプリが起動するか
- 「別タブで開く」設定が反映されているか
- 複数箇所に設置している場合、どのボタンも正常に動作しているか
- デザインや色味がサイト全体と違和感なく馴染んでいるか
すべての項目が正常に表示・動作していれば、ボタンの設置は完了です。
よくある質問（FAQ）
Q1：OLTANAのトップページにボタンを2個設置する方法はありますか？
標準機能では、トップページに設置できるLINE友だち追加ボタンは1つのみです。
2つ以上設置したい場合は、カスタムHTMLやバナー画像などを使って手動で追加する必要があります。
Q2：OLTANAの編集画面で「PCだけ表示」はできますか？
基本的に「PCのみ表示」の指定はできません。
とくにQRコードを設置する際は、スマホ表示で邪魔にならない位置（サイドバーや記事下など）に設置するのがおすすめです。
Q3：LINEのURLを貼ったのにうまく開けないのはなぜですか？
LINEの友だち追加URLを設置してもうまく動作しない場合、以下の原因が考えられます。
- URLが途中で切れている、または全体が正しくコピーされていない
- LINE公式で発行した「https://lin.ee/〜」ではなく、別の形式になっている
- URL入力欄に不要なスペースや改行が含まれている
まずはLINE Official Account Manager で正しいURLを再確認し、貼り直してみてください。
Q4：LINE友だち追加ボタンをクリックしてもLINEアプリが起動しません。
スマートフォンでボタンをタップしてもLINEが開かない場合、以下の点を確認してください。
- LINEアプリがスマートフォンにインストールされていない
- 使用ブラウザ（SafariやChromeなど）によっては、動作が異なることがある
- PCで確認している場合はLINEアプリが起動しない
LINEとの連携を確認するには、スマートフォンでの動作チェックが最も確実です。
Q5：LINEからホームページに移動する導線も必要ですか？
できれば設置しておくのがおすすめです。
リッチメニューや自動応答メッセージで「ホームページはこちら」などのリンクを設けると、LINEとホームページを相互に行き来しやすくなります。
まとめ
これで公式LINEアカウントとOLTANAを使ったホームページの連携が完了し、LINE予約への導線が完成しました。
LINEとホームページ、それぞれの強みを活かして「集客→予約→来店」の流れをつくっていきましょう。
LINE公式アカウントの設定については以下の記事を参考にしてください。
▼ 関連記事
- 公式LINEアカウントの開設と「LINE予約」の初期設定ガイド
- 予約枠の設定とリッチメニュー・自動応答でLINE予約をスムーズにする方法
- クーポン・配信メッセージ・ショップカードでリピーターを増やす公式LINE活用ガイド
⚠️ OLTANAの設定で不明点が出た場合は、以下からご連絡ください。
⚠️ その他、設定の途中で不明点が出た場合は、以下の公式サポートもあわせてご活用ください。
- LINE公式アカウントに関するお問い合わせ
LINEヤフー for Business
参考：LINEアカウントに関する問い合わせ方法 - WordPressに関するお問い合わせ
WordPressお問い合わせ - Canvaに関するお問い合わせ
Canvaヘルプページ
