WixとLINEの連携｜友だち追加ボタンの選び方と置き場所

LINE公式アカウントを作った。
友だち追加のQRコードを保存して、Wixのページに貼った。

パソコンのプレビューでは、くっきり見える。
「ご相談はLINEで」の文字も添えた。

でも、しばらくたっても、友だちの数は家族と常連さんの分から増えていない。

お客さんのスマホで、そのQRコードはどうやって読むんでしょう？

この記事は、Wixでお店や教室のホームページを運営していて、LINEで予約や相談を受けたい方に向けて書きました。

WixとLINEの連携のしかたを4つ並べて比べ、友だち追加ボタンの置き場所と、迷ったときの決め方までまとめていますので、ぜひ最後までご覧ください！

WixとLINEの連携は、4つのつなぎ方から選ぶ

WixのページからLINE公式アカウントへつなぐ方法は、大きく4つ。
違いが出るのは、スマホのお客さんが押したときに何が起きるか。

つなぎ方	スマホで押すと	手間	向いている場面
① QRコードの画像だけを貼る	何も起きない	少ない	パソコンで見る人向けに、ボタンの横へ添える
② Wixの「ソーシャル」のLINEボタン	見ているページを、LINEで誰かに送る画面	少ない	ページを広めてほしいとき（友だち追加ではない）
③ 友だち追加のURLを、Wixのボタンに付ける	友だち追加の画面	少ない	文字や色をサイトに合わせたいとき
④ LINEの「友だち追加ボタン」を埋め込む	友だち追加の画面	少し多い	LINEの緑のボタンの形で見せたいとき

友だちを増やしたいなら、使うのは③か④。
①と②は、それだけだとスマホのお客さんが友だちになれないんです。

ここから先は、①と②でつまずく理由を順番に。

Wixの「ソーシャル」のLINEボタンは、友だち追加ではない

Wixのエディタには、LINEのボタンがはじめから用意されています。
「パーツを追加」→「ソーシャル」→「LINE」と進むと出てくるボタン。

名前だけ見ると、LINE公式アカウントにつながりそう。

でもWixの公式ヘルプによると、これは「LINE ソーシャルシェアボタン」。
押すと、そのボタンを置いたページを、LINEで誰かに送る画面が開く形。

つまり、お店と友だちになるボタンではなく、ページを紹介してもらうボタン。

「LINEのボタンを置いたのに、友だちが増えない」というとき、ここで止まっていること、結構あります。

自分のサイトのLINEのアイコンがどちらなのかは、スマホで1回押せば分かりますね。

QRコードの画像だけでは、スマホのお客さんは読めない

もう1つのつまずきが、①のQRコードの画像だけを貼る形。

ぼくはここ最近68件、お店や教室のホームページをスマホで開いて、予約や問い合わせのボタンを実際に押して記録してきました。

そのうち、LINEの入口で止まっていたのは4件。
いちばん分かりやすかったのが、次のサイト。

ある整体院のホームページ

トップとお問い合わせのページに、予約はLINEか電話で、という案内がありました。
その下にあるのは、「LINE」と添えられたQRコードの画像だけ。

スマホの幅で、その画像を押してみたんです。

押す前と押した後で、開いているページは同じまま。
新しいタブも開きません。

画像にリンクが付いていなかったんです。
サイトの中を探しても、LINEの友だち追加へ進むリンクは1つもありませんでした。

QRコードは、スマホのカメラで読むもの。
そのQRコードを、お客さんが今見ているスマホの画面に出している形です。

スクリーンショットを撮って、LINEのアプリでその画像を読み込めば、友だちにはなれる。
でも、予約しようか考えている途中で、そこまでしてくれる人は多くないんですよね。

このサイトはWixではなく、別のホームページ作成サービスで作られていました。

ただ、画像を貼るだけで終わる作りは、Wixでもまったく同じ。
画像を置いただけでは、どこにもリンクは付きません。

友だち追加URLをWixのボタンに付ける手順

迷ったら③。
手間が少なく、ボタンの文字と色をサイトに合わせられるからです。

まず、LINE公式アカウントの管理画面で、友だち追加のURLを用意します。

1. パソコンでLINE公式アカウントの管理画面を開く
2. 「友だち追加ガイド」を開く
3. 友だち追加のURLをコピーする

友だち追加ガイドでは、URLのほかに、QRコードと友だち追加ボタン（④で使うもの）も作れます。

次に、Wixのボタンにそのリンクを付ける流れ。

1. Wixのエディタで「パーツを追加」→「ボタン」から、ボタンを1つ置く
2. ボタンの文字を「LINEで相談する」「LINEで予約する」など、押した後に起きることが分かる言葉にする
3. リンクの設定を開き、行き先を「ウェブアドレス（URL）」にして、コピーしたURLを貼る
4. 保存して公開する

QRコードの画像を残したいときは、その画像にも同じURLのリンクを付けておくと安心。
スマホの人は押して、パソコンの人は読み取る、どちらでも進めます。

④の友だち追加ボタンを使う場合は、友だち追加ガイドでボタンのコードをコピーして、Wixの「埋め込みコード」のパーツ（HTMLの埋め込み）に貼る形。
ボタンの見た目はLINEが用意した形のままで、大きさや色はほとんど変えられません。

画面の名前は、WixもLINEも変わることがあります。
見当たらないときは、近い名前のメニューを探してみてくださいね。

ホームページのLINE追加ボタンは、読み終えたところに置く

正しくつながったボタンでも、置き場所しだいで押されません。
置き場所の目安は、次の3か所。

• 最初の画面：スマホで開いてすぐ、スクロールしなくても見える位置
• 料金・メニューの下：「この内容なら聞いてみよう」と思った直後
• ページのいちばん下：最後まで読んだ人が、次に何をするか探す位置

お客さんがLINEを押すのは、読み終えて「聞いてみよう」と決めた瞬間。
その瞬間に、指の近くにボタンがあるかどうか。

フッターの小さなLINEのアイコンだけだと、その瞬間に見つけてもらえないことがあるんです。

ボタンを3か所に置いたら、3つともスマホで押しておきます。
別の整体サロンのサイトでは、同じ「LINEで相談する」が3つあって、いちばん下の1つだけがページの見つからない画面に進んでいました。
コピーしたURLの末尾が、二重になっていたんです。

InstagramをWixにつなぐ方法は、「【WixにInstagramを埋め込む方法】表示されない時の注意点と設置後の見方」で書きました。
SNSをつなぐときも、スマホで押した先を見るところは同じです。

迷ったら、2つの質問で決める

どのつなぎ方にするか決めきれないときは、上から順に答えてみてください。

1. お客さんの多くは、スマホから来る？

はい → QRコードの画像だけにしない。③か④のボタンを置いて、QRコードは添えるだけ。

1. ボタンの文字や色を、サイトに合わせたい？

はい → ③の「友だち追加のURLをWixのボタンに付ける」。
いいえ、LINEの緑のボタンで見せたい → ④の「友だち追加ボタンを埋め込む」。

Wixの「ソーシャル」のLINEボタンは、ページを広めてほしいときに、友だち追加のボタンとは別に置く。
この順番で決めておくと、LINEで相談したい人が、友だち追加の画面まで迷わず進みやすくなる。

Wixで予約・問い合わせを受けるサイト全体の作り方は、「Wixで予約・問い合わせを受けるホームページの作り方」にまとめています。

LINEのほかにも、予約の手前で止まりやすい場所をまとめて確かめたい方は、無料のチェックリストを使ってみてください。