スマホサイトページ下部に電話とかメニューを固定表示する方法【スマホ絶対領域】 | 福岡のホームページ制作はマリオ君にお任せ

本日はスマホでホームぺージを閲覧する時にぺージの一番下に固定表示で電話とかメニューボタンとかホームボタンがあるサイトがたくさんあると思いますが、その作り方をご説明させていただきます。

弊社ではお客さま（特にBtoCでサービスをご提供されている）からよく

「一番下に電話番号とか出して、電話しやすく作ってね」

とよくご依頼をいただきますので設置方法をご紹介させていただきます。

「マリオ君」ではスマホサイトの一番下のエリアを「スマホ絶対領域」と呼んでおります。

スマホサイトのぺージ下部は一番目立つ場所だと思っています。（データはありませんが）

iPhoneでは電話アイコンやブラウザアイコン、LINEやユーチューブのアプリを開いてもぺージ下部には重要なホームボタンやトークボタン、登録チャンネルボタンがあると思います。

Webサイトでは会員登録はこちらとか、無料お試しはこちらとか、が設置されたりしていてとにかく目につく部分です。

大手サービスが重要なものをぺージ下部に置いているということはとにかく良い場所っていうことですねよ。（ユーザーが目につきやすい・操作性が高い）

てことで、スマホサイトでページ下部に固定して重要な情報を入れる方法をご説明させていただきたいと思います。

スマホサイトページ下部に要素固定方法

固定の方法はとっても簡単です。固定したい一番外側の要素に下記CSSを入れるだけです。

    position: fixed;
    left: 0;
    bottom: 0;

position:fixedは固定してくれるCSSです。
上記を言葉で説明すると

要素を固定して
固定する場所は左から0で
下から0のところでね。

って書いてあります。
ちなみにマリオ君のPCサイト用右端にある「お問い合わせボタン」も同じ要領で作っています。
（right:0;　bottom:50%;とかで）

設置サンプル

簡単ではありますが、設置のサンプルをご紹介いたします。
単純に画像を３個横並びにしてぺージ下部に固定する方法です。

HTMLはこんな感じ

<div class="sumabottom">
	<ul>
		<li><a href="#" target="_blank"><img src="img/botline.svg" alt="LINEで予約"></a></li>
		<li><a href="#" target="_blank"><img src="img/botweb.svg" alt="WEBで予約"></a></li>
		<li><a href="#" target="_blank"><img src="img/bothot.svg" alt="HOT PEPPERで予約"></a></li>
	</ul>
</div>
<!--sumabottom_end-->

リストで画像を３つ囲っていて、それをsumabottomというdivで囲っています。

CSSはこちら

img{
	
	width: 100%;
}

.sumabottom {
		
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 800;
	//display: none;

	ul{

		display: none;
		@media screen and (max-width: 768px) {
			display: flex;	
		}
		li{

			width:calc(100%/3);

		}

	}
		
	
}

上記のブレイクポイント（スマホ表示に切り替えるサイズ指定）は17行面のメディアクエリで768pxで切り替えております。

8行目のfixedで固定しています。

スマホサイズ以外は16行目のdisplay:noneでulを非表示にして、スマホ表示サイズ（今回は768px以下）になったら18行面のdisplay:flex;に切り替えてnoneを無効にして表示させるようになっています。

画像自体は画像を囲っているliの親要素にflexをあてて横並びにしています。リストの横幅はcalc（CSSで計算できるやつ）で100％÷3で三分の1のサイズにしています。

これで簡単にスマホサイトのページ下部に要素を固定することができました。
例は画像ですが、ハンバーガーメニューを入れたりもできます。

注意点として、11行目のzindexの数字は他で使用しているzindexと比べながら変更してください。zindexは重なり順を表していて、数字が大きいほど手前に表示されて、少ない数字やマイナスの数字になるにつれて奥に表示されます。

スマホサイトでハンバーガーメニューなどでもzindexとかを使う機会が多いと思いますので、重なり順がおかしい場合はzindexの数字を変更して調整してください。

設置サンプル途中から出てくるように

もう一つオプションで、途中から出てくるようにする方法もご説明させていただきます。
メニューボタンなどすぐに使うものがある場合は初めから表示でいいと思いますが、お問い合わせや電話番号など、ファーストビューで必要性が少ない場合は途中から表示させた方が、ユーザーに優しいかもしれません。

サイトに良く設置されているトップへ戻るボタンのような感じですね。

html、そのままで、scriptを追加します。</body>の前に下記を記述します。

<script>
	
//途中から出現
$(function () {
  var finq = $('.sumabottom');
  finq.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 500) {
      finq.fadeIn();
    } else {
      finq.fadeOut();
    }
  });
});
</script>

5行目で要素を指定しています。
.sumabottomを非表示にして
8行目の数字が上から500pxになったらゆっくりと表示して、上から500px以内になったらゆっくり消してね

って書いてあります。
これで途中から表示されるようになりました。

1点追加で、このままで一応できているのですが、このままではぺージを表示した際隠している部分がちらつきますので、上記のCSSの12行目のコメントアウトしていたdisplay:none;の//をとってコメントアウトを無効にします。

通常このままではdisplay:none;で非表示になってしまうのですが、表示非表示はscriptの.hideで制御されているので、問題ありません。
これでちらページを開いた際のちらつきもなくなります。

途中から表示もこれで完了です。

絶対領域のデメリット

スマホの絶対領域にもデメリットがあります。
それは表示領域が狭くなるということです。もともと表示領域が狭いスマホですがそれがさらに狭くなってしますのがデメリットです。

サイズ感（高さ）を注意しながら設置しなければなりません。
ぺージ上部にもサイトのロゴやお問い合わせなどで固定して、上下で固定すると結構表示領域が狭くなりますので、注意が必要です。

ちょっとした、対策としては、固定している要素の背景を少し透過にするだけでも圧迫感は少し減ります。ヘッダ部分は逆スクロールした時のみ表示とかもおすすめです。（KIRINさんのホームぺージ）

また、スマホ絶対領域はたしかに目立ついい場所ですが、いい場所だからと言って２行も３行にもなるアイコンや要素を入れてしますとサイズ（高さ）も大きくなりますし、逆に目立たなくなってしまう（セクシーじゃなくなってしまう）こともありますので、個人的にはタップのしやすさなども考慮して１行（３～４個まで）がおすすめです。

営業感も若干出てしまいデザインによってはブランドを損ねることもあるかもしれません。（これ買って、これ買って的な感じでガツガツ感がでるかもしれません）

大手さんはどうしてる？

大手さんはどうしているか簡単に調べてみました。

自動車関連
■トヨタさん　絶対領域使用せず
■日産さん　絶対領域使用せず（カーラインナップページで使用）
■本田さん　絶対領域使用せず（カーラインナップページで使用）

トップページでは使われていませんでしたが、カーラインナップなどで、販売店検索や見積など重要な項目をぺージ下部で表示されています。

引越し関連
■サカイ引越センターさん　無料見積り・予約などで使用
■アート引越センターさん　ネット申し込み・電話番号なでで使用
■クロネコヤマトの引っ越しサービスさん　申し込み・チャットで使用

こんな感じでした。
企業サイト・ブランド寄りのサイトはあまり使用せず、個人の方向けのサービスや緊急性のあるサイトには多く使用されている傾向がありますね。

以上になります。

いかがでしたでしょうか。ケースに合わせてスマホ絶対領域をいかして、反響に繫がるホームページを作っていきましょう。

それではまた。