実践 ICONIXプロセス : 画面の模型

画面のモデル(模型)の主な手法は以下の4つ。

1.手書きの紙芝居
2.線画
3.モックアップ(静止画)
4.プロトタイプ(動画)

この順番で、作ったり、直したりに時間がかかる。

ICONIXプロセスと画面の定義

ドメインモデリングの最初は、手書きの紙芝居で出発する。
だんだん、線画、モックアップ、プロトタイプと詳細化・具体化していく。

画面の模型を試作・実装の作業と、ドメインモデリング、ユースケースモデリング、ロバストネス分析の作業は同時並行です。画面デザインを専門家にまかせた場合でも、頻繁にコミュニケーションしながら、同時に進める作業です。


1.画面の紙芝居

原文では、 GUI Story Board です。

例えば、こんな感じ ストーリボードの例

もともとは、映画、芝居、アニメなどの企画段階で、シナリオをざっと紙芝居に
したもののようです。

ユースケースシナリオ、アクター(登場人物)、紙芝居( Story Board) というのは、すべて、
映画や芝居の世界から流用したやり方です。
(意識的に流用した)

手書きでちゃちゃっと書く感じですね。


2.Line Drawing (線画)

64ページの図3.3が「線画」の例です。
(98ページでは「線図」になっている。訳語にゆらぎがありますね)

あと、画面のレイアウトを四角(直線)で表現したのもこの範疇かな?
線画の例

1.の手書きの紙芝居に比べると、デザインぽくなっている。
最近は、線画は手書きより、パソコンを使うことが多い。
EA で、ダイアグラムの追加で「その他」から「画面設計」ダイアグラムを選ぶと、簡単に
画面の線画を描くツールがでてきますね。

あまりきっちり描きすぎると、開発がかなり進んでいるという誤解をあたえるといけないので、
こんな雰囲気で 手書き風の例 
「まだ、手書きだよ」、「紙ナプキンの裏に描いてみただけだからね」という雰囲気の絵を描く専用ツールがあるようです。

3.画面のモックアップ

実物大の模型ですね。
フォトショップとかお絵かき系のツールで、見た目は、本物と同じ画面を作る。

4.画面のプロトタイプ

HMTL と CSS で作る、実際の画面ですね。
リンクと画面遷移なども一部は実際に動く。

UIデザインパターン

画面の紙芝居を描いたり、画面遷移を考えるときに参考にしているページ。

ソシオメディアという会社の UI デザインパターンを5つのカテゴリーに分類している。それぞれのパターンを、画面の具体例・効能・用法・注意書きで説明している。

具体的でわかりやすく、とても参考になります。

コンセプト
機能 (検索、一覧、表示、編集、... )
展開 (画面遷移)
レイアウト
振る舞い (ボタンアクションなど)

画面定義を何度もやっていれば、パターンがあることはなんとなく感じていたけど、ここまでちゃんと整理されていると、感動モノです。

自分自身で画面の紙芝居を描いたり、ユースケース記述を描くことがとても楽になる。チームのメンバー同士で、画面について話をする時の参照モデル・共通言語として役にたつ。

Webアプリケーション専用ではなく、GUI一般です。できればWebアプリケーションに限定したサブセットがあればうれしい。

calendar
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>
システム設計日記を検索
プロフィール
リンク
システム開発日記(実装編)
有限会社 システム設計
twitter @masuda220
selected entries
recent comment
recent trackback
categories
archives
others
mobile
qrcode
powered
無料ブログ作成サービス JUGEM