このワイヤーの特徴
よく使うページへ、メニューを開かずに移動できる
メニューボタンの中にすべてのページを入れると、よく使うページへ移動するたびに、メニューを開く操作が必要になります。ホーム・サービス・制作実績・料金を画面の下に並べ、どのページからでも1回の操作で移動できるようにしています。
親指が届きやすい位置に、行き先がある
片手でスマートフォンを持つと、画面の上のほうは指が届きにくくなります。よく使う行き先を画面の下に並べ、片手でも押しやすい位置にしています。
相談の入口が、どこからでも見える
読み進めている途中で相談したくなっても、入口がページの上や下にしかないと、探す手間がかかります。タブの右端に、ほかのタブと見た目を分けた「相談する」を置き、どこからでも相談へ進めるようにしています。
今どのページを見ているかが、画面の下でも分かる
タブの色を変えるだけでは、色の違いが分かりにくい人には伝わりません。表示中のタブに線と太字の印を付け、色だけに頼らずに区別しています。
PCとSPで、同じ行き先を同じ名前で見せる
PCとSPで行き先の名前が違うと、同じページなのか別のページなのかが分かりにくくなります。このワイヤーでは、SPでタブに並べる行き先を、PCでは上のヘッダーに同じ名前で並べています。
制作時のよくある失敗
タブの数が多く、文字が読めない
6つ、7つとタブを並べると、アイコンと文字が小さくなり、押し間違いも増えます。
タブは横一列で読みやすく押しやすい数に絞り、ほかのページはメニューボタンからたどれるようにします。
アイコンだけで、行き先が分からない
アイコンの意味は人によって受け取り方が違い、特にサービスや料金などは形だけでは伝わりにくいです。
すべてのタブに短い文字を添えます。
本文の最後や、フォーカスした項目がタブバーに隠れる
タブバーは本文の上に重なって表示されるため、余白を取らないと、本文の最後の行やボタンがタブバーの下に隠れます。
本文の下にタブバーの高さ分の余白を取り、キーボードで移動したときのために scroll-padding-bottom なども設定します。
端末の操作用の領域と重なる
画面の下にホームインジケータなどのシステム操作領域がある端末では、タブバーがその領域と重なり、押しにくくなることがあります。
env(safe-area-inset-bottom) などで、その領域の分の余白を取ります。
ページ移動のタブに、表示切り替え用の役割を付けている
role=”tablist” や role=”tab” は、ページ内の表示を切り替えるタブのための役割です。
ページへ移動するタブに付けると、読み上げソフトなどではページ内の表示切り替えとして扱われ、矢印キーでの操作が前提になります。
ページへのリンク集として、nav 要素で組みます。
画面の下に、追従する要素を重ねすぎる
タブバーに加えて、追従する相談ボタン、Cookieの案内、チャットのボタンなどを画面の下に重ねると、本文を読む範囲が狭くなり、押し間違いも増えます。
相談をタブに入れた場合は追従する相談ボタンを置かないなど、画面の下に残すものを絞ります。
よくある質問
タブには、どのページを並べればよいですか?
何度も行き来するページを選びます。
よく見られているページや、相談や予約などの主な行動の入口が候補になります。
このワイヤーでは、ホーム・サービス・制作実績・料金の4つと相談の入口を並べ、ほかのページは上のメニューボタンからたどれるようにしています。
下部タブバー型と追従型CTAは、どのように使い分けますか?
下部タブバー型は、主要なページへの移動と相談の入口の両方を画面の下に残す形です。
追従型CTAは、相談などの行動の入口だけを残す形です。
両方を同時に画面の下に置くと重なりやすいため、どちらか一方にします。
PCでも、画面の下にタブバーを表示したほうがよいですか?
このワイヤーでは、PCではタブバーを表示せず、同じ行き先を上のヘッダーに並べています。
画面の下に並べる利点は、片手で持ったときに親指が届きやすいことにあり、PCにはあてはまりにくいためです。
フォームの入力中も、タブバーは表示したままでよいですか?
画面のキーボードが表示されると、タブバーが入力欄に重なったり、入力できる範囲が狭くなったりすることがあります。
入力中はタブバーを隠す、フォームのページではタブバーを表示しないなど、実際の端末で確かめて決めます。
