Adobe MAX Japan 2009 2日目レポート http://www.ark-web.jp/sandbox/design/wiki/335.html

Adobe Max Japan 2009、1/30 2日めに行ってきました。
（1日目は竹村さんが書いてくれるはず。。）

参加したセッションは下記です。簡単にメモなどを。

• Flash Catalystによるワイヤーフレーム・アプローチとのFlex開発フロー(Adobe 轟さん)
• 出張JUIカンファレンス（JavaScript User Interface 2009）"Flashはもういらない"（Shibuya JSのみなさん）
• 深化するRIA　（RIAコンソーシアム　三井さん）
• ワークフローとプロトタイピング　（bA　伊原さん）

Flash Catalystによるワイヤーフレーム・アプローとのFlex開発フロー †

Flash Catalystの紹介とデモ。私にとっての今回の本命。
Catalystのプレビュー版のディスクをもらいました！これは後日レビューします。

• 今回はmac 版しかない→アメリカの開発者は圧倒的にmacユーザだったので。
• このバージョンではFireworks読めないんだって！！！Σ（ﾟдﾟlll）
• 日本語通らないらしい
• （Ctrl+Zも効きにくい？）
• 春にパブリックベータ
• 正式リリースは1年後？

ターゲット †

下記の人たちをターゲットにしたワークフロー。

• インタラクティブウェブデザイナー
• インフォメーションアーキテクト
• ビジュアルデザイナー

基本操作 †

• Catalystで一からはじめることもできる
• page：ある状態のスナップショット？
  • 1ページめ右に配置　2ページ目左に配置　その途中をトラジションでつなげる（フレームみたいなもの？）
• もっと複雑な絵が描けるようになる？のでツールの位置が変わるかもよ
• レイヤーももちろんある
• コンポーネントもある
• run project で自動コンパイルもできる

デモ †

1.Catalyst上で○を描く。
2.デザインモード→コードビューするとxmlのコードが描かれている。

• <fill> 塗り
• <stroke> 線

3.コンポーネント化。2つの方法がある

• 1,右クリックconvert→button
• 2.プロパティパネルでも変換できる

　　　↓

4. fxbutton というコンポーネントになった
5. 塗りや線（fill,stroke）は、styleName がついて外部ファイルに自動で書き出される

• states（up,over,down,selected?）, transition（エフェクト？） というコンポーネントもある

• 中途半端なflashみたいだな。。という印象。

モーション

1.ページを増やして2ページ目のボタンの位置を変える
2.Catalystが勝手に移動/リサイズを判断して、デフォルトエフェクトをつけてくれる

• 簡単ですね！
• 「ちょっとしたこと」をコーディングせずにデザイナが実現できる
• （シュイーンなのかシャキーンなのか？といった細かいニュアンスを開発者に頼む必要がない）

skinに含まれるもの

skin>トランジション（エフェクト）、ステート、図形</skin>
これらをインタラクションデザイナがやる？

グラフィックソフトとの連携 †

aiを開く

• テキストも保持。ボタンに変換したときもlabelに入れてくれる。
• イラレならアプリ間コピペができる
• 同期もとれる

psdを読み込む

• レイヤー情報を保持してる

ラウンドトリップ †

catalyst　= .fxpファイル

• ビジュアルデザイナ(ai,psd)
• インタラクションデザイナー(ct)
• 開発者(fx)

ai ⇔ ct ⇔ fx
デザインとマージ

• Look&Feel と Logic を分離できるよ
• 動くワイヤフレーム（プロトタイプ）が作れるようになるよ
• Proof of concept
• かなり早い段階でアプリケーションの方向性が見れるよ
• インタフェースとインタラクションを早い段階で定義できるよ
• IA,インタラクションデザイナがcatalystで最初に詰めていく。というワークフローができるようになる
• ユーザとのコミュニケーションツール

感想： †

• プロトタイプベースでどんどん見せられる、というのはよさそう
• 少ない労力でプロトタイプができるという点は理想的
• かつプロトタイプが無駄にならないのも素敵
• IA/インタラクションデザイナが中心のワークフロー、よさそう！
• これまでは思うデザインを実現するのにASが必要だったけど、それが減るのはいいこと
• デザイナーの敷居が下がると、今後WebアプリはFlexが増えていきそう
• 吐き出されるコードが多いなあ…コードを見なくなりそ
• 早く発売してくれ！

出張JUIカンファレンス †

音声再生や、JSでもFlashを再現できるよ、とか
いろいろJSでこんなことできるんだよ、という話があったけど
amachangのパフォーマンスの話がためになったのでメモ。（ちょっとメモに自信ない）

• DOMが重い
• ドットを減らす
  は有名。

• 1.再描画のタイミング
  • 再描画はベンチマークに出ない。数値だけで判断してはいけない
  • 書き換えと取得
  • 値の取得と変更を別にする

• 2.
  • 子孫と兄弟に影響が出る
  • 属性変更時は変更要素を隔離して(divを分ける)、影響範囲を狭めるとよい

• 3.スタイル
  • スタイル変更も連鎖する。計算しなおすとまた処理がかかる
  • inherit、相対値を意識する（これ以外の値なら問題ない）

なるほど…マークアップ側は極限までシンプルなHTMLを目指すけど、
こういう視点でも考えたほうがいいやね。

深化するRIA　（RIAコンソーシアム/bA 三井さん） †

• まず2009年は厳しい、という話。

• システムの不満アンケートの上位は、

1. 操作しにくい
2. ページの表示が遅い

• できること(機能)と使えること(UI)は別。
  • 機能をどれだけ詰め込むか、は時間をかけるが、ユーザヒアリングとかしてなかったり
  • 押されないボタン（機能）が出てきてしまう。
    • できること＜使えること　（開発しても使えない、使われない）
    • できること＞使えること　（よく使われるのに、機能がない）
  • バランスとってやらないと

• 「体験デザイン」が濃くなってきた
  • （シナリオとか）
  • 良いUI…システムが察してくれる、提案してくれる、仕事を減らしてくれる、そこだけに集中させてくれる
  • 悪いUI…ユーザが全部やらなくてはいけない

• ただの情報提供から…
  • 認知／理解
  • 利用／活用
  • 共感／共鳴
    に。

• 「共感と情緒」が鍵。
  • エモーショナルな部分の価値が高まってきている。サイト内に見え隠れしてないと。

• 企業の考え方にも変化が。
  • システム構築だけでなく、「UIと使う人材とシステム」に投資
  • わかりやすいUIがあれば教育コスト（マニュアル作成やサポートなど）が減る。そっちにカネかけましょう

• 「普通の人にも使いやすい」をめざす
  • 自分だったらどうか？親戚の人ならどうか
  • UMLの人型は「どこを押せばいいかわからない」「やだ」とか言わない。ここを検証していくべき。

• カメラマンの撮影時間は全体の5%しかない。（交渉、編集などに時間を費やしている）
  • Web屋もおなじ。それで赤にならないようにしないと。

• 新しいぶどう酒と古い袋のたとえ話。
  • (新しい)人材と、(古い)組織
  • (新しい)やり方と、(古い)体制

• 三井さんの趣味？
  • （SFとかの）映画に出てくるUIをキャプチャして、UIの勉強にしている
  • 感覚を磨かないと。
  • 遊び心

（まだつづく）

投稿者小森? | パーマリンク

|

tag: Flex?

Menu

• デザイン勉強会
• 大家メモ

Movable Type用プラグイン Aシリーズ

ECサイト構築 Zen Cartハイエンド

Tag

最新の20件

ARK-Webビジネスブログの最新記事