設計品質の向上は背景やアイコンの配置から(Vol.41)

 2018.08.20  株式会社システムインテグレータ

本連載は、設計書ジェネレータ「SI Object Browser Designer(以下、OBDZ)」を使ってソフトウェアの設計書(仕様書、基本設計書、詳細設計書)を作る講座です。

画面設計を行っていても、実際に出来上がる画面をイメージできないと、品質の高い設計になりません。 イメージができない理由は様々ですが、背景などの画像が実際のものと異なるから、というのも理由の一つだと考えます。 OBDZでは、「画像」コントロールを活用して、画像を画面設計に配置することができます。 今回は画像を活用した画面設計の方法をいくつか紹介します。

画像を活用した画面設計1:背景設定で活用する

まずは、ベースとなる背景として画像を活用します。

画像の配置方法ですが、画面を表示後、左にある画面グループより「画像」コントロールをフォームにドラッグ&ドロップして配置します。

画像コントロールの配置

画像コントロールの配置

配置したコントロールをダブルクリックすると、ファイル選択用のダイアログが開くので、任意の画像ファイルを選択します。扱えるファイルの拡張子は「bmp, jpg, jpeg, gif, png, tif, tiff」です。

選択したファイルはフォーム上に表示されます。

画像を選択して表示した状態

画像を選択して表示した状態

新規CTA

この画像コントロールは他のコントロール同様にサイズの変更が可能なので、フォームと同じサイズにすれば背景として扱うこともできます。
ここからラベルやテキストなど、他のコントロールを配置して画面設計を続けましょう。

 今回の例では画像の上にラベル等を配置してログイン画面を作ってみました。

背景画像を活用したログイン画面の設計

背景画像を活用したログイン画面の設計

画像を活用した画面設計2:自作アイコンで活用する

システムに組み込むため、自身で作成したアイコンについてもOBDZで利用可能です。

前述の背景と同様に画像コントロールでの配置も可能ですが、ボタンコントロールのアイコンに指定することもできますので、その方法を紹介します。

「ボタン」コントロールを配置したら、画像プロパティで任意の画像ファイルを指定します。
扱えるファイルの拡張子は「ico」(アイコンファイル)です。

ボタンコントロールに画像を指定

ボタンコントロールに画像を指定

画像を指定すると、ボタンのアイコンとして文字の左に表示されます。
これで実際のボタンに近いイメージで設計ができるようになります。

画像を設定したボタン

画像を設定したボタン

[RELATED_POSTS]

画像を活用した画面設計3:カスタムコントロールと併せて活用する

ここからは応用編になりますが、カスタムコントロールを利用すれば、画像コントロールや画像を設定したボタンを他の画面でも取り扱うことができます。

カスタムコントロールの登録は、対象のコントロールを右クリックして、「カスタムコントロールの作成」をクリックします。

カスタムコントロールの作成カスタムコントロールの作成

作成したカスタムコントロールは、画面左上のアイコンからカスタムコントロール画面を呼び出し、通常のコントロールと同様に配置します。

カスタムコントロールの配置カスタムコントロールの配置

このように、画像を活用したコントロールもカスタムコントロールとして利用できます。

システム内で統一された画像を取り扱うことができ、設計画面が多くなっても画面間のイメージを合せることができます。

画像を活用して設計品質を上げるということ

画面設計で画像を活用することで、実際に製造する画面により近い状態で設計することができます。これにより、ユーザーが利用シーンをイメージできるため、更に品質の高い設計をすることができます。また、設計不足により製造時に発生する可能性のある、レイアウト破綻の軽減につながります。

ユーザーのため、更には開発者のためにもなる画像を活用した画面設計を、ぜひOBDZで行ってください。

OBDZでは、製品の機能を実際にお試しいただける、無料評価版をご用意しております。
ご興味をお持ちいただけましたら、以下のURLよりお申込みください。

https://www.sint.co.jp/products/obdz/trial/trial.html

新規CTA

RECENT POST「設計書の書き方講座」の最新記事


この記事が気に入ったらいいねしよう!
ブログ購読のお申込み

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事

OBデザイナーで
生産性向上!