FileMakerのデザイン、毎回いちから作っていませんか？
FileMakerでレイアウトを作っていると、「ボタンの色や文字サイズをそろえたい」「別ファイルでも同じデザインを使いたい」と感じることが多いと思います。ところが、そのたびに設定をやり直していると、時間もかかりますし、画面ごとに微妙に見た目が違ってしまう原因にもなります。
そんなときに役立つのが「カスタムスタイル」です。カスタムスタイルをうまく使えば、一度作ったデザインを、同じファイル内はもちろん、別ファイルにも再利用できるようになります。本稿では、FileMakerにおけるカスタムスタイルの基本的な作り方と、別ファイルへの再利用方法を、できるだけ専門用語を減らして解説します。
カスタムスタイルとは？基本の考え方
FileMakerには、ボタンやフィールド、テキストなどに適用できる「テーマ」と「スタイル」という仕組みがあります。
- テーマ：レイアウト全体のデザインセット
- スタイル：オブジェクト（フィールド、ボタンなど）の見た目をまとめた設定
標準で用意されているスタイルもありますが、自分の好みや会社のルールに合わせたデザインを「カスタムスタイル」として登録しておくと、後から何度でも使い回せます。
例えば、次のようなものをカスタムスタイルにしておくと便利です。
- メインボタン（濃い色、白文字、角丸）
- サブボタン（薄い色、細めの文字）
- 入力フィールド（枠線の色やフォーカス時の色を統一）
- 見出し用テキスト（太字・大きめ・色付き）
カスタムスタイル作成の手順
ここでは、ボタンを例にカスタムスタイルの作り方を説明します。フィールドやテキストでも基本の流れは同じです。
1. ベースになるオブジェクトを用意する
- レイアウトモードに切り替えます。
- 適当な場所にボタンを1つ作成します。
- フォント、文字サイズ、文字色、背景色、線の太さや角丸などを好みのデザインに調整します。
この時点では、まだスタイルとしては保存されていません。あくまで「そのボタンだけの見た目」の状態です。
2. 変更をスタイルとして保存する
- デザインを整えたボタンを選択した状態で、インスペクタ（右側のパネル）を開きます。
- 「外観」タブにある「スタイル」の欄を確認します。
- 現在のスタイル名の右側に、「※」（変更あり）や矢印のようなマークが表示されていれば、スタイルが変更されている合図です。
- スタイル名の右横にある下向き三角形のメニューを開き、「スタイルを更新」を選ぶと現在の見た目で既存スタイルを上書きできます。
- 新しいカスタムスタイルを作る場合は、同じメニューから「スタイルに名前を付けて保存」などを選び、わかりやすい名前を付けて保存します。
例えば「btn_main」「btn_sub」「fld_input」など、パッと見て用途がわかる名前にしておくと管理しやすくなります。
3. カスタムスタイルをほかのオブジェクトへ適用する
カスタムスタイルを作成すると、同じ種類のオブジェクト（ボタンならボタン、フィールドならフィールド）に簡単に適用できます。
- スタイルを適用したいボタンを選択します。
- インスペクタの「外観」タブで、「スタイル」のプルダウンを開きます。
- 先ほど作成したカスタムスタイル名を選びます。
これで、何個ボタンを増やしても、同じスタイルを選ぶだけでデザインを統一できます。
カスタムスタイルを後から修正するには
画面を作り進めるうちに、「ボタンの色を少し変えたい」「文字を少し大きくしたい」といった修正が出てくることも多いはずです。そんなときは、元のスタイルを更新することで、同じスタイルが割り当てられたオブジェクトを一括で変更できます。
- 任意のオブジェクト（変更したいカスタムスタイルが適用されているもの）を1つ選びます。
- 色やフォントなどの見た目を、希望のデザインになるよう変更します。
- インスペクタのスタイル名の横に「変更あり」のマークが表示されたら、スタイル名右側のメニューから「スタイルを更新」を選択します。
これで、同じカスタムスタイルを割り当てている他のボタンやフィールドも、一度に見た目が更新されます。画面ごとに修正して回る必要がないため、メンテナンスがとても楽になります。
別ファイルにカスタムスタイルを再利用する方法
カスタムスタイルは、基本的に「そのFileMakerファイルの中」に保存されます。別ファイルでも同じスタイルを使いたいときは、主に次のような方法があります。
1. レイアウトごとコピーする
もっとも手軽なのは、カスタムスタイルが設定されたレイアウトを、まるごと別ファイルにコピーする方法です。
- 元のファイルで、カスタムスタイルを使っているレイアウトを用意します。
- レイアウトモードでそのレイアウトを開きます。
- メニューバーの「レイアウト」メニューからレイアウトのコピーを実行するか、レイアウト管理画面から対象レイアウトを保存/読み込みでファイルに書き出します。
- 別のFileMakerファイルを開き、レイアウト管理画面からレイアウトを読み込みまたはペーストします。
レイアウトと一緒に、そのレイアウトで使っているカスタムスタイルも新しいファイルに持ち込まれます。以降は、そのファイル内の他のレイアウトでも同じスタイルが選択できるようになります。
2. オブジェクトをコピー＆ペーストする
レイアウト全体ではなく、ボタンやフィールドだけを移したい場合は、オブジェクト単位でコピー＆ペーストすることも可能です。
- 元のファイルのレイアウトモードで、カスタムスタイルが適用されたボタンやフィールドを選択します。
- コピーします（Ctrl+C / Command+C）。
- 別ファイルのレイアウトモードを開き、ペーストします。
このとき、必要なスタイルが新しいファイルにもコピーされるため、そのスタイルを使って他のオブジェクトを作成していくことができます。ただし、テーマが大きく異なる場合は、見た目が少し変わることがあるので注意してください。
運用のコツ：最初に「標準スタイル」を決めておく
カスタムスタイルを活かすには、「好きなときにバラバラに作る」のではなく、最初にざっくりとしたルールを決めておくと効果的です。
- メインボタンはこのスタイルだけ使う
- 入力フィールドの標準スタイルは1種類に絞る
- 画面タイトル用のテキストスタイルを決める
こうした「標準スタイル」を事前に作っておけば、プロジェクトの途中で人が入れ替わってもデザインのバラつきが少なくなります。また、カスタムスタイルの名前に「btn_」「fld_」「lbl_」などの接頭辞を付けて整理しておくと、増えてきたときにも探しやすくなります。
まとめ：カスタムスタイルで「あとから楽」を実現
FileMakerのカスタムスタイルは、作り始めの段階ではあまり意識されないことも多いですが、画面数が増えてくると効果がはっきり見えてきます。
- 一度作ったデザインを、何度でも簡単に再利用できる
- 後からデザインを統一・変更するのが格段に楽になる
- 別ファイルにも、レイアウトやオブジェクトのコピーで持ち出せる
最初に少し時間をかけて「標準となるカスタムスタイル」を整えておくことで、その後の開発とメンテナンスがとてもスムーズになります。まだ使いこなせていないと感じている方は、まずはボタンと入力フィールドだけでも、カスタムスタイル化してみることをおすすめします。