このワイヤーの特徴
自分に当てはまる方を、すぐに選べる
2〜3の短い選択肢を1つの枠にまとめ、読み手が自分に当てはまる方をすぐに選べるようにしています。
関係のない内容を読み飛ばす手間がなくなります。
選んでいる方が、ひと目で分かる
選んでいる選択肢は色を反転させ、1つの枠の中で目立たせています。
選択肢が少ないため、どちらを見ているかを取り違えにくくなります。
役割はタブとして組む
見た目はボタンの切り替えでも、内容を切り替える役割はタブと同じです。role=”tab” と aria-selected を付け、←→キーで切り替えられるようにしています。
SPでは、横幅いっぱいに広げる
SPでは選択肢を横幅いっぱいに等分し、押しやすくしています。
選択肢が2〜3つなので、SPでも1行に収まります。
制作時のよくある失敗
選択肢の名前が長い
「法人のお客様はこちら」のように長い名前にすると、SPで収まらなくなります。
「法人」「個人」のように短くし、説明は内容の中に書きます。
最初にどちらが選ばれているか分からない
どちらも選ばれていないように見えると、読み手は内容が誰向けか分かりません。
最初に選ぶ方を決め、選んでいる状態をはっきり見せます。
切り替えると、内容の形まで変わる
切り替えるたびにカードの数や並びが大きく変わると、読み手は比べにくくなります。
できるだけ同じ形で、中身だけが変わるようにします。
オン・オフの切り替えと取り違える
2つの選択肢の切り替えを、設定のオン・オフのスイッチのような見た目にすると、何かを有効にするボタンに見えることがあります。
選択肢の名前を両方とも見せます。
よくある質問
セグメント型と、ラジオボタンは、どう使い分ければよいですか?
その場で表示する内容を切り替えるならセグメント型（タブの役割）、フォームの答えや設定として値そのものを選ぶならラジオボタンやトグルが向くと考えられます。
月払いと年払いのように同じ内容の数字だけが変わる場合は、月額／年額切り替え型 料金表の作り方も参考になります。
最初は、どちらの選択肢を選んでおけばよいですか?
読み手の多い方を最初に選んでおくのが一般的です。
アクセスの記録や問い合わせの内容から、多い方を判断します。
選んだ方を、次にページを開いたときも覚えておいたほうがよいですか?
読み手が何度も訪れるサイトでは、覚えておくと手間が減ります。
覚える場合も、切り替えがいつでもできることが見えるようにしておきます。
