ソフトの外観の定義を保存する方法

趣味でプログラミングをやっています。

ソフトを GUI で作成するとします。

その場合、外観を整える必要がありますね。

すぐにできる場合はそのまま着手すればいいですが、

手元にコンパイラがない場合や、(内部処理で必要な)情報を取得してからやる場合

などがありますよね。

その場合に頭の中にあるイメージ ( ソフトの外観について ) をどうやって記録しますか?

できれば PC でできる範囲がいいのですが。

たとえばですが、 Excel の VBE でフォームモジュールを使って大体のイメージを組んで、

画像キャプチャソフト ( フリーソフト ) 等で画像として保存。

みたいな感じです。

ウィンドウが一個だけで、画像一枚で済む範囲ならいいですが、

たとえば

「この Button1 をクリックしたら UserForm2 を呼び出して...」という感じで、

別のウィンドウ ( ユーザフォーム ) を呼び出したり、行う処理を指定する場合

です。

この場合はどうやって記録しますか?

ウィンドウの外観の記録なので、言語は問いません。

ソフトを使う場合は、ソフト名か、そのURL, またはキーワードでいいので宜しくお願い致します。

( キーワードさえわかれば自分で調べることができるのですが... )

例1:

「私なら Excel のフォームモジュールで必要なウィンドウの外観をすべてやって、それを画像として保存。
その画像を Excel で読み込んで貼り付け。矢印を使って関係性を記述して、これを画像として保存。」

例2:

「そういう場合なら ○○というソフトが使えますよ。このソフトはウィンドウの外観表示と関係性を明示できます。
キーワードは "●●●" で調べると似たようなソフトが見つかるはず。」

宜しくお願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

プロトタイプを作れたら作る感じですかね…
下記は趣味ではなく仕事ですが…

1.デザインだけ作る
WPFやASP.NETではハリボテを先に作って中身を後で実装することができます。

画面は画面で作って後から中身を実装する、またはその逆というのが常に進行しているので、無駄にはなりにくいです。うちの会社の場合、デザイナーの子が要件を絵にして、外観ベースで話をします。
で、その子が絵のレイヤーをそれぞれの部品にしていく、という作業をします。それをUIを担当するプログラマーがフロントエンドに変換、中身担当の私がバックエンドに変換、くっつけます。

この手順はWPFでもASP.NETでも同じです。なのでまずデザイン画を上げます。

2.紙
打ち合わせ向きでソフトよりも便利なことが多いです。
短期的な記憶にしか使えませんが、例えば
「ここらへんにナビゲート用のボタンを配置するつもりです」
「このボタンからこの画面を呼び出そうと思います」
なんて時に１枚１画面で構成すると良いです。

デザイナーの子は本当にデザイン画を作っているので、これを印刷してシミュレーションします。
紙に触ってもらって紙を交換していけばエミュレーションもできます。
※デザイナーの子に依頼するために、一旦鉛筆で書いたものを見せてそれを渡すこともあります

打ち合わせた内容を元に、画像による画面遷移を繋ぎ合わせていき、それを最終プロトタイプにします。
最近はWebアプリならこれをやってくれるWebサービスなんかも沢山あります。
https://ferret-plus.com/4476

※うちは現在フロントエンドの子がハリボテを作っていますが、昔はこれらのツールを使っていました

3.ドキュメントを完成させる
１～２でデザイン画があるので、後はこれを使って仕様書類のドキュメントを完成させます。
機能が多い場合は、機能の概要書や設計書が先にあって、そこからデザイン画を作るので、元の資料に画面をはめ込んでいく形になります。
機能量が多い場合中身は先行して作っている場合が多いですが、中身がUIと直接結合しないようにコーディングしているので、中身が無くて画面が作れない、とかその逆、というのはあまり置きません。

画面の繋がりは一番外側だけに関係する部分なので、いつでも入れ替わるもの、と考えてそもそもの機能概要書には画面遷移はメモ程度にしか書かれてないですね。うちがそこまで大きなプログラム作ってないことにも起因してると思いますが。

投稿2017/02/02 03:00

編集2017/02/02 08:15