Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(4)

08fes

北海道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のためのセミナーを開くそうなので話を聞きにいこうと思います。


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

Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(3)

08fes

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

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は実際に動くとよくわかる 会場のみんな大興奮

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


「なげーよ!いつまで続くんだよ!」って人すんません。
次で(たぶん)終わりです。第4弾に続く。

Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(2)

08fes

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

Fireworks as phoenix(おめでとう、Fireworks 10周年!)

スイッチ 鷹野さん

Fireworksが大好きな鷹野さん
「Fireworks、WEB制作に特化しててとっても便利だよ!」という話

(三年愛用している私は、使っていない機能の確認やCS4の実装内容を確認してました)

簡単に言うと「72dpiのIllustrator」という感じだが
PhotoShopよりオブジェクトを扱いやすく、Illustratorより軽量

バージョン8までの便利機能
  • アンチエイリアスの制御が可能
    「硬い線」を選択すると縁の線がドット単位に / 透過GIF素材も簡単
  • 9スライス機能
    シンボル化するときに形を保持する場所を指定 / 伸ばしても文字やかどまるが崩れない!
  • 強力なベクターマスク
    あとでいくらでもパス調整可能 / ぼかしもきれいに反映
  • ボタンシンボル / hover状態もプレビューできる
  • Flashより細かいシンボル機能 / シンボルごとに文字など一部要素を変えられる
  • サイズを指定しての画像拡大・縮小ももちろん可能
CS3の便利機能
  • モックアップ作りに便利な機能
    「共有ライブラリ」から各OS用のフォームパーツをすぐ使える
  • ページ機能を実装
    全ウェブページを1枚のファイルで管理
    ロゴ等、全ページ共通のオブジェクトも作れる
    ラピッドプロトタイピング
    各ページのナビゲーションが、クリッカブルマップでつながっているデモページを作れる

PhotoShop、Illustratorでデザイン作成 → Fireworksで仕上げ
理想的なワークフローの完成

CS4の追加予定機能
  • 9スライス機能がシンボル化しなくても可能に
  • ライブグラデーション / グラデーションハンドルを操作中もリアルタイムで色が変わる
    (CS3まではドラッグをやめないと色が変わらない)
  • 角丸の半径を「px」で指定可能 / 拡縮しても角の半径が決まっているので丸みが変わらない
  • テキストの強化 / アンチエイリアスがPs・Ilと同様に!画像テキストがガビガビしなくなった!
  • ものさしツール / カンプ用。
    ドラッグした範囲に 「┣━━━━━ 456px ━━━━━┫」というガイドセットを作ってくれる
  • スマートガイド / Flashには既にあった機能
    ドラッグ中に他のオブジェクトと揃っているか点線で教えてくれる
  • PDF出力に対応
    リンクなどはクリッカブルなまま書き出し / パスワードプロテクション / ハイライトによる注釈追加

macromedia消滅でなくなるかと思われたが(当時は普通にハラハラした)、
ImageReadyと入れ替わりに、しっかり残ったFireworks

Fireworksは今後も役割を与えられて生き残っていくよ!

昼休み

メンチカツパンをかじっていたら、@makiesさんが来場
おとなりに移動

以降、makiesさんの話も参照してね

>> わすれないように. – アドビ特集 夏祭り ・・・他

仕事の関係の営業さんに会う WEBコンの会員だったようだ
部下の人を連れられていたので名刺を交換する 宜しくお願いします…


そして午後の部…

ふとプロジェクタの画面をみると、そこにはなつかしのみかん星人が!!

午後はいったい何が起こるのだろう、
と思わせぶりに第三回へ続く。

Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(1)

08fes

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

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

開場

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

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

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

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

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

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

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

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

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

おまけの話

North Kingdom

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

休憩中

20080906121422

看板の誤字に気づくwww

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

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

西村さんの話に追加

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

ライブビュー
  • これまでのプレビュー画像は普通のHTMLページだったが、JavaScriptのDHTML効果もプレビューされる
    (ロールオーバー、hoverアクションがあればそれも再生される)
  • ライブコード / コードビューを出しておくと、実際にJavaScriptでHTMLが書き換わるところも確認できる
  • アクション中にF6キーを押すと、その瞬間の状態で停止できる
    (hover状態ならカーソルを離しても解除するまでhoverのまま)
バージョン管理システム「Subversion」の実装
  • ファイルのバージョンNo.・差分情報を管理
  • 修正箇所をコメントで記録できる
  • ファイル単位だけでなくディレクトリのバージョン管理も可能

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

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

CSS Selector Specificity (つづりあってたっけ)
  • セレクタの記述順による加点状態を一覧表示
  • 逆引きも可 / 重要度を指定すると、それに合ったセレクタ記述順をガイド

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


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

(2)に続く。