SWELLでヘッダーに電話番号リンクを設置する5つの手順

電話で問い合わせしてほしいのに、Swellのヘッダーに電話番号リンクをどう入れればいいか分からない…という相談をよく受けます。

結論から言うと、Swellの標準機能だけでクリックやタップでそのまま電話がかけられるヘッダーを、コードなしでじゅうぶん作れます。

読み終わるころには、店舗サイトやサロンサイトで迷いやすいヘッダーの電話まわりを、自信を持って整えられるようになります。

Swellヘッダーに電話番号リンクを置くメリットと基本イメージ

Swellヘッダーに電話番号を出すと何が変わる？

私が店舗系のサイトをSwellで作るとき、お客様からかなりの確率で言われるのが「ヘッダー右上に電話番号を入れてほしい」です。

それだけ、ヘッダーの電話はビジネスに直結しやすい導線ということですね。

ヘッダーに電話番号があるかどうかで、訪問者の行動はこんなふうに変わります。

訪問者の状態	ヘッダーに電話番号がある場合	ヘッダーに電話番号がない場合
今すぐ予約したい人	ワンタップで電話できるので、その場で電話しやすい	電話番号を探す手間が増え、そのまま離脱しやすい
少しだけ相談したい人	「相談歓迎」と添えておけば心理的ハードルが下がる	フォームを探すのが面倒で相談自体を諦めることもある
信頼できるか不安な人	実在の店舗・会社だと伝わり、安心感が上がる	連絡先が見つかりにくく、不安のまま戻るボタンを押される

特に、サロンやクリニック、工務店、士業など、予約や相談が重要なビジネスではヘッダーの電話番号リンクがあるかどうかで問い合わせ数が変わると感じています。

Swellのヘッダーはカスタマイズ性が高いので、「電話だけ」「電話と問い合わせ」「電話とLINE」といったように、業種やスタイルに合わせて柔軟に作り込めるのも強みです。

Swellで作る電話番号リンクのレイアウトパターン3つ

Swellでヘッダーに電話番号リンクを出すとき、よく使われるレイアウトパターンは大きく3つあります。

パターン	ヘッダーの見え方	向いているサイト
① 電話ボタンのみ	右上に「電話する」などのボタンが1つ	小規模サロンや個人事業主のサイト
② 電話＋問い合わせボタン	「電話」「問い合わせ」など2つのボタンが横並び	工務店、士業、BtoBサイトなど
③ 電話＋LINE・予約システム	電話＋LINE＋予約フォームなど3つ前後の導線	予約経路を増やしたい店舗・クリニックなど

私のおすすめは、まずはシンプルに①の電話ボタンだけ設置してみて、慣れてきたら②や③に広げていくやり方です。

最初からボタンを盛り込みすぎると、特にスマホでは窮屈に見えてしまい、かえって押されにくくなることがあるからです。

ここからは、PCヘッダーとスマホヘッダーに分けて具体的な作り方を見ていきます。

Swellで電話番号リンクを作るときの基本ルールと考え方

telリンクの書き方と注意点

電話番号リンクは、URLの頭に「tel:」と付けた特別なリンクを使います。

これはSwellに限らず、WordPress全体で共通のルールです。

項目	内容
基本形	tel:0123456789 のように、電話番号の前に「tel:」を付ける
ハイフン	入れても動くブラウザが多いが、確実さを優先するなら数字のみが無難
表示テキスト	「012-345-6789」「電話する」など、好きな文言でOK
PCでの動作	通話アプリが入っていれば起動し、入っていないと何も起きないこともある

WordPressの編集画面でリンクを設定するとき、「URL」の欄に tel:0123456789 のように入力すれば、それが電話番号リンクになります。

画面上に見える文字は、電話番号そのものでもいいですし、「予約の電話はこちら」のようなフレーズでも構いません。

大事なのは、ぱっと見で「ここを押すと電話がかかる」と想像できるかどうかです。

PCとスマホでの動きの違いを知っておく

同じ電話番号リンクでも、PCとスマホでは挙動が少し違います。

• スマホ：タップすると電話アプリが立ち上がり、そのまま発信できる
• PC：通話アプリが設定されていれば起動するが、環境によっては何も起きない

「PCでクリックしたのに何も反応しません」という相談を受けることがありますが、多くの場合はブラウザやOS側の設定によるもので、サイト側だけで完全にコントロールすることはできません。

そのため、私はヘッダーの近くに小さく「スマホからタップで電話できます」と添えておくことがあります。

こうしておくと、PCユーザーにも意図が伝わりやすくなり、誤解が減ります。

手順① PC向けにSwellヘッダーへ電話番号を設置する

ブログパーツで電話番号ボタンを作る

私がよく使っているのが、まず「ブログパーツ」で電話ボタンを1つ作っておく方法です。

一度作ればヘッダー以外の場所にも再利用できますし、あとから電話番号を変えるときも、ブログパーツ側だけ直せば済むので管理が楽になります。

ブログパーツで設定しておく内容はこんなイメージです。

項目	例
ブロック	ボタンブロック（またはSwellのカスタムボタンブロック）
リンクURL	tel:0123456789
ボタンの文言	「電話する」「予約の電話はこちら」など
アイコン	受話器マークなどの電話アイコンを付けると分かりやすい
色	サイトのアクセントカラーや、背景としっかりコントラストの付く色

具体的な作業の流れは次のようになります。

• 管理画面から「ブログパーツ」を新規追加する
• 本文部分にボタンブロックを追加する
• リンク先に tel:電話番号 を設定する
• ボタンの文言やアイコン、色を整えて公開する

ここまでできれば、あとはこのブログパーツをヘッダー側から呼び出すだけです。

ヘッダー内部ウィジェットに設置する手順

PC表示のSwellヘッダーに電話ボタンを出すには、「ヘッダー内部」というウィジェットエリアを使う方法が分かりやすいです。

大まかな流れを整理すると、次のようになります。

• 「外観」→「ウィジェット」を開く
• 「ヘッダー内部」のエリアを見つける
• 「ショートコード」や「カスタムHTML」ウィジェットを追加する
• 先ほどのブログパーツのショートコードを貼り付ける
• カスタマイザーでヘッダーのレイアウトや余白を微調整する

Swellにはヘッダーのレイアウトパターンが複数あるので、電話ボタンが右上に来やすいパターンを選んでおくと、より「らしい」見た目になります。

ロゴとの距離やグローバルメニューとのバランスなどは、実際に表示を確認しながら少しずつ整えるイメージでOKです。

色・サイズ・アイコンで「押したくなるボタン」にするコツ

同じ位置に電話ボタンを置いていても、デザイン次第でクリック率はけっこう変わります。

私がチェックしているポイントは次のとおりです。

• ロゴやメニューと色が被らないよう、アクセントカラーを使う
• 文字サイズを周りのテキストより少しだけ大きくして目線を集める
• 電話のアイコンを付けて「これは電話ボタンだ」と一瞬で分かるようにする
• 「電話する」より「予約・相談の電話」など、行動がより具体的に伝わる文言にする

ヘッダーはサイトの中でも目立つ場所なので、少し目立つくらいのボタンで大丈夫です。

ただ、あまりに主張が強すぎるとコンテンツの邪魔になるので、「しっかり目立つけれど、うるさくはない」というバランスを意識して調整してみてください。

手順② スマホヘッダーにSwellの電話番号リンクを出す

スマホヘッダーのカスタムボタン設定

Swellには、スマホ用ヘッダーに専用のボタンを表示できる機能があります。

そのカスタムボタンに電話番号リンクを設定すると、画面上部に電話アイコン付きの分かりやすいボタンを出せます。

項目	設定例
ボタン種別	カスタムボタン
アイコン	電話のアイコン
ラベル	「電話する」「予約電話」など短めの文言
リンク先	tel:0123456789
表示位置	ヘッダー右上など、メニューアイコンの近く

私は、PCとスマホで同じブログパーツを使いつつ、スマホ側はこのカスタムボタン機能を使って、よりコンパクトな「電話アイコン＋短いテキスト」にまとめることが多いです。

スマホの画面は狭いので、PCと同じ長めのテキストを入れてしまうと、ボタンが窮屈になり押しにくくなるからです。

下部固定メニューとの組み合わせ例

Swellには、画面下部に固定のメニューを表示できる機能も用意されています。

ここに電話番号リンクを入れておくと、どのページにいてもワンタップで電話できるようになり、特にスマホユーザーにはとても好評です。

よく使う組み合わせの例を挙げてみます。

• 左：ホームアイコン（トップページ）／中央：問い合わせフォーム／右：電話アイコン
• 左：電話アイコン／中央：LINEやチャット／右：予約フォーム

「ユーザーにしてほしい行動」を3つくらいに絞り、その中の1つとして電話を置くイメージです。

ヘッダーの電話ボタンだけでなく、下部固定メニューも組み合わせておくと、スクロール中のユーザーからの電話を取りこぼしにくくなります。

応用編｜ヘッダーに電話番号＋問い合わせボタンを並べる

カラムブロックで2つ以上のボタンを作る

電話とフォーム、2つ以上のボタンを横並びにしたい場合は、カラムブロックを使うと見た目が崩れにくくなります。

構成イメージは次のような感じです。

カラム	内容	役割
左カラム	電話ボタン（telリンク）	今すぐ話したい人向けの導線
右カラム	問い合わせボタン（フォームへのリンク）	じっくり文章で相談したい人向けの導線

作業の流れをまとめると、次のようになります。

• ブログパーツ内でカラムブロックを追加し、2カラムを選ぶ
• 左カラムに電話ボタンを配置して、リンク先をtelリンクに設定する
• 右カラムに「問い合わせ」ボタンを配置し、問い合わせフォームのURLを設定する
• カラム全体を中央寄せにしたり、上下左右の余白を整えたりしてバランスをとる

このブログパーツをSwellのヘッダー内部に設置すれば、「電話する」「問い合わせ」の2つがきれいに並んだヘッダーが完成します。

ユーザーは自分に合った連絡方法を選べるので、結果として全体の問い合わせ数が底上げされやすくなります。

営業時間やキャッチコピーを一緒に見せるコツ

ヘッダーの電話ボタンの近くに、営業時間や一言のキャッチコピーを添えてあげると、クリックされる確率がぐっと上がります。

例えば、こんな組み合わせが考えられます。

• ボタンの下に小さく「受付時間 10:00〜19:00」
• ボタンの上に「初めての方もお気軽にどうぞ」
• 電話番号の横に「相談無料」と一言添える

ポイントは、「いつ」「どんな相談をしていいのか」が一目で分かることです。

Swellのテキストブロックや装飾機能を使えば、文字の大きさや色を簡単に変えられるので、目立たせたい情報と控えめでいい情報を上手に分けることができます。

注意点｜Swellヘッダーに電話番号を出すときのリスク

個人の電話番号をそのまま出したくない場合

個人の携帯番号をそのままSwellのヘッダーに出すのは、正直あまりおすすめしません。

営業電話や間違い電話が増えやすくなりますし、プライベートと仕事の切り分けが難しくなる可能性もあるからです。

そんなときに検討したい選択肢を挙げてみます。

• IP電話や転送サービスなどで「仕事用の番号」を用意する
• 時間帯によって自動アナウンスに切り替わる番号を使う
• 電話番号はフッターに載せ、ヘッダーは問い合わせフォームにする

ビジネスの規模や予算によってベストな選択は変わりますが、「仕事の電話はこの番号」という形で分けておくと、あとから運用を変えるときもスムーズです。

Swellで作る電話番号リンク自体はどんな番号でも設定できますが、その番号をどう運用するかは事前にルールを決めておくと安心です。

間違い電話・営業時間外の対応をどうするか

ヘッダーに大きく電話番号を出すと、どうしても間違い電話や営業時間外の電話が増えます。

完全になくすのは難しいですが、少し工夫するだけでだいぶ落ち着きます。

課題	対策例
営業時間外の電話が多い	ヘッダー近くに「受付時間」をはっきり書いておく
用件が合わない電話が多い	「○○のご相談専用」など、用途をボタンの文言で明示する
1件の電話が長くなりがち	フォームやLINEへのボタンも並べておき、内容によってそちらへ案内する

私がよくやるのは、ヘッダーの電話ボタンに「予約・相談の電話」など少し具体的な言葉を入れて、「ここは何の窓口か」を明確にすることです。

さらに、電話が苦手な人やじっくり考えてから連絡したい人のために、「メールで相談」「LINEで相談」といったボタンもすぐ近くに置いておくと、利用者にとって親切な導線になります。

よくある質問｜Swellのヘッダー電話番号まわりの疑問

Q1. Swellヘッダーに電話番号リンクを入れると表示速度は遅くなりますか？

A. 通常の使い方であれば、Swellのヘッダーに電話番号リンクを入れたことが原因で、表示速度が極端に遅くなることはほとんどありません。

電話番号リンクはただのテキストリンクなので、画像や外部スクリプトに比べると負荷はとても小さいです。

むしろ気をつけたいのは、電話ボタンに使う画像ファイルを大きくしすぎたり、ヘッダーに不要なスクリプトを読み込んだりすることです。

Swellの電話番号リンクはテキストとアイコンを中心に作り、なるべく軽い構成にしておけば安心です。

Q2. Swellの電話番号リンクがスマホで反応しないときの確認方法は？

A. まずはリンク先が tel:数字 の形式になっているかを確認してください。

「https://」のままになっていたり、全角数字が混ざっていたり、半角スペースが紛れ込んでいたりすると、正しく動かないことがあります。

チェックするときのポイントは次のとおりです。

• リンク先が tel:0123456789 のような形式になっているか
• 数字がすべて半角になっているか
• キャッシュ系のプラグインを使っている場合は、一度キャッシュを削除してみる

そして、必ず実際のスマホ端末でテストすることも大切です。

PCのブラウザだけでSwellのヘッダー電話番号の動きをチェックしても、正しく動いているか判断しづらい場合があります。

Q3. 店舗じゃないブログにもヘッダーの電話番号は必要ですか？

A. 情報発信がメインのブログや、日記的なサイトであれば、Swellのヘッダーに電話番号を無理に出す必要はありません。

場合によっては、電話番号があることで「営業色が強そう」と感じる読者もいます。

一方で、コンサルタントやフリーランスなど、仕事の相談を受けたい目的で運営しているブログなら、ヘッダーに電話番号リンクか問い合わせボタンのどちらかは置いておくのがおすすめです。

とはいえ、いきなり電話よりも、まずはフォームやメールで連絡してほしいというスタイルの方も多いと思います。

その場合は、「ヘッダーは問い合わせボタンだけ」「電話番号はフッターに控えめに掲載」というように、自分の働き方に合う形で選んでみてください。

まとめ｜Swellヘッダーの電話番号リンクを育てよう

ここまでの内容を整理します

• Swellのヘッダーに電話番号リンクを置くと、予約や相談へのハードルが下がりやすい
• telリンクは「tel:数字」で、スマホとPCでは挙動が少し違うことを理解しておく
• PCはヘッダー内部ウィジェット＋ブログパーツ、スマホはカスタムボタンや下部固定メニューを組み合わせると使いやすい
• 電話と問い合わせボタンをカラムで並べると、ユーザーが自分に合った連絡手段を選びやすい
• 個人番号の公開や営業時間外の電話などのリスクもあるので、番号の運用ルールを決めてから公開する

今日からできる最初の一歩としては、「ブログパーツで電話ボタンを1つ作ってみる」ことから始めてみてください。

そのボタンをSwellのヘッダーに設置し、アクセスや問い合わせの様子を見ながら、問い合わせボタンやLINEボタンとの組み合わせを少しずつ増やしていくイメージです。ヘッダーの電話番号リンクは、一度作って終わりではなく、サイトと一緒に育てていくパーツだと考えると、どんどん使いやすい形に洗練されていきます。

あなたのサイトのヘッダーが、しっかりと仕事をしてくれる心強い味方になるよう、少しずつ整えていきましょう。