セグメントコントロールのUI設計：選択の意味を明確にする

セグメントコントロールは、少数の関連する選択肢を並べ、どれが選ばれているかを示すUIです。グラフの集計期間のように、同じ画面の中で値を頻繁に切り替える場合に向いています。一つだけ選ぶ方式では、別のセグメントを選ぶと以前の選択が置き換わります。予期せず別のページへ移動したり、フォームが送信されたりしないことが大切です。

店舗の売上グラフに、日・週・月の選択肢がある場面を考えます。グラフの位置は変えず、対象の期間だけを切り替えます。UIデザインのワークスペースで、操作が影響する日付、合計値、グラフを一緒に設計すると、三つのボタンだけを磨くよりも、その関係を判断しやすくなります。

短い選択肢を見せたまま選ぶ場面に使う

重要なのは、選択肢同士の関係です。日・週・月は、どれも「このグラフにどの期間を表示するか」という同じ問いに答えます。書き出し・設定・更新は別々の操作であり、一列に収まるという理由だけでセグメントにしてはいけません。

FluentのiOS向けガイド（英語）では、同じ文脈にある相互排他的な選択肢として説明しています。一方、プラットフォームによって使い方は異なり、Appleのガイド（英語）には、macOSで複数選択や一時的な操作に使う形式も含まれます。ここで設計するのは、意図的に一つだけ選ぶ期間セレクターです。

角丸の枠が動作を決めるわけではありません。売上・在庫・顧客のような独立したパネルを切り替えるなら、タブを検討します。保存済みの集計期間が多数あるなら、ラベル付きのドロップダウンや検索できる選択欄のほうが使いやすい場合があります。それぞれの選択肢に説明が必要なら、ラジオボタンを見せたまま並べる方法が向いています。

日・週・月が示す期間を明確にする

短いラベルには、大きな曖昧さが隠れることがあります。「週」は今週なのか、過去7日間なのか、あるいは一年分のデータを週単位で集計する意味なのか。選択状態を描く前に、製品で必要な意味を決めます。

この例では、集計の基準日を5月14日とします。三つの選択肢は店舗の集計用タイムゾーンに基づく暦上の期間を表します。選択が変わると、日付の表示とグラフを一緒に更新します。

日付を併記すれば、各セグメントのラベルを長くせずに期間を具体的にできます。複数のタイムゾーンで利用する場合は、グラフのそばに「集計時間：ロンドン」と示します。週の開始曜日も意図的に決めます。ラベルを翻訳しただけで、その地域の暦の慣例が決まるわけではありません。

5月14日はまだ終わっていないため、それ以降の時間や日付には結果がありません。未来の位置に売上ゼロを描くのではなく、未集計として空けておきます。合計には「現時点の売上」と付け、途中の月を一か月分の確定値と誤解させないようにします。こうした情報は、選択の切り替えをスライドで見せるか、フェードで見せるかより重要です。

表示の切り替えと設定の保存を分ける

グラフでは、選択をすぐに反映させます。日と週を比較したい人に、週を選んだうえで「適用」を押させる必要はありません。コントロールはグラフの見出しの近くに置き、グラフと関連する集計表示だけを更新します。店舗、通貨、独立した商品フィルターは変えません。

レポートの設定フォームでは、同じ見た目でも、後で送信する値を入力する役割になることがあります。「月」を選ぶと編集中の集計期間が変わり、フォームの「保存」で確定します。この場合は「既定の集計期間」とラベルを付け、フォーム全体の保存方法に合わせます。隣の項目が未保存なのに、この項目だけ黙って保存してはいけません。

現在の値をもう一度選んでも、選択はそのままにします。「週」を繰り返し押すことは、期間の解除や再読み込みの指示ではありません。データの再取得が必要なら、明確な名前の別の操作を用意します。一つのセグメントに二つの役割を持たせないことで、動作を予測しやすくなります。

選択とキーボードフォーカスを別々に示す

選択中の項目には、文字とのコントラストが明確な塗りなど、状態が続いていると分かる印を付けます。キーボードフォーカスには別の枠線を使います。ホバーで反応を示しても、選択の表示を消したり、未選択の項目が選ばれたように見えたりしないようにします。

Webでこの単一選択を実装する場合は、標準のラジオ入力の利用を開発者と検討します。WAI-ARIAのラジオグループパターン（英語）では、名前の付いたグループ内で選択できる項目は最大一つです。ツールバー内ではない標準の動作では、矢印キーで移動先の項目を選択し、Tabキーでグループへ出入りします。カプセル形の見た目を使いたいという理由だけで、タブの実装を流用しないでください。

デザインには、「週」が選択されてフォーカスもある状態と、フォーカスがグループ外へ移った後の状態を描きます。どちらでも選択を示す塗りは残ります。支援技術に伝えるグループ名は「売上グラフの期間」などとし、各ラベルに「選択中」を繰り返し書く必要はありません。プロトタイプでは意図した反応を示し、キーボードや支援技術での動作は実装したコントロールで確認します。

選択したラベルとグラフの内容を一致させる

日別の表示から「月」を選んだとします。「月」をすぐに選択状態にし、日付を5月1日〜31日へ変更して、グラフ内に「月間売上を読み込み中」と表示します。グラフの高さは保ちます。月の見出しの下に日別の値を残すと、もっともらしく見える誤った結果を示してしまいます。

月の読み込みが終わる前に「週」を選んだ場合、現在求められている期間は週です。後から届いた月の結果で週のグラフを置き換えてはいけません。引き継ぎ時には「現在選択されている期間の結果だけを表示する」と明記します。古いリクエストを中止するか、結果を無視するかは実装側で決めます。

月間データの取得に失敗した場合は、意図した「月」の選択を残し、グラフ内に「月間売上を読み込めませんでした」と再試行の操作を表示します。ほかの期間は引き続き選べるようにします。取得に成功して売上がなければ、「この期間の売上はありません」と表示します。失敗と、本当に売上がゼロの期間に、同じ空のグラフ用メッセージを使ってはいけません。

狭い画面でもラベルを読めるようにする

日・週・月の三つなら、同じ幅のセグメントに収めやすい構成です。ただし端末全体の幅ではなく、余白を含む実際のグラフカードの中で確認します。日付とセレクターが競合する場合は、日付を別の行に置きます。

現実的な翻訳文と拡大した文字で試してから、レイアウトを決めます。意味のある語を略す前に、不要なアイコンや過大な左右の余白を減らします。「D / W / M」なら省スペースですが、利用者が意味を解釈しなければなりません。デスクトップの比率を保つために、文字やタッチ領域を小さくしないでください。

後から四半期、年、カスタム、複数のプリセットが増えた場合は、部品の選択を見直します。選択肢が収まらなくなったら、ラベル付きの期間セレクターに変えることで、分かりやすい文言を保てます。一つのセグメントコントロールを二段に折り返すと、まとまりや選択状態が読みにくくなります。小さい画面で表示形式を変えても、日付の意味は共通にします。

Pixsoでグラフと期間の選択を一緒に作る

Pixsoで、タイトル、日付、合計値、三つのセグメントを含む売上グラフのカードを作ります。Auto Layoutで余白やラベルの長さを試し、再利用できるコンポーネントで構造をそろえます。例に使う日付は具体的に表示します。「選択肢1」では、解決したい期間の曖昧さが隠れてしまいます。

週の表示、月間データの読み込み中、読み込みが完了した月の表示を並べます。フォーカスのある「週」も追加し、通常の選択表示と枠線を比較できるようにします。各フレームでコントロールの位置をそろえると、ページの移動ではなく期間の変更だと伝わります。

レビューでは「今日の売上と今週を比較してから、月の表示を開いてください」と依頼します。続けて、応答が遅い場合と取得に失敗した場合も確認します。各段階で、グラフがどの日付を表しているかを尋ねます。選択と日付から答えられれば、コントロールが役割を果たしています。グラフの形から推測しなければならないなら、アニメーションを磨く前に、その対応関係を直します。

Pixsoでグラフの期間選択を設計する →