UIが整う！FileMakerグリッド設計の実践ガイド

2025年5月9日｜カテゴリ：開発Tips

📐 グリッドとは？

グリッドとは、UI設計でオブジェクトをきれいに配置するための「見えない基準線」です。FileMakerには明示的なグリッドサイズ設定はありませんが、整った画面を作るために自分でサイズや間隔のルールを設けることが重要です。

⚙️ スナップ機能の活用

• レイアウトモードで 表示 → スナップ先 → グリッド を有効にする
• ドラッグ移動・リサイズが内蔵グリッドに吸着されるようになります
• ※ FileMakerではグリッド間隔自体のカスタマイズはできません

🧮 インスペクタで数値を揃える

オブジェクトを選択した状態で、インスペクタの「位置」タブを開き、以下のような数値を意識して整えましょう：

• 幅・高さ・X・Y を 8 の倍数（例：16、32、48）に統一
• 横並びのフィールドの高さ・間隔も統一
• 上下余白も8〜16ptを目安にする

🎨 スタイルとテーマを使って統一感を出す

• ラベル・フィールド・ボタンに共通スタイルを設定し再利用
• 「ボディ用ラベル」「入力用フィールド」など、スタイル名に役割を付けると管理しやすい
• テーマはなるべく既存の公式テーマ（例：Enlightened、Minimalist）をベースに

📏 推奨サイズと余白例

📌 まとめ

見やすく整ったUIは、グリッドベースの意識から生まれます。開発チーム内でサイズやスタイルのルールを共有し、ブレない設計を心がけましょう。

← ブログ一覧に戻る