スマホ用HPにLINE・電話・メールを固定表示させます

見た目のスマホ対応だけでは不十分です

スマホ対応ができていないホームページはあまり見掛けなくなりました。

しかし、スマートフォンで見やすいホームページになっているかどうかをチェックできるモバイルフレンドリーテスト（by Google）に合格できるホームページでも、お客様からすると不便で使い勝手が悪い場合があります。

中でも問題なのが「問合せや予約をしにくい」ホームページです。

電話を1タップで掛けられるようにしましょう

パソコン用のホームページなら、ページの上や下に電話番号を載せておけば、それを見ながら電話ができます。しかしスマホでHPを見ている場合は、

1. スマホのブラウザでHPを見る
2. 電話番号をメモまたは記憶する
3. 電話アプリを起動させる
4. 電話番号を押して電話を掛ける

という面倒な作業を強いられます。せっかくスマホには電話を掛ける機能があるのですから、タップするだけで電話できるようにしましょう。

画像や電話番号をタップするだけで電話できるようにするには、画像や電話番号の文言をリンクにするだけです。リンク先URLは

tel:012-345-6789

のように、すべて半角文字にしてください。

問い合わせフォームも用意しましょう

問い合わせフォームも、もしなければ用意してください。フォームズやフォームメーラーで無料のフォームを作れますので、そちらを使うのも手軽で良いです。

問い合わせフォームを作る際に、項目をできる限り絞り込んでください。理想は

• ご氏名
• メールアドレス（確認用入力欄は不要）
• 用件

ですが、必要な項目がほかにあれば追加してください。

ただし、見込み客の情報をいろいろ知りたいと思うのは無理もありませんが、項目数が多いのは良くありません。

項目数が増えるほどフォームの項目を埋めるのが面倒になるため、問い合わせは減ります。

LINEでの問い合わせや予約も受け付けましょう

法人向けでなく個人向けの業種でしたらLINEで問合せができるようにしましょう。日本人の半分以上が使っているメッセージアプリです。

LINEの個人アカウントで問い合わせを受け付ければ手軽ですし、必要ならLINEで通話もできます。もし「個人アカウントは公開したくない」などの理由があればLINE公式アカウントで受け付けても良いでしょう。

LINE公式アカウントの作り方｜開設の設定と運用方法

とあるお店では、問合せや予約はほとんどがLINEで来て、電話もフォームもほとんど使われなくなったとのことです。

お問い合わせ用メニューを固定表示させましょう

「電話」「フォーム」「LINE」の3つのボタンを用意して、各ページに固定しておけば、いつでもお客様が問い合わせや予約できるようになります。

この地元密着なびホームページも、スマホでご覧いただくと画面の一番上に

【メニュー】【メール】【LINE】【電話】

の4ボタンを載せたフローティングメニューが表示されるようにしてあります。

ホームページによっては、画面の上にタイトル画像とメニューボタン、画面の下に各種ボタンを配置しているところもしばしばあります。

どちらが良いかは一概には言えません。

上と下の両方に固定メニューがあると、ページ本文を表示できる画面が狭くなってしまうので、当会ホームページは上だけにしています。

しかし、ボタン数がもっと多いと誤タップしやすくなるので、上と下に分けて表示させる方が良いでしょう。

また、当会ホームページはアイコンだけで表示していますが、「こちらをタップしてお電話ください」「ご相談はお気軽に」などの文言も載せることができます。

単純なアイコンではなくイラストや写真にするのも一案です。ホームページのデザインとの兼ね合いもありますので、ご要望に沿って制作いたします。

スマホ用固定メニューの自作方法

HTMLやCSSを自力で書ける方なら、固定メニューを自作することもできます。手順を書いておきますのでご参照ください。

1. メニューの各項目を、番号なし箇条書きタグ( <ul> )を使って作ります。
2. 作ったメニューに適当なID（たとえば menu_fixed のような）を付けます。
3. メニューをスマホで見たときだけ画面上に固定表示されるようにスタイルシートで指定します。下記は一例です。
   <style>
   #menu_fixed {
   display:none;
   }
   @media (max-width: 575px){
   #menu_fixed {
   padding-left:0;
   list-style-type:none;
   position:fixed;
   top:0;
   width:100vw;
   }
   #menu_fixed li {
   float:left;
   width:calc(100% / ボタンの数 - 5px);//ボタンの数を書き換えてください
   margin-right:5px;
   }
   #menu_fixed li a {
   display:block;
   width:100%;
   padding:5px 0;
   color:white;
   background-color:**;//背景色を指定してください
   text-decoration:none;
   text-align:center;
   }
   }
   </style>

この手順を見ても分からない、自分でできる気がしないという方には…

スマホ用固定メニュー・料金とお申込

パソコンで見た時には表示されず、スマホやタブレットで見たときだけ画面の上や下に固定表示されるメニューを制作いたします。

シンプルに文字だけのメニューもできますし、メニューにアイコンや画像が必要でしたら、こちらで著作権フリーの素材を探して、加工します。

また、作業完了から3ヶ月間、デザインや項目の変更を無償で承ります。「最初はこれで良いかと思ったけど今は違和感が…」というモヤモヤを解消できます。

3ヶ月サポート込みの作業費用は以下の通りです。

22,000円

ただし、ホームページによっては上記の金額より作業費用がかかる場合や、そもそもお請けできない場合もございます。まずはお気軽にお問い合わせください。

たとえば、セルフルを使用しているホームページでは、テーマの編集やサーバーへのFTP接続ができないためお請けできません。