画面・帳票レイアウト最終更新日: 2020年2月15日

画面レイアウト設計

Wagbyのレイアウト設計は次の特徴があります。

  • 項目毎の位置、大きさ、隣の項目との関係性などを指定することで行います。
  • よく知られている CSS 技術を使って、色やフォント、間隔調整（マージン）を行うことができます。
  • 設計した画面は PC だけではなく、タブレットでも利用できます。

Wagbyのレイアウト技法を学ぶことで、業務アプリケーションに求められる、きめ細かい水準の画面をデザインすることができます。

図1 レイアウトを定義した新規登録画面の例

注意

Wagbyは画面レイアウトをビジュアルに（部品を貼り付けることで）設計するツールは提供していません。そのため、馴れるまでに時間がかかるかも知れません。一度コツをつかめば、丁寧な画面を作り込むことができますので、トライしてみてください。

画面レイアウト設計を行うタイミング

レイアウト設計は、構造（モデルおよびモデル項目）が固まった後に着手するのがよいタイミングです。 レイアウト設計後に項目の追加を行うと、レイアウト設計への手戻りも発生するためです。

画面レイアウト設計のテクニック

項目の多いモデルでは、次のテクニックが有効です。

共通部分を変更したい

各画面のレイアウト設計ではなく、共通部分（タイトル、サブメニュー、パンくずなど）を変更することもできます。これはHTML,CSS,JSP,JavaScriptといった技術を用います。詳細はWagby Developer Network - CSS,JavaScriptによる画面カスタマイズにまとめています。

ヘルプメッセージ

ヘルプメッセージを設定することで利用者の満足度が向上します。画面毎の説明文をお読みください。また、プレースホルダ型メッセージも利用できます。

帳票設計

Wagbyは標準でExcel帳票機能を備えています。Excelで帳票レイアウトを作成します。

図2 Excelを利用した帳票サンプル

Excel帳票以外にも、HTMLによる簡易印刷機能や、外部の帳票ライブラリソフトと連携したPDF帳票出力も行うことができます。

注意

帳票レイアウト設計は、その種類に応じた工数がかかります。Wagbyはこの（設計）工数を削減するものではありません。量が多い場合は別途、他社製の帳票レイアウト設計ソフトの導入（とWagbyとの連携）をご検討ください。

レビュー

現場のアプリケーション操作担当者は、画面レイアウトおよび画面遷移への要望に集中する傾向があります。

プロジェクトリーダーは「どこまで要望を受けるか」という判断を行ってください。Wagbyで実現できない画面は、カスタマイズテーマとして記録します。

この時点で求められるWagbyのスキル

画面・帳票レイアウトに求められるWagbyのスキルは次のとおりです。

次のテーマ

ここまでで基本的な設計手順は完了です。次章ではWagbyが提供するさまざまなオプション機能を紹介します。