初めてのホームページ作成で見る動画

 

便利な無料ソフトと便利サイト一覧サイト作成ソフトシリウス、最短HPテンプレートの使い方解説お店、企業用ホームページの作り方ホームページで集客し、売り上げを延ばす方法グーグルの無料サービス一覧
HP作成 超初心者、高齢者講座サイト作成のFAQ記事一覧SEO対策実践編SEO対策基本編トップバナー用無料下地画像素材集

携帯端末で電話番号タップで発信画面に移動させる確実な方法

電話番号タップで発信画面に移動させる方法

スマホ、アイフォンなど携帯端末で電話番号や画像を表示させ、これらをタップすると電話番号発信画面に移動させる事ができます。このカスタマイズについて正しい方法を解説します。

 

このページの動作環境でのご注意

シリウスバージョン1.5以上は、こちらの記述をそのままコピペしてください。15にバージョンアップされていない方は、そのまま動画の通りに作業して下さい。

 

携帯端末電話番号タップの概要

スマホ、iPhoneサイトからの、電話によるお問い合わせの効率を良くするためには、電話番号タップで、発信画面に移動させる方法が、かなり強力です。

 

「カスタマイズをしなくても、現状でもその機能が働くよ!」

 

っとおっしやる方も多いと思いますが、実はこれには落とし穴があるのです。そこで正しい方法で電話番号を記述する方法を解説します。

 

 

電話番号タップで移動画像

 

 

シリウスカスタマイズ-4

番号タップで発信画面にコピーさせる方法
[この動画は24分で見れます]

 

 

動画を見て頂いて、早速作業される方は、私がシリウスの画像制作機能で作成した、下記画像を使ってみて下さい!右クリックで画像をコピー、デスクトップ等に貼り付けでOKです。

 

尚、画像貼り付けサイズは240px程度にして頂ければ、ほとんどのスマホ、iPhone端末で最適表示されるはずです。また画像のセンタリングを忘れずに!!

 

電話番号タップ画像-0

 

電話番号タップ画像-1

 

電話番号タップ画像-2

 

正しい電話番号の記述方法

すべての端末で電話番号を最適表示させるには!

まず、スマホ、iPhoneのブラウザの仕様ですが、数字を勝手に電話番号としてリンクと認識し、郵便番号などの電話番号でない数字の配列もリンクにしてしまう欠点があります!

 

また任意で電話番号にリンクタグ<a href="tel:09012345678"></a>を記述すると、パソコン画面でも「電話番号リンク」となり下線が入ります。この際、当然パソコン画面でこの番号をクリックすると「存在しないページ」などと表示されてしまします。

 

このような事から、

  • パソコン画面では「リンクを無効」
  • 携帯端末では「発信画面に番号をコピー」させる

という仕様にする必要があります。

 

携帯端末で勝手に番号をリンクとして認識させないようにする。

下記メタタグヘッダー内に記述します。このタグを記述する事で、すべての数字が電話番号として認識されないようになります。この記述が電話番号表示の第一段階の作業です。

<meta name="format-detection" content="telephone=no">

 

スクリプトでPCサイト、端末サイトで電話番号を出し分ける

下記のスクリプトは、iPhone、iPad、Androidの場合だけ(PC以外)に、電話番号にリンクを付けるという指示です。このタグもヘッダー内に記述します。

 

JavaScript

<script>
    $(function(){
        var device = navigator.userAgent;
        if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
            $(".tel").wrap('<a href="tel:09012345678"></a>');
        }
    });
</script>

  • device = navigator.userAgent;

    端末(device)により機能を出し分けますよ!っていう意味。

  • wrap

    ワープではありません!ラップと読みます。「包む」って事です。

  • <a href="tel:09012345678"></a>

    リンクタグで「包む」って事です。

 

電話番号タップで移動画像

閲覧者(userAgent)が携帯端末(device)の場合は、リンクタグ電話番号囲むという事に、誘導(navigator)すると和訳すると考えて下さい。

 

上記2っのタグをまとめます

下記を全部コピーして、ヘッダーの閉じタグの前に貼り付けてください。

<meta name="format-detection" content="telephone=no">
<script>
    $(function(){
        var device = navigator.userAgent;
        if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
            $(".tel").wrap('<a href="tel:09012345678"></a>');
        }
    });
</script>

シリウスで上記タグをヘッダー内に貼り付ける場合は、トップページ、エントリーページ、カテゴリーページ、すべてのHTMLテンプレートに記述して下さい。

上記をコピーして利用される場合は、番号に間違いがないかよく確かめて、確実にご自身の電話番号に書き換えて記述して下さい。

上記スクリプトの電話番号の記述は絶対にハイフン付けないで下さい。動作しなくなる可能性が高いです。

 

管理画面上でのHTMLの記述

上記の作業が完了しましたら、次はブラウザで電話番号を表示させるためにHTMLを記述します。テキスト(電話番号)と画像で表示させる2っの方法を解説します。

 

テキストでリンク

<span class="tel">お電話はこちら!</span>

 

<span class="tel">090-1234-5678</span>

 

リンクになり下線が付きますので、直接電話番号を記述しても良いですし、誘導する文言でも良いと思います。テキストの場合リンクテキストなので、こちらの記述はハイフンを付けて下さい。その方が電話番号として認識されやすいです。

 

画像でリンク

<img src="画像URL" alt="電話番号タップ画像" class="tel">

 

訪問者さんが電話する確立を高くする方法

テキストでも、画像の場合でも、閲覧者さんが電話しやすい環境を作る事が大切です。どういう事かと言いますと、、、「タップした瞬間に電話が発信されてしまう」のではないという事を、閲覧者さんに認識してもらう必要があるのです。

 

人間の心理で考えると、「電話をかける」という行為は勇気と決断が必要なものです。

 

第一段階として、タップする事で、発信画面に電話番号がコピーされるだけって事を、閲覧者さんに解らせてあげる事が重要なのです。電話をかけるか?止めるのか?躊躇(ちゅうちょ)している訪問者さんに、選択肢を与えるという事です。

 

タップしてすぐに電話発信しない事を解って頂く事で、実際電話をかけるという、「行為」誘導するという考え方です。なので電話リンクの上に、下記のような文言を付け加えます。

 

  • 電話番号番号タップすると発信画面に電話番号をコピーできます。
  • 番号タップで発信画面に移動します。
  • タップで番号コピー。
  • タップで移動。
  • 画像タップで番号コピー

 

実際にこんな感じがベストです!

(画像は240pxで設定しています。)

タップで番号コピー!

 

電話番号タップで移動画像

 

株式会社○×サービス

 

地域性のあるサイトは地域名の羅列

○県、○市、○町

 

ビジネスサイトでは、このような人間の心理的な行動を考慮して、画像やテキストを考えていく必要があります。これが集客に大きく影響します。相手の気持ちになってサイト作成しましょう!少しの工夫で集客が10倍になる事もあるのです。

 

SEO対策とは、ホームページを上位表示させ、ホームページへの訪問者さんを増やすという事です。でも最終的に本当のSEO対策とは集客数、すなわちどれだけ売り上げを伸ばすか!という対策であるという事を認識して下さい。

 

たくさんの人にホームページを見てもらえても、お問い合わせや、注文がなければ本当のSEO対策とは言えません。反応があるホームページ作成するコツとして、上記のような閲覧者さんの心理的な行動パターンを考えていく事がホームページ作成では重要だという事です。

 

シリウスバージョン1.5以上

ヘッダー内

<meta name="format-detection" content="telephone=no">

 

HTML

<p class="txt-img" style="text-align:center"><a href="tel:1234567890"><img src="<% pageDepth %>img/画像" style="width:280px;" alt=""></a></p>

 

CSS

@media screen and (min-width: 768px) {
a[href^="tel:"] {
pointer-events: none;
}
}

 

 

 

 

TOPへ