Silverlight制作を
デザイナと開発者でコラボしてみた
実録：デザイナ×開発者コラボを成功するポイントとはシグマコンサルティング株式会社 菅原 英治
株式会社DDF 上村 陽介
2009/9/7
開発者からの2つのポイントについて解説します。以降は再び筆者菅原が執筆します。
★ 開発者【1】「デザイナが目で見られるものにする」
繰り返しになりますが、本コンテンツ制作においては、まず開発者が、Silverlightコンテンツを制作するための「ソリューション」を準備しました。そしてその「ソリューション」のコンテンツ内のファイル構成（名前入力画面、カバンの中身画面、カバンの中身のアイコンとその画像、およびそれらの定義ファイル）や画面の実相方法を設計することになりました。
その際、特に気を付けたのが、デザイナがBlendでその「ソリューション」を開いた際に、「目で見られるものにする」、ということです。具体的には、カバンの中身画面を見ていただきたいのですが、この画面ではカバンの中身が名前によって、動的に変化します。
このような動的に変化する画面は、開発者目線で考えると、プログラムで動的に画面上に追加させてしまうのが一番簡単です。しかし、そうしてしまうと、Blend側でこの画面を編集する際に、カバンの中身のアイコンが1つも表示されない状態で見えてしまうことを意味します。
つまり、カバンの中身のアイコンの位置を目で見ながらマウスでレイアウトできなくなってしまいます。今回は、それを避けるため、あらかじめアイコンを配置し、中身をロジックで切り替えるようにすることで対応しました。
★ 開発者【2】「デザイナの成果物を真摯（しんし）に受け止める態度が重要」
コラボするからには、やはり相方であるデザイナを尊敬し、その成果物を真摯に受け止める態度が重要です。開発者目線で考えると、どうしても、こうした方が美しい実装だ、と思うことがあるかもしれません。
特に、Blendで修正した画面（Silverlightの画面は「XAML」と呼ばれるXMLで定義される）は、本来必要ないタグが多々自動生成されるため、XAMLをXMLタグで読みがちな開発者からすると、とんでもないことになります。そこを割り切って、自分はデザイナと一緒にコラボし、この作品を作るのだ、と考えられるようになる必要があります。
コンテンツ制作時の基本情報は？
最後に、本コンテンツ制作するに当たっての基本情報を載せます。今後のSilverlightコンテンツ制作案件の参考になれば幸いです。
◇ コンテンツを制作するのに要した時間は？
まず、本コンテンツを制作するのに要した時間です。デザイナと開発者併せてざっくり1週間程度の工数という結果になりました。
| 表 本コンテンツを制作するのに要した時間 | ||||||||
|
◇ コンテンツができるまでの流れは？
本コンテンツができるまでの大まかな流れを簡単にご紹介します。
- 第1回打ち合わせを行う
- ディレクタより、ラフ案の資料（世界観のイメージと画面フロー）の提示
- クライアントを交えてコンテンツの方向性を確認し決定
- デザイナがデザインモック（ただの絵）を制作することが決定
- 開発者がロジックを実装した「ソリューション」を用意することが決定
- デザイナのデザインモックが完成する
- デザインモックをクライアントに確認し合意
- 開発者がロジックを実装した「ソリューション」が完成する
- 画面遷移ロジックの実装完了
- カバンの中身のロジックの実装完了
- 第2回打ち合わせを行う
- 開発者が実装した「ソリューション」についてデザイナに解説
- デザイナのデザイン組み込みが完了する
- デザインモックを基に、「ソリューション」にデザインを組み込む
- 第3回打ち合わせを行う
- クライアントによる完成品のチェック
- チェックでの指摘点を、その場で修正
- コンテンツ制作完了
2つの業界が交ざり合い、どんどん面白いものを
このように本稿では、Silverlight 3コンテンツをデザイナと開発者でコラボレートして制作した結果をまとめ、その過程で得られたものを紹介しましたが、いかがでしたでしょうか。実際に試してみて、Silverlightは、デザイナと開発者のコラボが非常に容易に行えることが分かりました。
 |
| 「面と向かっての共同制作の方が3倍速い（体感で）」目黒のオシャレなDDFオフィスにて |
また、本稿でのコラボを通じて、Webデザインを得意とする企業とシステム開発を得意とする企業は、お互いに得意分野を生かした良い関係になれることが分かりました。2つの業界が交ざり合い、どんどん面白いものが世の中に出てくるのが楽しみです。
【関連記事】
 |
開発現場のUIトラブルを解決!? 画面プロトタイプ入門 いまさら聞けないリッチクライアント技術（16） アプリ／サイト納品後に顧客に「使いにくい」「あれ追加して」といわれた方へ。前もって画面イメージを簡単に作る方法が…… 「リッチクライアント ＆ 帳票」フォーラム 2009/3/11 |
|
 |
WebとUIをつなぐトリックスター Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る 第1回 mixiは徹底した社内コミュニケーションからできている 第2回 テレビでYahoo!―デバイスが変わればUIデザインも 第3回 画像とコードの触媒Flash Catalystについて語りますと 第4回 イラストSNS、ピクシブの「以心伝心」少人数メソッド |
|
 |
Flex/AIR開発でデザイナとの協業を楽にする「yui」 デザイナとプログラマを“結”ぶオープンソース（前編） Flex/AIR開発でデザイナと協業することになったら、ぜひ試してみてほしいオープンソースのフレームワークがあります 「リッチクライアント ＆ 帳票」フォーラム 2008/10/1 |
|
 |
人・チームが成功の鍵となるリッチクライアント WCR Watch ［6］ 大手国内航空会社の航空券予約サイトなど、RIA開発に豊富な実績を持つセカンドファクトリーに、RIA構築における成功のポイントを聞いた 「Web
Client & Report」フォーラム 2005/8/4 |
|
 |
GoogleSitesを使って制作プロジェクトをハックしよう GoogleSitesでプロジェクト管理（1） Web制作の現場をサンプルに、GoogleSitesをツールに用いたプロジェクト管理の方法を紹介する。使いこなしてプロジェクトをハックしよう |
|
 |
.NETを知らない人でも分かるSilverlight入門 「マイクロソフトの技術は.NETを知らないと学習できないのでは？」という読者にこそ読んでもらいたい、リッチクライアント技術Silverlightの入門連載。 もちろん、知っている人も大歓迎！ 「リッチクライアント ＆ 帳票」フォーラム |
|
 |
FlexとSilverlightで同じアプリを作って比較してみた 結局、RIAはどれを使うべきなのか？（最終回） 業務用で定番のマスタメンテナンスの簡単なアプリを作成。RIA技術を比較検証する際の1つの手段として参考にしてほしい 「リッチクライアント ＆ 帳票」フォーラム 2009/2/24 |
|
 |
Silverlight vs. jQuery＋ASP.NET AJAX VB研公開ゼミ：テクノロジーバトル 開発者の選択（1） 2大技術をバトル形式で議論するセミナーの議事録。RIAの大本命「Silverlight」と定評のある「Ajax」の対決結果とは？ 「Insider.NET」フォーラム
2009/7/1 |
 |
Web標準に準拠し独自技術Silverlightで補完する D89クリップ（11） Webテクノロジーの分野で注目のSilverlightとデザインツールExpression。製品担当のスコット・ガスリー氏に最新版の注目点や今後の展望を聞いた |
|
 |
3/3 |
| INDEX | ||
| 実録：デザイナ×開発者コラボを成功するポイントとは Silverlight制作をデザイナと開発者でコラボしてみた |
||
| Page1 本稿は、デザイナ×開発者コラボの実録ドキュメントです 製作チームの体制は、どうなっていたのか？ |
||
| Page2 Silverlightでのコラボは本当に容易だったのか？ コラボを成功させるための、7つのポイントとは？ |
||
 |
Page3 コンテンツ制作時の基本情報は？ 2つの業界が交ざり合い、どんどん面白いものを |
|
 |
「デザインハック」コーナーへ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
