メインコンテンツへスキップ
見出し画像

Claris FileMaker カスタム App 専用 レイアウトテーマサンプルが無料公開!思わずみとれるデータベースを作ろう。

    FileMakerでデータベースを作るとき、データの入力や検索はもちろん大切ですが、見やすく使いやすいインターフェースも重要ですよね。せっかく作ったデータベースなのに、操作が複雑だったり、見づらいと、せっかくの機能も活かされません。

    「システムは作れても、デザインには自信がない・・・」そんなお悩みを抱えている人には必見!
    今回は、より優れたUIをもっと簡単に使えるようデフォルトのレイアウトテーマを拡張する「レイアウトテーマサンプル」についてご紹介します。

    レイアウトテーマサンプルとは?

    レイアウトテーマサンプルは、FileMaker Pro でカスタム App を作成する際に、デザインの基礎となるテンプレートです。フォント、色、レイアウトなど、デザインの要素が事前に設定されているため、これらをベースに自分だけのカスタム App を作り上げることができます。
    Claris FileMaker Proには、カスタムAppで使える17種類のテーマがあらかじめ用意されていますが、Clairsのホームページではさらに「ViVid」「Black」「Pastel」「デジタル庁デザインシステム」の「4種類」が用意されており、より優れたUIを簡単に使えるようになりました!

    画像
    https://content.claris.com/jpthemes

    これらのテーマを活用することで、デザインカラーやスタイルをカスタムするのもより簡単になり、短時間でプロフェッショナルな見た目のカスタム App を作成することが可能です。

    macOS、Windows、iOS/iPadOS の環境に合わせたフォント、サイズが用意されていますので、すぐに活用いただけるようになっています。

    画像
    このようにボタンバーやポップオーバー、タブパネル、ラジオボタンなど、テーマに合わせた素材が複数用意されています。
    画像
    ※レイアウトテーマサンプルを使用するためのカスタム App は Claris FileMaker Pro 19 以降のバージョンでのみご利用いただけます。

    実際にテーマを活用したレイアウトサンプルも見れるため、イメージをより膨らますこともできますね。

    レイアウトテーマサンプルのダウンロード方法

    上記のリンクから、無料でダウンロードできます。お名前・Email・組織・国を入力・選択して「送信」するだけですぐにダウンロードできますよ。

    画像
    「送信」をクリックするとすぐにカスタムAppがダウンロードされます!

    レイアウトテーマサンプルをカスタムAppへ移植する方法

    それでは、レイアウトサンプルテーマの移植方法を2パターンご紹介します。

    1.テーマをすべてインポートする方法
    2.必要なレイアウトだけ移植する方法

    1. テーマをすべてインポートする方法

     自身のカスタムAppへレイアウトテーマサンプルのテーマを全てインポートする方法です。

    FileMaker Proを立ち上げて、新規Appを作成します。(今回は「連絡先」Appを利用しました)

    Claris FileMaker

    レイアウトモードにし、右上の「テーマ変更」ボタンをクリックします。
    テーマ変更のポップアップが表示されたら、左下の「テーマのインポート」をクリックします。

    レイアウトテーマサンプル

    ダウンロードした「レイアウトテーマサンプルV1.fmp12」を選択します。するとレイアウトテーマサンプルに含まれるテーマの一覧が表示されますので、お好みのテーマにチェックを入れ、「OK」をクリックします。

    画像
    ここではVivid |macOSを選択しました。

    既存のレイアウトテーマの中に、カスタムとして今選択した【ViVid |macOS】のテーマが表示されましたので、「OK」してテーマの変更を確定させます。

    画像

    テーマがインポートした【ViVid|macOS】となり、レイアウトテーマサンプルにあったスタイルが全て利用できるようになりました!

    画像

    ただ、ご覧の通り、この方法だとすべてのスタイルをインポートしてしまうため、実際不要なスタイルも表示されてしまい、少し選択するのに手間がかかってしまいます。

    そんな時は、次にご紹介する「必要なスタイルだけ個別にコピー」する方法がおすすめです。

    2. 必要なレイアウトだけ移植する方法

    自分の使いたいレイアウトだけ移植して利用する方法です。
    今回は、スターターの連絡先Appを変更してデザインしていくので、「レイアウト管理」からテーマサンプル貼り付け用のレイアウトを作成しました。

    画像
    空のAppから始める場合は、直接レイアウトを貼り付けして作成してもOKです

    ご自身のカスタムAppとテーマサンプルのAppを2画面開き、どちらもレイアウトモードにして、必要なスタイルだけ白紙のレイアウトにコピーして貼り付けていきます。

    画像
    貼り付け用のレイアウトは、レイアウト設定が空の「ミニマリスト」というテーマを選んで作成するとスムーズです。

    貼り付けたばかりのオブジェクトは、「デフォルト」としてスタイルもコピーされていますが、横の▼マークが赤くなっています。
    ▼は設定されているテーマにカスタマイズが入ったことを意味します。右クリックし、「新規スタイルとして保存」を選択し、認識しやすい名前へ変更します。名前は、レイアウトテーマサンプルの名前をコピーしてきました。

    画像
    赤▼のままにしておくと、後々認識しにくくなるほか、パフォーマンス低下にも繋がります。

    同じく、テーマにも変更があった▼マークがついています。こちらは最初に「新規テーマとして保存」をクリックし、今回作成するテーマを新規作成します。

    画像

    名前は【Pink】としました。この後、新たにスタイルを追加した場合は、「テーマの変更を保存」とし、【Pink】のテーマに上書き保存を行なってください。

    画像

    すると、他のレイアウト画面でもこのように今作成したテーマを選択できるようになりました!

    画像

    必要最小限のスタイルのみが表示されるので、カスタムしやすいです。

    画像

    レイアウトサンプルテーマの活用方法は、こちらの動画でも詳しく紹介されておりますので、ぜひご覧ください。


    レイアウトテーマサンプルを活用するメリット

    • デザイン時間の短縮: プロフェッショナルなデザインを短時間で作成できます。

    • 統一感のあるデザイン: 複数のレイアウトで統一感のあるデザインを実現できます。

    • 初心者でも高品質なカスタム App が作成可能: デザインの知識がなくても、簡単に高品質なカスタム App を作成できます。

    まとめ

    Claris FileMaker カスタムApp専用レイアウトテーマサンプルは、カスタム App のデザインを効率化し、高品質なアプリを作成するための強力なツールです!ぜひ、これらのテーマを活用して、あなただけのオリジナルなカスタム App を作成してみてくださいね。


    弊社(株式会社Pepo)では、ファイルメーカーをはじめとしたノーコード/ローコード開発ツールを使って、中小企業の業務のシステム化をお手伝いしています。「なんとかしたいけど、どうしたらいいかわからない・・・」といった、ふんわりしたご相談でも、お気軽にお問い合わせください。

     
     
    新潟市西区にある 株式会社Pepo(ペポ)のブログです。 「FileMaker」業務システムの開発、オンライン事務代行サービス「Kuroco」を提供しています! システム開発と事務代行でのびのび働く環境づくりをお手伝いします✨ https://www.pepopepo.jp/

    あなたへのおすすめ