アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
Adobe Max Japan 2009、1/30 2日めに行ってきました。
（1日目は竹村さんが書いてくれるはず。。）
参加したセッションは下記です。簡単にメモなどを。
- Flash Catalystによるワイヤーフレーム・アプローチとのFle...
- 出張JUIカンファレンス（JavaScript User Interface 2009）...
- 深化するRIA （RIAコンソーシアム 三井さん）
- ワークフローとプロトタイピング （bA 伊原さん）
** Flash Catalystによるワイヤーフレーム・アプローとのFlex...
Flash Catalystの紹介とデモ。私にとっての今回の本命。
Catalystのプレビュー版のディスクをもらいました！これは後...
- 今回はmac 版しかない→アメリカの開発者は圧倒的にmacユー...
- このバージョンではFireworks読めないんだって！！！Σ（ﾟдﾟ...
- 日本語通らないらしい
- （Ctrl+Zも効きにくい？）
- 春にパブリックベータ
- 正式リリースは1年後？
*** ターゲット [#g50e55fd]
下記の人たちをターゲットにしたワークフロー。
- インタラクティブウェブデザイナー
- インフォメーションアーキテクト
- ビジュアルデザイナー
*** 基本操作 [#p7700c2c]
- Catalystで一からはじめることもできる
- page：ある状態のスナップショット？
-- 1ページめ右に配置 2ページ目左に配置 その途中をトラジ...
- もっと複雑な絵が描けるようになる？のでツールの位置が変...
- レイヤーももちろんある
- コンポーネントもある
- run project で自動コンパイルもできる
*** デモ [#c1bd1c39]
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が勝手に移動/リサイズを判断して、デフォルトエフ...
- 簡単ですね！
- &color(red){''「ちょっとしたこと」をコーディングせずに...
- （シュイーンなのかシャキーンなのか？といった細かいニュ...
''skinに含まれるもの''
<skin>トランジション（エフェクト）、ステート、図形</skin>
これらをインタラクションデザイナがやる？
*** グラフィックソフトとの連携 [#hf8243e4]
''aiを開く''
- テキストも保持。ボタンに変換したときもlabelに入れてくれ...
- イラレならアプリ間コピペができる
- 同期もとれる
''psdを読み込む''
- レイヤー情報を保持してる
*** ラウンドトリップ [#p3bc5811]
catalyst = .fxpファイル
- ビジュアルデザイナ(ai,psd)
- インタラクションデザイナー(ct)
- 開発者(fx)
ai ⇔ ct ⇔ fx
デザインとマージ
- Look&Feel と Logic を分離できるよ
- 動くワイヤフレーム（プロトタイプ）が作れるようになるよ
- Proof of concept
- かなり早い段階でアプリケーションの方向性が見れるよ
- インタフェースとインタラクションを早い段階で定義できるよ
- IA,インタラクションデザイナがcatalystで最初に詰めていく...
- ユーザとのコミュニケーションツール
*** 感想： [#v94c832d]
- プロトタイプベースでどんどん見せられる、というのはよさ...
- 少ない労力でプロトタイプができるという点は理想的
- かつプロトタイプが無駄にならないのも素敵
- IA/インタラクションデザイナが中心のワークフロー、よさそ...
- これまでは思うデザインを実現するのにASが必要だったけど...
- デザイナーの敷居が下がると、今後WebアプリはFlexが増えて...
- 吐き出されるコードが多いなあ…コードを見なくなりそ
- 早く発売してくれ！
//----------------------------------
** 出張JUIカンファレンス [#s4908b1f]
// えくますくりぷとってよむんだ。。とか初めて知ったのはな...
音声再生や、JSでもFlashを再現できるよ、とか
いろいろJSでこんなことできるんだよ、という話があったけど
amachangのパフォーマンスの話がためになったのでメモ。（ち...
- DOMが重い
- ドットを減らす
は有名。
-1.再描画のタイミング
--再描画はベンチマークに出ない。数値だけで判断してはいけ...
--書き換えと取得
--値の取得と変更を別にする
-2.
--子孫と兄弟に影響が出る
--属性変更時は変更要素を隔離して(divを分ける)、影響範囲を...
-3.スタイル
-- スタイル変更も連鎖する。計算しなおすとまた処理がかかる
-- inherit、相対値を意識する（これ以外の値なら問題ない）
なるほど…マークアップ側は極限までシンプルなHTMLを目指すけ...
こういう視点でも考えたほうがいいやね。
**深化するRIA （RIAコンソーシアム/bA 三井さん） [#k30e8f...
- まず2009年は厳しい、という話。
- システムの不満アンケートの上位は、
+ 操作しにくい
+ ページの表示が遅い
- できること(機能)と使えること(UI)は別。
-- 機能をどれだけ詰め込むか、は時間をかけるが、ユーザヒア...
--押されないボタン（機能）が出てきてしまう。
--- できること＜使えること （開発しても使えない、使われ...
--- できること＞使えること （よく使われるのに、機能がな...
--バランスとってやらないと
-「体験デザイン」が濃くなってきた
--（シナリオとか）
-- &color(red){''良いUI…システムが察してくれる、提案して...
-- 悪いUI…ユーザが全部やらなくてはいけない
-ただの情報提供から…
-- 認知／理解
-- 利用／活用
-- 共感／共鳴
に。
-「共感と情緒」が鍵。
-- エモーショナルな部分の価値が高まってきている。サイト内...
-企業の考え方にも変化が。
-- システム構築だけでなく、「UIと使う人材とシステム」に投資
-- ''わかりやすいUIがあれば教育コスト（マニュアル作成やサ...
-「普通の人にも使いやすい」をめざす
-- 自分だったらどうか？親戚の人ならどうか
-- UMLの人型は「どこを押せばいいかわからない」「やだ」と...
-カメラマンの撮影時間は全体の5%しかない。（交渉、編集など...
--Web屋もおなじ。それで赤にならないようにしないと。
-新しいぶどう酒と古い袋のたとえ話。
-- (新しい)人材と、(古い)組織
-- (新しい)やり方と、(古い)体制
-三井さんの趣味？
-- ''（SFとかの）映画に出てくるUIをキャプチャして、UIの勉...
-- 感覚を磨かないと。
-- 遊び心
（まだつづく）
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
終了行:
Adobe Max Japan 2009、1/30 2日めに行ってきました。
（1日目は竹村さんが書いてくれるはず。。）
参加したセッションは下記です。簡単にメモなどを。
- Flash Catalystによるワイヤーフレーム・アプローチとのFle...
- 出張JUIカンファレンス（JavaScript User Interface 2009）...
- 深化するRIA （RIAコンソーシアム 三井さん）
- ワークフローとプロトタイピング （bA 伊原さん）
** Flash Catalystによるワイヤーフレーム・アプローとのFlex...
Flash Catalystの紹介とデモ。私にとっての今回の本命。
Catalystのプレビュー版のディスクをもらいました！これは後...
- 今回はmac 版しかない→アメリカの開発者は圧倒的にmacユー...
- このバージョンではFireworks読めないんだって！！！Σ（ﾟдﾟ...
- 日本語通らないらしい
- （Ctrl+Zも効きにくい？）
- 春にパブリックベータ
- 正式リリースは1年後？
*** ターゲット [#g50e55fd]
下記の人たちをターゲットにしたワークフロー。
- インタラクティブウェブデザイナー
- インフォメーションアーキテクト
- ビジュアルデザイナー
*** 基本操作 [#p7700c2c]
- Catalystで一からはじめることもできる
- page：ある状態のスナップショット？
-- 1ページめ右に配置 2ページ目左に配置 その途中をトラジ...
- もっと複雑な絵が描けるようになる？のでツールの位置が変...
- レイヤーももちろんある
- コンポーネントもある
- run project で自動コンパイルもできる
*** デモ [#c1bd1c39]
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が勝手に移動/リサイズを判断して、デフォルトエフ...
- 簡単ですね！
- &color(red){''「ちょっとしたこと」をコーディングせずに...
- （シュイーンなのかシャキーンなのか？といった細かいニュ...
''skinに含まれるもの''
<skin>トランジション（エフェクト）、ステート、図形</skin>
これらをインタラクションデザイナがやる？
*** グラフィックソフトとの連携 [#hf8243e4]
''aiを開く''
- テキストも保持。ボタンに変換したときもlabelに入れてくれ...
- イラレならアプリ間コピペができる
- 同期もとれる
''psdを読み込む''
- レイヤー情報を保持してる
*** ラウンドトリップ [#p3bc5811]
catalyst = .fxpファイル
- ビジュアルデザイナ(ai,psd)
- インタラクションデザイナー(ct)
- 開発者(fx)
ai ⇔ ct ⇔ fx
デザインとマージ
- Look&Feel と Logic を分離できるよ
- 動くワイヤフレーム（プロトタイプ）が作れるようになるよ
- Proof of concept
- かなり早い段階でアプリケーションの方向性が見れるよ
- インタフェースとインタラクションを早い段階で定義できるよ
- IA,インタラクションデザイナがcatalystで最初に詰めていく...
- ユーザとのコミュニケーションツール
*** 感想： [#v94c832d]
- プロトタイプベースでどんどん見せられる、というのはよさ...
- 少ない労力でプロトタイプができるという点は理想的
- かつプロトタイプが無駄にならないのも素敵
- IA/インタラクションデザイナが中心のワークフロー、よさそ...
- これまでは思うデザインを実現するのにASが必要だったけど...
- デザイナーの敷居が下がると、今後WebアプリはFlexが増えて...
- 吐き出されるコードが多いなあ…コードを見なくなりそ
- 早く発売してくれ！
//----------------------------------
** 出張JUIカンファレンス [#s4908b1f]
// えくますくりぷとってよむんだ。。とか初めて知ったのはな...
音声再生や、JSでもFlashを再現できるよ、とか
いろいろJSでこんなことできるんだよ、という話があったけど
amachangのパフォーマンスの話がためになったのでメモ。（ち...
- DOMが重い
- ドットを減らす
は有名。
-1.再描画のタイミング
--再描画はベンチマークに出ない。数値だけで判断してはいけ...
--書き換えと取得
--値の取得と変更を別にする
-2.
--子孫と兄弟に影響が出る
--属性変更時は変更要素を隔離して(divを分ける)、影響範囲を...
-3.スタイル
-- スタイル変更も連鎖する。計算しなおすとまた処理がかかる
-- inherit、相対値を意識する（これ以外の値なら問題ない）
なるほど…マークアップ側は極限までシンプルなHTMLを目指すけ...
こういう視点でも考えたほうがいいやね。
**深化するRIA （RIAコンソーシアム/bA 三井さん） [#k30e8f...
- まず2009年は厳しい、という話。
- システムの不満アンケートの上位は、
+ 操作しにくい
+ ページの表示が遅い
- できること(機能)と使えること(UI)は別。
-- 機能をどれだけ詰め込むか、は時間をかけるが、ユーザヒア...
--押されないボタン（機能）が出てきてしまう。
--- できること＜使えること （開発しても使えない、使われ...
--- できること＞使えること （よく使われるのに、機能がな...
--バランスとってやらないと
-「体験デザイン」が濃くなってきた
--（シナリオとか）
-- &color(red){''良いUI…システムが察してくれる、提案して...
-- 悪いUI…ユーザが全部やらなくてはいけない
-ただの情報提供から…
-- 認知／理解
-- 利用／活用
-- 共感／共鳴
に。
-「共感と情緒」が鍵。
-- エモーショナルな部分の価値が高まってきている。サイト内...
-企業の考え方にも変化が。
-- システム構築だけでなく、「UIと使う人材とシステム」に投資
-- ''わかりやすいUIがあれば教育コスト（マニュアル作成やサ...
-「普通の人にも使いやすい」をめざす
-- 自分だったらどうか？親戚の人ならどうか
-- UMLの人型は「どこを押せばいいかわからない」「やだ」と...
-カメラマンの撮影時間は全体の5%しかない。（交渉、編集など...
--Web屋もおなじ。それで赤にならないようにしないと。
-新しいぶどう酒と古い袋のたとえ話。
-- (新しい)人材と、(古い)組織
-- (新しい)やり方と、(古い)体制
-三井さんの趣味？
-- ''（SFとかの）映画に出てくるUIをキャプチャして、UIの勉...
-- 感覚を磨かないと。
-- 遊び心
（まだつづく）
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
ページ名:
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表（概要）
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
