オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

【便利】スマートデザインで入力画面をマウスで簡単作成!

こんにちは。
リーデックス小川です。

2025年4月の最新バージョン (Ver.1.4.15.0) で、ドラッグ&ドロップで業務アプリの画面を作成できる「スマートデザイン」機能が新たに追加されました。

スマートデザイン機能を使うことで、プログラミングの知識がなくても画面レイアウトの設計や項目設定を直感的に行えますので、業務部門の担当者自らがフォームをカスタマイズし、自社の業務に合ったアプリを簡単に作成できるようになります。

本記事では、プリザンターのスマートデザイン機能について、その概要から具体的な操作手順、活用方法までわかりやすく解説します。

スマートデザイン機能とは

プリザンターで入力項目を設定するには、いままでは「テーブルの管理」→エディタで設定していました。

難しくはないのですが、直感的では図ったのですが、スマートデザインを使用すると、プリザンター上でユーザがドラッグ&ドロップの直感的な操作によって入力フォーム(画面)の変更ができるようになります。

image

公式サイトより

スマートデザインの利用条件と制限事項

スマートデザイン機能を利用するための主な条件と制限事項は次のとおりです。

  • 利用環境
    プリザンターのバージョンが1.4.15.0以上であること​。また、画面のテーマ設定が「cerulean」など第2世代UIのテーマの場合にのみ利用可能です。
  • 編集対象
    スマートデザインで編集できるのは各テーブルの「全般」タブ(標準の入力フォーム)内のみです。追加で作成したタブに配置した項目やコメント欄はスマートデザインの対象外となります。
  • 編集可能な設定範囲
    スマートデザイン画面では、フォーム上の項目レイアウト変更や「入力必須」「読取専用」「最大文字数」といった基本的な入力制限の設定のみを行えます​。

     


    それ以外の詳細な項目設定や特殊な制御を行いたい場合は、従来どおりテーブルの管理画面から設定してください​。

スマートデザインの基本的な操作手順

スマートデザインを使った画面編集の基本的な流れを確認しましょう。操作手順は次のとおりです​。

目的のサイト(アプリ)に移動し、画面左上のナビゲーションメニューから「管理」を開き、「スマートデザイン」をクリックします。

 

画面右側にスマートデザインの編集パネルがスライド表示されます。左ペインの項目一覧から必要な項目をドラッグ&ドロップで右ペインのフォームレイアウト領域に配置します。

 

フォーム上に配置した各項目は、項目名の変更や必須入力の指定など設定を変更できます。項目カードの編集ボタン(右上歯車)をクリックすると設定ダイアログが表示されます。

 

すべての項目配置と設定が完了したら、画面下部にある「更新」ボタンをクリックして変更を保存します。

左側に利用可能な項目リスト、右側に現在のフォームレイアウトが表示されています。すべての編集が終わったら、画面下部の「更新」ボタンで変更を保存します。

スマートデザインの主な機能(エディタ/一覧/フィルタ)

スマートデザインの編集パネルには、上記のとおり「エディタ」「一覧」「フィルタ」の3つのタブ(機能モード)が用意されています。それぞれを活用することで、入力フォームやデータの一覧表示を柔軟にカスタマイズできます​。以下では各機能モードのポイントを見ていきましょう。

エディタ

エディタ機能では、入力フォーム上に表示する項目をドラッグ&ドロップで自由に配置・調整できます​。表示項目の選択・並び替えや、各項目の基本設定(表示名、必須入力の指定など)をノーコードで変更可能です。例えばフォームに添付ファイルフィールドを追加したり、不要な項目を削除したりといった操作も直感的に行えます。

なお、Ver.1.4.15.0では、一覧やフォームと削除の挙動が異なり、入力フォームから項目を削除する場合は、削除したいカードの編集ボタン(歯車)より「削除」ボタンをクリックする必要があります。

一覧

一覧機能では、レコード一覧画面に表示される列(項目)をカスタマイズできます​。具体的には、一覧に表示したい項目だけを選択して並べ替えたり、不要な列を非表示にしたりできます。

例えば、案件管理アプリの一覧画面では「案件名」「担当者」「ステータス」のみを表示する、といった柔軟なレイアウトが可能です。

項目を削除する場合は、エディタと異なり、該当の項目をドラックして左側のエリアにドロップすることで削除ができます。

フィルタ

フィルタ機能では、一覧画面上部に表示する検索フィルタ項目を設定できます​。どの項目でレコードを絞り込めるようにするかを自由に選択・並べ替えできるため、ユーザは一覧データを効率的に検索できます。

例えば、先述の案件管理アプリで「担当者」と「進捗状態」をフィルタに追加しておけば、担当者や進捗状態別に案件をすばやく絞り込めます。

項目を削除する場合は、フィルタと同様に、該当の項目をドラックして左側のエリアにドロップすることで削除ができます。

まとめ

スマートデザイン機能は、プリザンターにおけるノーコード開発の幅をさらに広げる強力なツールです。ドラッグ&ドロップ中心の直感的な操作でフォーム設計や画面調整が行えるため、現場の担当者が自ら業務アプリを最適化しやすくなります。

もちろん、スマートデザインで対応できない詳細な設定や特殊なカスタマイズは、従来のテーブル管理画面から設定可能です。スマートデザイン機能と従来の設定機能を使い分けることで、プリザンターを用いた業務アプリ開発はより効率的かつ柔軟になります。

ぜひ最新バージョンのプリザンターでスマートデザイン機能を活用して、ノーコード開発による業務改善を体感してみてください。

弊社では、プリザンターの認定トレーナーとしてトレーニングを実施しています。プリザンターの基礎から応用まで幅広いラインナップを取り揃えていますので、プリザンター初心者はもちろんのこと、効率よくスキルアップしたい方にもオススメです!詳しくはこちらにありますので、気になった方はぜひご覧ください。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。