FileMakerでレイアウトを作っていると、「ウインドウサイズを変えたらレイアウトが崩れた」「ポータルの下に空白ができる」「ボタンが端に追従してほしいのに動かない」といった悩みがよく出てきます。これらの多くは、オブジェクトの「自動サイズ変更(アンカー)」の設定で解決できます。
この記事では、難しい専門用語はできるだけ避けながら、FileMakerの自動サイズ変更アンカーを使って、画面サイズが変わっても見やすいレイアウトを作る方法を紹介します。
自動伸縮アンカーとは?まずはイメージをつかもう
自動サイズ変更アンカーは、レイアウトオブジェクト(フィールドやボタン、ポータルなど)を「レイアウトのどの端に固定するか」「ウインドウが広がったときに一緒に伸びるか」を指定する機能です。
- 左にアンカー:ウインドウの左端との距離を固定する
- 右にアンカー:ウインドウの右端との距離を固定する
- 上にアンカー:ウインドウの上端との距離を固定する
- 下にアンカー:ウインドウの下端との距離を固定する
ポイントは、「左右(または上下)両方にアンカーすると、その方向にオブジェクトが伸び縮みする」ということです。例えば、左と右の両方にアンカーを付けると、ウインドウの横幅が変わった時に、フィールドやポータルが横に広がったり狭まったりします。
自動伸縮アンカーの基本的な設定手順
FileMakerでアンカーを設定する手順はシンプルです。
- レイアウトモードに切り替える
- 自動サイズ変更を設定したいオブジェクト(フィールド、ボタン、ポータルなど)を選択する
- インスペクタを開き、「位置」タブを表示する
- 「自動サイズ変更」と表示されている部分で、上下左右のチェックボックス(またはアイコン)を設定する
バージョンによって表示の違いはありますが、「上下左右のどこに固定するか」を選ぶ考え方は変わりません。アイコン上で、くっつけたい辺をオンにするイメージで設定すると分かりやすいです。
よく使う基本パターン3つ
実務でよく使う、アンカー設定の「型」を3つ紹介します。
1. 左上固定(最もシンプルなパターン)
テキストラベルやアイコンなど、位置を動かしたくないオブジェクトは「左+上」だけにアンカーを付けます。
- 左:オン
- 上:オン
- 右:オフ
- 下:オフ
これにより、ウインドウサイズが変わっても、オブジェクトは同じ位置に見えます。
2. 右寄せボタン(ウインドウの右端に追従)
「閉じる」「印刷」など、画面右上に配置したボタンを、ウインドウの右端に追従させたい場合の設定です。
- 上:オン
- 右:オン
- 左:オフ
- 下:オフ
ウインドウを横に広げると、ボタンは右端に付いたまま移動します。横幅自体は変えず、位置だけを動かしたいときに便利です。
3. 画面いっぱいに広がるメインエリア
検索結果のポータルやメモ用のテキストエリアなど、「画面が大きいときは広く見せたい」オブジェクトには、左右(必要なら上下両方)にアンカーを設定します。
- 左:オン
- 右:オン
- 上:オン(多くの場合オン)
- 下:オン(ウインドウ下端まで広げたい場合)
左右(または上下)両方にアンカーすると、その方向にオブジェクトの大きさが伸び縮みするのがポイントです。メインの一覧エリアをこれで設定しておくと、大画面でも無駄な余白が少なくなります。
よくある失敗パターンと避けるコツ
自動サイズ変更アンカーは便利な反面、設定を間違えるとレイアウトが崩れる原因にもなります。ありがちな失敗と、その対策を紹介します。
要素が重なってしまう
複数のオブジェクトを「両側アンカー」で伸び縮みさせると、ウインドウを小さくしたときに互いに重なってしまうことがあります。
対策:
- 同じ行で横に並ぶオブジェクトは、「伸びるのは1つだけ」にする
- 重要なボタン類は「片側アンカー(位置だけ追従)」にとどめる
- 最小ウインドウサイズを意識してレイアウトする
余白が不自然に広がる
ラベルやボタンに左右両方のアンカーを付けると、横幅が必要以上に伸びてしまい、見た目が悪くなることがあります。
対策:
- 文字数が変わらないラベルやボタンは「固定サイズ」にする
- 伸ばしたいのは「入力フィールド」や「ポータル」など、内容が可変のものに限定する
レイアウト全体を設計する時の考え方
アンカー設定を個別に考えすぎると、全体のバランスが取りにくくなります。以下のように「ゾーン」で考えると整理しやすくなります。
- ヘッダ領域:ロゴやタイトルは左上固定、メニューやボタンは右上固定
- メイン領域:検索条件エリアは左上固定+必要なら右アンカー、一覧ポータルは左右(場合によっては上下)両方アンカー
- フッタ領域:ページ情報やボタンを下に固定(下+左右のいずれか)
まず「画面サイズに応じて広がってほしいエリア」を決め、そこを両側アンカーにします。その他の部品は、広がるエリアにくっつけるのか、一定の距離を保つのか、という観点でアンカーを決めるとスムーズです。
試しながら調整するのがいちばんの近道
自動サイズ変更アンカーは、紙に印刷するレイアウトではあまり活躍しませんが、日常的に使う画面レイアウトでは非常に重要な機能です。最初から完璧を目指すよりも、レイアウトモードとブラウズモードを行き来しながら、「窓を広げたり狭めたりして挙動を確認する」ことが上達の近道です。
ポイントをまとめると、
- 動かしたくないものは片側(+上)の固定
- 画面サイズに合わせて伸ばしたい部分は両側アンカー
- 同じ行では「伸びるオブジェクトは1つ」にする
この3つを意識するだけでも、レイアウトの使い勝手が大きく変わります。ぜひ、既存のレイアウトにも自動サイズ変更アンカーを試し、ユーザーにとって見やすく、使いやすい画面に育てていってください。