FileMakerでボタンを使うとき、「もっとアイコンをきれいに表示したい」「解像度の違う端末でもくっきり見せたい」と感じたことはないでしょうか。そんなときに役立つのが、SVGアイコンです。
この記事では、FileMakerのボタンにSVGアイコンを適用する基本と、実際の操作手順を、専門用語をできるだけ避けながら分かりやすく解説します。
SVGアイコンを使うメリットとは？
まずは、なぜSVGアイコンを使うのかを整理しておきます。
- サイズを変えても荒くならない
SVGは「拡大・縮小してもギザギザにならない」画像形式です。大きいボタンから小さいボタンまで、同じアイコンをきれいに表示できます。 - 色をFileMaker側で簡単に変えられる
ボタンのアクティブ・非アクティブ、マウスオーバー時など、状態ごとに色を変えやすくなります。 - デザイン変更に強い
システムのテーマカラーが変わっても、SVGなら一括で色を調整しやすく、メンテナンス性が高まります。
「画質がきれい」「色替えが簡単」という2つのポイントだけでも、SVGアイコンを使う価値は十分あります。
FileMakerで使えるSVGアイコンの基本ルール
FileMakerでSVGアイコンを正しく扱うには、いくつかの基本ルールがあります。ここを押さえておかないと、うまく色変更ができなかったり、ボタンに登録できなかったりします。
- パス（線と面）で描かれていること
写真のような画像や、SVGの中にPNG画像が埋め込まれているものはNGです。線や形だけで作られているシンプルなアイコンを使いましょう。 - 塗りの色は「currentColor」を使う
SVGの塗り（fill）を「黒（#000000）」など固定色にせず、「currentColor」という指定にしておくと、FileMakerがボタンのテーマ色・文字色などに合わせて自動で色を変えてくれます。 - 線（ストローク）もできるだけ「currentColor」に
輪郭線の色も「currentColor」にしておくと、塗りと一緒に色が変わります。
難しく聞こえますが、「とにかく塗りや線の色はcurrentColorにしておく」と覚えておくと良いでしょう。
SVGアイコンを用意する方法
SVGアイコンは、以下のような方法で用意できます。
- アイコン素材サイトからダウンロード
「SVG free icon」などで検索すると、無料のSVGアイコンがたくさん見つかります。利用規約（ライセンス）は必ず確認してください。 - イラストツールで自作する
Adobe Illustrator、Inkscape（無料）、Affinity Designerなどのツールで、自分でアイコンを作ってSVGとして書き出す方法です。
ダウンロードしたSVGは、そのままだとFileMaker向きになっていないことが多いので、色指定の部分だけ少し調整します。
SVGファイルをFileMaker向けに調整する
SVGアイコンをFileMakerで使いやすくするための、代表的な調整方法を紹介します。
ここでは、専用ツールを使わずに、メモ帳などのテキストエディタで直接SVGファイルを開いて編集する前提で説明します。
- SVGファイルをテキストエディタで開く
ダウンロードした「〇〇.svg」を右クリックして、「プログラムから開く」→「メモ帳」などを選びます。 - fill（塗り）やstroke（線）の指定を探す
ファイルの中に、例えば
fill="#000000"やstroke="#333333"のような記述があります。 - 色指定を「currentColor」に変更する
見つけた色指定を、次のように書き換えます。
fill="currentColor"
stroke="currentColor"
という形に揃えておくと、FileMaker側で自由に色を変えられます。 - 不要な情報を減らす
高度なアニメーションやフィルター効果など、複雑な記述があると、正しく表示されない場合があります。シンプルなパスと色指定だけの状態が理想です。 - 上書き保存する
編集が終わったら、同じファイル名で上書き保存します。
ここまでできれば、FileMakerに取り込めるSVGアイコンとしてほぼ準備完了です。
FileMakerのボタンにSVGアイコンを適用する手順
次に、実際にFileMakerでボタンにSVGアイコンを設定する流れを見ていきます。
- レイアウトモードに切り替える
対象のレイアウトを表示し、「表示」メニューから「レイアウトモード」に切り替えます。 - ボタンまたはボタンバーを作成
ステータスツールバー（またはレイアウトツールバー）から「ボタン」または「ボタンバー」を選択し、配置したい位置にドラッグして作成します。 - ボタンの設定ダイアログを開く
作ったボタンをダブルクリックして、ボタン設定のダイアログを表示します。 - アイコンの種類を「カスタム」に変更
ボタンにテキストやアイコンを設定する項目の中で、「アイコン」のところを探し、「カスタム」または「カスタムアイコン」を選びます。 - SVGアイコンを読み込む
「＋」や「追加」ボタンから、先ほど調整したSVGファイルを選択して読み込みます。読み込まれたSVGがボタンに表示されれば成功です。 - サイズや位置を調整する
ボタン設定の中で、アイコンの大きさや、テキストとの位置関係（左・右・上・下）を調整します。
この手順を一度覚えてしまえば、別のSVGアイコンも同じ流れでどんどん追加できます。
色や状態ごとの見え方を整える
SVGアイコンの魅力を活かすには、「ボタンの状態ごとに色を変える」設定も合わせて行うと便利です。
- 通常・ホバー・押下・無効の各状態を確認
ボタンの外観設定で、状態ごとの色（文字色や塗り色）を設定できます。SVGが「currentColor」になっていれば、この色変更がそのままアイコンにも反映されます。 - レイアウトテーマとの統一感を意識する
ベースのテーマカラーに合わせてアイコン色を決めると、画面全体の印象がまとまりやすくなります。
まずは「通常時」「マウスオーバー時」の2つだけでも色を変えてみると、操作感がぐっと良くなります。
運用時のちょっとしたコツ
最後に、実務でSVGアイコンを運用するときに役立つポイントをいくつか挙げておきます。
- SVGファイルはフォルダで整理する
プロジェクトごとに「icons」フォルダを作り、アイコン名も「btn-save.svg」「btn-search.svg」のように用途が分かる名前にすると管理しやすくなります。 - 1つのSVGを使い回す
色違いのアイコンが必要になっても、SVGファイル自体は1つにしておき、FileMaker側の色設定だけ変える方がメンテナンスが楽です。 - 元のSVGも必ず保管しておく
見た目を変更したくなったときのために、編集前のオリジナルSVGも一緒に保存しておくと安心です。
SVGアイコンの基本さえ押さえておけば、ボタンの見た目をすっきり整えつつ、将来的なデザイン変更にも柔軟に対応できるようになります。最初は1つのボタンからで構わないので、ぜひ試してみてください。