目次
- はじめに
- レイアウトテーマとは
- デジタル庁デザインシステムとは
1. はじめに
カスタム App を利用するユーザにとって UI（ユーザインターフェース - Claris FileMaker ではレイアウトがそれです）はいちばん目にするものであり、カスタム App の使い勝手も左右する重要なものです。といっても、開発者の方々はデザインの専門家ばかりではないので使い勝手の良い UI をどのように作ればよいか、頭を悩ますところではないでしょうか？
そこで、より優れた UI をもっと簡単に作っていただけるよう、デフォルトのレイアウトテーマを拡張するレイアウトテーマサンプルの配布を開始しました！
今回ご提供するのは、2024 年 5 月に配布開始したレイアウトテーマサンプルに、デジタル庁が提供しているデザインアセット「デジタル庁デザインシステム」をベースに作成したレイアウトテーマサンプルを追加したものです。これで従来のものと合わせて 4 つのテーマサンプルがご利用いただけるようになりました。
2. レイアウトテーマとは
レイアウトテーマとは、レイアウトで使用する色、オブジェクト、パート、背景の属性、フォントなどがあらかじめ定義されたスタイルのコレクションです。レイアウトを新規作成すると、デフォルトのテーマが適用されますが、テーマはレイアウトモードでいつでも変更することができます。デフォルトで用意されている、もしくは自身で作成したテーマを用いることでカスタム App 全体で統一感のあるレイアウトを作成することができます。
ちなみに、デフォルトで用意されているレイアウトテーマの中で、名前の最後に「タッチ」とあるものは指で操作する iOS、iPadOS 向け App である Claris FileMaker Go 上での利用を想定したものです。もちろん、指で操作しない場合でもフォントサイズが大きく設定されているので目に優しいデザインで作ることができます。
レイアウトテーマを変更する
FileMaker クライアントの利用環境には、macOS、Windows、iOS、iPadOS、Web ブラウザと選択肢が多い分、開発者にとっては熟考が必要なこともあります。例えば、macOS ではヒラギノというフォントがデフォルトでインストールされていますが、これは Windows のデフォルト環境にはありません。ヒラギノフォントで作成したレイアウトを Windows 環境で開くと代替フォントに置き換わってしまうため、開発者が意図しない位置ズレやフィールド領域の過不足が生じてしまう可能性があります。どちらの環境でも利用できるフォントを用意することで影響を抑えることができますが、そうなるとインストールの手間や費用も発生してしまいます。
レイアウトテーマサンプルでは macOS、Windows、iOS/iPadOS の環境に合わせたフォント、サイズが用意されていますので、すぐに活用いただけるようになっています。
レイアウトテーマサンプルはこちらからダウンロードできます。
ぜひテーマサンプルを活用いただき、カスタム App のデザインにお役立てください。
なおテーマサンプルの詳しい使い方は、作成を担当した合同会社イボルブの八木氏による録画セミナーをご覧ください。
3. デジタル庁デザインシステムとは
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化する UI コンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。
デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
出典：デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/
このような考えの下で作られたデザインのため、今回追加されたテーマはこれまでの 3 テーマとも方向性が異なるデザインになっています。用途やお好みに合わせてご自分のカスタム App でご利用ください。
デジタル庁デザインシステムのレイアウト例
デジタル庁デザインシステムウェブサイトではイラストレーション・アイコン素材の配布も行っています。アイコンもカスタム App のインターフェースを構成する重要な要素になるのでこちらもチェックしてみてはいかがでしょうか。
他にも、Claris がご提供しているアイコン素材もありますのであわせてご利用ください！
Claris FileMaker カスタムApp 専用 アイコン & ピクトグラム 素材