設計品質の向上は背景やアイコンの配置から

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

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

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

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

まずは、画面のスクリーンショットをベースに使用して、OBDZのレイアウトを設計する方法をご紹介します。画面を表示後、左にある画面グループより「画像」コントロールをフォームにドラッグ&ドロップして配置します。

41-1

画像コントロールの配置

配置したコントロールをダブルクリックすると、ファイル選択用のダイアログが開くので、任意の画像ファイルを選択します。扱えるファイルの拡張子は「bmp, jpg, jpeg, gif, png, tif, tiff」です。写真素材やイラストを利用することも可能ですので、ロゴの配置などにも有効です。

今回は、事前に取得したスクリーンショットを選択し、フォーム上に配置しました。

41-2

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

 

この背景画像の上にOBDZのボタンやテキストなどを重ねることですぐにスクリーンショットと同じレイアウト設計を行うことができます。以下の例ではボタンとテキストを重ねた例です。色が変わっている所が、ボタンとテキストを配置した個所です。ラベルはイベントを紐づけないのであれば、そのまま背景画像のままにしても問題ないでしょう。

41-3

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

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

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

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

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

41-4

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

画像を指定すると、ボタンの中にアイコンとして表示されます。
以降は、ボタンのアイコンとしてセットで管理されるようになります。
これで実際のボタンに近いイメージで設計ができるようになります。

41-5

画像を設定したボタン

[RELATED_POSTS]

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

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

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

41-6

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

作成したカスタムコントロールは、カスタムコントロールタブから通常のコントロールと同様に使うことができます。

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

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

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

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

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

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

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

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

新規CTA

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


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

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事

ITだけCAD使ってない不思議