UNIQLO CALENDAR

ユニクロがリリースするFlash作品は、いつもすてき。

デザイン感覚も素晴らしいけど、リアルタイムの概念を持ったものを最小限のパフォーマンスで表現するというのは、Flashではとても難しいこと。
このカレンダーの場合、画質をわざと落とすことで、ジオラマやシミュレーションゲームを見てるようなチープ感を出しつつファイルサイズも抑えてます。楽しさだけ伝えるなら、画質って意外と問題にならないのね。

本サイトをクリックしたときの展開も衝撃過ぎる。これはフルスクリーンで見るべき。

札幌は？札幌は？wktk

はてブではこの人の作品ではないかって言われてますね。
いろいろなところで取り上げられてるそうなので間違いないかも。後でYoutubeの作品もじっくり観よう。

写真家の本城直季氏が写真を連続撮影→動画化というのが有力ぽい。
音楽の制作元はサイト内に書いてあるのに、動画を作った人の名前がない…気になるなー

Twitterで記事を紹介して下さい（-人-）

北海道WEBコンソーシアムの特別イベント「夏祭り（アドビ特集）powered by CSS Nite」。
参加した記録最終回。

Integratedキャンペーンのしかけ方

ビーコンコミュニケーションズ　渡辺さん

有名なクリエイティブディレクターさんが次世代型広告コミュニケーションについて講義　今回の目玉企画だったらしい
（すみませんFirefworksとかAIRしかチェックしてませんでした）

渡辺さんのこれまでの仕事と見どころについて

2004年

アリエール「アイラブ困ったさんブログ」
ブログがブレイクするちょっと前　企業がトラックバックセンターを開設したはじめての事例となった

2005年

NIKE「ブカツブログ」
NIKEと言えばかっこいい一流選手が沢山Flashで出てくるサイトがおなじみだが　ブカツブログは実在の学校の部活動と連動することで、これまでのNIKEにないリアルなサイト展開を行った

2006年

NIKE「Just Do It キメワザバトル」
自分なりのスーパープレイ＝キメワザ動画を募集　投稿してもらった動画をもとにCMを作り上げようという趣旨
Flashのストリーミング再生がふんだんに使用されている

2007年

NIKE ID「If you were a boy」
NIKE IDとはカスタマイズシューズを作るサービスのこと
当時の新モデルのコンセプトだった「子供の頃の恐れを知らない心」をテーマに打ち出したブログパーツを配布
キャラクターがパーツを使用しているブログ間を縦横無尽に走り回る　公式サイトでは走った軌跡＝各サイトのキャプチャを敷き詰めて道が作られていく

「え？じゃあ途中で閉鎖したサイトがあったら道が切れちゃうんじゃないの？」という懸念が制作サイドにもあったが　NIKE担当者がGoサイン（クライアントの方が恐れを知らない人だった！）
後で渡辺さんが質問にも回答しているが　大胆なサイトをリリースできるかは担当者の英断に左右されるところがまだまだ多いようです
特にNIKEは実験的な企画を通しやすいらしい

ヴィダルサスーンの企画について

ヴィダルサスーン「FASION MUSIC」

売り上げがピンチのヴィダルサスーン　今回失敗したら日本撤退も考えていた
起死回生の手段として大掛かりなキャンペーン展開を計画した

「洋服／音楽／ヘアスタイルの融合」

VOGUEなどと組んでいたブランド創立時のコンセプトに立ち返る

一般ではテレビCMがキャンペーンの軸となるのに対し　「FASION MUSIC」はWEBとモバイルを中心に他メディアの展開を広げていく形を取った
→購入層である20代女性がいちばん近い場所

大胆な駅広告

新宿駅に幅60mの長い看板　途中にトルカがこっそりとついていて着メロがもらえるようになっている

大胆な公式ウェブサイト

安室奈美恵をイメージキャラに起用　昔の名曲をベースにアレンジした新曲を特別ムービー付きで発表

とにかくフル動画でものすごく重いんだけど（さっきMac miniで訪問したところ起動までに45秒ほどかかった）かっこ良くてインパクトのあるサイト作りを心がけた

…ここまでの時点でかなりのアクセスを稼ぐことができた
しかしそれだけではまだヴィダル復活には足りない

大胆な別メディアとの連動

JOYSOUNDと連動してテーマ曲をカラオケ配信
点数が高かった人にはレアなプレゼント

大胆なムービー作成サービス

東京の繁華街に特設のステージを設置
お客様に真ん中に立ってポーズ取ってもらう→360度からカメラ撮影して15分後にくるくる回る立体動画をプレゼント→お客様携帯で見て大喜び→公式サイトにも掲載されるからそっちも見てね☆

15分で立体動画作成とはなんだか凄そうな技術なのだが、実は完全手作業
ステージの後ろでは技術者さんたちが一生懸命パソコンで画像を加工していましたとさ

変わりつつある広告の定義

業界で良く言われていること→「広告は消費者へのラブレターである」

これまでの広告展開「AIDMAの法則」

注意　→　興味　→　欲求　→　記憶　→　行動
これは有名だよね

これからの広告展開「AISASの法則」
注意　→　興味　→　検索　→　行動　→　共有
インターネットを通して　消費者が広告に介入する流れ

「広告は消費者とブランドのBuddy化」
海猿でパートナーになって一緒に潜ったりするやつね

Buddyへの道
Encount（出会い）　→　Interactive（交流）　→　Repeat（再会）

「各ストーリーをどのように作っていくか」
を考えるのが、次期広告プランナーの姿なのです

新しい広告媒体

デジタルサイネージ

大きな看板が一面液晶画面になっていて、Webと連動している

顔認識システムが入っていて、前を通った人の年齢・性別を判定して広告内容やアプローチを変化させる
日本ではまだまだ発展途上の段階だが、最近お台場で「ゲゲゲの鬼太郎」のキャンペーンに使用された

携帯電話との連動

その前の24-7の古本さんの講義とたまたまかぶったが、携帯とPCを連動させたサイト展開が広まってきている
バスキュール「gyorol」
PCサイトのQRコードを取得すると　携帯サイトで釣りができる
釣果はPCサイトに名前入りで保管できる

最先端のマーケティング凄いよねえとか　でも北海道じゃそもそも通らないんじゃね？とか考えながら全プログラムが終了したのでした

で、その後

取引先のWeb屋さんに会ったので一緒にいたmakiesさんを紹介。知り合いの少ない私でもけっこう知り合いが参加していました

そのまま懇親パーティーに参加…びくびくしながら名刺を配り　何をやっているのか自己紹介する私。
経験豊富なディレクターさん、フリーランスの人や勉強中の人、いろいろお話することができました。
そして名刺を10枚しか持ってきていなかったので、あっという間に打ち止め…

なんとなく三次会にもついていく
隣の席が空いている人がいたので、座らせてもらったらアドビの西村さんだった
名刺は持ってないノリは悪いわで西村さんに気を遣わせ大変なことに　うぇびんぐさん死んでいい　西村さんすみませんAdobe製品大好きで
す

他の会員さんたちにお仕事のことを聞かれたり
(「・∀・)「　＜　きみ　なんだか面白いねーー
とよくわからない絡まれ方をしつつ0時頃においとまして帰ってきた

帰ってからサイトをもういちど見てみたら　さっきの (「・∀・)「 の人はHTML&XHTML&CSS辞典の人だった
北海道の人だとは知らなかった

今度SOHOのためのセミナーを開くそうなので話を聞きにいこうと思います。

というわけで全四回完結。これで後々忘れても読み返せば思い出せるぞ（笑）

Twitterで記事を紹介して下さい（-人-）

北海道WEBコンソーシアムの特別イベント「夏祭り（アドビ特集）powered by CSS Nite」。
参加した記録その３。

Adobe AIRで作るRIAのご紹介

アドビシステムズ　西村さん

Adobe AIR紹介するから、みんなもなにか開発してね！という話

Adobe AIR

現在バージョン1.1　・・・　ブラウザを飛び出し強化した、Web技術で作れるデスクトップアプリ

• 無償クライアントの活用
• どのOS・環境でも使える
  これまで開発者が吸収していたOSの違いによる対応をAIRの方がフォローしてくれる
• Webの技術を使用できる
  HTML / CSS / Flash / PDF / ActionScript…
• SQLiteでローカルにデータベースを作成でき、オフラインでも使用できる

AIRアプリの一例

• デスクトップでみかんせいじんを育てる
  （縦横無尽に動き回って気持ち悪い）
• ガイドのお姉さんと毎日株式について勉強する学習アプリ
• キーボードを押すと女の人がエアギターでパフォーマンスする
• リアルきれいなお姉さんが紹介するRSSリーダー
  （RSSリーダーを使ったことない人も、お姉さんが見たくてダウンロード）
• ホットペッパーお店検索
• 3DYoutube検索
  （サムネイルリストがWizardlyの3Dダンジョンみたいに並ぶ…うまく説明できん）

こうやってみるとお姉さんビデオ系が多いな　みんな女に弱すぎだw

ブラウザアプリ（Flash、Javaアプレットなど）との違い

• ブラウザが別途必要ない
• OSを選ばない
• Flash・JavaScriptの「クロスドメイン問題」がない
  （サーバー上のFlashから別ドメインの外部ファイルを読み込むのは、ちょっと難しいのです）
• インストールが早い

AIRアプリはどうやって作れるの？

関連ツールページで開発環境を入手する

• Adobe flex Builder3　・・・　本格的な開発ソフト　もちろん有料だが最強
• Flash or Dreamweaver拡張　・・・　CS3を持っているならまずはこれで
• Adobe AIR SDK　・・・　無償提供されている開発ツール（誰でも使える！）

Flash CS3でAIRアプリを書き出すには

拡張機能をインストールすると、上メニューの「コマンド」に
「AIRアプリケーションを作成する」が出てくる

選択して「背景を透明にする」の設定で書き出し

Flashの動きをデスクトップで再現できるようになる

帰ってから調べた　詳しいチュートリアルはここ！↓
Flashデベロッパーセンター（ホットペッパーAPIのサンプルも手に入る）

これからのAIR

Q : もっと気軽に使ってもらわなきゃ　AIRはこれからFlashやPDFみたいになるの？

A : 将来的に、AIRはOSに自動でダウンロードされるようになると思います！
たくさんのお客様に負担をかけずに使ってもらえるよ！（西村さん）

AIRギャラリーがオープン　共有公開も可能に

ワークショップ

次世代のコンテンツとして、AIRで何ができるのか、をグループでディスカッション
私とmakiesさんと前に座っていた兄さん二人でグループ

私は「リグレト」のアプリがあったら楽しんじゃないのかな、という話をする

凹み共有サイト「リグレト」　FlashならではのUIがとってもかわいい
でも　とっても重い　ナイスヘコミ・ナグサメみつけてもすぐ流れちゃう
↑↑じゃあ、AIRならテイストを生かしたままで軽く、ログとれるアプリが作れるんじゃないかな？

…と一生懸命話したら、兄さんたちに引かれたのか、激しく反応が鈍く凹む
兄さんたちの意見　「今のところWebとの強い差別化が感じられない」
makiesさんの意見　「セキュリティ面がどうなっているのか心配」

Hokkaido Fresh Flash

24-7　古本さん

24-7は札幌の制作会社　サイトを何回か見たことがある
SecondLifeで仮想PRオフィスを作ったことがあった　たしか
携帯サイトでの送信内容がデータベースを介してPCサイトと同期する、最新のFlashコンテンツについて紹介

※実演が多かったのと、技術的にかなり高度な話だったためついていけず、あんまりメモとれなかった…

サンプルアプリの紹介

携帯サイトに配られたQRコードからアクセス

→画面に数秒ごとに数字が出るので、同じキーをすばやく押す
→スロットがくるくる回って数字が出てくる

上の数字は実はカウンターになっていて、
これまでにアクセスした累計数を表している
データベースで集計を取り、キリ番だった場合は携帯は当たりの画面になる

PCサイト（全面Flash）の方はリアルタイムで現在の状況を更新し続けていて
当たりが出ると画面が変化して他の人にもわかるようになっている

ASライブラリ2.0・3.0

ライブラリの普及で、前述のような高度なアプリを作りやすくなった
逆に計算が複雑になってしまったり、頼りすぎたりするので利用は計画的に

• アニメーション：　tweener / GO　など
• 3D効果：　Papervision3D / Away3D　など
• タスク：　Thread　など
• フレームワーク：　Progression Framework
• スライド支援：　Slides
  （Flashに図形を書き込んだりできる　実際に古本さんはこれでスライドに赤丸を書き込んでいた）

ASライブラリの勉強を深めるには？

Spark Project

Flash製作者のコミュニティサイト　ライブラリ共有や情報交換を行っている

最後にさっきのスロットサイトでプレゼント抽選会

会場みんなでスロットカウンターにアクセス！50番ごとのキリ番でプレゼント！
Flashは実際に動くとよくわかる　会場のみんな大興奮

…私？もちろん、またことごとく外れましたとも。

「なげーよ！いつまで続くんだよ！」って人すんません。
次で（たぶん）終わりです。第４弾に続く。

Twitterで記事を紹介して下さい（-人-）

北海道WEBコンソーシアムの特別イベント「夏祭り（アドビ特集）powered by CSS Nite」。
こういう勉強会にもっと出よう！と参加してきました。

講演の内容をメモしてきたので、４回にわたってレポートです。

開場

開演した直後は席もまばら。あれー？と不安になる。
じゃんけんも抽選もことごとく外れる。

Adobeクリエイティブツール最前線! ～アメリカ直送の最新動向ご紹介～

アドビ システムズ　西村さん

以下走り書きママ（間違いがあるかもしれません）

Flash Palyer10について

• コミュ機能強化 / 外部ライブラリを使いやすくする
• カスタムフィルタ / 有志制作のフィルタを読み込める　ほぼ1KB以下
• リッチテキスト強化 / 多言語・日本語組版に対応可能になった
  （カタログ・ケータイ小説にも使える？）
• 3D効果（写真をX軸 / Z軸を中心に縦回転されることが簡単になった）
• RTMFP（リアルタイム・メディアフロー・プロトコル）対応
  UDPベースのセキュアなプロトコルも可能になった…みたい　私にはまだよくわかんない（・ω・｀
• 音を認識して動画表現するのが簡単になる

Fireworks CS4 PublicBeta

午後のプログラムと同内容なので割愛

Dreamweaver CS4 PublicBeta

• 関連ファイル（画像・CSSJavascript）を上部ツールバーに一覧表示
• レンダリングエンジンにSafari・Google Cromeの「Webkit」を搭載
  （質問への解答：Safariと全く同結果ではないが、かなりリアルに近いプレビューとなる）
• jQueryなどの外部ライブラリもコードヒントに対応

なお、このときのデモ画面は、メニューがすべて日本語になってた（現在の配布版は英語）。

アドビ夏祭りでの初公開だそうです。

おまけの話

North Kingdom

スウェーデンの地方にある制作会社　世界レベルの案件を次々とこなす凄い会社
田舎でもクォリティで世界にアピールできるという話 / 北海道の会社でも？

休憩中

看板の誤字に気づくwww

Webサイト制作の「今」とともに進化するDreamweaver CS4

アンカーテクノロジー　神森さん

西村さんの話に追加

プレビュー画面で要素にカーソルを置くと、おなじみの「アンカーアイコン」が出て
クリックで関連CSSがその場でポップアップされる（＝画面を遷移しない）

ライブビュー

• これまでのプレビュー画像は普通のHTMLページだったが、JavaScriptのDHTML効果もプレビューされる
  （ロールオーバー、hoverアクションがあればそれも再生される）
• ライブコード / コードビューを出しておくと、実際にJavaScriptでHTMLが書き換わるところも確認できる
• アクション中にF6キーを押すと、その瞬間の状態で停止できる
  （hover状態ならカーソルを離しても解除するまでhoverのまま）

バージョン管理システム「Subversion」の実装

• ファイルのバージョンNo.・差分情報を管理
• 修正箇所をコメントで記録できる
• ファイル単位だけでなくディレクトリのバージョン管理も可能

↑直し・手戻り・多人数制作を支援

バージョン復元の例：
ファイルを右クリック → バージョンコントロール → 改定履歴
履歴一覧から戻したいバージョンを選択 → 閉じる
再度右クリック → 最新バージョン取得 → 前のバージョンに復元できる

CSS Selector Specificity　（つづりあってたっけ）

• セレクタの記述順による加点状態を一覧表示
• 逆引きも可 / 重要度を指定すると、それに合ったセレクタ記述順をガイド

まとめ：間違いのない制作で現場もクライアントもハッピーになろう
（という神森さんは法被を着ている）

走り書きをそのまま文字にしているだけなのだが。
まだ午前のプログラムが終わらない。

（２）に続く。

Twitterで記事を紹介して下さい（-人-）