ボタンバーとポップオーバーで、画面をスッキリさせる
FileMakerでレイアウトを作り込んでいくと、「ボタンが増えすぎて見にくい」「詳細項目をどこに置けばいいか分からない」といった悩みが出てきます。
あれもこれも画面に出そうとすると、ユーザーがどこを押せばいいのか迷いやすくなり、結果として使いづらいシステムになってしまいます。
そこで役に立つのが「ボタンバー」と「ポップオーバー」を組み合わせたUIです。
ボタンバーで操作の入り口を分かりやすく揃え、ポップオーバーで必要なときだけ詳細情報や入力欄を表示することで、画面をスッキリさせつつ、操作もしやすくなります。
ボタンバーとは？ポップオーバーとは？
ボタンバーは、複数のボタンを横一列や縦一列にまとめて配置できるパーツです。タブメニューのように、「一覧」「詳細」「グラフ」などの機能を分かりやすく並べられます。デザインやサイズを一括でそろえられるので、画面の見た目も揃えやすいのが特徴です。
ポップオーバーは、ボタンなどをクリックしたときに、画面の上に小さなウィンドウのようなスペースを表示できるパーツです。
この中にフィールドやボタン、テキストなどを自由に配置できるので、
- 補足説明やヘルプ
- 詳細な入力項目
- 一時的に使う検索条件
などをコンパクトにまとめておくことができます。
ボタンバーとポップオーバーを組み合わせる考え方
ボタンバーとポップオーバーを組み合わせる基本的な考え方は、「メインの選択はボタンバー」「細かい操作や詳細はポップオーバー」に分けることです。
- ボタンバー：画面上で目立つ「メニュー」「モード切り替え」「大きなカテゴリ」
- ポップオーバー：その時だけ見せたい「補足情報」「詳細入力」「条件指定」
たとえば顧客画面で、ボタンバーには「基本情報」「連絡履歴」「売上」「設定」などのタブを用意し、
さらにそれぞれのタブ内で、細かい条件検索やメモ入力をポップオーバーにまとめる、といった使い分けができます。
ボタンバーを作成する手順
ここでは、レイアウト上部に「一覧」「詳細」「グラフ」という3つのタブ風メニューを作る例で流れを説明します。
- レイアウトモードに切り替えます。
- ツールバーから「ボタンバー」を選び、レイアウト上部にドラッグして配置します。
- インスペクタ内の「ボタンバー設定」パネルで、必要なボタンの数（今回は3つ）を指定します。
- 各ボタンに名前をつけます（例：「一覧」「詳細」「グラフ」）。
- 各ボタンに実行させたいスクリプトやスクリプトステップを割り当てます。
例：
・「一覧」…リスト表示レイアウトへ切り替える（スクリプトや「レイアウト切り替え」ステップを指定）
・「詳細」…詳細表示レイアウトへ切り替える
・「グラフ」…グラフ用レイアウトへ切り替える - 表示スタイル（塗りつぶし色や文字色、アクティブ時の色など）を設定して、タブメニューのように見えるよう整えます。
ポイントは「アクティブなボタンが一目で分かるデザイン」にすることです。
現在表示中のレイアウトに対応するボタンだけ、色を濃くする・下線を付けるなど工夫すると、ユーザーが迷いにくくなります。
ポップオーバーを配置して詳細情報を出し入れする
次に、ボタンバーの近くに「詳細検索」などの補助機能をポップオーバーで用意する手順です。
- レイアウトモードで、ツールバーから「ポップオーバーボタン」を選びます。
- ボタンバーの右側など、目立ちすぎない位置に配置します。
- ボタンのラベルを「詳細検索」や「条件指定」など分かりやすい名前にします。
- 配置したポップオーバーボタンをダブルクリックし、ポップオーバーの中身を編集します。
- 表示されたポップオーバー領域の中に、検索条件用のフィールドや「検索開始」ボタンなどを配置します。
- 必要に応じて「キャンセル」ボタンや「条件クリア」ボタンも配置しておくと、ユーザーに親切です。
こうしておくと、通常は画面をスッキリ保ちつつ、必要なときだけ詳細条件を表示して検索できるようになります。
「いつもは使わないけれど、たまに必要になる操作」は、ポップオーバーにまとめると使い勝手がよくなります。
ボタンバーとポップオーバー連携の具体例
一歩進んだ使い方として、「ボタンバーのタブごとに、ポップオーバーの内容も変える」という連携があります。
- 「一覧」タブが有効なとき：ポップオーバー内には「絞り込み条件」
- 「詳細」タブが有効なとき：ポップオーバー内には「補足メモ」「履歴追加フォーム」
- 「グラフ」タブが有効なとき：ポップオーバー内には「表示期間の指定」「グラフ種類の選択」
この場合、タブ切り替え用のスクリプトの中で、
- グローバル変数やグローバルフィールドに「現在のタブ名」を保存
- 条件付き書式やオブジェクトの表示条件で、ポップオーバー内に表示するオブジェクトを出し分け
といった工夫をします。
少しステップは増えますが、ユーザーの視点から見ると「今見ているタブに合わせた補助機能が出てくる」自然な画面になります。
迷わないUIにするためのコツ
ボタンバーとポップオーバーを使いこなすうえでのコツをいくつかまとめます。
- ボタンの数を絞る：ボタンバーに並べるボタンは、多くても5つ程度に抑えると迷いにくくなります。
- 言葉を統一する：同じ意味で別の言葉を使わないようにし、「一覧」はどの画面でも「一覧」で揃えるなど一貫性を意識します。
- ポップオーバーは必要最小限に：1つのポップオーバーに詰め込みすぎると、かえって分かりにくくなります。役割ごとに分けるのも有効です。
- キーボード操作も考える：可能であれば、ポップオーバー内の初期カーソル位置やタブ順も調整しておくと、入力がスムーズになります。
「この画面で、ユーザーは何を一番よく使うか？」を意識して、よく使う操作はボタンバーで一番目立つ場所に、時々使う操作はポップオーバーに、という分け方をするとバランスが取りやすくなります。
まとめ：スッキリした画面は使いやすさにつながる
ボタンバーとポップオーバーをうまく連携させると、情報量が多いレイアウトでも「必要なときに必要なものだけ見せる」画面をつくることができます。
結果として、ユーザーは迷わず操作でき、入力ミスも減り、システム全体の印象も大きく改善します。
最初から完璧を目指す必要はありません。まずはよく使うレイアウトの上部にボタンバーを配置し、補助的な機能をポップオーバーに移してみるところから始めてみてください。
少しずつ調整を重ねることで、自分の業務に合った使いやすいUIへと育てていくことができます。