ノーコードサイトにLINE公式アカウントの友だち追加ボタンを置く方法——リンクの取得から設置まで
店舗やサービスのホームページを見た人に、LINE公式アカウントの友だちになってもらいたい——ノーコードで作ったサイトでも、よくある目的です。ただ、LINE側のどこからリンクやボタンを取り出し、サイトのどこに貼ればよいのか、迷いやすい作業でもあります。
この記事では、LINE公式アカウントをすでに開設している前提で、LINE側でのURL・ボタン・QRコードの取得手順と、ノーコードサイト（Studioを例にします）への設置のしかた、確認のポイントを整理します。
友だち追加につなげる3つの方法
LINE公式アカウントには、友だち追加につなげるための素材が3種類あります。サイトの作りや見せ方に合わせて選びます。
| 方法 | できあがるもの | 向いている場面 |
|---|---|---|
| URL（リンク） | 友だち追加の画面へ移るリンク | ボタンや文章にリンクとして貼る。ノーコードサービスの多くで使える |
| ボタン（HTMLコード） | LINEが用意したデザインのボタン | HTMLを貼れる場所がサイトにある場合 |
| QRコード | QRコードの画像 | パソコンで見ている人がスマホで読み取る場面や、店頭・チラシ |
LINE側の準備——URL・ボタン・QRコードを取得する
LINE公式アカウントの管理画面（LINE Official Account Manager）にある「友だち追加ガイド」から、3つとも作れます。LINEヤフー for Businessの公式マニュアルで案内されている流れは次のとおりです。
- LINE Official Account Managerにログインする
- 「ホーム」から「友だち追加ガイド」を開く
- URLが必要なら、「URLを作成」を選んで「コピー」する
- ボタンが必要なら、「ボタンを作成」でデザインを選び、「HTMLを表示」から「コピー」する
- QRコードが必要なら、「友だち追加QRコードを作成」を選んで「ダウンロード」する
なお、LINE IDから自分でURLを組み立てる方法もあります。LINE Developersの公式ドキュメントでは、「https://line.me/R/ti/p/」のあとに、LINE IDを「パーセントエンコード」した文字を続ける形式が案内されています（IDの先頭の「@」は「%40」に置き換わります）。ただし、書き間違えやすいので、通常は管理画面で作成したURLをそのまま使うのが確実です。
ノーコードサイトへの設置（Studioの例）
最も手軽で、多くのノーコードサービスで使えるのが、「ボタンを自分で作り、LINEのURLをリンクとして設定する」方法です。Studioの場合の流れは次のとおりです。
- ボタンにしたいボックスを作り、中にテキストを入れる（例：「LINEで友だち追加」）
- そのボックスを選び、右側のパネルの「設定」タブを開く
- 「リンク」の欄（「ページまたは外部URL」と表示されている）に、LINEで作成したURLを貼る
- プレビューで、押したときに友だち追加の画面が開くことを確かめる
- サイトを更新（公開）する
Studioの公式ヘルプ（旧エディタ向けの記事）では、Studioに友だち追加ボタンそのものを埋め込むことはできないため、ボタンを作ってリンクを設定する方法が案内されています。LINEが生成したHTMLのボタンを、HTMLを貼れる場所（Embedボックスなど）で使えるかどうかは、サービスや設定によって異なる可能性があります。使う場合は、必ずプレビューで動作を確かめてください。
リンクの設定の種類はStudioのリンク設定の基本——目的地に応じた開き方の使い分けにまとめています。
設置するときの考え方
- スマホで見る人が多いため、指で押しやすい大きさにする（目安は44px前後。根拠はStudioのヘッダーナビを崩れにくくする設計にまとめています）
- 「LINEで友だち追加」のように、押すと何が起きるかが分かる文言にする
- ファーストビュー（最初に見える範囲）か、問い合わせ・予約の近くなど、連絡をしたくなる場所に置く
- ボタンの色や形は、サイトの他のボタンと揃えると、押せる場所だと伝わりやすい
よくある質問
| 質問 | 答え |
|---|---|
| ボタンを押しても、LINEが開きません。 | 貼ったURLが「https://」から始まる完全な形か、コピーしたときに余計な文字や改行が入っていないかを確認する。そのうえで、サイトを更新（公開）したかも確かめる。 |
| パソコンで押すと、どうなりますか？ | LINE側の公式な資料では、パソコンとスマホでの動作の違いは確認できなかった。サイトを公開したら、パソコンとスマホの両方で、実際に押して確かめる。 |
| LINE公式アカウントを、まだ持っていません。 | 友だち追加のURLやボタンは、アカウントを開設してから作れる。先にアカウントを開設する。 |
| LINEのボタンの見た目を使いたいです。 | 「ボタンを作成」で、LINEが用意したデザインから選べる。HTMLを貼れない場合は、自分で作ったボタンに近い色や文言を使う。 |
まとめ
友だち追加は、「LINEの友だち追加ガイドでURLを作る」→「サイトのボタンにリンクとして貼る」→「パソコンとスマホで押して確かめる」の3つで進められます。まずはURLを使う方法から始めるのが、いちばん確実です。
連絡手段を増やすときは、問い合わせフォームも合わせて見直すと、取りこぼしが減ります。設置前の確認はノーコードサイトに問い合わせフォームを設置するときに確認しておきたいことにまとめています。
生成AIで作ったHTML/CSSを、Studioへ。
SHITAJIは、HTML/CSSのサイトをStudioのネイティブ要素として取り込む変換ツールです。 フリープランは月3ページまで無料・カード登録不要で試せます。
次に読む
2026-09-27ノーコードサイトに「保護されていない通信」と表示される原因——独自ドメインをつないだ後に確認すること2026-09-27ノーコードサイトの問い合わせフォームに営業・スパム送信が来るときの対策※ SHITAJIはStudio株式会社とは関係のない独立したサービスです。「Studio」はStudio株式会社の商標です。 本記事は公開されている情報と一般的な制作の知見にもとづいて執筆しています。