フッター固定ボタンのこだわり

フッター部分にスクロールに追従してメニューボタンを表示することができます。

reDiverでフッター固定ボタンのデザインを採用した理由

「re:Diver」でのフッター固定ボタンは、よくあるデザイン（最下部に固定される形）ではなく左下から表示されるようなデザインを採用しております。
フッター固定メニューのデザインを決めるにあたって紆余曲折ありましたが様々なことを考慮して決定しました。

closeよくある固定ボタン

arrow_forward

nest_thermostat_gen_3re:Diverの固定ボタン

それぞれの問題点の特徴と、どのように回避しているのか解説します。

サイトのボタンとブラウザのツールバーが混合しない

多くのブラウザには、サイト表示領域の下部にツールバーが表示されております。サイトのデザインによってはツールボタンとデザインが似てしまい混合してしまう場合があります。サイト全体のデザインとして違和感を感じてしまう場合があります。

close

arrow_forward

circle

osのツールバー領域に干渉しない

ブラウザーのツールバーは、サイト表示領域を広げるために隠れている場合があります。隠れているツールバーはその領域をタップすると表示されるようになるので、サイト下部のボタンをクリックしようとしても、ツールバーが表示されてしまいユーザーにストレスとなる場合があります。

最下部とスペースがあることによって、誤クリックを誘発することを防ぎます。またスクロール方向によって表示・非表示を切り替えることも可能です。（多くのブラウザでは、下方向のスクロール時にツールバーが表示されます。）

ブラウザの下に表示されるバーに干渉しない

iphoneによくある下部に表示される黒いバーは、サイト表示と重なって表示されます。細いバーですが、最下部にボタンを固定しているとボタン内のテキストと重なってしまう場合があります。テキストも見にくくなりますし、クリックしてもツールバーの領域なのでボタンは反応しません。

フッターバナーとして表示できる領域を確保したい

サイトに固定出来るパーツは非常に有効的なパーツであるため、積極的にフッターバナーを活用してください。しかし従来デザインの固定ボタンがあると圧迫感が生まれてしまいます。

固定バナーと固定ボタンの両方を表示したときにストレスの無いデザインにしました。

PCで表示しても違和感がない

従来の固定ボタンはスマートフォンでのみ表示するのが前提で設計されています。デスクトップ表示で同じように表示しているサイトも稀に散見されますが美しくありません。

close

「re:Diver」では、デスクトップであってもスマートフォンでも同じパーツで違和感のないようなデザインになっています。

circle

デスクトップのみ表示やモバイルのみ表示等、細かく表示設定をすることも可能です。