PCの画面サイズにあわせたテンプレートフォームを準備する(単票形式)
業務管理システムの良し悪しは、データの正確さはもちろんのこと、毎日向き合う「画面の心地よさ」で決まると言っても過言ではありません。
「ボタンの位置がバラバラで、どこを押せばいいか迷う」
「画面からはみ出してしまい、何度もスクロールするのが苦痛」
「新しいフォームを作るたびに、一からデザインを設定するのが面倒」
そんな現場の「地味に不便」を解消し、誰が使っても、どのPCで開いても、直感的に操作できるシステムを目指す。そのための第一歩が、当サイトが全画面で採用している「標準テンプレートフォーム」の作成です。
本ページでは、実務で培った「最小画面への配慮」と「操作性の統一」を形にした、テンプレート設計を公開します。一度この「型」を作ってしまえば、その後の開発スピードとシステムの完成度は劇的に向上します。
1. 操作の迷いをゼロにする「インターフェースの統一」
-
悩み： ボタンの位置がバラバラで、どこを押せばいいか迷う。
-
アンサー： 全画面で「タイトルの位置」「実行ボタンの配置」を固定します。一度操作を覚えれば、新しい画面を開いても**「次に何をすべきか」が直感的にわかる**ようになります。
2. 指先のストレスをなくす「スクロール不要の1画面設計」
-
悩み： 画面からはみ出してしまい、何度もスクロールするのが苦痛。
-
アンサー： 現場で使われる最小のPCサイズを基準に、**「一目ですべての情報が見渡せる」**専用枠を定義します。無駄な視線移動とマウス操作を徹底的に排除します。
3. 開発スピードを加速させる「デザイン設定の資産化」
-
悩み： 新しいフォームを作るたびに、一からデザインを設定するのが面倒。
-
アンサー： プロパティシートの細かな数値設定や、フォントの統一を「ひな形」に集約。あとはコピーして中身を入れ替えるだけで、プロ品質の画面が次々と完成します。
テンプレートフォーム(単票形式)全画面表示のイメージ
テンプレートフォームを使って主に、新規登録画面や編集画面、照会画面に使用します
PC画面サイズにあわせて全画面で表示させた時のイメージ
実際のテンプレートフォーム
主な設定
・ヘッダー・フッターの配置
・ヘッダー部にボタン設置
・詳細部に四角(ボックス)の設置
・フォーム全体のプロパティ設定
テンプレートフォームから展開した完成フォーム例
テンプレートフォーム(単票)の作り方
- 作成 → フォームデザイン
- タイトル → フォームヘッダー・フォームフッター・タイトルの配置
- フッター部に ボタン を配置
- 詳細部に 四角(ボックス) を設置
- フォームのプロパティ設定
1️⃣ 作成→フォームデザイン
手順
① タブバーの 作成 をクリック
② エボンの フォームデザイン をクリック
作成されるデフォルトフォームデザイン
2️⃣ タイトル → フォームヘッダー・フォームフッター・タイトルの配置
手順
① タブバーの フォームデザイン をクリック
② リボンの タイトル をクリック
フォームヘッダーとフッターが表示される
同時にフォームヘッダーに「タイトル」が設置される
「タイトル」は「ロゴ」と一緒に配置されるので「ロゴ」は削除しておく
③「タイトル」左端のマークをクリックすると「ロゴ」と「タイトル」が範囲指定される
④ タブバーから「配置」をクリック。 リボン が配置メニューになる
⑤「レイアウトの削除」をクリックすると「ロゴ」が消えて「タイトル」だけが残る
タイトルを整える
| プロパティシートの変更箇所（※マイルールなので各自決めてください） |
|
| 名前 | タイトル |
| 標題 | タイトル |
| 幅 | 10cm |
| 高さ | 0.7cm |
| 上位置 | 0.15cm |
| 左位置 | 0.5cm |
| フォント名 | メイリオ |
| フォントサイズ | 12 |
| 上余白 | 0.05cm |
3️⃣ ボタンの配置
手順
① タブバーの フォームデザイン をクリック
② リボンの ボタン をクリック
③ フッター部に適度なサイズで ボタン を配置する
④ ボタンウィザードが起動する。キャンセルをクリックしてウィザードは閉じる
ボタン を整える
| プロパティシートの変更箇所（※マイルールなので各自決めてください） | |
| 標題 | 「空欄」にする |
| 幅 | 2.5cm |
| 高さ | 0.7cm |
| 上位置 | 0.15cm |
| 左位置 | 0.5cm |
| フォント名 | メイリオ |
| フォントサイズ | 9 |
数値設定しても自動補正されるので端数が違うがそのままでOK
フッター部に ボタン を３～４個設置しておく
※ひな形フォームから作成するフォームによってボタンは加減する
ボタンをコピペする（３～４回繰り返す）
ボタンが横並びで配置変更しておく
4️⃣ 詳細部に四角形(ボックス)を設置
詳細部に四角形(ボックス)を配置することで四角形内にコントロール類を設置すればPC画面にあわせたサイズに収まることになる
手順
① タブバーの フォームデザイン をクリック
② リボンの 四角形 をクリック
③ 詳細部に 適度なサイズで 四角形(ボックス)を設置する
四角形(ボックス)のサイズを設定する
※社内で使用されるパソコンの小さい画面サイズに合わせあるようにしました
仮にヘッダーとフッターの高さを1cmに設定しておく
プロパティシートの 幅・高さ・上位置・左位置の設定する（下記の注意点に留意する）
● 四角形(ボックス)の調整はデザインビューとフォームビューを行ったり来たりして最大画面でスクロールバーが表示されないサイズにあわせます。
● 四角形(ボックス)を小さくした場合は フォームの幅 と 詳細の高さ を四角サイズにあわせることを忘れない。
● 本件は13.3インチ、解像度1920X1080のPCでフォームヘッダーとフッターの高さ1cmで四角サイズは幅40.2cmX高さ16.2cmでした。
なぜ四角形を置くのか？
詳細セクションに配置した「四角形（ボックス）」が、単なるデザイン枠ではなく、「レイアウトの境界線」にあたります。
「この四角い枠内に収まるようにコントロールを配置すれば、PC画面上でスクロールバーが発生しない」ための指標になります。
フォームの保存とマクロの作成
基本的なフォームプロパティを設定しておく
レコードセレクタ いいえ
移動ボタン いいえ
コントロールボックス いいえ
閉じるボタン いいえ
追加の許可 いいえ
閉じるボタンのプロパティ設定
閉じるボタンのプロパティシートを開く
名前 閉じる
標題 閉じる
クリック時 ･･･ ボタンを押してマクロビルダーを選択してOKボタンを押す
カレントフォームを閉じるマクロを作成して閉じるボタンに組み込みます
新しいアクションの追加 から ウインドウを閉じる を選択 項目はそのままで
下段に新しいアクションの追加 から マクロの中止 を選択
X でマクロビルダーを終了させる（ポップアップでプロパティを更新しますか？ はい）
クリック時 に ［埋め込みマクロ］が設置されます
名前を付けてフォームを保存します
※本件では 『テンプレ単票』 として保存しています
テンプレートフォームをコピペして使用する方法
手順
本件のシステムを例題に紹介します
- 『テンプレ単票』フォームをコピーして『FXXXXXXX』（仮）フォームと名前をつけて貼り付ける
- 『FXXXXXXX』（仮）をデザインビューで開いてフォームのプロパティシートに 標題を設定する（インデックスに表示されるフォーム名）
- タイトルや詳細部にコントロールを配置する
- フォームフッターに設置してある空のボタンに機能を埋め込む（不要な場合は削除する）
まとめ：操作性の統一と効率化
フォームのひな形をあらかじめ用意しておくことは、単に作成時間を短縮するだけでなく、システム全体の操作感を一定に保つための基準となります。
-
画面サイズの固定： 最小のPC環境に合わせることで、スクロール操作による視認性の低下を防ぎます。
-
配置のパターン化： タイトルやボタンの場所を固定し、どの画面を開いても迷わずに操作できる状態を維持します。
-
プロパティの共通化： フォントサイズや背景色、入力制限などの設定をひな形に集約し、個別の画面ごとに設定を繰り返す手間を省きます。
このように「型」を決めておくことで、新しいマスタや入力画面を追加する際も、既存の画面と同じ感覚で利用できる仕組みが整います。