タブUIの設計：作業の流れを保って表示を切り替える

タブは、同じ対象に関連する複数の表示を、その対象から離れずに切り替えるときに向いています。項目名を見える位置に置き、現在どの表示が選ばれているかを明確にし、切り替えても入力途中の内容などを保ちましょう。一方、二つの内容を同時に比較したい場合や、決まった順序で作業を進める場合には、タブは適していません。

ここでは、プロジェクト「Spring launch」のワークスペースに「概要」「タスク」「アクティビティ」という三つの表示がある例を考えます。同じプロジェクトに属していますが、それぞれが答える問いは異なります。これは製品全体のナビゲーション設計の中で、対象のプロジェクトを保ったまま内容を切り替える仕組みです。

表示同士の関係から考える

この例では、「概要」にプロジェクトの目的と現在の状況、「タスク」にこれから行う作業、「アクティビティ」に変更ややり取りの履歴を表示します。どの表示からでも直接開けるようにし、「概要」を読んでからでなければ「タスク」を開けない構成にはしません。それぞれを独立して利用できることが、このまとまりに意味を与えます。

同じ列に「作成」「レビュー」「公開」を加えるのは避けます。これらは表示の選択肢ではなく、操作や作業の段階です。レビューが終わらないと公開できないのであれば、その順序を伝える必要があります。タブのように見せると自由に切り替えられる印象になり、先へ進めない理由を隠してしまいます。

プロジェクト名、アクセス設定、簡潔なステータスなど、共通の情報はタブの上にまとめます。各表示だけに関係する操作は、対応するパネル内に置きます。「タスクを追加」は「タスク」の中に置き、プロジェクト名の横には置きません。そこにあると「概要」や「アクティビティ」からも使える操作に見えるためです。役割を分けることで、タブの列に移動と命令が混在するのを防げます。

タブで分けると、選んでいない内容は見えなくなります。プロジェクトの締め切りと各タスクの期限を比較する必要があるなら、締め切りをタスク一覧の近くにも表示するか、横に概要を添えます。日付を覚えるために「概要」と「タスク」を何度も往復させるのは、比較しやすい設計とはいえません。

装飾より先に、選択中の表示を明確にする

項目名は、開くと何が表示されるかを予測できる言葉にします。「管理」より「タスク」のほうが具体的です。「管理」では、メンバー、請求、設定も含むように見えます。列全体で表現の形と具体性を揃えましょう。「概要」「タスク」「アクティビティ」は並列ですが、「概要」「タスクを管理」「その他すべて」では粒度が揃いません。

選択中のタブと表示領域のつながりを示します。下線、塗り、境界線などを使い、ホバーしても消えず、わずかな色の違いだけに頼らない手掛かりを用意します。選択されていないタブも読める状態を保ちましょう。未選択は、操作できないという意味ではありません。

「タスク」の横に件数を表示するなら、その数が何を意味するか決めます。「12」は全件なのか、未完了の件数なのか、自分に割り当てられた件数なのか、数字だけでは分かりません。この例ではタブにバッジを付けず、パネル内に「未完了のタスク：12件」と表示します。どの表示を開くかの判断に役立つ場合にだけバッジを追加し、見た目を揃えるためにすべてのタブへ数字を付けることは避けます。

キーボードフォーカスと選択状態を分ける

W3Cのタブパターン（英語）では、フォーカスの移動とパネルの切り替えを区別しています。横並びのタブでは左右の矢印キーで移動します。手動で切り替える方式では、EnterまたはSpaceでフォーカス中のタブを選択します。自動切り替えは、パネルをほぼ待たずに表示できる場合に適しています。読み込みに時間がかかると、タブ間を移動するだけでも待ちが生じるためです。実装では、選択中のタブにaria-selected="true"を設定し、各タブからaria-controlsで対応するパネルを示します。パネルの名前は対応するタブと関連付けます。こうした関係は、見た目と実装の両方で定義します。

このワークスペースでは、「アクティビティ」に追加情報の読み込みが発生するため、手動切り替えを選びます。「タスク」を表示したまま、キーボードのフォーカスだけが「アクティビティ」へ移った場面を考えてください。「タスク」の選択表示と内容はそのまま残し、「アクティビティ」には別のフォーカス枠を付けます。確定操作をして初めてパネルが切り替わります。両方を同じ紫色の下線で示すと、現在開いているものと、次に開けるものを見分けられません。

「タスクが選択中、アクティビティにフォーカス」という組み合わせを、明示的に描きます。さらに、確定後の「アクティビティが選択中で、フォーカスもある」状態も用意します。「アクティブ」という一つのコンポーネント状態だけでは、この違いを説明できません。明るいテーマと暗いテーマの両方に対応する製品なら、同じ操作ルールを保ったまま、それぞれで区別できるかを確認します。

読み込みとエラーは、選んだ表示の中で伝える

「アクティビティ」を確定したら、すぐに選択表示を切り替え、パネル内に読み込み中の状態を示します。「アクティビティ」が選ばれているのに「タスク」の表が残っていると、項目名と内容が一致しません。処理中もプロジェクトのヘッダーとタブ列は利用できるようにし、別の表示へ移れる余地を残します。

読み込み中のパネルは、切り替え前の内容と大きく変わらない作業領域を確保します。小さなスピナーだけに置き換えると、領域が縮んで周囲の操作位置が動くことがあります。逆に、大きすぎるスケルトンは、実際には現れない行まで期待させます。この例なら、履歴の簡潔なプレースホルダーと「アクティビティを読み込み中」という短い案内で十分です。

リクエストが失敗した場合は、「アクティビティ」の中で理由と再試行の操作を示します。「アクティビティはまだありません」はエラーメッセージではありません。読み込みに成功し、履歴がなかったという意味になるからです。権限によって表示できない場合も区別します。一つのパネルが使えないからといって、タブ列全体を無効にしないようにしましょう。

表示を変えても、作業は捨てない

タスクを追加し始めた人が、期限を確かめるために「概要」を開くとします。「タスク」に戻ったら、入力途中のタイトルと期日が復元されるべきです。表示の切り替えは、入力を破棄する意思表示ではありません。有用な絞り込み条件や、長い一覧のスクロール位置にも同じ考え方が当てはまります。

どの状態が現在のプロジェクトだけに属し、どれをより広い範囲で共有するのかを決めます。タスクの下書きは、そのプロジェクトの情報です。一覧の表示密度の好みは、複数のプロジェクトで共通にできるかもしれません。一方、あるプロジェクト専用のフィルターを別のプロジェクトへ引き継ぐと、作業が消えたように見えることがあります。「すべて記憶する」という一般論ではなく、この境界を操作仕様と一緒に記録します。

保持できない情報がある場合は、失われる前に制約を伝えます。「入力途中のタスクを破棄しますか？」のように結果が分かる確認文を使い、編集を続けるか、破棄するかを明確に選べるようにします。ただし、すべてのタブ切り替えで確認を出す必要はありません。未保存の内容がないのに警告を繰り返すと、本当に必要な場面でも読み飛ばされやすくなります。

プロジェクト内の表示を共有する場合は、選択中の表示を直接開くURLと、ブラウザの「戻る」の挙動を実装担当者と決めます。「アクティビティ」へのリンクなら、受け取った人が「概要」から探し直さずに開けることが重要です。タブを切り替えるたびに閲覧履歴へ追加するかは別の判断です。何気なく切り替えた経路を延々と戻るような動作にならないようにします。

狭い画面でも選択肢を使いやすくする

まず、実際に使う三つの項目名を、スマートフォンの幅と大きめの文字で確認します。意味のある名前を短くする前に、装飾アイコンや過剰な間隔を減らします。文字を小さくして無理に収めないことが大切です。三項目が一列に入っても、読めず押しにくければ役に立ちません。

翻訳後の長いラベルがはみ出す場合は、一列の横スクロールで選択肢を保つ方法があります。続きがあることを分かるようにし、選択中のタブを表示範囲に収め、最後の項目に進むためだけに細かなスワイプを要求しないようにします。短い英語の並びだけで判断せず、最も長くなるラベルで確認します。

有用な一列に収まらないほど表示が多いなら、分類を見直します。選択肢が一つのまとまりを作っている場合は、明確なラベルを付けた表示切り替え用のセレクターが、小さい画面で適していることもあります。現在の値を見える状態に保ち、選択後もデスクトップと同じプロジェクト状態を保持します。タブを何段にも折り返すと、選択中の項目とパネルの視覚的なつながりが弱まりやすくなります。

Pixsoでワークスペース全体を設計する

Pixsoで、同じプロジェクトの「概要」「タスク」「アクティビティ」を作成します。共通ヘッダーは同じ位置に保ち、関係するパネルと選択状態だけを変えます。「タスク」の表示には、未選択の「アクティビティ」にフォーカスがある状態も用意します。ホバーの表現から推測しなくても、両者の違いを確認できるようにしましょう。

レビューでは一つの具体的な課題を使います。タスクを追加し始め、「概要」で締め切りを確認してから戻り、下書きを完成させてもらいます。次に、遅い接続で「アクティビティ」を開きます。タブ列だけを眺めるより、入力の消失、選択表示の矛盾、レイアウトの移動を見つけやすくなります。デザインで意図した動作を伝えたうえで、実装された画面でもキーボード操作とパネルの関係を検証します。

引き継ぎでは、各表示の内容、選択が変わるタイミング、切り替えても残す情報、画面幅への対応を中心にまとめます。よいタブは、利用者の作業を毎回忘れる別々のページではなく、一つの場所に複数の便利な見方があると感じさせます。

Pixsoでタブのあるワークスペースを設計する →