WWW.AKIRAFUKUOKA.COM BLOG

無限スクロールでビガビガするイカれた同人特設サイトを作ったぜ!! の話。

2014.12.24 Web

adtrance4_0.jpg

光の速さで作った光サイトです

本当はこの話を光 Advent Calendar 2014に書きたかったんですが間に合わず。毎年恒例になりつつありますが、同人音楽サークルDivese SystemからリリースされるトランスコンピレーションCD「AD: TRANCE4」の特設サイトを制作しました。スケジュール云々の都合により実質4日間くらいでメインの部分は作ったんですけど、大胆なレイアウトとエフェクトを楽しんでいただけるサイトになったんじゃないかと思っています。

テーマは “無限”

このCD、なにがすごいかって4枚組なんです。4枚といっても薄く伸ばされたものでは決してなく、ハイクオリティな楽曲が詰まりに詰まった4枚なのがすごい。ちなみにこのシリーズ前作「3」が3枚組なので一枚ずつ増えている…!! ということはCD1枚の厚みが1.2mmだからこのままシリーズが続けばAD: TRANCE 3146667にはCDを重ねた高さが富士山を超える…かはさておきやはりクオリティを維持しながらボリュームが増えていくというのはすごい話だと思うわけです。そんな無限感を安直に無限スクロールで表現しました。上下左右、どちらに進んでもOK。文字が全体的に斜めっているのは無限スクロールと相性がいいからです。あと無限スクロールはタッチ端末との相性がいいだろうなという読みもあったりします。自分で見つける、ということにコミケしかり同人しかりの醍醐味があると思いますから、この4枚組という無限に広がる広大なアルバムからあなたの好きなアーティストを見つけ出してください!

Web Audio APIとWebGL

fig.1に続き、今回もWeb Audio APIを使って音を鳴らしてます(ほんとSoundCloud貼りゃいいのにね!)。でWeb Audio API経由で波形データを読んでWebGL、というかPixi.jsに突っ込んでキラキラ光彩を背景をアニメーションさせてます。コード的にはシャイニングフォトン【滅】を継承しつつ、動きはだいぶいじってますね。本当はthree.jsを使って3Dでエフェクトを作っていこうとしてたんですが、いただいたジャケットのデザインが玉ボケ満載のきれいなイメージでしたのでエフェクトもそれに合わせました。トランスという音楽のジャンルはアッパーで高揚感のあるものですからそんな音楽性をサイトから感じてもらえたら嬉しいです。

「同人」をどう捉えるべきなのか?

自分の中にはもしこういったシーズンで行われる同人制作物がルーティーン化してしまったとしたら、という漠然とした恐怖感がありました。このCD「AD: TRANCE 4」がリリースされることがどれだけ大ごとなのか、自覚的であって欲しい、という身勝手な思いが、限界を超えてこういうサイトを作ろうという原動力になっていたように思います。Diverse Systemに関係する人たちがいかに特別なことをしているか、自覚的であってほしいし、それこそがDiverse Systemが持つブランドなんだって信じてほしいのです。だってルーティーンになった制作なんて悲しいじゃないですか。私が同人という自由、了承を得ているのに「ヘッダーにビジュアルを置いて、タイトルと値段を書いて、曲リストを置いて…はい完成!」っていうのはもったいないと思うわけですよ!一方で情報を伝える責任もあるわけで、最後まで死ぬほど悩みながら締め切りに追われる辛い思い出ばかりが残っております。もちろん微塵にもアクセシビリティが高いサイトだとは思いませんが、もしまた機会があれば両輪を成立させたようなものが作りたいとは思います。もっと豊かなクリエイティブができるんだということを信じていきたい、2014年末でありました。バカを毎度笑って許してくださっているYsK先生および関係者の皆様にごめんなさいとありがとうの気持ちを記して結びとさせていただきます。コミケ3日目 12/30(火)、東4ホール シ-80Bにみんな集合だかんね!!!!

「ツイートボタンから画像付きツイートをツイートさせる方法」スライド作りました。

2014.05.27 Web

twitter_image_0.jpg

どのSNSも「画像を使ったコミュニケーション」を重視するようになり、シェアする際に付属するイメージが極めて重要になってきた。Facebookはご存知の通りOGPがあり、og:imageが重要な働きをしていることは言うまでもない。TwitterにはTwitter CardというOGPに激似の仕組みがあるが、Facebookとは違い「タイムラインでは表示されない」。そのくせ写真を貼付して投稿したらでかでかとタイムラインに表示してくる。"コンテンツをシェア・拡散してほしい" と願うコンテンツ制作者の中で、このTwitterタイムラインに関する現実のギャップを埋める必要が少なからずあるのではないかと思い、比較的くだらないネタではあるのだがスライドにしてみた。

簡単に言えば「画像添付したツイートを行い、Twitter上に画像をアップロード。その画像URLをツイートボタン本文に挿入する」だけの話だが、初めてslideshareを使うにあたってテンションが上がり話が長くなった。RAW-Fiではこの「エントリー公開」→「公式アカウントでの自動ツイート」→「ツイート結果から画像URLを抽出、DBに保存」→「エントリーのビューに反映」を自動化している。投稿の一部では既にツイートボタンに画像URLを挿入している(例えばこのエントリー内の「ツイートする」ボタンで確認できる)。

twitter_image_1.jpg

これをツイートすると

twitter_image_2.jpg

こうなる。

問題点は当然「先に画像添付したツイートを行う」ことである。キャンペーンサイトなどでは情報公開をフライングするにはいかないのでタイミングが難しい。また公式アカウントが存在しない場合もある。この点は画像をツイートするためだけの鍵垢を作成し、事前に画像だけアップロード→画像URLだけ生成しツイートボタンに仕込む→サイト公開と同時にアカウントの鍵を解除、という手で乗り切れる。がやや面倒だし、画像のURLからアップロードしたアカウントも特定できてしまう。要注意。

これだけがんばっても、どんなコンテンツも拡散するかは "内容次第"。ですが、Twitterでの拡散に悩める皆様の一助になれば幸いであります。

Diverse System "JAPAN" Weサイトを制作しました

2013.08.11 Web

DIVERSE SYSTEM - JAPAN - C84 三日目 西2 あ41a -

DIVERSE SYSTEM - JAPAN - C84 三日目 西2 あ41a -

thE3/3.5から1年ぶりにDiverse Systemさんのウェブサイトをお手伝いさせていただきました。

コミケ3日目西2 あ41aDiverse Systemブースでで頒布されるオリジナルCD「JAPAN」。イラストは深崎暮人さん、グラフィックデザインはtatsくんという例によって強力布陣、サウンドクリエイターの皆様もDiverse Systemでおなじみのこれでもかっ!なラインナップ、そしてタイトルの通り「日本」をテーマにした新しい試みの1枚、ということでプロデューサーのYsk-439さんにお声がけ頂き今回も約1年ぶりにお手伝いさせていただくことになりました。

ミーティングの後、CDの情報を頂いて制作を開始することになったんですが、あまり情報量がなかったんです。Webサイトは必要な情報を伝えるための手段です。キャッチやボディコピーもいろいろ考えてそれを提出しようかなと思ったんですが、ミーティングでのお話を思い出すと「CDというプロダクト自体で作品を語りたい」という意思があるように感じられましたので、妙な説明は加えない方向にしよう結論に至りました。確認したところ、それでいきましょうということに。ですからわかりにくいサイトです。本来のWebサイトの役割としては失格ですが、わかる人にわかってほしい、大切にしてほしいという思いをどこかで受け止めてもらえたらという気持ちで制作させていただきました。Diverse Systemのファンの皆さんには更に愛していただけるような、全く知らない方に対しては「こんなことをやってる人たちがいるんだな」と知っていただけることが目標でした。

それでは以下、言い訳です。

デザインも最初はもうちょっと "しとしと" とした和の世界を考えて用意していたのですが、楽曲のデモをいただいて「違うな」と。さらにtatsくんのジャケットが来て「やっぱり違うな」と。結果tatsくんが作った世界観をどーんと出すべきだろうという結論に至り今回のサイトの形になりました。そのため実製作期間が1週間ほどにぎゅーっと圧縮されることになりましたがその中でどこまでいろいろ盛り込めるかな、という楽しみもありました。

全編にわたってtatsくんのジャケットデザインの再構築ですが、トップページだけは "借景" をイメージして新規に制作いたしました。普通借景で障子が開いて見えるのは庭や茶室でしょうが、鮮烈な赤の中に入っていくというのはこのアルバムを象徴するような体験になるのではないかと。今回の目玉は自分がその世界に入っていくような3Dエフェクトですが、前回のthe3/3.5で使った蛇腹エフェクトを覚えている方にはニヤりとしていただけたかなと思います。

canvasでパーティクルの描画もしていますが、これもtatsくんの今回のデザインで登場する要素にパーティクル上のエフェクトが何点か使われていましたので、それをキラキラとしたものに勝手に解釈させていただきました。iPhoneでも速度が出ててちょっとビックリ。もうちょっとこだわりたかったですが、あくまでおまけということで。本当はもっともっとやりたいことがあったんですが(Audio APIとかWebGLとか)モバイル対応&〆切優先ということでちょっと盛り込めなかったですね。次回があるかどうかはわかりませんが、また今度、挑戦できればと思います。ただそのおかげでiPhone&iPadは完全にPCと同じように見れますのでデバイスをお持ちの方はぜひ見てみてください。予想以上にすいすい動いて楽しいと思います。

今回も私のわがまま案をそのまま通してくださいましたプロデューサーのYsk-439さん、本当にありがとうございました!与作さんの男気に本当に打ち震えました。そして今回tatsくんのデザインを "借景" させていただきましたが、サイトを見て笑ってくれたのが私にとって救われた瞬間でありました。

もう本日になってしまいましたが、夏コミ3日目、西2あ41a、Diverse Systemブースにぜひお越し下さい。3Dで回っている本物のCD、ぜひ手に取ってみてください。そしてお買い上げいただければ幸いです。

Diverse System「thE3/thE3.5」ウェブサイトを制作しました

2012.05.27 Web

the3_0.jpg

the3_1.jpg

DIVERSE SYSTEM - thE3 / thE3.5 - あ-35a 博麗神社例大祭9 -

個人的な依頼で同人CDの特設サイトを作りました。Diverse Systemの東方アレンジアルバム「thE3」と「thE3.5」のためのサイトです。ジャケットデザインは我らがtatsdesignmashana君が担当、楽曲提供陣の中にはRaw-Fi 3DでもDJをやっていただいたMasayoshi Minoshima先生もいらっしゃいます。同人という枠を考えてもとても豪華な布陣の作品となっています。

このthEシリーズは歴代のサイトも凝ってまして、dearthink君が制作したthE2thE2.5はこういうアイデアがあったか、と思わせる大変素晴らしい出来でした。この状況で私に番が回ってきたわけですからこれはちょっとがんばらにゃ…と考えて制作したのが今回のサイトです。時間もない中、一発で面白いと思ってもらえる着地点を考えた時に、モバイルでも使えるCSS3に自然と落ち着きました。iPhone/iPadのRetinaディスプレイで味わっていただくのも一興です。残念なのは細部の詰めが時間切れになってしまったこと。コンテンツも含めて見直す時間も取れなかったのは心残りであります。本当にこのスケジュールで作っちゃうdearthink君は凄いなと感心しましたよ。僕にはなかなか厳しいですね…!!

ということで仕事の線じゃまず成立しないものを作ってしまったんですが(ざっくり言ってパタパタするだけのサイトですから)、サークルDiverse Systemの代表でありますYskさんに驚いてもらいたかったというのがすべてだったかなーと思います。制作にあたってまず最初に「自由に作っていいよ」という言葉をいただきましたが、その言葉は適当にやっちゃってという意味ではなく、クリエイティブの枷になるような事は極力外したいのだという意味だと思いますし、クリエイティブに対する理解ももちろんある方ですから、その想いに応えなければ男が廃る、そう思った結果が今回のサイトの形になりました。チャレンジできる環境を用意していただきありがとうございました。

本日開催の博麗神社例大祭で2枚とも頒布されますので,興味がある方はぜひ東京ビッグサイトに遊びにきてみてくださいね。ちょっと移動すればお台場のガンダムも見れますし!

FIVE DOT ONE "TWENTY THREE TO FOUR"。HTMLでサイトを作り、HTMLで映像を作りました。

2011.12.27 Music

fivedotone_0.jpg

TWENTY THREE TO FOUR | FIVE DOT ONE

レーベル「FIVEDOTONE」の第一弾CD+DVDアルバム、「TWENTY THREE TO FOUR」のサイトを制作しました。TWENTY THREE TO FOURはその名の通り「23時から4時までの5時間」をコンセプトとして5組の音楽家と映像クリエイターにるエレクトロニカアルバム。そしてジャケットのデザインは今をときめくtats君です。これだけのメンバーが揃った作品ですから、サイトもそれに恥じないものにしなければ…!!と張り切らせていただきました。ジャケットが完全白黒なので、白黒2階調GIFでまとめてみました。トップのロゴはマウスを乗せるとびりびりします。しびれるねぇ〜。こういうのは普通canvasタグでアニメーションさせるところですが、今回は全体的にアナクロな感じにしたかったのでbackground-imageを使ってびりびりさせています。意外とうまくいくもんですね。右上の半円はSVGです。SVGは今後ももうちょっと遊びたいですね。各曲紹介ページにもSoundCloudによる試聴と大きめのサムネールを用意してますんでぜひ堪能していただければと思います。

fivedotone_1.jpg

実はこの企画を起こした保田さん、山本さんのお誘いを受けて僕もDVDの制作に参加してまして、5曲目の "DAWN" という曲の映像を制作しています。音楽はお仕事でもお世話になっているカンガルー鈴木さんにお願いしました。テーマが「深夜から朝がた」ということで映画「ソーシャル・ネットワーク」の冒頭のような、行き場のない悶々としたやるせなさを4分の映像に詰め込んでみました。映像はすべてiPhone 4の中だけで進行します。新しい命と負う事、そしてこれからの世界で生きていく事をある男女のSMSを中心に描きました。劇中で映るのはほぼiPhoneだけ、人の指すらも映らない、という設定のため画面部分を独立した映像として制作する必要があり、HTMLで制作したデータを全自動でアニメーションするようJavaScriptを書き、それをスクリーンキャプチャして映像に変換し、iPhoneでその映像を再生…しているところをさらに撮影するという無駄に手が込んだ事をやっています。人が触れてないのにiPhoneが動き出す絵はなかなか面白いんじゃないかなと。音もばっちり、孤独感と強く生きる開放感という二つの場面の移り変わりを、落ち着いたエレクトロニカのなかに込めていただきました。カンガルーさん本当にありがとうございました!!

…と正直私の映像よりもほかの方の音楽・映像のほうがヤバいのでぜひ皆さんに楽しんでいただきたいアルバムです。CM制作の現場で活躍されている映像クリエイターの方も参加しているので必見ですよ。発売日は12月31日、大晦日。コミックマーケットC81の3日目に委託頒布されます(西あ-65a西あ-07a)。冬コミにいらっしゃる方はぜひブースに立ち寄っていただけれればと思います。実は僕はこれでコミケ初参加作品になります!どきどき!! 今作品は後日公式サイト上でも販売しますのでビックサイトの遠くに住んでいる方もご安心ください!

サイトも発売日直前にちょっとした仕掛けを施す予定です。アルバム名に因んだ仕掛けということで…もう少しお待ちください。それでは皆さんビックサイトでお会いしましょう!薄い本を買うのもいいですけど、ちょっとはお金残しておいてくださいね…!!

MOREWORKSにカプコンさんの求人情報が追加されました

2011.10.31 Web

moreworks_capcom.jpg

初めての出会いは1991年、超魔界村でした。明らかに攻略不可能だろうという難易度に驚愕しつつも何度となくトライしたくなるのはなぜだろう、そんな事を思いながらコントローラーを握る日々。

次に会ったのは1992年、ストリートファイター2。どうしても波動拳のコマンドが入力できなくてずっとガイルとか溜め専門キャラを使って友達と対戦。攻めるばっかりで守りが下手なのは今も昔も相変わらず。

その後も、ミッキーのマジカルアドベンチャーは何度となくクリアしたし、ロックマンXのスピード感のアクションに魅了され、バイオハザードでは恐怖におののきながらもご褒美のロケットランチャーを乱射し、大神では美麗な日本の風景とアマテラスの可愛さに癒され、高校時代の友人に勧められて買ったMHP3rdも最初は乗り気じゃないながらなんだかんだで何ヶ月もプレイし…カプコンさんはなんだかんだと僕のゲーム人生には必ず出てくるゲームメーカーであります。

そんなカプコンさんに、なんとMOREWORKSに求人情報を掲載していただく事になりました!MOREWORKSはハイクオリティなWeb制作会社さんの情報を集めよう、というコンセプトで始まった求人情報サイト。もちろんカプコンさんはWeb制作をメインとした企業ではありませんが、クリエイティブの世界から見れば大先輩中の大先輩。むしろ僕たちは後ろ姿を見て育ったような世代です。そんなカプコンさんの求人情報をMOREWORKSで紹介できるのは大変光栄であります。興味がある方はぜひ求人情報ページをご覧ください!!

…やっぱり最新のゲーム情報がいち早く知れたりするんでしょうか…!?

「ディーン藤岡オフィシャルサイト」を制作いたしました。

2011.09.01 Web

deanfujioka_0.jpg

http://www.deanfujioka.net/

主に台湾で活躍されていて、この度日本デビューが決定した俳優、ディーン藤岡さんのオフィシャルウェブサイトを制作いたしました。様々なソーシャルサービスから情報を読み込み、集約する新しい形の "芸能人オフィシャルサイト" です。

dean_fujioka_1.jpg

PCはもちろん、iPhone、iPad、Androidでも同様の形式で閲覧することができます。特にiPadは一番気持ちよく見れますね。ディーンさんご本人もiPadを愛用されているということでiPad対応は最重要事項でありました。

普通の芸能人サイトとはちょっと違う、どころかかなり "変なサイト" です。実は打ち合わせの際、ディーンさんがとてもたくさんのウェブサービスを実際に利用していることを知り(Twitter、YouTube、Facebook、SoundCloud、その他ブログサービスや後述するWeiboまで…!!)、これだけのWebサービスを活用している方ならば、その情報をそのまま利用した方が面白いサイトができるのではないか…ということで「ソーシャルサービスのセントラルページとなるサイト」を作ってみてはどうか、という提案をいたしました。iPadアプリのFlipboardのようなイメージですね。普通俳優や芸能人の方のサイトというとある一定のフォーマットがあるものなのですが、それを完全度外視、しかもレイアウトまで自由自在、というむちゃくちゃな提案を承諾してくださいましたディーンさん、そしてアミューズのスタッフの皆様、本当にありがとうございました!!

日本語、英語、そして中国語に対応し、なおかつこれだけたくさんのソーシャルサービスとコネクトしたサイトを制作するのは僕も初めての経験でした。現在サイトにはTwitter、Facebook、YouTubeの情報がコネクトされています(サイトとしてはSoundCloudにも対応していますが利用されていない状態)。またご存知の通り中国ではTwitterが利用できませんので、"中国版Twitter" ことWeiboを利用しています。このバリエーションの豊富さは英語も中国語もできて、音楽や映像編集までこなしてしまうディーンさんの多才さをそのまま反映したサイトになったのではないでしょうか。

芸能人の方もウェブ界隈への進出が目覚ましい昨今、オフィシャルサイトの役割も変わっていくと思います。主戦場はコミュニケーションや機能主体のソーシャルサイトに移行し、オフィシャルサイトは空洞化していく…そうではなくオフィシャルサイトソーシャルメディアの中心になるサイトとして、今回のディーン藤岡オフィシャルウェブサイトが発展することを期待しています。

ディーンさんご本人にもお会いしましたが、かっこいいしイケメンだし、本当に無邪気な少年のようなすてきな方でした!裏表もなく明瞭快活で、ああ、これが真のイケメンなんだな…と思い知らされた次第です。やはり人の前に立つ方は違いますね。これからの日本でのご活躍を楽しみにしております!

(なぜか)Fi-VJがDTMマガジンで紹介されました!

2011.06.15 Book

fi_vj_dtm_magazine_0.jpg

Twitterで報告を受けて知ったのですが、なんと私制作のHTML5 VJ App「Fi-VJ」DTMマガジンで紹介されました!ご存知の通りDTMマガジンはPCで音楽を作る人のための情報雑誌。でそこでなんでFi-VJが紹介されるのか「何を言ってるのかわからねーと思うが(ry」と言いたくもなりますが、新しい音楽制作スタイルの特集ということで「HTML5で音楽アプリが作れる?」というコーナーが組まれております(p.54)。で、そこで小さくFi-VJが紹介されているんですが、なぜ音楽アプリでもなんでもないFi-VJが掲載されているのかは謎。編集者の方からも特に連絡はなかったし。

しかし音楽制作を夢見るものであれば一度は必ず目を通すと言われるあのDTMマガジンに私の作ったものが紹介される日が来るとは夢にも思いませんでした。このような機会を与えてくださったDTMマガジン編集者の皆様本当にありがとうございました!! 店頭でDTMマガジンを見かけたらぜひ手に取って読んでみてください。KORG monotribeの特集楽しかったです。

HTML5 VJ App「Fi-VJ」についてはこちら

【ヤシマ作戦】エヴァ風Webアプリ「輪番停電計画 for iPhone」にdonate.bookmarkが!

2011.04.06 Web

rinbanteiden_donate_bookmark_0.jpg

『ヤシマ作戦』の名目で輪番停電のための節電を有志が呼びかけたことは既に皆さんご存知かと思いますが、先日より@magimatsushiroさんがiPhoneで観れる輪番停電計画 for iPhoneを公開しています。エヴァ風のデザインで、iPhoneでアクセスすると位置情報を取得し、実施エリアのグループ番号と自分のいる地域の輪番停電までの時刻が表示されます。これから当分の間計画停電が実施されるという話ですが、Webアプリとしてすぐに利用できるのでとても便利ですね。

…で、驚いたことにこの輪番停電計画 for iPhone、先日リリースしたdonate.bookmarkのブログパーツを貼っていただいております!エヴァファンの私としても(っていってもべ、別に旧エヴァなんか好きじゃないんだから!! 新劇場版が好きなだけなんだから勘違いしないでよねっ///)こういったところで利用していただけるのは本当に嬉しい限りです。ただ、これは一人のファンの考えですが、donate.bookmarkのブログパーツは極力シンプルに作ったつもりですが、エヴァ風の世界感とそんなに親和性が高くないように感じてしまいました。

これはもったいない。

そんなわけで特別に輪番停電計画のサイトに表示されるブログパーツにのみ、ちょっとだけエヴァ風に表示されるような仕掛けを施しました。俗に言う「サービス サービスぅ!!」ってやつです。"緊急措置に伴う特例" ですので、残念ながら皆さんがエヴァ風ブログパーツを使うことはできませんが、通常のシンプルスタイルのブログパーツはすぐにご利用になれますので、こちらからコードを取得していただければと思います。今回のアップデートでは日本語版のボタン変更や、IE対応なども進めています。

輪番停電計画 for iPhone、便利なサイトなので皆さんもiPhoneのホーム画面に登録して使いましょう。そしてdonate.bookmarkも引き続きよろしくお願いいたします。

どうしてもブログパーツをエヴァ風にしたいなら… donateBookmarkBT.eva=true; をブログパーツ実行部分の直前に書き込みましょう。

今すぐ募金できるサイトを集めたブログパーツ配布サイト「donate.bookmark」を作りました

2011.03.29 Web

donate_bookmark_0.jpg

donate.bookmark

まず、今回の東北地方太平洋沖地震に被災された皆様に心からお見舞い申し上げます。

自分も何かできないかということで、個人で被災地への募金したり、Raw-Fiイベントでの収益金の一部を募金したりしてきましたが、それ以外にも何かできることはないかと考えていました。少なくとも自分が運営に関わっているABMやMOREWORKSからリンクできるサテライトページのようなものを作ろうと思っていたのですが、社長が「被災地への募金ページへのリンクを集めたブログパーツが欲しい」ということでdonate.bookmarkを作りました。

donate_bookmark_1.jpg

縦型/横型、英語/日本語、白背景用/黒背景用、それぞれ選択できるようになっているブログパーツです。言語によって募金先が変わるようになっています。もちろん当ブログでもサイドバーで現在利用中。もしお持ちのブログのサイドバーやヘッダーにスキマがあるよ、という方、そして今回の震災に対して何かできないか、と思っている方にぜひ使っていただければと思っています。

さて、以下蛇足。

donate.bookmarkは2週間前くらいから着手して、ゆっくり作ったサイトなのですが、個人的にはもう「このサイト公開しなくていいんじゃねえか」と思っていました。被災地の力になれれば、と思い作り始めたページでしたが、果たしてこのページにどれほどの意味があるのか、と考えたときに手が止まってしまいました。さらにこのページは会社に(つまりFICCに)属するページですから極力強い表現などを避ける必要がありました。震災以降、いろんな制作会社さんが善意でサービスや素材などを提供していますが、ほんのわずかな手落ちでも「不適切」「間違った認識が広がる」という理由で批難を浴びるケースもありました。隙があれれば突っ込まれる。その結果として生じる会社の不利益は避けなければなりません。そう考えながらこの2週間は悶々としていました。

ページを公開した結果、それらの心配は(今のところ)杞憂に終わりました。ページ公開後、たくさんの方にTweetやLike、ブックマークなどしていただき、多くの人の目に触れてもらうことができました。自分のできることは本当に微小であることを改めて痛感しましたが、それでも、わずかでも震災の復興の力になれるなら、そしてこの災害の記憶が1年、2年、いやそれよりも長く人々の心に風化せず残り続ける一助になれるなら本望です。

【決定】ABMブックマークオブザイヤー2009に輝いたのはこの2サイトです!!

2010.01.05 Web

そういえばあけましておめでとうございます!! 今年も宜しくお願いいたします。

既に年が明けた時点で決定していましたが改めてアナウンスさせていただきます。ABMブックマークオブザイヤー2009結果発表です(全24サイト解説はこちら)。投票数は4年の中でも最高、またTwitterでつぶやいていただいた方も多く、過去最大の投票会になりました。後でまたぶっちゃけますが、2部門共に本当に接戦でした。どちらも2位との差、1票!その接戦を勝ち抜いた2つのサイトを改めてご紹介します。

プロモーション部門グランプリ「Cam with me」

abm09_final_camwithme_0.jpg

ハンディカムで記録する娘の成長…もしも娘が生まれたら、そんな状況を疑似体験できるソニー・ハンディカムのスペシャルコンテンツ「Cam with me」が見事プロモーション部門のグランプリに輝きました。

プロモーション部門の中でもCam with meは特に広告的、CM的と言えるサイトです。あるストーリーを一方的に送り共感してもらうことで、商品に対して興味を持ってもらう…ソーシャルウェブ時代からすればある種前時代的とも言えるかもしれない。しかしWebの持つ「インタラクティブ」な力がそれを少し変わったものにしてくれたのではないでしょうか。このコンテンツでは「録画」をしなければ意味がありません。録画という行為を自ら能動的に起こさなければ、エンディングに待つ「映像のフラッシュバックという感動」には辿り着けないのです。このコンテンツの伝えるメッセージはそこです。子どもの成長を見守ることを経て、「子どもの成長を振り返る未来の自分」を疑似体験するコンテンツ、それがCam with meなのです。振り返るには振り返りたい時の「記録」が必要です。だから親は常に録画し続けなけらばならない。そしてそこにはいつもソニーのハンディカムがある、と。

ブログやTwitterで当時私が見たのは、このコンテンツを通して親に変身した人たちの姿でした。子どもも持たなければ結婚もしていない人たちが、液晶の向こうに映る娘の成長を通して親に変わる瞬間。人に語りたくなる感動。最後に勝利するのは人の心ですね。人の心を動かす力の強さで見事グランプリに輝いたCam with me。おめでとうございます!

クリエイティブ部門「Wonderwall」

<abm09_final_wonderwall_0.jpg

クリエイティブ部門グランプリを獲得したのは、ぐにゃりと動く不思議な壁「Wonderwall」でした。ブログやTwitter上での反応を見るに、勝利の決め手は「どこでも体験したことがない感触」なのではないかと思いました。我々が触れるセカイというものは実に多種多様です。テレビ、新聞、ラジオ、ゲーム、ウェブ、そして広大な現実…様々なチャンネルで我々の受ける感触、その中でもWonderwallが提供する感触は新しいものだったのではないでしょうか。まず、理知整然としていない。Webでリストというものは当然見やすく整理されているはずのものですが、全体がだらしなくだらりと歪んでいる。そして自由に動く。マウスの動きにあわせてぐにゃりぐにゃりと表情を変える。しかしあまりに勝手に動くわけではなく、ある範囲で収まるような動き。現実ほどカオスではなく、Webほど整然としていない…Wonderwallはまさに「感触のグレーゾーン」。

例えば、iPhoneの操作には独特の心地よさがあるように、マリオのジャンプには言い表せない楽しさがあるように、人は画面の向こうの反応にも感触を得ることができます。そして新たな感触がWonderwallにはありました。グランプリ獲得、おめでとうございます!

惜しくも2位…

2位の発表は例年してませんし、今年もするつもりはなかったんですが、プロモーション、クリエイティブ部門共に、1位2位の差が1票差(!)という奇跡的なデッドヒートが展開されていましたので、ぜひここで紹介しておこうと思います。

entry_img_nakano.jpg

プロモーション部門得票数第2位は「ナカノクエスト」です。Twitter、Googleマップ、投稿、投票、政治。今をときめくものがこれでもかと全て詰め込まれたコンテンツであること、それがナカノクエストの得票数の原動力でしょう。政治は今ネットで最も関心が集まっているジャンルの一つですが、現職の議員さんが、そこにコミュニティを作り、さらにリアルタイム性まで持ったサイトが現れたのは大きな衝撃だったのではないでしょうか。市民からの様々な依頼に対して、本当に真面目に対応されるのかという不安もありますがそこはネットですから、こちらも検証できますしさらに議員さん本人に(目に見える形で)直接訴えることもできるでしょう。新しい可能性を多いに感じさせてくれるサイトでした。

entry_img_vbt.jpg

クリエイティブ部門得票数第2位は「全日本バーベイタム選手権」です。いやぁ惜しかった!! これで1位とっていたら2006年、2008年、そして2009年と城戸さんの制作されているコンテンツが3回グランプリを獲得する快挙を成し遂げるところだったのですが…いやそれにしても凄いことだと思います。多くの人が「Webでここまでできるのか!」と驚いたことでしょう。3Dで描画されるクオリティの高いグラフィック。3Dキャラのコミカルでなめらかな動き。そして簡易的ながらも完成されたゲームシステム。「バーベイタム」という聞き慣れない名前を覚えるに十分なインパクトを発揮していました。

今年はTwitterで皆さんにつぶやいていただいたおかげか、ブックマークオブザイヤー、例年以上の盛り上がりだったと思います。ひとえに投票し応援していただいた皆さんのおかげです。ありがとうございました。そしてもちろん、2009年、数多くの素晴らしいサイトを制作されたクリエイター・関係者の皆様のおかげでこのような勝手な賞を行うことができているわけであります。ありがとうございました。2009年お疲れ様でした!2010年も皆さんに少しでも多くの素晴らしいサイトを知っていただけるようABMも尽くしていきますのでよろしくお願いいたします!!

【各サイトの解説付きだよ!】今年のNo.1は12+12サイト中どのサイト?ABMブックマークオブザイヤー2009、決選投票スタート!

2009.12.29 Web

BOOKMARK OF THE YEAR 2009 | ブックマーク・オブ・ザ・イヤー2009 - AnotherBookmark

もううるさいなぁ!!と言われそうな勢いでTwitter上で@akirafukuoka@anotherbookmarkが宣伝しまくってますが、今年もこの季節がやってまいりました。ABMブックマークオブザイヤー2009

今年はこれまでと趣向を変えて「プロモーション部門」と「クリエイティブ部門」に分けました。去年YouTubeのワリオのやつがあったんですが、枠がなくてノミネートできなかったんですね。そんなわけで今年はサイトの作りよりもアイデアや独創性を重視する「プロモーション部門」を作ることにしました。従来のブックマークオブザイヤーで取り上げてきたようなサイト自体のクリエイティブを重視する「クリエイティブ部門」の2つでやっていこうというわけです。さらに今年はTwitter上での皆さんの声も取り入れた形で各部門12サイト、計24サイトを選出しました。

投票は今年いっぱい、つまり2010年1月1日 0:00まで。忘れないうちに早めに投票お願いいたします!! せっかくですからノミネート全24作品を簡単に解説。

プロモーション部門

Cam with me
entry_img_comewithme.jpg
娘を持った親、というシチュエーションでハンディカムでの撮影が体験できるコンテンツ。成長していくわが娘を目の前に、結婚していない人までも「これは泣ける」と話題に。大きめのブログパーツを使ったブログプロモーションも。ブログ、ブクマサイト、Twitterと話題を駆け巡ったコンテンツですね。私もこのコンテンツの中で娘が高校生位になったときに彼氏が映ったときにかなりイラッとしましたw これが父親の気持ちなんでしょかね。

NAKANO QUEST | ナカノクエスト
entry_img_nakano.jpg
Twitterの登場でネットの政治利用が論議される昨今、さっそく本物の政治家さんがTwitterとGoogleマップを使ったコンテンツを。我々が実現して欲しい要望を「クエスト」として投稿。クエストをクリアしていく様子をTwitterとGoogleマップを連動させて表示。デベロッパー陣からの推薦が多くノミネートされました。当の奥田けんじ先生にもRTでブックマークオブザイヤーを応援(?)していただきました。先生、どうか組織票はほどほどにお願いいたしますw

BURGER KING? WHOPPER? VIRGINS
entry_img_whopper.jpg
「FaceBookでマイミク10人切ったらタダ券あげるよキャンペーン」も鮮烈だった今年のバーガーキング。ご自慢のワッパー(ビッグマックみたいなやつね)が本当にうまいのかを調べるにはどうすればいいか。ハンバーガーを食べたこも触れたことも、ましてや見たこともないような人たちに食べさせて、うまいかどうか判定してもらおう!! というイッテQ的なノリのコンテンツ。テレビっ子の私的にもこのノリ好きですねえ。

Honda Insight - Let It Shine on Vimeo
entry_img_insight.jpg
今年の「ワリオ枠」とも言えるホンダ・インサイトのバイラルムービー。たくさんのライトを使った映像自体もさることながらVimeo特設ページのギミックも素晴らしい、映像の枠を超えたコンテンツ。YouTube以上にクリエイティブの意識が高いVimeoでこのキャンペーンを打ったのもよかったですね。美しいハイブリッド車の新たな夜明け。

Eternal moonwalk - A tribute to Michael Jackson.
entry_img_eternal.jpg
今年惜しくも他界したマイケル・ジャクソンの追悼コンテンツ。みんながYouTubeに投稿したムーンウォーク映像を繋ぎあわせて「終わらないムーンウォークを作ろう!!」という企画。もちろんスタートは "ネバーランドにお住まいの" マイケル・ジャクソンさん。老いも若きも時には人間じゃないのもみんなみんなムーンウォーク。

We Choose the Moon
entry_img_themoon.jpg
今から40年前、アポロ11号は月に降り立った。アポロ11号の打ち上げの瞬間、月面着陸までをサイトやTwitterを使って再現し、当時を追体験しようというコンテンツ。最新のツールを使って過去の瞬間を体験するという発想が面白いですね。


Carousel: A Cinema 21:9 Production
entry_img_philips.jpg
Philipsから発売される16:9を超える21:9型テレビのプロモーションサイト。テレビもすごいんでしょうが何より映像が凄い。警察が強盗団を取り押さえる瞬間をストップモーションで表現した映像なんですが、とにかく映像のクオリティが凄い。どうやってつくったんだ!?の連発です(メイキング的な映像がところどころで見れるようになってます)。そして映像の最後には衝撃の大どんでん返しが…!!

playface.jp
entry_img_playface.jpg
ネットを通じて世界中の人とゲームが遊べる時代ですが、やはり私は同じ場所でわいわいやる方が好きですね。リアクションがわかるだけでも全然楽しさが違うなと。楽しいゲームをやっているとついリアクションが顔に出る、それを全国で撮影して "顔対決" させよう!という企画。投票はサイトもしくはYouTubeで行われるという点もいいですね。顔の勝負、といっても女の子が勝つとは限らないのもまた世の中の面白いところです(優勝は女の子だったけどねw)。ご存知のCMもインパクト強かったです。

Honda | エコグランプリ | Formula E
entry_img_honda.jpg
「なんとまあFlashでレースゲームができる時代になっちゃいましたか。オープニング映像も凝ってるし。よしじゃあ早速やってみよう、とりあえずアクセル全快」『赤信号での侵入です』「えーっ!?」…このコンテンツはレースゲームじゃなくて "ドライブシミュレーション" 。どれだけ速く走れるかではなくいかに燃費よく走れるかが鍵。もちろん交通法規は守りましょう。ゲーム自体のクオリティの高さとそこらへんのズッコケ具合のミスマッチがよかったですね。

宅配ピザのドミノ・ピザ
entry_img_domino.jpg
ノミネートされた24サイト中唯一のHTMLメインのサイト。「ピザ屋のサイトなんだからピザ注文させるだけでしょ」いやいやいやこれが凝ってるんですよ。映像を使ったトップページ、使いやすい注文システム、そして注文後のお楽しみと見事な畳み掛け。更にはケータイサイトやメールを使った細かなプッシュ…大技小技の連発に参りました…とりあえず年末年始は試しに注文してみては?FICCでもこのサイトをノミネート推薦する人が多かったです。

MUJI Global | playMUJI
entry_img_playmuji.jpg
「ゆりかごから墓場まで」とは言わないまでも多種多様な商品を取り扱っている無印良品。その商品たちを一日一個ずつ小さな映像で紹介していくコンテンツ。映像の作りも "無表情とまではいないくらいの表情" が出ていて無印らしさが漂います。ブログパーツもかわいいし、こと細かな設定ができて◎。しかし1年振り返ってみると壮観ですね。どかんと一発型のコンテンツもいいですが、小さいことをコツコツとというのがWebらしいくてはまっています。

SCR
entry_img_scr.jpg
最近はブログ等のツールが充実してきたためWeb上でのクリエイターのアウトプットが減ってるように感じてしまうんですが、thaさんがスクリーンセイバーを売るサイトをクリエイターの発表の場として新たに創出しました。今流行の小額課金も盛り込んだ新たなチャレンジだと思います。


クリエイティブ部門

バファリス
entry_img_bafaris.jpg
まず先に言っておこう。カワイイは正義!! バファリン型バッグを携えたリスのキャラクター「バファリス」があなたの悩みをタネにして食べてくれます。こういった投稿型診断コンテンツはやや面倒だったりするんですが、かわいいキャラが聞いてくれるというのと、ダイアログを選ぶだけというのも相まって簡単に投稿できるようになってますね。調子のいいことにしっかり情報も取っていくしゴニョゴニョ…やっぱりカワイイは正義!! CG含めサイトの作りもいいですね。

Wonderwall
entry_img_wonderwall.jpg
中村勇吾さんの作るサイトにはやはり独特の色がありますね。今回はグニャリと変形するポートフォリオサイト。理知整然とせず、カオスなうねりが楽しいサイトです。動きの滑らかさや軽妙さ、そして一度見たら忘れないというサイトそのもの。一方地図が絡むコンテンツに関しては全てGoogleマップで完結させるという潔さも。個人的にはフッターが傾いているところがかわいくて、新たな発見がありました。

全日本バーベイタム選手権
entry_img_vbt.jpg
ブックマークオブザイヤーでは常連の城戸雅行さん最新作。今回は記録メディアをテーマにした3D対戦ゲーム。動きもなめらかだしよく動くこと動くこと…!ゲーム自体もほぼオートながら必殺技の使いどころなど戦略がありポイント高し。キャラクターの成長などシステム面も非常によく出来ています。ちなみに2006年、2008年は城戸さんの作品がブックマークオブザイヤーのチャンピオンを取ってます。今回はどうなるんでしょうか…?

東京ガールズパレード by TGC × Bascule
entry_img_tgc.jpg
ブライスのような可愛らしい女の子に無数のお着替え&メイクをさせてランウェイを歩かせるお楽しみコンテンツ。無数とも思える組み合わせは圧巻。さすが東京ガールズコレクションとの連動コンテンツなだけありますね。…なんですが残念ながらつい最近サイト自体がクローズしてしまった模様。残念><

Honda | インターナビ | INTERNAVI REALIZATION
entry_img_internavi.jpg
ホンダのナビゲーションシステム・インターナビのコンテンツ。日本中の道路を走る車の道筋を視覚化するだけでも立派なメディアアートになる。レイ・ハラカミのアンビエントな音楽にあわせて地図の上を走る白い光。他にも実際にナビの通りに走ってみた映像も。こちらの音楽は相対性理論のメンバーによる別名義バンド・TUTU HELVETICAによるもの。確かに音楽もドライブの一部ですからね。

どんな?文科!数字で見る文部科学省
entry_img_monka.jpg
かわいいイラストともに文部科学省のことを数字で勉強するコンテンツ。タイル敷き詰め型のサイトはよく見かけますが、このサイトは細かいところがちょっと違う。数字を入力して検索する検索フォームや、ページごとにプリントして勉強用のオリジナルが作れる仕組みなど、先生にも生徒にも便利な機能が詰まっています。

女子美術大学 "新しいワタシ、生まれる。"
entry_img_joshibi.jpg
女子美術大学の特設コンテンツ。こちらも美術大学だけあってデザインもイラストも凝ってます。といっても凝っているのは見た目だけでなく映像コンテンツや、あだ名メーカーのようなコンテンツまであって盛りだくさん。階層下のHTMLコンテンツも丁寧に作られているのがいいですね。サイトの掴みだけでなく情報ページの充実も非常に重要なポイントです。

G'z One CA002 by CASIO
entry_img_gzone.jpg
G'z Oneのサイトは毎回凝ったコンテンツが恒例になっていますが、今回はG'z Oneらしいエッジィさを抽出してビジュアル化したようなサイト。これは正直、かっこいい。いやG'z Oneを求める人っていうのは結局かっこよさを求めている人ですからまさにど真ん中の演出と言えましょう。アニメーションのパターンも多彩でスクリーンセイバーをダウンロードした人も多いんじゃないでしょうか。

UNIQLO PARKA STYLE 1000
entry_img_uniqlo_parker.jpg
スペシャルサイトと言えばUNIQLO、というくらいたくさんのコンテンツをリリースしているUNIQLOですが今年はパーカーのコンテンツがノミネート。東京の様々な街の人々が着るパーカーをバトン形式で表示する映像は「老若男女、誰もが着るユニクロ」という事実を見事に表現しています。バトンで表示するモードの他にも街別で写真が見れるモードもあって面白いですね。個人的には原宿や渋谷みたいな洒落たとこばっかじゃなくて巣鴨やアキバや築地も見てほしい!w

イセタンワンダークリスマス 2009
entry_img_isetan.jpg
伊勢丹のクリスマスコンテンツ。インパクトの強いグラフィックと絵本のようなメルヘンストーリー。絵もアニメも気合い入ってますよこれは。女の人ってこういう世界観好きですよねー。クリスマスコンテンツなんて腐るほどあるご時世、ただ紋切り型じゃないものなっているところも素敵です。…しかしクリスマス、だけに現在公開終了。うーん残念。

Jim Carrey - Official Site
entry_img_jim.jpg
個性派俳優のジム・キャリー。当然Webサイトも個性派です。グラフィックの強烈さは今回の全ノミネートの中で最強。一枚一枚のグラフィックもコンテンツ移動時のトランジションもやり過ぎ感満載。笑いを通り越したやり過ぎにただただ笑うしかないという高度すぎる現象が展開されてます。個人的にはTwitterの発言をつぶやき続ける鳥のイラっとする感じが好きですw

ケータイするGoogle(TM)って?
entry_img_google.jpg
世界中で好調なiPhoneを追随するべくGoogleが放ったAndroid OS。日本で初のAndroid端末であるHT-03A のスペシャルコンテンツ。ターゲットはもちろんある程度テクノロジーに詳しい人でしょうが、それでも新しいものだけに疑問点は尽きない。ということですべてのコンテンツタイトルを疑問系にするのはいいアイデアではないでしょうか。操作方法も実機の画像と画面内映像、そして人の指を表示して解説、これならわかりやすい。画面を埋め尽くす文字が新たな「ビッグウェーブ」を予感させてくれるデザインになっています。


皆さんの力で今年のNo.1を決めてください!!

…っと、これで24サイトすべて紹介できました。ごめんなさいこういう紹介って後半がダレるから(ま書いてる私が悪いんですけど)不利になっちゃいますよね…ですから私の言葉に騙されず、ぜひ自分の目で確かめて、あなたが思う、今年一番のWebサイトに投票してください!! ちなみに投票すると自動的にTwitterでつぶやくボタンが表示されます。ぜひついでにつぶやいてみてください(選挙の出口調査みたいですね)。同じサイトに投票しようとする同志が現れるかもしれませんし。

またTwitterでのハッシュタグは「#abm09」です。もし「○○と××で悩んでるんだけどどっちがいいかな?」とかあったらぜひこのハッシュタグをつけて発言してみてください。既に多くの方に#abm09でつぶやいていただいてます。感謝と同時にTwitterの強さも感じました。

では最後に改めて。あなたの一票で今年最高のWebサイトが決定します。ぜひ投票を!!

新機能を満載した AnotherBookmark™ ver 2.5、公開しました。

2009.09.01 Web

新機能を満載した AnotherBookmark™ ver 2.5、公開しました。

本日、Webデザインブックマークサイト AnotherBookmark™ をバージョンアップしました。前回のリニューアルから1年弱。その間にWebの世界も様々な変化が起こりましたが、目につくところでは情報伝播経路の多様化、高速化、ストリーム化があります。Twitterを代表として、情報は自らが望めば好きなだけ入ってくる世界。このような状況ですから「多人数参加型ニュースサイト」ともいえるABMの役割を改めて考え直す必要がありました。大雑把に言ってしまえば「情報の幅を広げる必要がある」のではないか。そして「改めて、使う人が便利だと思える」サービスを作る。これが今回のリニューアルのスタートラインであります。そのため今回大きく3つのコーナーが新設されました。「Item Review」「Feed Timeline」「Twitter Timeline」そして「Twitterとの連携」です。では一つずつ見ていきましょう。

Amazonにある商品に自分のレビューをつける「Item Review」

Amazonにある商品に自分のレビューをつける「Item Review」

見出しですべてを言い切った感がありますが、「Item Review」はAmazonにある商品にABM Contributorがレビューをつけるコンテンツです。ABMには様々なWebクリエーターの方に集まっていただいています。で、そのクリエーターが実際に何を買っているか。これは知りたいですよね。Item Reviewではクリエーターがコメント付きで商品を紹介する場所です。まさにクリエーターが一堂に会して行う「商品のオススメしあいっこ」。自分が好きなものだけを追うのもいいですが、他のクリエーターのオススメに目を通すとまた別のインスピレーションがわいてくるかもしれません。有益な情報源の一つとして活用していただければと思います。

もちろんただお勧めするだけでは張り合いがありませんから、Amazonアソシエイトにも対応しています。けっこうAmazonのアソシエイトにリンクを貼るのって面倒だったりしますが、Item Reviewに投稿した商品はすぐブログシールにして貼付けることができます。

こんな感じ。他にも自分が投稿したItem Reviewをまとめて表示するブログパーツもあります。このブログの右側に貼ってあるのがそうですね。ブログシール・ブログパーツ両方ともAmazonアソシエイトに対応していますから、バシバシ貼付けていってあげてください。

ブログとTwitterの更新情報を一括する「Feed Timeline」「Twitter Timeline」

ブログとTwitterの更新情報を一括する「Feed Timeline」「Twitter Timeline」

FriendFeedをはじめ、最近ではWebサービス同士が連携したり、同じ情報を配信するのも珍しくありません。ABMもそれに習いユーザーの方が登録したサイト、ブログ、Twitterアカウントを元に、情報のタイムラインを作るのが「Feed Timeline」「Twitter Timeline」です。Feed TimelineはABMユーザーのサイトやブログからRSSを取得し、独自のRSSリーダーを作ったものです。

ブログとTwitterの更新情報を一括する「Feed Timeline」「Twitter Timeline]<br />

そしてTwitter TimelineはABMユーザーの発言だけで埋まったTwitterタイムライン。ちなみにただのつぶやきだけを集めてもしょうがないのでURL付きのつぶやきのみを収集しております。

ブログとTwitterは速度もボリュームも違います。もちろんABMに掲載されているBookmarkやNewsとも異なるものですし、これまでABMではフォーカスしなかった世界にもたくさんクリエーターを刺激する情報はたくさんあるはずです。さらにABMはクリエーターがクリエーターに向けて発信することが多いメディアですから尚更いい情報が集まるのではないでしょうか。

そして、今までABM内でのユーザーのつながりはほとんど生まれなかったと言っていいでしょう。でもせっかく集まってるんだしそれじゃ寂しいですよね。ABMが新しいブログや新しいTwitterユーザーとの出会いの場になると楽しいでしょうね。

Twitterとの連携・ABMから情報を発信

今回からABMアカウントにTwitterアカウントを登録することができるようになりました。これで何ができるようになったかというと、ABMでユーザーが投稿した内容が自動的にTwitterにも投稿できるようになりました。例えば気に入ったBookmarkにお気に入りコメントを入れると、「コメント+URL」でTwit。Bookmarkを投稿しても、Newsを投稿しても、PublicPostを投稿しても、Item Reviewを投稿しても全部Twitter上につぶやいてくれます。

これ自分でテストがてら使ってみたんですけど、便利。二度手間は省けるし、Twitterだけでつぶやくとあっという間に流れていって、いつ何をつぶやいたかさっぱり残らないことが多いですが、ABMからつぶやくとしっかり記録に残りますしね。

あとABM自体のTwitterアカウント@anotherbookmarkも用意してあります。ABMに投稿されたBookmarkとNewsの情報をお知らせする他、私がたまにサポート情報やどうでもいい話をつぶやくかもしれません。よろしければFollowお願いいたします。

ストレージとストリームの真ん中にABMはいます。

新しいコンテンツが増えたのも確かですが、今回は特に情報の出入りの部分が活発になるよう改良をしました。もう情報はストレージされるだけじゃなくストリームされるものにもなっています。その両方を橋渡ししつつ、クリエーターの方に役立つサイトになれると嬉しいですね。

本当はまだまだ細かい改良点はたくさんありますが、んーもう説明しきれません!! ぜひ触ってお確かめください。これからもちょこちょこ修正していくと思いますが皆さんにとって刺激的なメディアであり続けられるようがんばっていきますのでどうかよろしくお願いいたします。

ANTEPRIMAウェブサイト、完全リニューアルです。

2009.08.28 Web

anteprima_fw09_renewal_0.jpg

アンテプリマ

ANTEPRIMAウェブサイトをリニューアルしました。これまでシーズンごとにコレクションを中心としたページを作成してきましたが、今回から一新。Flashをメインに据えていたところを、HTMLでよりな広い情報をカバーできるように全面的にリニューアルしました(なので私の関わり方はお手伝いという感じ。あんまり詳しいことは教えてもらえてないんですよ)。特にアイテムが個別ページでしっかり見えるようになったのが大きな変化でしょう。これで彼氏におねだりする準備も万端です。ちなみにANTEPRIMAが浴衣も取り扱っていたのはご存知でしたか?バック他数多くのアイテムが閲覧できるようになりました。もちろんこれまで通り、コレクションの写真映像もじっくり見ていただくことができます。

今回のリニューアルの軸は「必要とされた情報をいかにユーザーに伝えるか」(既に社長がブログに書いていますが)。ですからサイト単位で情報を整理し直しました。ヘッダーメニューを全てのページに用意しどのページからアクセスしても行きたいページにたどり着けるようにしました。商品の個別ページを用意し詳細情報を充実させました。情報を細分化することで検索エンジンが精確に情報をインデックスできるようにしました。

ユーザーの方が使いやすいよう、情報が見つかりやすいよう行った今回のHTML化ですが、先に言っておきますがFlashサイトがよくないとかそういうことではありません。ANTEPLIMAのブランドイメージを伝える役割としてこれまでのFlashサイトは機能していました(制作者として自画自賛のようですが)。しかしそれだけでは足らないのです。かと言ってデザインやイメージよりも機能を優先すべき、とも言いません。どちらかではありません。どちらも重要であり、どちらも全力で取り組まなければならないことなのです。ですから新しいサイトのイメージもこれまでのクオリティと変わらないものができたと思っています。全体のデザインに腐心した鈴木さん、本当にお疲れさまでした。バックボーンを中心に担当された河内さんもお疲れさまでした。

なんにせよできることは全てやらなければWebの力を完全に発揮することはできないでしょう。似たことを以前にも書きました。ANTEPRIMAのサイトだってまだまだ「Webでできること」が残っていますし、継続して取り組んでいくことが重要です。そのために拡張性が高いサイトにリニューアルできたことは大きな意味があると思います。ユーザーと共に走り続ける準備は整った、ということですね。

ということで、以上Flashのみ担当の福岡でした。

こんなTwitterのつぶやきはイヤだ!!…と思われないための私が考える3つのチェックポイント。

2009.08.14 Web

twitter_more_better_twit_0.jpg

なんだかたけしのフリップネタのようなタイトルですが、Twitter中毒患者の私なりに「こういうつぶやきはリンクがあってもクリックしないなぁ…」というもったいないつぶやきを目にすることがあります(お前何様だよ!!と言われそうですが)。今回は私基準で思う「もったいないつぶやきのポイント」を列挙してみることにします。このポイントに注意したらRTされる率が上がる…かも?あくまで "私基準" であって必ずしも世間一般の基準から逸れている場合もありますので、そこを考慮しながらお読みください。


1. コメントが長過ぎて「...」と省略されてる

個人的には一番テンションが下がるのがこれだったりします。最近はdel.icio.usやFlickrなどのウェブサービスと連動してTwitterに自動的に投稿してくれる機能が流行しています。自動的にTwitterも更新してくれるので非常に便利、よく利用されている方も多いと思います。が、自動であるが故に長過ぎたコメントが「...」と省略されてしまうのです。例えばこんな感じ。

最近Twitter上で必要以上にサマーウォーズをプッシュしてるフクオカさんですこんにちは。先日のエントリーで十分書いたじゃん、と言わ... http://bit.ly/xxxxxx


「機械の投稿かよ!!」とついつい心の中で思ってしまうわけです。自動投稿は横着だからいけない、ということではありません。Twitterは人の手がかかっているからこそ面白いと感じている部分が多く、オーバーに言えば人の「ぬくもり」が感じられることが魅力の一つだと思います。ですから仮に省略されたコメントがそもそもその人が書いたものだとしても「機械が投稿したんだなぁ」と、なんだか寂しさを感じてしまうんですよね。これを改善するためには、

・そもそも連動して投稿されるコメントは短めに書いておく
・サービス側で「、」「。」等を判別して自然な切れ目でコメントを省略する

といった対策が打てると思います。2項目は利用者というよりサービス側の対処です。ABMにもTwitter自動投稿機能をつける予定ですが、できれば自然な切れ目でTwitterに投稿できるよう工夫してみるつもりです。


twitter_more_better_twit_1.jpg

私は自分のブログのRSSをTwitterに配信するためにTwitterFeedというサービスを使っています。最近のサービスらしく、事細かに配信する内容を設定することが可能です。RSSのタイトル、本文、URLをどのように含めるかを決めることができます。またコメントの前後に定型の文章を入れることもできます。

私はこのサービスを使ってこのブログ、Raw-Fiブログ、自分のdel.icio.usをTwitterに配信しています。例えばブログの場合は「タイトル + URL」で配信。

iPhoneでもPCでも使えるBluetoothヘッドフォン「DR-BT140Q」。ケーブルがないだけでこんなに便利。 http://bit.ly/xxxxxx


これならコメントが省略されることはまずないでしょう。ブログを書くときはタイトルを本文の解説と感想を足した "Twitterらしい" ものにしています。またdel.icio.usは「コメント + URL」の組み合わせです。

TwitterでどれくらいRTされているかを集計するサイト。RT情報の拡散のしかたも見える。 http://bit.ly/xxxxxx


ブックマークタイトルまで入れるとあからさまに「機械的な感じ」が出てしまうように思います。つぶやき自体が長くなるのもRTされにくくなる要因になりますからコメントだけに絞りました。リンク付きつぶやきで重要なのは「コンテンツのタイトル」よりも「その人なりの要約」や「その人の感想」です。その人がどう思ってつぶやいたかを私は知りたいのです。


2. 使用したTwitterアプリや引用元のサービス名が含まれている

例えばこんな感じ。

今日は六本木ヒルズでランチ(^0^) 課長におごってもらっちゃおー!! from モヴァツイッター


「モヴァツイッター」というサービスを使って携帯から投稿したよ!!なんて我々が聞かされてもなんの意味もありません。(モヴァツイッターは架空のサービスですのであしからず)「そりゃランチにわざわざパソコンなんかもってかないわな」くらいの突っ込みしかできません。例えば投稿した本人がPCと携帯で投稿したつぶやきをあとで区別したいという意図があるのなら分かりますが、フォロワーにとっては重要ではない情報ですよね。せっかくなんだからその文字数を使ってランチで何を食べるかを教えてほしいところです。

[del.icio.us] Twitterで発言されたURLからホットエントリーを作成。 http://bit.ly/xxxxxx


このつぶやきはdel.icio.usから自動的に投稿されています、と教えられても…これもあくまで本人が「Twitter上で情報を整理するため」につけているのであればいいのですが、フォロワーにとってはそのリンクがdel.icio.usからきたのか、はてブからきたのか、Googleブックマークからきたのかなんてどうでもいいわけですよ。もしサービス名のせいでコメント部分が省略されたりしたら本末転倒ですし、先ほども言いましたが短いつぶやきの方がRTされるには有利です。ノイズなる可能性が高い情報は極力カットするのがいいでしょう。

3. 本文のあとに(RTよろしくおねがいします!!)と書いてある

これも超主観ですが、なんか違うんでねえかなぁ…とおじさんは思ってしまうのです。昨日はてブの注目ブックマークにもなっていた口コミ(ReTweet)されやすいTweetをつぶやく13の方法 | ついーたーTweeter.jpには「調査の結果、お願いしないとRT率0.5%、お願いすると5%になり、10倍の効果があるという」といった記述がありました。確かにRTされる確実性は上がります。が、「お願い」がそのTwitterユーザーのイメージにマイナスに働く可能性もあるかもしれません。「チェーンメールみたいなもんか?怪しい…」といらぬ誤解を受けてしまうかもしれません。さらにお願い部分までもRTされてしまったらダメージが拡散する恐れもある(って、ちょっと警戒し過ぎなんですかね、私)。RTのお願いするにしても例えばこんな形はどうでしょう。

初めてのイベントなんで色んな人に来てほしいです!! ↓先ほどのつぶやき、どうかRTよろしくお願いします!!
新しいクラブイベント「Raw-Fi」、7月11日 22時から三軒茶屋orbitでスタート!! http://bit.ly/xxxxxx


つまりRTしてほしいつぶやきとお願いつぶやきをわける。これならフォローしているある程度気心の知れた人にはお願いが届き、その外の人にはRTされたつぶやきが届く、というわけです。RTされたつぶやきだったらそもそもRTした人の信頼がプラスされているので、お願いなんかなくても十分波及効果が期待できるはずです。面白いと思わないものをRTする人なんかいませんからね。なんにせよお願いの使い過ぎには注意。


私がTwitterから知りたいのはあなたの気持ちです

現在早朝のテンションで書いてるのでかなり文章がなんだか偉そうな感じになってるかもしれませんが、ここまで書いたことはすべて、私の主観です。私から見て現時点でのTwitterの一般的な使われ方からまとめたものです。しかしTwitterには明確な使い方があるわけではありません。ですから人に見られることを意識せず、メモ帳のような感覚で使っている方もいらっしゃるでしょう。そういう方は私の言うことを気にせずぜひ自由に使っていってください。そういった懐の深さもTwitterの魅力でしょう。ですが、URLを流布するツールとしてTwitterを捉えるならば、ある程度つぶやき方を考える必要があります。昨日のサマーウォーズの話の続きでもありますが、面白いネタは自然と広まるものです。せっかくのネタの面白さが最大限に伝わるようにするためにも、ネタの適切な "置き方" が大切なのです。

「置き方なんて言われても、面白いことなんか思いつかないし、書けそうにない」と思っている人がいるかもしれません。いいんです無理に面白いこと書こうとしなくても。Twitterで一番重要なのは自分がどう思ったのかという気持ちです。「面白かった」でも「怖かった」でも「かわいい」でも何でもいいんです。まずその感想が私は知りたい。140文字に情報と自分の気持ちを載せて配信するツールがTwitterなのではないでしょうか。言うなれば「一人ヴィレッジヴァンガード」って感じですかね、これ。

Adobeさんのインタビューを受けさせていただきました

2009.06.26 Web

Adobe ケーススタディー : FICCが感じるAdobe CS4の良さ

AdobeさんのCreativeSuite4に関するインタビューを僭越ながら受けさせていただきました。CS4のすばらしさに関しましては私よりも他の方の方が詳しいと思いますので、なかなか参考になるかどうかはわからないのですが、FICCでどんな感じで仕事してるかって言うのが少しは伝わるのではないかなーと思います。

しかしまあ満面の笑みで写ってる自分の写真に吹きましたよ。私も25年生きてきたけどここまで自分が笑ってる写真って見たことなかったわー。まさに「そっか。私、笑えるんだ」状態。自分で見てて 気持ち悪い を通り越して感心してしまいましたよ。

と、いうことで明日はあれの話を。今まで日記にもmixiにもブログにも一度も書いてこなかった、避けていたあの映画の話を。

どんどん広がるMOREWORKSの輪!!

2009.03.26 Web

どんどん広がるMOREWORKSの輪!!

ご報告が遅れましたがWebクリエイターのための求人情報サイト「MOREWORKS」に新たに4つの会社さんが参加いたしました。株式会社BIRDMANさん株式会社STARRYWORKSさん株式会社フォーデジットさん株式会社カラーズさんです。これで20社近い会社さんがMOREWORKSに参入したことになるんですが、すごいですよ。この並びは。このすごさは「制作事例を探す」ページを見て感じていただけるかと思います。これだけのすばらしい会社さんに集まっていただけたのも奇跡的なことですから、MOREWORKSを通して皆さんのお役に立てるよう全力を尽くして参ります。「もっとたくさんの会社が登録されてればなぁ」という声もお聞きしています。すぐに一気にたくさんの会社さんに参加していただくのはなかなか難しいかと思いますが、少しずつ輪は広がっていくはずです。いずれはMOREWORKSを通して「日本にはこれだけ優れた会社さんがこんなにあるのか!!」ということを感じていただければと思います。まだまだ時間はかかるかもしれませんが、Web制作の世界に少しでもプラスになる活動になるようがんばっていきたいと思います。

straightline™さんのブックマークサイトに現在MOREWORKSのバナーを貼らせていただいております

MOREWORKS本体サイトからちょっと離れますが、あの素敵デザインサイトstraightline™さんのブックマークサイトに現在MOREWORKSのバナーを貼らせていただいております。ヘッダー部分に横幅100%で堂々と掲載されているので、そりゃちょっとやり過ぎじゃね?と思った方もいらっしゃるかもしれませんが、実はこのヘッダーバナーはstraightline™の後藤さんの提案とご好意によって実現したものなのです。当初フッターに収まるような横長サイズのバナーを制作しお渡ししていたんですが、後藤さんの提案によりいつの間にかヘッダー横幅100%での掲載にしましょう、ということに。これぞまさにポルナレフ状態。元のバナーの制作は私がすべて担当していたのですが、申し分けなさすぎてかなり赤面です(straightlineファンの皆さんごめんなさい…><)。さらに、バナーのキャッチも2種類ヴァージョンを用意していたのですが、比較的挑発的なキャッチの方を採用していただけることに。そんなわけで、全面的に後藤さんのご好意に甘える形となってしまいました。本当にありがとうございました。この横幅100%バナーは今後straightline™さんのちょっとした名物になるんじゃないかなーと勝手に妄想したりしています。これからどんな面白いバナーが入るのか、楽しみです。

AnotherBookmarkとMOREWORKSの連動実験中

2009.03.10 Web

おかげさまで公開することができましたWebクリエイターのための求人情報サイト「MOREWORKS」。もちろん多くの方に知ってもらいたいわけでして、まず最初に着手したことはAnotherBookmarkへ広告を掲載することでした。

ABMのトップを見るとわかる通り、左端に固定バナー、右上端にローテートバナーを配置してあります。もちろんこれだけでも十分アピールにはなると思いますし、このバナーを押してくださった方もいらっしゃるかと思います。しかし3年近い運営期間を経て、大量の情報を抱えたABMです。もっと情報を活用した広告の出し方が考えられるはず。ということで、3種類のMOREWORKS特殊広告を用意しました。3種類ともABMとMOREWORKSの登録情報を照らし合わせることで、ABMのページ内容に沿った広告を表示するようにしています。要はGoogle AdSenceのようなものです。

1. ユーザーページ

ABM ユーザーページとMOREWORKSの連動

ABM Contributor、もしくはABM Userはプロフィールを入力・公開することができます。プロフィールの項目には所属する会社のURLを記入する欄があり、そのURLとMOREWORKSに登録された企業のURLが一致した場合にテキスト広告を表示するようにしました。訪問者にとってユーザーの方が関係のある企業をさらに詳しく知ることができる機会になるのではと考えています。

2. Bookmark・Newsページ

ABM Bookmark・NewsページとMOREWORKSの連動

MOREWORKSには求人情報サイトには珍しい「制作事例」というものがあります。制作事例のURLと、ABMのBookmark、ないしNewsの登録URLが一致した場合に、「この企業が制作に関わった」と判断してテキスト広告を表示しています。本当であれば「○○のサイトを作った株式会社××の求人広告です!!」と威勢良く書きたいところですが、時間が経ってリニューアルなどした際に必ずしも同じ会社が作っているとは限らないという問題があり、「○○のサイトといえば株式会社××」というややボケた言い回しにしています。ここのマッチングはまだ改良の余地があるなと思います。

3. 検索ページ

ABM 検索ページとMOREWORKSの連動

同じ検索語でヒットした求人情報を表示するという非常にベーシックな発想。ヒットする語句も限られたものになりますが、「Flash」や「CSS」といった技術の名称や会社名で検索したときに効果を発揮します。


…とこれだけ書くと、ここまで広告の種明かしをしてしまうのもどうなんだ、と言われてしまいそうですね。大切なのは、ただ押し付ける広告ではなく、しっかりとページの内容に沿った、場合によってはユーザーの利益にもなりうる広告を用意することです。もう単なる押し売りは通用しない時代でしょうし、ABMをチェックしにくる方なら尚更でしょう。便利なもの、理にかなっているもの、自分にとってプラスになるものでなければ悲しいかな見向きもされません。ですから、今あるものをさらに便利に利用できるように。ABMにはない情報をMOREWORKSが補完することによって、お互いのサービスが新しい価値を提供できるようになることを目指して。今後もABMとMOREWORKS双方の改良に取り組み続けるつもりです。

Webクリエイターのための求人情報サイト【MOREWORKS】を公開しました

2009.03.06 Web

Webクリエイターのための求人情報サイト【MOREWORKS】を公開しました

Webクリエイターのための求人情報サイト[MOREWORKS]

本日、Webクリエイターのための求人情報サイト「MOREWORKS」を公開しました。MOREWORKSはWeb制作に関わる仕事に特化した求人情報サイトです。

求人情報サイト、といっても情報をただ載せているわけではなく、気に入った求人情報があったら、このサイトから直接応募することができます。会員登録をして、サイト上で履歴書とポートフォリオを簡単に入力したら、気に入った求人情報に応募。これだけです。作成した履歴書とポートフォリオはそのまま使い続けられるので、複数企業への応募も簡単です。

また「Web制作会社に特化した求人サイト」の特徴として、企業別の制作事例が公開されていることが挙げられます。条件だけではその会社のことがよくわからないことが多いものです。Web制作者としてはむしろ条件よりも、その会社がどんなものを作っているのかのほうが気になることが多いのではないでしょうか。そんなときはMOREWORKSの「制作事例を探す」ページから好きなサイトを探してみてください。「自分の好きなサイトを作ったのって、この会社だったのか!!」という発見があるかもしれません。

他にも機能のことに関しては、このサイトでは語り尽くせないほど詰め込んだつもりです。特に情報の配信には力を入れました。自分の条件にあった求人情報をメールで配信、全更新情報を配信するRSS。それだけでなく、FICCのプロジェクトでは初めてTwitterと連動したり、後日触れる予定ですが、AnotherBookmarkと全面的に連動しています。通知する方法は全部使う!! ぐらいの勢いです。

ローンチと同時に参加していただいた会社様は株式会社アーキタイプ株式会社 アクアリング株式会社エイド・ディーシーシー株式会社 コンセント有限会社 ジェネフィックス・デザイン株式会社ティー・ワイ・オーインタラクティブデザイン株式会社 凪株式会社バスキュールPANOPTES (株式会社アーガス)フォーム・プロセス株式会社、株式会社フォルムス、株式会社ベースメントファクトリープロダクション株式会社ラナエクストラクティブ(株) ワン・トゥー・テン・デザイン(50音順・敬称略)…というまさかと思うくらい豪華な顔ぶれです(もちろん弊社も参加しています)。MOREWORKSが公開できたのもご協力くださった会社様のお陰であります。この場を借りてお礼の言葉を述べさせていただきます。本当にありがとうございました。

このプロジェクトに関しては私はデザイン・コーディング・システムからなる全体のサイト構築を担当しました。私の強引なデザインのCSSを見事に整形してくれた鈴木さん、サイトの企画をまとめてくださった上村さん、製作総指揮そしてやり取りに関するすべてのことを行ってくださった健太郎さん、そしてこのプロジェクトの前身の段階から携わってくれた皆様。お疲れさまでした。おかげさまで遂に日の目を見ることができました。

MOEWORKSはまだ生まれたばかりですが、みなさんのお役に立てるようにがんばりますので宜しくお願いします。とりあえずRSSを登録か、Twitterアカウントをフォーローしておいていただけると、いつでも最新の情報をお届けすることができます。

法則「流れ行く風景に人は郷愁を感じる」

2009.02.13 Web

AESTHETIC ECHO.COM

AESTHETIC ECHO.COM

trick7さんのエントリーでAESTHETIC ECHO.COMが紹介されていまして、それに乗っからせていただいてエントリーしちゃおうかなと。AESTHETIC ECHO.COMは流れ行く景色が自動生成されていくコンテンツ。

AESTHETIC ECHO .COM BY RAFAEL ROZENDAAL

現実離れした配色と、極限にミニマルな世界が、ただ、流れていくだけ。本当になんてことはないし、別段美しい景色が流れている、というわけでもない。だけど何か心に「引っかかるもの」を感じるんですよね。きゅーっと胸の奥が縮こまるような。これは懐かしさ、というか郷愁なのか何なのか。

これはきっとこの映像を脳が「知らない場所を走る電車から見た風景」のように感じているからなんじゃないでしょうか。子どもにとって一人で乗る知らない電車は期待と不安が入り交じった極めて特殊な乗り物です。そもそも電車は自分の思い通りに動いてくれる乗り物ではありません。知らないおじさんが制服を着て運転している乗り物です。レールに沿って一方方向に走るだけ。この時点で自由が奪われている、不安です。さらに「切符」や「乗り換え」といったむつかしいシステムはさらに不安を高めます。本当に目的に付けるのか、自分の選択は間違っていないか、お金が足りなくなったりしないか…。でも目的地では友達や、親戚、家族が待っています。きっと訪れるであろう楽しい思い出の時間を目指して、少年少女は電車の外の景色を、じっと眺め続けるのであります。成長した後も、受験や上京といった場面で必ず「電車の窓からの景色」は登場するでしょう。そのときの思いが、こういった映像を頼りに思い出されているのかもしれません。

Groovisions× Cornelius「Wataridori」

個人的に「横スクロール型映像」と言えばGroovisions× Corneliusの「Wataridori」をまず思い浮かべます。

2004年の作品ですから下手すれば古典になりつつあるのかもしれませんが、アイコン的な映像の美しさと渡り鳥を主人公にしたゆったりとしたドラマがとても印象的でした。厳しい冬の大地を抜け、山を越え、海を渡り、都会までたどり着く渡り鳥達。音楽とのシンクも、さすが。

Sound × Vision 200

Sound × Vision 2004というイベントのために制作された映像で、このDVDに収録されています。

JAPAN CAR

もう一つ、ロンドンのサイエンスミュージアムで行われているJAPAN CARというイベントのために、映像制作会社のWOWさんが制作した映像。

こちらは電車ではなく車に関する風景ですが、真っ白いもやのなかから、木々、そしてライトが浮かび上がってきて、次第に自分たちの走っている風景が見えてきます。自然物が逢えてデジタルな雰囲気で表現されるのが映像的で面白いですね。私が一番ツボなのは途中パパパっと地面が鏡のような面で覆われるシーン。水田なんですよね。同じ景色でも切り取りかたでこうも面白くなるのかと。「減反した未来の農家は水田の代わりにソーラーパネルを設置している」みたいな勝手な未来設定を想像して一人盛り上がりしてしまいました。ミラノサローネで発表されたLights and Shadowsと対になっていて、こちらの映像も幻想的で美しいですね。

「ものを売る」責任を請け負うのはウェブだけじゃない。

2009.01.29 Web

「Cam with me」はハンディカムを売るためのサイト?

SONY Handycamスペシャルサイト「Cam with me」。女の子の親となって、誕生の瞬間から成長し、大人になっていくまでをハンディカムで撮影するコンテンツです。ウェブ界隈では「感動した」「親の気持ちになって泣いてしまった」という感じでかなり反響があり、ABMはてブでは続々コメントが付きました。かくいう私もグッとキてしまったクチです。彼氏が出てきたときにはぶん殴ってやろうかと思いましたからねw 企画の発想やブログを通した露出のさせ方から見るにこれはまさに「Web発信のCM」であり、遂にCMを発信する舞台がTVからWebに移り始めるのかもしれないなーという雰囲気を感じました。

一方、ブログではこんな声も見かけました。「いいとは思うけど、これハンディカムが直接売れることとは関係なくない?」なるほど、その通りかもしれません。この発言をした人の気持ちとしては、こういった壮大なコンテンツを作るよりも、検索エンジンなどからハンディカムに興味を持っているお客さんを集める等の施策のほうが大切なのでは?ということを言いたかったようです。もちろんSONYさんは会社ですからものを売ることが第一。そもそもこのコンテンツには具体的な商品情報は出てきません。当然商品に結びつけたほうが販売につながるはず。じゃあこのコンテンツは意味がないのか?当然そんなことはないと思います。おそらくこのコンテンツの目的は視聴者に「ハンディカムいいかも…いつか買う時はハンディカム買うことにしよう!!」という気持ちを芽生えさせることです。自分がパパ・ママになったら、娘が成長してもずっとそばに置いておける、というハンディカムのブランドイメージを高めるための広告ですね。

ドキュメント:ハンディカムが売れるまで

そもそもハンディカムがお客さんに「売れる」までにはどのようなステップを踏むことになるでしょうか。まずSONYさんはハンディカムを作ります。「商品開発」です。お客さんが欲しいと思えるような商品でなければなかなか売れないでしょう。

さて、新機能満載のハンディカムが完成しました。新しいハンディカムができたことをお客さんに知らせる必要があります。「広報活動」のスタートです。テレビCMを作ったり、Webサイトにバナーを出したりして、新しいハンディカムのここがいい、と多くの人に知ってもらうきっかけを作ります。

そして、あぁ新しいハンディカムが出たのね、ということでインターネットや雑誌で「購入検討」をします。具体的に新しいハンディカムのどこがいいのか。他の商品に優れたものはないかここで比較します。ここは我々が得意なWebサイトの出番です。この際に今回のCam with meも目に触れるかもしれませんね。

じゃあ、ハンディカム買おうか、ということになると遂に電気屋さんへいってお買い物。「販売店での購入」まで来ましたがまだ油断はできません。例えばお店の店員さんに「ハンディカムよりもCanonのアイビスのほうがいいんです!!」なんて言われたら?よくお店まで来て本来買おうとしていたものとは違うものを買ってしまうことがありますよね。逆に本屋さんで初めて見た本の横に内容を紹介するPOPが付いていて、つい手に取ってしまった、ということも。だいぶ前の記事ですがSONYさんは店頭用ポップを制作して店舗に配布しています。液晶テレビBRAVIAも売り場で映えるように彩度が高い設定になっている、なんてのもよく聞く話です。さて、実物見たけどやっぱりハンディカムがいいね、ということでようやく商品が「売れた」わけです。

「商品開発」「広報活動」「購入検討」「販売店での購入」…これだけのステップがありましたが、さてどれが一番重要なステップでしょうか?どれが、というよりもどのステップもすべて大切だと思います。どれが一つ欠けても購入へのバトンは途切れてしまいます。近年ウェブ依存度が高まり、デザインの優れた見やすいサイトがあれば、検索エンジン対策されたサイトがあれば売れるようになる、と錯覚してしまいがちですが、サイトが良ければ必ずしも売れるとは限りません。かといってしっかり機能するサイトがなければせっかく繋いだバトンを落としてしまうことになりかねません。すべての施策が成功して初めて商品が「売れる」のです(※)

ウェブサイトの効果は目的で決まる

今日もtwitter上で話題になったからこのブログに書いているんですが、よくFlashバリバリのサイトは本当に効果があるのか、という話になります。ウェブサイトに限らず、何をやるにしても一番最初に決めるべきことは目的です。目的が決まらなければ何も始まりません。目的が決まって初めて効果が測定できるのです。iPhoneは発売から2ヶ月で日本では25万台売れたと言います。果たしてこれは成功でしょうか失敗でしょうか。もし仮に100万台売る目標だったのなら失敗でしょうし、10万台売る目標だったのなら成功と言えるでしょう。目的如何でするべきことは変わります。ターゲットがネット初心者かネットオタクか、定期的に情報を伝えるサイトか、一発のインパクトを与えるサイトか。目的によってはFlashの表現力が必要になる時もあります。真に機能するサイトかどうかはまず目的から判断するべきなのです。目的があった方が作る方も気が楽ですよね。

と、いうことで、ウェブサイトだけが大切じゃない、だけどウェブサイトは大切なんだ、だからがんばってウェブサイトを作るんだぜ、というお話でした。


※もちろんすべての販売ケースが先ほどの例に当てはまるとは限りません。ハンディカムが売れる現場は電気屋さんだけではありません。Web上で言えばAmazon、楽天や価格.comがその役割を担っています。現実の売り場とは勝手が違いますから別の施策を考える必要があるでしょう。またハンディカムは販売される範囲が非常に広い商品です。逆に売られる範囲の小さい、特定のウェブサイトでしか販売していない商品、となるとこれも違うアプローチが必要でしょう。

新年の挨拶の予定を変更しまして「パワーブロガーが選ぶ、2008年度ウェブキャンペーンベスト5」をお送りします。

2009.01.09 Web

あけましておめでとうございます!!

…と、ここから元気よく今年の抱負やら何やらを語る予定だったわけですが、「パワーブロガーが選ぶ、2008年度ウェブキャンペーンベスト5」バトンというものを弊社社長から頂きまして、いやここはやっぱり、新年一発目、答えなきゃいけないわけですな!! 正直去年のことなんかすっかり忘れてるんですが、うーん何はなくとも5つ出さないと。5つの中には「Webキャンペーンじゃなくね?」というのも含まれてるでしょうが異論は認める方向で。例によって妄想解説付き。

1. mixi年賀状

[mixi] ミクシィ年賀状

[mixi] ミクシィ年賀状

もはや押しも押されぬ「国民的SNS」と言えるmixi。最近のmixiはFacebookの動きをトレースしている傾向が見られましたが、そんな中でもまさに予想外、去年一番驚かされたネタかなと思います。考えてみれば年賀状は書かなくてもなんだかんだ言ってメールは送ったりしているわけだし動機は十分。mixiは「友達帳」ですから、あとはここから簡単に年賀状を送る方法さえあればよかったわけです。さらに今までならば住所を知らず年賀状が送れなかった人に対してもアプローチすることができる。そして最も重要なポイント、それは「課金」です。iPhoneを対象としたApp Storeから始まった「少額課金」の流れが今年はさらに大きくなるのではないか、と予想している方も多いようです。特にSNSは「基本は広告で食っていくもんだろ常識的に考えて」という雰囲気が強かったところにこのような企画が生まれたのは大きかったのではないでしょうか。次の一手に更に期待です。

2. ワリオランドシェイクのYouTubeドッキリプロモーション

ワリオランドシェイクのYouTubeドッキリプロモーション

YouTube - experiencewii さんのチャンネル

まず企画自体が面白かったこと。なーんだ単なるプレイ動画か…と思いきやあれよあれよと怒濤の展開。最後は8時だョ!全員集合を彷彿とさせる往年の大オチ。もちろんこれだけでも十分面白いんですが、Twitter@keita先生によると10秒ごとにログを取ってるらしい。この企画とは直接関係はありませんが、去年の3月からYouTubeインサイトという解析サービスが始まりました。映像コンテンツも情報解析の時代。YouTubeでは映像内からのリンクや、特定の再生時間へのディープリンクの実現など「映像コンテンツのさらなるWeb化」に取り組んでいるのが印象的でした。

3. UNIQLO DIGITAL CHIRASHI(ユニクロデジタルチラシ)

UNIQLO DIGITAL CHIRASHI(ユニクロデジタルチラシ)

UNIQLO DIGITAL CHIRASHI

これぞまさにキャンペーンじゃないw 先日DESS™のオオヤさんと話したときにユニクロの話になって、「この前ユニクロに行ったらいつもよりかなり混んでた。なんでだと思う?」と聞かれて「話題のヒートテックのおかげ?」と答えたら、「その日はちょうど新聞のチラシが入ってた日だった」と言われて、改めて感心してしまったんですよ。新聞のチラシがある日はお客さんが多く入るに決まってるのに、それをフッと忘れてしまうことがあるのはいかんな、と自戒を込めて取り上げさせていただきました。このデジタルチラシ自体もなかなかよくできてて、商品へのリンクが価格の表記の部分に貼ってある、というのはうまいなーと思います。安売りのチラシってもちろん値段が決め手ですし、値段を注目(クリック)することが購入への導線になる、というのはとても理にかなっていますね。

ただ問題はユニクロで買いたいと思っている人たちがこのチラシサイトにどうやってリーチするか。わざわざみんなここまで見に来るのか。新聞広告に劣らない「プッシュ」をいかに実現するか。逆に言えば新聞広告が活躍する場はまだまだあるぞ、とも言えそうです。

4. NintendoDS「うごくメモ帳」&「うごメモはてな」

NintendoDS「うごくメモ帳」&「うごメモはてな」

うごくメモ帳
うごメモはてな - メモからはじまる新しいコミュニケーション!
Touch-DS.jp - 社長が訊く『ニンテンドーDSi』- うごくメモ帳篇

さすがAKIRAFUKUOKA、任天堂に甘い。これもまたキャンペーン…とはいえないかもしれませんが、画期的な試みでしょう。DSiの専用ソフト「うごくメモ帳」から、自分が作った「うごくメモ」を投稿できるサイト「うごメモはてな」を株式会社はてなが運営する。今まで「ゲームがネットに繋がる」ことは多々ありましたが(一般的なネットゲームですね)、「ゲームがウェブサイトに繋がる」というのはほとんど初めてといってもいい事例なのではないでしょうか。もちろん任天堂のゲームですからこどもが遊ぶものとして安全なのか、問題はないのか、議論されるべき部分は多いでしょうが、まだそこまでクリティカルな問題も起こっていないなという印象です(ゆうたくんの件はちょーっと騒ぎ過ぎかなあと思ってます)。これまでハードという強固な殻で覆われていたゲームの世界が、Web側に大きく開かれ始める、その記念すべき第一歩かもしれません。

5. マクドナルド クォーターパウンダーの特別店舗による口コミプロモーション

マクドナルド クォーターパウンダーの特別店舗による口コミプロモーション

QUARTER POUNDER

別の方面で騒ぎになってしまい大変もったいない感じになってしまいましたが、敢えてこれを最後にこれをもってきました。表参道と渋谷に設置された「クォーターパウンダー」という名前の謎の店舗。最近流行の海外進出おしゃれハンバーガーショップ…と思いきや実際はマクドナルドの新商品のプロモーションのために開店した期間限定の特別店舗だった…。一見Webなんてほとんど関係ない話のように見えますが、この話のポイントは「隙の大きさ」にあったんじゃないかと思います。

当初このクォーターパウンダーはマクドナルドの商品であるということを隠していました。しかし隠すにしては、どうも抜けてるんです。今までマックが入ってた場所にそのまま店舗を出したり、そもそもクォーターパウンダー自体アメリカでとっくの昔から発売しているものだし、日本のマックでも一時期取り扱っていることもありました。本当にシークレットにするならば商品名を日本向けに変えるなり、手はたくさんあったはずです。例によって妄想ですが、これは敢えてバレやすくした、と考えられます。だってあれがマックの仕業だって気がついたら、誰でもこう言いふらしたくなるでしょう。「最近表参道にできたなんかこじゃれたハンバーガー屋さんあるじゃん?あれの正体実は知ってるんだー!! 実はあれマクドナルドなんだよー!!」とこんな具合。

情報は高きから低きに流れます。誰も知らない(と思われる)情報が入ってきたら人間、喋りたくなるんですよね。口コミのネタとしてはゴシップ誌のスキャンダル報道並みの性能を誇っていたのではないでしょうか。ウェブ上でも最初は「新しくできたお店に行ってみたよ!!」的な記事が多く見られましたが、次第に「あれはマックじゃないのか…?」という声が聞かれるようになりました。中には気がついていない人のブログエントリーにコメントで「あれ本当はマックなんだよ!!」と書いていく熱心な方もいらっしゃいました。落差を利用した見事な口コミ戦略でした。

ただ、どんなに素晴らしい仕掛けをしても、誠実でないといけないとは思います。「行列」の件は本当に片手落ちだったのかもしれせんし、逆に狙って事件にした可能性も否定はできませんが、何であれ誠実さがなければいかん、いかんぞ、と強く思い直す出来事でありました。

と、5つ書いたところでバトンを次に…

こんな具合に5つ書きましたが、なんかあんまりWebキャンペーンじゃないですね。いや、本当はもっといろいろあったと思うんだけど、なかなか思い出せないもので。今年は1年かけてWebキャンペーンとは何ぞやを勉強しないといけないですねw

で、3人に渡すバトンらしいですので、私よりももーっとパワーブロガーな方々へお渡しします。僭越ながら、trick7寺井さんWORLD ENDING 小野さんfladdict 深津さんにお願いいたします!! (追記:お忙しかったら全然無視してもらって大丈夫です!!)

さて、今年も仕事がんばっていきます。今年は純粋なWeb制作とはまた違ったことが多くなる年になりそうです。ブログでもいい記事が書けるように今年もがんばります。

あなたの投票で今年一番のサイトが決まります!! ABM Bookmark of the Year 2008

2008.12.24 Web

あなたの投票で今年一番のサイトが決まります!! ABM Bookmark of the Year 2008

M-1でNON STYLEが優勝して「ああ今年も決めること決めて終わっちゃうなあ…」なんて思いに浸っている皆様。そして「NON STYLEじゃなくて×××××だろうが常識的に考えてッ!!」とお怒りの皆様。…まだ残ってるんじゃないですか。まだ決めることが残ってるんじゃないですか!! ねえ!! と、いうことで今年もやりますABM Bookmark of the Year 2008。AnotherBookmarkの今年のブックマーク投稿の中から、「今年を象徴するサイト」を決定します!!

BOOKMARK OF THE YEAR 2008 | ブックマーク・オブ・ザ・イヤー2008 - AnotherBookmark

投票期間は来年1月7日まで。今年もまた年末の忙しい時期だったので特設サイトのデザインが去年のまんまですが許してください。ちなみに去年の大賞はUNIQLOCK。今年も素敵な12サイトをFICCで選びました。本当に素晴らしいサイトがたくさんあったんですが、なんとか12個に厳選しました。ぜひ自分が「これは!!」と思うサイト1つに投票してください。ABMは海外のサイトの投稿がけっこう多いんですが今年は日本勢がかなり強いな、という印象です。全体を通してみると去年以上にテクニカルな部分がクローズアップされることが多かったのではないでしょうか。技術先攻型のビジュアルプレゼンテーション、いかにWebらしい表現でイメージを伝えるか。ここが今年の鍵だったのではないでしょうか。

あとページの下の方に変なのが2つ混ざってますが「FICC特別枠」ということでご理解いただければと思います。これでAnotherBookmark自体が今年の大賞になったらたけしの東スポ映画大賞みたいになっちゃうんでどうか皆さん空気を読んでください。現在の投票状況を見ている限りでは心配する必要はなさそうですがw

しかし来年の話をすると鬼が笑うと言いますが、来年は部門をいくつかわけてもいいかなあという気がしてます。WiiのワリオランドシェイクのYouTubeを使ったプロモーションのようなページを評価する軸を作ってもいいんじゃないでしょうか。とにかく「来年はもっと早く準備する」、これに尽きますね。

さて今年はどんなドラマが生まれるか、どのサイトが大賞を獲るか、ぜひ投票してお待ちください。

ちなみに私はShanghai World Financial Centerが獲るんじゃないかと予想してるんですが…でも私M-1ではオードリーに一票入れた人間なのでご注意を。

【感謝】「Woman」をブログに載せてくださった皆様、ありがとうございます!!【感激】

2008.12.10 Web

あまりにもうれしすぎてまだちょっと錯乱状態が続いていますakirafukuokaです。若干テンション上がり過ぎで気持ち悪くなってますけど今回もWomanの話を。

最近ではToyCameraが絶好調発売中のfladdictさんのブログになんと、Womanのエントリーが掲載されました!!

fladdict» ブログアーカイブ » FICCがCD Womanをリリース

「全10曲フルトラック視聴できるブログパーツって、商売的にどうなのよ?」って本当ですよねw 繰り返しになってしまいますが、まず聴いていただきたい、そして驚いてもらいたい、その部分に尽きると思います。音楽に対する今までにない新しいアプローチがあるということ、そして何より素晴らしい音楽があるということを知っていただくための、非常に愚直な方法が今回のブログパーツであります。fladdictさんも以前からおっしゃっていましたが、制作側からのコンテンツ発信というのはこれから増えていくものだと思います。純粋な制作だけじゃないモデルの形成は、会社や業界にとってとても重要ですし、何より楽しいですよね。

そして、ABMリニューアルのときも制作者よりも詳細なレビューを書いてくださったonopkoさんのBLOG × WORLD ENDINGでもWomanが紹介されております。

Woman - Iwamura Manabu × FICC | ネットをめぐる冒険 | BLOG × WORLD ENDING

またまた制作者以上に丁寧なレビューを本当にありがとうございます。このWomanのCD自体の制作は私はまったく関わっていないんですが、読んでいてちょっと泣いてしまいました。幸せ者です。

BLOG × WORLD ENDING

…とCDの話もいいんですが、数日前からBLOG × WORLD ENDING自体が超絶アップデートされております。これがまた半端ないのです。CDのエントリーとは違う意味で泣きました。もはやこれはブログではない、と言って過言ではないクオリティ。ただただ見とれてしまいますね。


そして我らがFICCとつかさん本人が遂にCD制作の舞台裏をエントリーに。

IWAMURA MANABU - Woman ~ Ep.1:ジャケット制作奔走記 | 吉兆日記 - KICCHO.AUSP.NET
IWAMURA MANABU - Woman ~ Ep.2:サイト制作奔走記 | 吉兆日記 - KICCHO.AUSP.NET

CDの顔であるジャケット写真の撮影から、Womanサイトが完成するまでを綴っています。Web制作に携わる方でも、ジャケット制作のための写真撮影をディレクションする、という体験はなかなかないのではないでしょうか。ここまでやる、というのがFICCらしいことなのかもしれませんね。


こちらで集計しているブログパーツを貼付けてくださっている方のリストも、ちょっとの時間じゃもう見きれないくらいまでになってしまいした。一人一人の方のエントリーを見ていると(自分がCD作ったんじゃないのに)とても感慨深い気持ちにさせられます。現在各方面のクリエーターの方々からもコメントをいただいていまして、本体サイトのコメントコーナーもさらに充実していくと思います(コメントをくださった皆さん本当にありがとうございます!!)。

最近クリスマス終了のお知らせが何かと公示されていますが、それこそWoman、クリスマスプレゼントにいいかもしれませんね。いつものクリスマスソングからちょっと趣向を変えて、という。

個人認証の覇権をめぐって - Google, Facebook, MySpaceは「G.W.」を目指すか

2008.12.07 Web

個人情報が変える世界 - Google, Facebook, MySpaceは「G.W.」を目指すか

ずっと部屋でコード書いてばっかりもよくないから結局ブログ書いちゃうね。今日の話はMETAL GEAR SOLID2の超ネタばらしが含まれてるのでばらされたくない人は読まないように。

「小さな干渉」を繰り返せば人を操ることができるのではないか

METAL GEAR SOLID2には「G.W.」と呼ばれる超ウルトラスーパーコンピュータが登場する。G.W.はアメリカを影で牛耳る謎の組織「愛国者達」が作った代物で、このコンピュータを使って彼らはアメリカを真の支配下に置こうとした。G.W.とは簡単にいえば「全世界の人を思い通りに、自由自在に操作することができる機械」である。人を思い通りに動かす手段、と言われたら何を思い浮かべるだろうか。催眠術に、マインドコントロール、はたまた超能力か…。どれも馬鹿げていて現実的ではない。もっと確実に人を操る方法がある。

例えば、あなたと私が見知らぬ者同士同じ机で勉強していたとする。私が何かの弾みで消しゴムを落としてしまう。消しゴムはあなたの足下へ転がっていった。私はあなたに「ごめん、消しゴムとってもらえますか?」と言う。そしてあなたは足下の消しゴムを拾って私に手渡ししてくれるだろう。

はい、これで私はあなたを思い通りに操って「消しゴムを拾わせて私に手渡してもらう」という行為をさせました。

…って、これだけ書いたらばかにされたような気持ちになるでしょうね。たかが消しゴムかよ!!と。でもこんな小さなことでも繰り返せば大きな目的を達成できる。ある人物に「焼き肉20%OFF」のチケットを渡す。せっかくだからといろんな友達を誘う。中には顔も知らない男女が二人。焼き肉屋で二人が好きな音楽をかける。音楽の話で盛り上がり、それを機に二人は恋人になる…そういった「小さな干渉」をうまく繰り返せば二人は結婚し、子どもが生まれ…割引券からスタートしてなんと新たな命が生まれた。こんな風に人を操作することが可能なのではないか。それがG.W.の考え方である。G.W.はどういう干渉の方法ならその人を動かすことができるかを計算し、その人を思い通りに動かす。G.W.から「小さな干渉」を受けた人間がさらに他の人へ「小さな干渉」をし…最終的に全人類はG.W.の想定した結果に収まるように「動かされ」てしまう。

ゲーム中では主人公が、どう考えても勝ち目のない、化け物としか思えない超戦士と戦わせられる。しかしG.W.の「操作」によって主人公は結果的に操られ、経験を積み、強くなり、勝利を収める。本人は自分の意志で動いているように感じているが実際に促したのはG.W.だ。G.W.は不可能とされることを見事に実現させ、その信頼性を証明するのである。あとはその適応範囲をアメリカ全土に広げればいい。


G.W.自身が煙に撒こうとする台詞が多いため気がつきにくいが、2:04から2:36までの間核心に触れる台詞が出てくる。


操作できる確率を上げる鍵は「個人情報」にあり

しかしそんなうまくいくのか?と言われれば普通に考えて極めて難しいことだろう。だが確実にその確率を上げることはできる。キーは個人情報だ。先ほどの男女の場合、好みの音楽はもちろん、二人の性格、言葉遣い、癖、考え方、趣味、さらには交友関係、服のセンス、好きな芸能人…そういった情報が多ければ多いほどG.W.は二人をうまく操作することができるだろう。

G.W.はネットを通して個人の情報を常に回収している。官公庁や巨大企業の情報も収集してるであろうし、ターゲット自ら情報を送信するよう仕向けることだってできる。そうしてG.W.はさらに「操作」の精度を高めてゆく。これこそ究極の支配。誰も何も悪いことはしていない。干渉した人も、された人も、自分がまさか一つのコンピュータに操作されているとは思わない。G.W.にかかれば疑う余地すら作らせないだろう。

ネット上で個人認証の覇権を握るのは誰か

もちろんG.W.はフィクションの産物である。人を完全に操る、ということは不可能に近い。人の心を完全に解き明かすことは難しいだろう。ただ人を誘導することは不可能ではない。そこで個人情報だ。アメリカではGoogleもFacebookもMySpaceも、個人情報の取得、そして囲い込みに躍起になっている。ちょうどIDEA*IDEAさんのところで「AmazonでFacebook Connectが使われたらどうなるか?」という話が紹介されている。

「AmazonでFacebook Connectが使われたらどうなるか?」のモックアップ画面がすごい件 | IDEA*IDEA

AmazonがFrendListをチェックして、「こいつ影響力あるな…ゴクリ」と思ったら、「ちょっとこの新商品、試しに使ってみない?」と声をかける。友達が買ったものや評価した商品を表示したり、Facebookアカウントから読み取れる嗜好を反映した商品リストを表示したり。AmazonはFacebookが持つ個人情報を使い商品を買ってもらう確率を上げる。今まで以上にさらに効果の高いプロモーションが打てる。それでも、個人情報の持つ力はまだまだ発揮されていないだろう。ある意味究極の個人情報活用がG.W.とも言えるわけだが。

はてさて、G.W.の上流部分でもある個人認証の世界で勝利するのはGoogleか、Facebookか、MySpaceなのか。まだまだ熱いバトルが続きそう。ちなみにMGS2の発売は2001年。だからストーリーが固まったのは2000年あたりであろう。8年前からこんな話を考えていた小島監督は本当にヤバい。今こそこのストーリーを実感できる時代だと思う。監督の先見性をまざまざと思い知らされる次第。ゲーム監督以外の職業でもぜんぜん大丈夫じゃないですかね…?


(補足トリビア:G.W.はマシンの名称であり、人々をコントロールする計画自体はS3と呼ばれていた。劇中ではG.W.が破壊されたため、途中で同様のマシン、JFKに役割をバトンタッチする。ここらへん監督はGoogleをイメージしていた?他にも2000年問題の修正パッチの中にマルウェアが含まれていて、G.W.に情報を送り続けていた、とか時代を感じさせる設定も。)

Webデザインから生まれたCD「Woman」のブログパーツが生まれるまで

2008.12.02 Music

素晴らしい音楽をどこにでも。「Woman」ブログパーツ

Woman - 岩村学(IWAMURA MANABU)×FICC | Webデザインから生まれたCD

昨日のエントリーの続き、ということで引き続き。昨日の話はWomanのCD自体の話がほとんど、で、基本的に私が関わっていない部分の話がほとんどでした。さも自分がCD自体に関わっているかのような雰囲気だったかもしれませんが、実際に私がWomanの企画に関わったのはブログパーツだけです。それでも皆さんが面白いと思っていただけるのは内側の部分でしょうから、ちょっとだけ私から見た「Woman」のお話をした、というのが前回まで。で今日は、戸塚さんデザイン、私Flash担当のブログパーツのお話です。

このWomanブログパーツには大きく2つの特徴があります。まずは前回お話しした「CDの内容ほぼ全曲完全試聴」。何といっても音楽ですから、聴かなければ曲の魅力はわからないですよね。たくさんの方に聴いていただくことが大切だから、このような思い切った方法をとってみました。

Web世界に送るヴィジュアルプレゼンテーション

そしてもう一つ大きな特徴はブログパーツ背景の「サウンドヴィジュアライザー」です。再生中の音に反応して光が飛び交ったり、閃光が発せられたり…こればかりは言葉でいうより実物のブログパーツを見てもらった方が早いですね。制作期間が短く、制御に苦戦を強いられましたが、なんとか形にすることができました。

CDのブログパーツ、というとジャケット写真を大きくどーん!!…みたいなビジュアルを想像するところです。例えば純粋な音楽ファンにアピールするとなると、ジャケットを覚えてもらうということもとても大切なことでしょう。もちろんそういった音楽ファンの方々にも使ってほしいのですが、このCDは「Webデザインから生まれたCD」でありますから、やはりWeb制作の現場にいる方や興味を持っている方に特に聴いて欲しい、そういった思いもありました。もちろんWebをよく知る人は普通のブログパーツでは満足してくれないのは明らかでしょう。そこでANTEPRIMAのWebサイトでも度々制作してきたサウンドのヴィジュアライザーを全面に押し出したいと思いました。

2007年秋冬以降のサイトでは毎回制作しているサウンドヴィジュアライザー

2007年秋冬以降のサイトでは毎回制作しているサウンドヴィジュアライザー。使われている面積は小さくても、毎回少しずつ趣向を変えて作ってきました。最初は輝く金色のバー。次はカラフルなドット、そして柔らかく広がる波紋。どれもサイトのイメージを反映したものですが、比較的光の重なりや閃光のイメージが強く、これを拡大して今回のブログパーツに持ってくることにしました。勘のいい方はある程度何に影響されたかがわかるかと思いますが、それに振り回されずこのブログパーツらしさをどこまで追求できるか。その点は最後までこだわりました。放出される光のパターンも複数作りましたし、特にダンスミュージックを表現するヴィジュアライザーということでビートを強く意識した調整を施しました。このヴィジュアルプレゼンテーションが、Webクリエイションに興味がある方の気持ちに少しでも引っかかってもらえたらうれしい限りです。

これからもっと、まだまだ。

制作の際は私がヴィジュアライザーのひな形を先に作り、それに合わせて戸塚さんにデザインをしてもらうという滅多にないフローで進行しました。かなり変わった作り方の上、たくさんわがままを言ってしまい申し訳なかったのですが、最終的には戸塚さんが洗練されたデザインを光の背景とドッキング。かなーりとんでもないブログパーツが完成しました。

既にとても多くの方のブログに貼っていただいて、さらにエントリーまで書いてくださる方がいて!! 一つ一つブログをご紹介しきれないのが残念ですが、ブログパーツの右下に「もっと見る」ボタンを押すと、ブログパーツが貼られたサイトの一部が見えるようになっています。

個人的にはブログパーツの輪のようなものが人づてに広がって、最終的にはいろんな方の耳にWomanの音楽が届くようになったらうれしいなと。現在進行形のプロジェクトなので、また動きがあったらこのブログでもお伝えしたいと思います。そのうちヴィジュアライザのパターンが増えたりする……かも?

ちなみにブログパーツ貼付けコードはこちらから取得ができます。

私たちが作ってきたWebサイトから1枚のCDが生まれました - 「Woman」

2008.12.01 Music

私たちが作ってきたWebサイトから1枚のCDが生まれました - 「Woman」

「FICCがCDをリリースします」

各種ブログなどの情報で既にご存知の方もいらっしゃるかもしれませんが、改めて私からも紹介させてください。

Woman - 岩村学(IWAMURA MANABU)×FICC | Webデザインから生まれたCD

FICCがCDを発売しました。タイトルは「Woman」。コンポーズは全曲、岩村学さんによるものです。信じられないかもしれませんが、レーベルはなんとFICC自身。「Woman」は正真正銘FICCがリリースしたCDなのです。このCDの製品コードは「FICCM-1001」。私も今のところCDを発売したWeb制作会社というのは聞いたことがありませんから、FICCが "ほぼ初" と言ってもいいんじゃないでしょうか。既にAmazoniTunes Storeでも購入することができます。

ファッションショーから生まれた楽曲の数々

岩村学の楽曲が使われたANTEPRIMAのサイト

このアルバムに収録されている楽曲は全てANTEPRIMAのファッションショー、そいてWebサイトで使用されたものです。2007年春夏2007年秋冬2008年春夏2008年秋冬。普通ファッションショーでは出来合いの流行歌などが使われたりすることが多いようですが、ANTEPRIMAのショーでは2007年春夏以降毎回、学さんに一から作っていただいています。理由はとても簡単です。FICCはショーのテーマを音も含め完全な形で具現化したいからです。素晴らしいショーには素晴らしい音楽の存在が必要不可欠です。そしてショーで使われた音源はWebサイトでも使用されます。Webサイトを制作するにあたって必ず音源を聞き込みイメージを膨らまします。使われている画像は既に撮影されたものですが、演出などに関しては楽曲からの影響が特に大きいのです。

2007年秋冬のANTEPRIMAのサイト

2007年秋冬ではCDの8曲目に収録されている「Moonlight Starlight」という曲が使われていますが、あのサイトのインターフェースは曲全体のの広がりや闇に落ちていく雰囲気を受けてできたものです。

Webデザインから生まれたCD

そして出来上がったサイトを皆さんに見ていただく度に「この曲素敵!! どこで買えるんですか?」といったお問い合わせを多数いただいていたようです。そう考えると、ANTEPRIMAのWebサイトは常にシンプルな構造で作っていますから、皆さん実はWebサイトを見ている、というよりはWebサイトを聴いている、という感覚に近かったのかもしれませんね。そしてこれまでこの曲を購入することは残念ながらできませんでしたが、遂に現実に購入することができるようになりました。CDの完成度は、FICCが作ってきたWebサイトをご覧になられた方なら自ずとわかっていただけるかと思います。

このCDには学さんに作っていただいた10曲の他に、2007年春夏(つまり一番最初)の曲「Summer Carnival」のRemixが収録されています。Remixしたアーティストはm-flo:☆Taku Takahashi。学さんの曲もm-floの曲も高校生の頃からずっと聴いていた自分にとって、自分の会社からCDが出るこの事態が正直もうなんだかよくわからないw なんだか凄すぎて遠くで見ているような気がして。でも現実に発売しているんだからもう凄いとしか言いようがない。

で、既にAmazonでも買えるしiTunes Storeでも買えるっていう。Appleが自分の会社の出したCD取り扱ってるんだよ!!ヤバいよ。とちょっと取り乱したところでどっちで買ったらいいか、という話ですが、ジャケットとインナーのデザインをあさみさんとつかさんが制作しております。女性の写真が大胆に使われた素敵なデザインです(あさみさんのブログに開いた状態の写真が)。ですからぜひAmazonで購入していただいてすべてを堪能していただきたい。…わけですが、iTunes Storeでは高音質版のiTunes Plusで配信しています。iTunes Storeでも妥協のないクオリティのものを購入していただけるかと思います。

本当に「全曲完全試聴」できるブログパーツ

さて、やっぱりWebサイトで使われた曲だから知っているとはいえ、買う前にまとめて聴いてみたいですよね。実は11曲中Remixを除いた10曲を、ブログパーツでフルサイズ試聴することができるんです!! いや、こんなことやっちゃっていいんですか?とか、権利とかあるんじゃないの?と思ってしまうかもしれませんが、大丈夫です。10曲全ての権利をこちらで持っているからですね。近年何かと楽曲の権利、というものが話題になることが多いですが、自身でレーベルを作ったのもこういった理由が大きいのです。どんな音楽もまず聴いてもらうところからすべて始まると思います。だから、たくさんの方に聴いてほしい。まず、試聴してみてください。気に入ったら、ぜひリビングや寝室、車の中、街中で歩いている…いろんなところに持ち出して聴いてみてください。どんなシーンでも似合う、このCDならではの発見があると思います。

ここまでちょっと長くなってしまったのでこの普通ではあり得ないブログパーツが誕生した経緯は次回に。試聴してお待ちください。

まあそう固くならず、名刺交換の前にまずネットで挨拶。ビジネスSNS「CU」

2008.11.13 Web

まあそう固くならず、名刺交換の前にまずネットで挨拶。ビジネスSNS「CU」

Yahoo! JAPAN発新SNS「CU」は「社会人のためのビジネス版mixi」

既に話題になってからだいぶ時間が経ってしまいましたが、Yahoo! JAPANが始めたビジネス向けSNS「CU」、実際に使ってみました。

CU

くだけた言い方をするとこのCUは「社会人のためのビジネス版mixi」。ポイントを列挙すると

・mixiと同じように(今のところ)招待されないと入れない。
ユーザーは基本的に実名で登録する。名前の他、会社名や学歴、資格などを記入する。
・登録された情報を元にユーザーを検索するとができる。(名前、会社名、学校名など)
・"マイミク" と同様の機能がある。CU内の誰とでもつながることができる。
・コミュニティを作ったり参加することができる。
・コミュニティの更新情報は基本的にメールで送られてくる。(送信しない設定可能)

こうなるとどうあがいてもmixiのようなもの、と説明せざるを得ないわけですが、決定的に違うのは「株式会社○○の△△部所属の□□さん」として参加すること。社会人(会社員)としてユーザー同士がつきあうサービスである、ということがCU最大の特徴です。

じゃあCUはユーザーに何をしてほしいの?

…とここまで書いて白状しますがここから先の文章は3日間かけて2、3回書き直してます。CUに対してどうしても否定的なことを書いてしまう。要はまだまだ完成度が高くないためなんですが、ただ見栄が優れていないだけならいいのです。それはYahoo! JAPAN本体も同じで、情報だらけで手放しに素敵なデザインとは言えないものですが、Yahoo!本体には「とりあえずここにくれば何か面白いことがある」という期待感があります。しかしCUにそれもない。今のところCUには「ユーザーに○○してほしい」というメッセージが感じられない。「とりあえず場所用意しといたから。じゃ。」といった雰囲気。もしかするとユーザーにこのサイトの方向性を決めさせるということなのか?それもなんだか責任を負っていないような…。

ともかくCU自体がユーザーに道筋を示せていない。そのせいか、ほとんどのユーザーもCUのことをmixiやtwitterの延長線上にしか見ていない節もあります。一番の人気コミュニティはTwitterに関するもので、そこでされているのはTwitterのアカウントの教え合いっこだけ。他にも趣味関係のビジネスとはまったく関係のないコミュニティが乱立。これじゃあmixiと変わらないじゃないか…。CUが目指しているところとはいったい?うごごごご…

名刺交換の前にまずCUで挨拶しよう

いや、考え方を変えよう。堅く考えすぎていたのかもしれない。クオリティは違うにせよ、確かにやってることはmixiと同じだ。それでもいいじゃないか。ユーザーの目的は「新しい出会い」だ。例えば同じマンガが好きなもの同士から新しい交流が生まれることだってある。それがさらにビジネスの関係になっても不思議じゃない。必ずしもCUがビジネスに直結する必要はないのだ。本当であればリアルな交流会の場でお互い期を使いながら名刺交換をして、探り探りでなんとか会話を繋げるところを、CUならいきなり好きな話題で話しだすことができる。お互いの情報を公開し合っているのだから会話に困ることはない。そう考えるとCUもなかなか捨てたもんじゃない。今はまだCUは「実名版mixi」として活動していけばいい。ユーザー数が集まってくればCUをもっとビジネス寄りに活用するような発想を持った人も現れるはず。その時のためにCUのシステムを使いやすくなってると素敵ですね。

で、自分でも早速コミュニティ作ってみた。

CU「広告・マーケティング・プロモーション」コミュニティ

とりあえずCUで一番最初に私がやったのは一番わかりやすくて広いカテゴリーのコミュニティを作ったこと。その名も「広告・マーケティング・プロモーション」です。早速90人近い方々が参加してくださってます。最近忙しくなかなかコミットできていないのですが、せっかく盛り上がったコミュニティ、どんどん盛り上げていきたいと思っていますのでCUをお使いの方はぜひ参加してみてください!!

ちなみにコミュニティ画像は三階ラボさんのCS4 ICONをまねして作ってしまいました(勝手に済みません><)。iiiflowのお三方とは眞鍋会でお会いしたのですが、とても気さくな方達で初めてお会いしたのにいろいろと話させていただきました。その節はありがとうございました…。そう考えると今年はいろんな方にお会いしていますね。

「ABMのRSSってFWA化してるよね?」…ってそんなことはないのですぞ!!

2008.09.22 Web

公開してまだ日が浅いですが、皆さんAnotherBookmark™略してABMを楽しんでいただけていますでしょうか。とりあえずタイトルがムックな件は置いておいて、ブログやらtwitterやら大阪てら子で何かと言及されていたのでこの話題にはタッチせずにはおれません。まず最初に「RSSのFWA化」って何だ?という話ですが、これは「FWAのRSSフィードのように、紹介してるサイトのURLをRSS上に載せないで、わざわざFWAのページ上に誘導して、その上でようやく目的のサイトのURLを見せる」手法のことで、つまりは「それめんどくさいかな&ちょっとあのー…なんていうか…」ということらしい。

結論を言いますとABMはそのような手法は取っておらず、RSSにしろブログパーツにしろブログシールにしろ全て紹介しているサイトへの直リンクとABMの紹介ページへのリンクの両方を表記しております(RSSなどで一部不具合がありましたが現在は修正を完了しております)。今回のリニューアルではABM上に各エントリーのパーマリンクが存在するようになりました。例えばこんな感じ。そのため、従来のABMでは「エントリーのタイトルもしくは画像をクリックすることで紹介しているサイトに直接ジャンプ」していたところを「エントリーのタイトルもしくは画像をクリックすることでABM上の紹介ページへジャンプ」する仕様に変更いたしました。そして紹介しているサイトのURLを併記する仕様に変更し、URLクリックで「紹介しているサイトへ直接ジャンプ」するようにしました。

また、ブログパーツは色のカスタマイズができてしまうため例外ですが、ABM上ではサイト内の画面遷移をする要素は黒(もしくはグレー)、サイト外のページへジャンプする場合は水色での表記に統一しています。URLの表記場所などは以下の通り。

abm_rss_fwa_0.jpg
ブックマーク

abm_rss_fwa_1.jpg
ブログパーツ

abm_rss_fwa_2.jpg
ブログシール

abm_rss_fwa_3.jpg
RSS(画面はGoogle Reader)

何にせよABMをご利用いただいている皆様に混乱を招きましたことを深くお詫び申し上げます。と同時に、今までのABMに慣れてしまった方は申し訳ありませんが、この新仕様にどうにか適応していただければと思います。「慣れたら10倍速く、便利に使える」がモットーのリニューアルですのでどうかご理解くださいますよう、よろしくお願いいたします。

…とここまで書きましたが、これもあくまで制作者側の考えでありますからURLの表記以外にも、使用して「ここはおかしい、不便、理にかなってない」などの点がありましたらぜひこのエントリーのコメント欄に書き込んでくださいませ。全てに対応できるかはわかりませんが、皆さんのお役に立てるよう尽くしていきたいと思いますのでどうかよろしくお願いいたします。

なお、「僕がABMを一番うまく作れるんだ」とか「俺がABMだ」という方がいらっしゃいましたら一度こちらをご覧になってはいかがでしょうか。

「AnotherBookmark™」 - 全てを新しく、リニューアルしました。

2008.09.19 Web

「AnotherBookmark™」 - 全てを新しく、リニューアルしました。

2年半前、FICCで初めて「仕事ではない仕事」をしました。社内での参考サイトの情報共有を円滑にするためのプラットフォームとしてブックマークサイト「AnotherBookmark」を設計しました。最初はひっそりとしたサイトでしたが、いつしか投稿者に社外の方も増え始め、ありがたいことにWebデザインに携わる様々な方々から支持していただけるサイトとなりました。現時点でブックマーク、ニュースの投稿数は合わせて4500件を越えています。

しかしこの2年半の間の投稿数、そしてユーザーの拡大にプラットフォームが耐えられなくなってきたのも事実でした。当初のコンセプトを貫き、設計を大きく変えなかった我侭な私に責任があります。それでもAnotherBookmarkに愛着を持って、優しく見守ってくださったユーザーの皆さんにまず感謝の言葉を伝えさせてください。本当にありがとうございました。そして、これまでの膨大な情報を生かしながら、さらにデーターベースを充実させ、今まで以上に使いやすいサイトとしてAnotherBookmarkをリニューアルしました。テーマは「速さ、使いやすさ、正確さ」そして「ユーザーによって充実していくデータベース」です。

AnotherBookmark™
インターフェースを一新、さらに速く、使いやすく - AnotherBookmarkをリニューアル | FICC PRESS RELEASE

AnotherBookmarkの新インターフェース

新しいインターフェースは非常に明快です。中央のウィンドウ内で全ての情報が展開されます。従来のBookmarkNews、そして新たに加わったPublicPostの投稿を整理されたかたちで閲覧することが出来ます。

閲覧したページはブラウザのように記憶され、ヒストリー間を自由に移動することができます。

閲覧したページはブラウザのように記憶され、ヒストリー間を自由に移動することができます。また、ユーザーの混乱を避けるためパンくず式のメニューも実装しました。自分が何を見ているのか、わからなくなることはないでしょう。さらに多くのページには直リンクアドレスが存在するので、友達にページを教えるときも便利。あと、データの読み込みが非常に軽快になったことも付け加えておかなければ。

新しくなったのはインターフェースだけではありません。「ABM User」アカウントというものができました。ABM Userアカウントは誰でも無料で登録することができます

アカウントを使うと「お気に入り&コメント機能」が利用できま

まずアカウントを使うと「お気に入り&コメント機能」が利用できます。気に入ったエントリーを自分の「お気に入り」エントリーとしてコメントと一緒にリストしておける機能です。ABMは一つのエントリーについてくる情報が1、2行程度と少ないものでしたが、これからは皆さんのお気に入りコメントがエントリーの情報を拡充して、さらにエントリーが有益なものになっていくでしょう。

また、アカウントを持ていると「PublicPost」というABM Userのためのスペースにニュースを投稿することが可能になります。これからは一般ユーザーからもABMのネットワークを使って情報を発信することができます。

どのユーザーも自身で情報を補強し、整理し、発信できる。自分の手で、もっと便利に、使いやすくする。これが今回のリニューアルの大きな柱であり、最大のチャレンジです。リニューアルしたABMから新しい化学反応が生まれることを期待して。

あとABMで忘れちゃいけないのがブログパーツ。今回もカラーリングを完全カスタマイズできる仕様で登場です。さらにそれとは別に個別のBookmarkエントリーの情報を貼付けられるブログシールも制作しました。ABMに載っているサイトをブログで紹介する際はぜひ使ってみてください。ちなみにこのブログシールを貼ると、貼ったページのアドレスがABMに自動的にトラックバックされる仕組みになっています(RSSが存在するブログのみ対応)。ちなみにブログパーツとブログシールのスクロールの仕方は…ガジェットに詳しい方ならすぐにわかるはず。


制作のスタートは1年前ほど。細々とデザインと開発を続けてきました。旧ABMはデザイン、設計、制作全て私だけで行いましたが、大切なリニューアル、今回デザイン&HTMLに関しては鈴木さんにお任せしました。みんなに愛されるように、ということでちょっとカワイ目に。画面構成にAppleを感じる部分があるとするればそれは私が小姑のごとく口出しをしたからと思っていいです(笑)。そんな私の嫌な口出しにもしっかり対応してくれた鈴木さんに多大なる感謝を。でも一点だけ、ころんとした新しいロゴだけは私が作ってみました。ダルマの目みたいなものですかね。残りのFlash&サーバサイドは例によって私一人です。自分の我侭は自分で解決、という感じですが、私がやってきた仕事の中で今回のAnotherBookmarkが一番手がかかったサイトです。間違いなく。


実は既にWORLD ENDINGのonopkoさんがこんな素晴らしいエントリーを書かれていて、実はこの記事もほとんどそれを読みながら書いていたのですが、完璧な洞察で制作者以上によくわかってらして、正直泣いた。私の記事よりもいいことが書いてあるのでぜひ読んでください!! 他にもとつかさんかみむらさんジャガングルスまゆさん鈴木さんもブログ記事を書いてくれました。「たぶんアキラが説明すると思うから」…っていやいやみんな書いてくださいよ!!


と、なんだか長くなっちゃいましたが、ABMの使命は「Webクリエーターのインスピレーションを刺激する」こと。そのための仕組みを今回のリニューアルで全て盛り込んだつもりです。ですのであとは皆さんに使っていただくだけ、ですね。私もコントリビューターの一人としてクリエイティブな面白い情報をABMからどんどん発信していきますので、これからもABMのチェックを怠らないようによろしくお願いいたします!!

最後にtwitter・各種ブログなどで書き込みがあったのでちょっと補足です:
・制作にProgressionは残念ながら使っておりません。てか正直使いたかったです。使ったらもっともっと楽だったろうに…。Progressionは本当に素晴らしいので皆さんぜひ活用してくださいね!!
・そういえば、なんだか「おでんがどうこう」とか言っている人がいますが私には何のことやらさっぱり…

「コビーおじさんのABC工場」であそびながら英語を勉強しよう(できれば親子で)。

2008.08.30 Web

「コビーおじさんのABC工場」であそびながら英語を勉強しよう(できれば親子で)。

以前コビープリスクールという保育園のサイトを制作しました。今までの保育園サイトのイメージを覆す3D表示インターフェースに、たくさんの方からの反響をいただきました。あれから2年。小さなお子さんに向けて、何かコンテンツが作れないだろうか、保育園のコビーが提供するエデュケーションコンテンツとは…ということでこんなサイトが完成しました。

コビーおじさんのABC工場
コビーおじさんのABC工場 | FICC inc.(サイト紹介、クレジットなど)

まるで「動かせる絵本」の世界。いつもの通り解説に入りたいと思いますが、今回は文章だけで説明するのも難しいので映像を交えて(FlipClipもしくはYoutubeでも見られます)。もちろん実際に遊んでいただくのが一番早いんですが。

「コビーおじさんとABC工場」は小さいこどもたちが楽しく英語を学べるコンテンツです。「べんきょうはいやだなあ」と思う子もいるかもしれませんが、コビーおじさんと一緒なら大丈夫。まずは何でもいいからキーボードのキーを押してみよう。例えばAだったらA→Apple→りんごのイラストブロックが空から降ってきます(英語の読み方がわかるようにおねえさんの発音付きです。)。落ちてきたブロックはマウスで操作することも可能。キーボードを叩けば叩くほどでてくるから、どんどんどんどん叩いてみよう。すると地面がブロックだらけに。

コビーおじさん自慢のブルドーザーでぜーんぶ片付けてくれます。

でもご安心あれ。コビーおじさん自慢のブルドーザーでぜーんぶ片付けてくれます。これならいくらでも遊べますね。どのキーを押したことがあるかは「あつめたアルファベット」のコーナーでわかります。

coby_ojisan_no_abc_kojo_2.jpg

イラストを選んで発音を確かめることも。復習にいいかもしれませんね。そしてこれまであつめたアルファベットイラストを使ってさいころを作ることができます。

イラストを使ってさいころを作ろう

さいころの展開図に好きなイラストを当てはめていきましょう。6面全部当てはめたら「くみたてる」ボタンをクリック。さいころの完成です。このさいころは最終的にプリントアウトして組み立てた遊ぶこともできますし、ブログパーツにしてブログに貼付けることも出来ます。

さいころをプリントして組み立ててみたところ

プリントアウトして組み立てるとこんな感じ。撮影用に慌てて作ったのでちょっと雑かも…みんなはお父さんお母さんといっしょにていねいにつくろう。あとはさみの使い方に注意しようね。お父さんお母さんと一緒に「このイラストは何かな?」と当てっこするのも楽しいと思います。たくさんプリントして組み立ててリアルABC工場を再現しちゃうというのも楽しいね。

コビーおじさんのABC工場

ブログパーツはサイトの雰囲気をこのサイズに閉じ込めました。「うちの子が作ったさいころ」ということでみんなに自慢しちゃいましょう。

コビーおじさんやアルファベットごとのイラストは絵本作家のcolobockleさんにお願いしました。暖かみのある、触れられるようなイラストが今回のコンテンツにぴったり。本当にありがとうございました。全体のデザインは私が担当、完成したイラストに合わせて質感を調整。最終的なFlashコーディングは全て安藤さんにお任せしました。いかに小さな子が遊んで楽しいか…わけもわからぬままこどもが遊ぶコンテンツですから、いかに無茶な動作をさせても問題ないか…この「何でも触れてしまう果てしなく曖昧な世界」を創造してもらったことに深く深く感謝です。そして保育園の英語の先生、という設定(のつもり)で声を吹き込んでもらったけいこさんにも感謝です。制作後期収録された声がFlash上で再生された時は、まさにこのコンテンツに息が吹き込まれた瞬間でした。音声収録を担当してくれたDJ JAGANGLESありがとう。制作に携わっていただいた全ての方に大きな感謝を。そして提案に賛同してくださったCOBYの皆様本当にありがとうございました。

あとはこどもたちに遊んでもらえることを願うだけですね。小さなお子さんがパソコンを操作するのはなかなかたいへんでしょうから最初はお父さんお母さんが一緒に遊んであげるといいでしょう。遊んでいるうちにきっとこどもたちが自然と遊び方を見つけていくと思います。こどものためのコンテンツ、ですが大きなおとなたちが楽しめないわけではありません。童心にかえって、キーボードを一心不乱に叩いたり、ブロックをぶんぶんしてみるのも楽しいですのでぜひ。

あのブログパーツがパワーアップして帰ってきた。「FLO:Q 僕の私の脳速検定」

2008.08.21 Web

半年の月日を経てあの「脳速検定」がパワーアップして帰ってきた!! その名も「僕の私の脳速検定」!!

脳速検定2 - FLO:Q (フローク)
僕の私の脳速検定ランキング

…って言っても今回は私がメインで開発したわけじゃないので私がはしゃいでもしょうがないですが(監修くらいの感じ?)、たけしがほとんどやってくれました。FICCに来てからの初仕事よくぞこなしてくれました。企画・デザイン・Flash実装…ということでほとんどやってもらってます。企画がパワーアップしてるせいで作業量も2倍近く行っていましたが、それでも健気に作り続けていたたけしにまず拍手をしながらみんなで囲んで「おめでとう」と言いたい。そしてありがとう。私は横で小言を言ったりするのが主でしたが、地味にランキング用のキャラクターアイコンを描いてます。イラレ7で遊んでた高校生くらいの頃の自分を思い出しながら描きました。ニュータイプのデザインがちょっとアレに似てる気がしますが気のせいです。

…と話が制作寄りになりすぎたので中身の話を。前作「脳速検定」は全国のブログで使われているキーワードを元に問題を生成していましたが、今回はブログのRSSから個別にキーワードを生成。つまり、あなたのブログであなただけの脳速検定が!!というわけ。さらに前作ではシンプル&ストイックを極めたゲーム内容もパワーアップ。文字情報だけでなく写真や映像を使った問題が登場し、前回より確実に難易度UP。そしてランキング登録ですが、今回は都道府県別・ブログパーツ別ランキングも登場。順位争いがさらに激化!! …というかなりのヴォリュームです。

特にブログのRSSから問題を生成する今回の「僕の私の脳速検定」ですが、これがなかなかの精度。私のブログでやってみたところ、iPod、鉄腕アトム、ロボット、Apple、ポケモン…とかなり私らしいキーワードを使って問題を作ってます。例えばアイドルの画像が使われている問題を登場させたければブログにそのアイドルの名前を書きまくってればいつか登場することも。ブログを更新するたびに新しいキーワードが問題になるのでこれなら脳速検定のためにブログ更新したくなるかも。

では制作者がとりあえずゲームをしたらどれくらい行くかということで、早速プレイ。やはり最後の動画暗算はかなりの難易度。最後までプレイしてランキング登録した暁にはプレイ結果をブログに貼ることができます。ということで私の結果はこちら↓

ペキン原人級 あなたの頭脳はペキン原人級です。 僕の私の脳速検定
ようやく背筋ものびて人類に近づいてきましたよ。ところでジャワってどこ?とりあえず検索…する前に勉強しよう!!
脳速度 53090 回転  全国ランキング 15
検定受験日:2008年8月21日
試験を受けたサイト:AKIRAFUKUOKA 編
powered by FLO:Q

辛うじて人型…っていうかサル!? …制作者がこれでいいんだろうか…。公式サイトではかなりネタバレしてますが、人間をも越える最高位は宇宙人。さあ宇宙人級を叩きだすプレイヤーが現れるのか…それぞれの級の一言コメントもちょっとひねりを入れてあるのでそこも楽しんでもらえれば。ぜひプレイして、結果もブログに貼ってみてくださいね。

ANTEPRIMA FW08 - Contrasts of women

2008.07.09 Web

ANTEPRIMA FW08 - Contrasts of women

半年が経つのも早い。2008年秋冬のANTEPRIMAのテーマは「Contrasts of women」。

ANTEPRIMA FW08(英語)
ANTEPRIMA FW08(日本語)

AD: ASAMI ABE / De: KENICHI SUZUKI / Dv: AKIRA FUKUOKA
Music: MANABU IWAMURA

私は例によって開発での参加です。組み立て担当。提示された世界観をFlash上で組み立てることに専念しました。2008年春夏は色とりどりでしたが、今回は「光と影」の世界。時に写真の明暗であり、時にインターフェースにあらわれる光・影であり。

ANTEPRIMA FW08 - Contrasts of women

オープニングのアニメーションでは2人の女性を照らす明かりがだんだんと大きくなり、最終的には全体を照らす強い光になる。Bags & AccessoriesとCollectionのページも似ているようで違う「光と影」。影だったものが煌めきに変わる様子を、ぜひ触って確認してみてください。

ANTEPRIMA FW08 - Contrasts of women

ちなみに1昨年から毎回入っているグラフィックEQ。今までは標準的な上下にバーが揺れるものでしたが、今回は一新。岩村学さんが作曲した今回のテーマがとても柔らかく繊細なイメージだったため、布が揺らめくような、やさしいグラフィックEQを目指してみました。ドットの集合体が音に反応してきらめく様はずっと見ていても飽きないものになったと思います。もちろん今回も楽曲のダウンロードが可能。ぜひiPodに入れてドラマチックな毎日を。


光、影、どこまでも追求して、こういうかたちになりました。

Web Designing 7月号にAKIRAFUKUOKA(コンパクトに)登場です。

2008.06.19 Web

Web Designing 7月号にAKIRAFUKUOKA(コンパクトに)登場です。

ということでフクオカアキラが福岡 陽としてWeb Designing7月号に登場です。「一緒に働いてよかった、一緒に働いてみたいクリエイターはこの人!」というアンケートコーナーにちょびっと出させていただいております。掲載されている箇所は本当に小さいので、見つけるのは至難の技だったり(さすがに中身の写真は載せられないので自力で探してね)。 もし本屋さんで見かけたらぜひ手に取ってそのままレジへ。私がどんなクリエーターを推したかは実際の紙面でご覧ください。

でも「一緒に働いてよかったクリエーター」と言われてもなかなか難しいなあと。私ごときがこういう形でお仕事をさせていただいた他のクリエーターの方の名前を出してしまうのもどうなのだろう…と思い、僭越ながら「一緒に仕事したことないけどむしろ遊んでみたい人」を選ばせていただきました。…いやま、それも勝手な話ではあるんですが。最初は宮本茂氏とか書こうかと思ったけどおとなだから自重しましたよ。そもそもFICC内でもまだ一緒に仕事していない組み合わせもあるような気がするし。

ともかく事後報告ながら快諾してくれたkeitap氏に感謝。とりあえずそのうち遊びましょ。

78ちゃんねるのクオリティの高さ異常ワロタwww

2008.04.01 Web

78ちゃんねるのクオリティの高さ異常ワロタwww

カネゴンの78ちゃんねるまとめブログ

うはwww正直痛いニュースとかニュー速クオリティとかじゃ比べもんになんないクオリティの高さwwwつか完全アフィブログなんですけどwwwさすがカネゴンさんwwwこれが円谷クオリティwww

…ということで遂にあの宇宙規模巨大掲示板78ちゃんねるのまとめサイトです(もちろんエイプリルフール)。1日だけの期間限定コンテンツなので注意。円谷プロサイトの近年のエイプリルフールは「エムナナハチ」という言うなればmixiのようなSNSサイトでこれがまたよくできてたんですが(小鳥ピヨピヨさんが詳しい)、今年はSNSではなく2chのパロディ78chのまとめサイト。

前回のエムナナハチ同様キャラクターの特性を生かした発言(+かなりネット寄りなネタ)が爆発。

地球に行くとありがちなこと」スレにて

  106 名前:ジャシュライン 2008-03-30 17:44:43

    スプーンを目に当ててものまね

  109 名前:ナックル星人 2008-03-30 18:00:04

    >>106
    紅白帽をかぶるバージョンも

ちょwwwそれおっくせんまんだし!!


ウ→ル→ト→ラ→マ→ンでウルトラの母の秘蔵画像うp」にて

  1 名前:バルキー星人 2008-03-30 11:23:06

    完成したら秘蔵フォルダから画像を大量公開する。
    ウ

  2 名前:ウルトラマンキング 2008-03-30 11:23:18

    ル

見事に釣られるウルトラマンキング…

  21 名前:テンペラー星人 2008-03-30 11:24:19

  出たーーーーーーーーっ!
  エンペラ星人さんのインペライザーを使った連続書き込みだあああああああああああ!

  27 名前:デスレム 2008-03-30 11:24:25

  さすが皇帝!おれたちにできない事を平然とやってのけるッ そこにシビれる!あこがれるゥ!

いいのかそのジョジョ発言は!?www テンペラー星人の発言もちょっとDMC的な…


【炎上続出】SNS「エムナナハチ」について語ろう【ミスターファイヤーヘッド】」スレにて

  14 名前:ユリアン 2008-03-30 17:30:35

  えーまじエムナナハチ?
  エムナナハチが許されるのは4/1だけだよねー

キャハハ!! ってユリアンお前というヤツは本当に…

  32 名前:ザラブ星人 2008-03-30 17:37:44

    ジャミラさんは星人からするとかなりイケメンの部類だぞ

これは禿同。

  ※1 名前: ウルトラマン80 2008/3/31(月) 22:17:18

    エムナナハチは20000歳以下は書き込めないようにするべき。

SNSに年齢制限は必要かもね…ってウルトラスケールだなおい。

  ※3 名前: ザムシャー 2008/3/31(月) 22:36:28

    実名だから炎上するのではないだろうか?
    全員匿名ならば問題解決だと思うのだが…

  ※4 名前: ウルトラマンアグル 2008/3/31(月) 22:42:40

    それはすばらしい案だな

  ※5 名前: ウルトラマンスコット 2008/3/31(月) 22:44:01

    匿名掲示板に匿名SNS。これは流行る。

  ※6 名前: ホー 2008/3/31(月) 22:45:37

    天才あらわる

  ※7 名前: バルキー星人 2008/3/31(月) 22:49:46

    おまえいいこというな

  ※8 名前: ケムール人 2008/3/31(月) 22:51:33

    その発想はなかったわ

宇宙でも実名匿名論争が盛んな模様。でも星人の間では基本実名制だからなぁ(名乗ってから戦うからなのか何故かお互いに名前知ってるし)。とりあえず地球の2ch等を参考にするといいのかもしれん。


ヒマだからちょっと地球制服してくる」、スレ立てしたのは相変わらずKY、もとい早くなんとかしないと…なマグマ星人。

  1 名前:マグマ星人 2008-03-30 17:18:37

    78ちゃんに予告書き込みしてから地球制服余裕でした

  2 名前:ウルトラマンパワード 2008-03-30 17:19:18

    ま た お ま え かwwwwwwwwww

  11 名前:ウルトラマンゼアス 2008-03-30 17:21:51

    スレタイが間違っている件

ダメだ…根本的にダメだマグマ星人…。そのあとも地球制服発言を繰り返したあげく

  185 名前:マグマ星人 2008-03-30 17:51:58

    宇宙警備隊とかショボすぎw
    そろそろ地球行ってくるわw

  200 名前:ウルトラの父 2008-03-30 17:54:15

    通報があったので来てみました

  210 名前:ガラモン 2008-03-30 17:54:50

    >>200
    !!!!!


  219 名前:ジャシュライン 2008-03-30 17:56:25

    マグマ星人終わったな

遂にウルトラの父降臨。その後、

  253 名前:マグマ星人 2008-03-30 18:03:30

    宇宙警備隊まだこないなw口だけだなやっぱりw78ちゃんねるは楽しいなあ

  412 名前:メフィラス星人 2008-03-30 18:24:25

    >>1の反応がないな

  432 名前:テンペラー星人 2008-03-30 18:26:07

    マグマ星人拘束されたか?

  439 名前:ウルトラウーマンベス 2008-03-30 18:26:52

    宇宙警備隊おつかれ様です

やはりマグマ星人拘束されたのかっ!? m9(^Д^)プギャーm9(OдO)デュワー! 宇宙警備隊乙。


…とまあこんな具合の78ch。他にも

・「タロウさんぼくもシゴいてください。」的発言を連発するウルトラマングレート自重
・超ネット紳士だけど正論すぎてちょっとイラットするダークザギ
・さらにエースキラーに「イチローとタメはれるかも」言わせるほどのダークザギ
・ダークザギのブクマコメントが気になる
・M78星雲のネットにはウルチューブやシュワシュワ動画などの動画共有サイトがある
・宇宙警備隊で活動するのは非常に大変で、刺身にたんぽぽを乗せる仕事であれば
 3日間徹夜でやり続けるくらいの忍耐力と体力がなければまず合格できないらしい
・つか地球で3分間戦えないヤツは話にならないんじゃね?
・とりあえずザムシャーは空気読めない子
・「ウルトラマンキングがいいこと言った!」
・ウルトラマンが「ググレカス」
・最近は気軽にポストできるミニブログの「デュワッター」がじわじわ人気に
・メフィラス星人は自宅警備員の疑いあり
・実名制で自演て…w
・スペシーウム(笑)

このブログにでてくるのはもちろん全部本物のウルトラマン&ウルトラ怪獣。適当な名前とか一切無し。このクオリティと情熱に嫉妬。でも個人的には初期ウルトラマンが好きだから最近のウルトラマンはちょっと…とか言うと「懐古厨乙www」とか言われそうだからやめとこ。

来年のエープリルフールはシュワシュワ動画に期待。ま順当に言ってウルペディアか!? それともあらたなウェブサービスか?ウェブ関係者としても目が離せないところ。というわけで今日の日記は2ch78ch用語満載でお届けしました。

とりあえずよいこのみんなはマグマ星人みたいにならないようにしようね!!

最高のペンタックスフォトアルバムを妄想する

2008.03.13 Web

最高のペンタックスフォトアルバムを妄想する

あー早くDA35mmF2.8 Macro Limited出荷されないかなー。とそんなPENTAX大好きなakirafukuokaの所にこんなニュースが。ペンタックスがオンラインフォトアルバムサービスをスタート。

ペンタックスフォトアルバム

利用は無料、1GBまでアップロードできるフォトアルバム。サイトデザインはよくも悪くもペンタックスらしいユルさ…が感じられる。までもオンラインフォトアルバムなんて今さら…ブログ貼付けコードがすぐ書き出されるのは画像保存用サービスとしても便利だけど…それ以外は他のサービスに追随してる感じ。

…そりゃfotologueのほうがかっこいいしなぁ。flickrのほうが便利だしなぁ。普通の人はmixiアルバムで満足しちゃうしなぁ。じゃ、ペンタックスフォトアルバムを利用する意味があるのかどうかさっそく妄想してみよう。まず利用者の立場から考える。突出した機能がない以上、利用者はペンタックスユーザーがほとんどを占めるはず(注:このサービスはペンタックス製品を持っていなくても利用可能です)。ペンタックスユーザーというかもうペンタックスファンである可能性が高い。このサービスは写真投稿を中心とした巨大な「ペンタックスコミュ」のようなもの。

アルバムサービスとしては並な雰囲気。じゃ、このペンタックスコミュに入っている入っている人はどんな情報をやりとりしたいんだろう。もちろんペンタックス製品についての情報。一眼レフカメラ本体、そしてレンズに周辺機器…。特にペンタックスユーザーはレンズに高い興味を持っている事が多い(独断と偏見だけど)。ならばいっそこのペンタックスフォトアルバムではもっとカメラやレンズの情報をやり取りしやすいようにするべきじゃなかったんだろか。いちおう現状のサイトでも使用したカメラの種類で写真が検索できるようにはなっている。ならばもっとそれを拡大して、使用したレンズで検索できるようにしたり、機材についてディスカッションできる雰囲気を作っても良かったのではないだろうか。そうすればペンタックスに特化した最強の作例サイトの完成じゃないか!! 情報量と信頼性では価格.comなんか目じゃないんだぜ!! だってアウトプットから全部判断できるんだし!!

さらに自社のオンラインショップやAmazonへのリンク、価格.comへのリンクがあれば購買への導線も完璧(価格.comへのリンクはやり過ぎじゃない?と思うかもしれないが、実は既に以前東芝が液晶TVのブログパーツから価格.comへのリンクをはったことがあった)。もちろんコメントや、写真によっては製品にネガティブな印象を与える事もあるかもしれない。でもそれを恐れるのはウェブらしくない。最初からペンタックスのファンが集まるサイトなわけだし。そんなサービスだったら絶対利用するのになー。もちろん自分がレンズを買う際の参考に。…とまあ以上は妄想なのでそこまでみんな本気にしないように。

いいサイトを作るのは大切な事。でもできれば利用者と提供者がお互いに得するサイトでありたいですね(アルファブロガーっぽい締め)。


で、WWW.AKIRAFUKOKA.COM PICTもちょっとずつアップデートしていきますよ。機材別カテゴリー追加。みんな、レンズ買おうね!!(アフィリエイト的な意味で)

NEW DESIGN. WWW.AKIRAFUKUOKA.COM.

2008.03.04 Web

NEW DESIGN. WWW.AKIRAFUKUOKA.COM.

遂にWWW.AKIRAFUKUOKA.COMがリニューアル、リデザイン。要は見ればわかる、という事ですが1年2ヶ月を経て何が変わったのか。ざっとおさらい。


1. 全コンテンツのインターフェース、アピアランスの統一
新デザインのテーマは「フローリング」です。何か深い意味でもあるんですか?とか聞かれたりしましたがまったくないです。なんというかテクスチャーが使いたかったというか。このテーマはAKIRAFUKUOKA.COMすべてにおける共通のバックグラウンドになっています。ちなみにtwittertumblrもフローリング。「フローリングのサイトと言えばWWW.AKIRAFUKUOKA.COMだ!!」と覚えていただけるとなお良いです。今回アピアランスだけでなくヘッダー部グローバルメニューも共通のものを実装しました。これまではバラバラに点在していただけのコンテンツがこれできれいに整理整頓。

2. プロジェクトページの開設
ウェブサービス全盛の時代。自分のサイトに作品を展示するという事も少なくなってきました。だから敢えて、創作を自分のページに呼び戻そう。今年は純粋に色々なものを個人の手で作るという事が必要…ということでPROJETSのページができました。まだ過去の作品しかありませんが、「今年は作るぞ!!」という決意表明。

3. 外部ウェブサービスとのリンク
せっかく使えるものなんだから使わない手はない。ということでメインメニューからtwittertumblrdel.icio.usへのリンクを設置しました。今の時代、自分のサイト以上にミニブログやブックマークの方が個人を良く知る手がかりになったりしますね。


今回のリニューアルのスローガンは「あくまで入れ物」。入れ物に必要以上に凝ったところで内容がよくなるわけでもなく。そして入れ物はできる限り広く使えるよう横幅980pxに。このブログもかなり本文の領域を広く取っています。まず大きいキャンパスを用意するのは無駄な事ではないはず。インターフェースやボタン類も凝ったデザインではありませんが、必要な場所に必要なだけあること、を合い言葉に組み立てていきました。

見た目が新しくなったから何かが変わるわけでもないですが、これが新しいスタート。これからもよろしくお願いいたします。

あ。ABOUTページも新設しました。

速報:サイトリニューアル。

2008.03.03 Web

とりあえず皆様にお伝えします。

WWW.AKIRAFUKUOKA.COMがリニューアルいたしました。

トップページもブログも写真ブログもすべて。

詳しくはあとで書きますもう無理…。

あなたの脳に挑戦する。「FLO:Q脳速検定」。

2008.01.29 Web

ようやく…。多機能型ブログパーツでおなじみFLO:Qからゲームウィジェット「ブログの話題で脳速検定」がリリースされました。私も制作に携わっております。

ブログの話題で脳速検定- FLO:Q (フローク)

「ブログの話題で脳速検定」はFLO:Qがブログから集計した話題のキーワードを元に出題される3種類の問題で、頭の回転の速さ=「脳速度」を測定するゲーム。では3種類の問題をひとずつご紹介。

まず一つ目は「文字並べ」

ブログの話題で脳速検定 - 文字並べ

制限時間内に、指定されたキーワードを構成する文字を一文字ずつ選択していくだけの単純明快ルール。なんだただのパズルゲーム…と油断するとあっという間に制限時間がなくなってしまうので注意。こういう問題は焦れば焦るほど次の文字が見つかりにくくなるのです。

二つ目は「文字列判別」

ブログの話題で脳速検定 - 文字列判別

指定されたキーワードが4分割された画面を右、ないし左からスクロールしていきます。ただ4つの中の3つは文字の順番がぐちゃぐちゃな似て非なるキーワード。見事それに騙されず正しいキーワードをクリックすれば正解です。最後までゆっくり観察すれば正解率がぐっと上がる問題、ですが制限時間もあっという間なので気をつけて。ただ逆に慌ててクリックしてもダミーに引っかかるだけなので時間の駆け引きが重要。

三つ目は「語句記憶」

ブログの話題で脳速検定 - 語句記憶

問題出題前にまず数秒間キーワードがいくつか並んだ画面が表示されます。この数秒間のうちに画面の要素を記憶し、問題に解答します。問題の内容は様々(もちろん秘密)なので一概にキーワードだけ覚えていればいいというわけではありませんよ。しっかりと画面を脳裏に焼き付けるべし。私は最も苦手な問題…。

この3つをクリアすると最終的な結果発表。

ブログの話題で脳速検定 - 結果発表

総合的判定である「脳速度」(単位は "回転" )を中心に「記憶力」「眼力」「正確性」「トレンド」「判断力」の5つのパラメーターが表示されます。結構シビアなので心して。あんまりにもショッキングな数値が出た方は「きっとこれは無茶ゲー…」と思っていただければ。そして脳速度を登録する事で、全国のプレイヤーとランキングで競う事も可能です。ちなみに私は最高4位…だったんですがあっという間に蹴落とされてしまいました…あぁ。

そもそも「ブログから集計したキーワードを使ったゲーム」というテーマからスタートした企画で、言葉を使ったゲームであればアクションやシューティングなど少しひねった内容よりも素直に頭の体操系のゲームがマッチしやすいであろう、という事で「脳速検定」という形を考えました。私は企画・構成・ゲームデザイン(問題)・インターフェースデザイン(見た目)・コーディング(Flash実装)…とサーバー周り以外の事は一人でほぼ全てやらせていただきました(別に寂しくなんかないですよ)。あと「ブログの話題で脳速検定」という命名も。意外と誰も使ってなさそうな名前、ということで脳の速さ、「脳速」という造語と、流行のワード「検定」を素直に繋げています。やっぱりわかりやすいが一番。そんなわかりやすさとちょっと悔しいくらいの難しさが皆さんに楽しんでいただけているようで何よりです。個人的にはこのようなプラットフォームで "脳トレ的" なものが作れて嬉しかったです。いや、なんていうか、ほら、ね。

これを読んでくださった方もせっかくですから一度プレイして得点を登録してみてください。ブログをお持ちの方はご自身のページに貼付けて頂ければ。自分のスコアも一緒に併記して競い合う相手を捜すのも楽しいかも。

ANTEPRIMA Spring-Summer 2008、それは光彩。

2008.01.23 Web

ANTEPRIMA Spring-Summer 2008、それは光彩。

ANTEPRIMA SS08のサイトが公開されました。

ANTEPRIMA Spring-Summer 2008 Website

Art Direction : Asami Abe
Design : Kensuke Sato, Asami Abe
Flash : Akira Fukuoka

色、万華鏡、そして何よりも楽しい、がテーマの今回。出来上がったのは色と光の世界。画面が切り替わるたびに色と光が溢れ出す、そんなサイトになりました。

光に包まれる瞬間。

今回のSS08サイトは光、色という一貫したイメージと、純粋にじっくりコレクションやアイテムを見ていただきたいという思いが形になりました。スライドショーのようにただ流れのまま見ていくのとは違い、まさにアイテムを一つ一つ「手に取るように」見るインターフェイス。大切にじっくり、一つ一つ。光に包まれるようにして表れる感触をぜひ感じてみてください。画面遷移に、アイテムに、背景に、そしてプリローダーにも色、そして光。理屈以上に「感じる」サイトになったと思います。

グラフィックイコライザーも色々と。

余談ですがtrick7さんに「BGMボタンが良い」と非常にピンポイントにご紹介していただいたこともある前シーズンサイトに続き今回もグラフィックイコライザーを付けています。ただちょっと進化。今回のテーマは色ですからやはり…

音楽は岩村学さんによる「Summer Carnival」。きらめく電子音が春夏らしい高揚感をもたらしてくれる素晴らしい一曲。サイトからダウンロードもできますのでぜひ。iPodに入れて街へ。そしてお店へ。


と、いうことでこれが今年最初のお仕事でした。今年もよろしくお願いいたします。


関連リンク:
WWW.AKIRAFUKUOKA.COM BLOG - ANTEPRIMA FW07ウェブサイトとその思いで。
ANTEPRIMA

ABMがマイナーアップデートしてたんです。

2007.10.09 Web

海外の方も多数ご覧くださってますFICC AnotherBookmark Betaですが、前回の大幅なアップデートに続き、やや小さめのアップデートを行いました。

・ブックマークエントリーの表示を整理
ブックマークエントリー内の表記を整理
従来表示していたブックマークエントリーの表示からURL部分をとりました。その文コメントとスイッチ表示させていたタグを常に表示するようにしました。これでエントリーとタグの関連性が一目瞭然。URL表記はなくなりましたが、タイトルもしくはサムネールをクリックすることでブックマークされたURLにジャンプしますのでご安心ください。

・頻出タグリストの復活
頻出タグリストの復活
まったくなくなってしまうのは寂しいよね、ということで今まで左カラムを守ってきた頻出タグリストが帰ってきました。これからはコントリビューターリストとタグリストをタブで切り替えることになりました。使い勝手は従来のまま。「ファッション」や「インターフェース」など関連するサイトをまとめて見たいときに便利。

アップデートを経てABMもいい形になってきました。さらにまた次のステップに備えて準備していきますのでご期待くださいとハードルを上げてどうする。

ABMの進化の本筋とは離れますが、"触れる" のもいいかなと思ってます。

MovableType4にしてみました。

2007.10.02 Web

MovableType4にアップグレード

これを読んでいる人側にとって全くメリットのない記事ですがまあ落ち着いて。WWW.AKIRAFUKUOKA.COMで利用しているブログソフトをMovableType3からMovableType4(以下MT4)へアップグレードしてみました。

人間何事にも「乗り換え・アップグレード」するには何かしらの理由があるものです(金銭面での優遇、価値観の違い、育った環境が違うから好き嫌いは否めない等)。しかし各方面でも既に語られている通り「MT4よりもMT3の方がよかった」という評判。…ってことはどう考えてもアップグレードしない方がよくない?という人一倍おっくうな性格の私がわざわざMT4にアップグレードした理由とは一体。

Movable Type 4 を iPod touch または iPhone で利用する

MovableType4をiPod touchで。

はいはい結局Appleですよ。iPod万歳。俗にいうiPod touchでブログ更新ができるって聞いたんで飛んでやってきました、ですよ。はー、このiPod用プラグインインストールしても絶対iPodから更新することなんかないんだぜ。だって当ブログはほぼ100%画像ないし映像が貼付けられてるのでiPodから更新する意味がないの。てかまだiPod touch届いてないっつーの。はー。こんなのにすぐ飛びつくってあなたはいつまでたっても子どもですか。はー。

と、そんな流れで勢いでMT4にしてみたはいいものの、インターフェースが変わりまくりでエントリー書くにも苦戦している状況。でもmixiリニューアルみたいに「慣れ」が解決してくれる問題でもありますね。

あとせっかくなのでMT4の不具合報告。MT4をアップデートする際、データベースのアップデート画面でまったく何も進捗しない状態になりました。プログレスバーだけがアニメーションしてて、真ん中のコンソールに何も表示されないような状態。当初ここから何をやっても進まずかなり苦戦しましたが、mtフォルダ自体を完全削除し、もう一度アップロードし直したらうまく行きました。ファイル数が多いだけにファイルのデータ欠損が命取りみたい。もちろんcgiファイル等のパーミッションは755に。もし同じところで詰まった人がいたら「あきらめちゃ…あきらめちゃだめだよ……もう一度…やり直してみようよ!!」って三文芝居で励ましていきたいです(三点リーダーの雰囲気はお客様のお好みで調整)。

PICT.がちょっとよくなりました。

2007.09.04 Web

FICC AnotherBookmarkがアップデートしました。

WWW.AKIRAFUKUOKA.COM PICT

月別ページを作ったり、日付表示を大きくしてみたりフッター付けてみたりといろいろと。まずは写真でしょうという気もしますが。

AnotherBookmarkがアップデートしました。

2007.09.03 Web

FICC AnotherBookmarkがアップデートしました。

FICC AnotherBookmarkがアップデートしました。

と、いうことでアップデートした点を列挙。


・左カラムにコントリビュータリストを追加。

左カラムにコントリビュータリストを追加。

一番のポイントはコントリビュータリストの追加。ABMに投稿したことのあるコントリビュータが投稿履歴順にリストされます。リストからコントリビュータの名前をクリックすると、プロフィールと共にそのコントリビュータが投稿したエントリーとニュースが並びます。その人の傾向が解るだけでなく、コントリビュータの方自身も自分の投稿が総覧できるようになっています。左カラムがコントリビュータリストになったためタグリストが消滅しましたが、要望が多ければタグリストを復活させることも検討したいと思います(もしくはもっと使いやすい形で…)。


・コントリビュータ別のパーマリンク&RSS配信

コントリビュータ別のパーマリンク&RSS配信

せっかく個別のページができたのでパーマリンクとコントリビュータ個別のRSS配信を開始しました。お気に入りのコントリビュータが投稿する情報に絞って取得することが可能です。


・エントリーから直接タグの検索が可能に。

エントリーから直接タグの検索が可能に。

エントリー内から直接タグをクリックして検索することができるようになりました。これで気軽に同じキーワードを持ったエントリー、そしてニュースを検索することが可能になりました(ニュースの検索については後述)。これによって1400件を超えるエントリー、そして1200件を超えるニュースアーカイブをさらに有効に利用することが可能に。


・ニュースの検索・アーカイブの閲覧が可能に。

ニュースの検索・アーカイブの閲覧が可能に。

鵜浦井では最新100件が表示されるだけでしたが、今後はアーカイブ含めた全ニュースが閲覧できるようになります。さらにニュースも検索対象になりました。


・RSSの強化。

RSSの強化。

コントリビュータ別RSSは既出ですが、RSS配信されるデータに関してもアップデート。エントリーのタイトル、コメント、画像だけでなく、エントリーのタグ、そして投稿者名が表示されるようになりました。さらにRSSからタグの検索や、コントリビュータの全投稿一覧へジャンプすることも可能になっています。


・Macでのスクロールホイールの対応

Mac至上主義のフクオカにしては意外なことに今までMacでのスクロールホイール操作には対応していませんでした。これからはMightyMouseでもタッチパッドでもスクロールし放題です。


こんな具合ですね。AnotherBookmarkの膨大なアーカイブを少しでも有効利用できる方向にアップデートできたと思います。ちなみに今回はリニューアルではなくアップデートですのでブログ等に書かれる際はご注意を。

Prismgirl - inarticulate

2007.09.03 Web

Prismgirl - inarticulate

Prismgirl

よくがんばりました。映像の埋め込みやインタラクティブ性等、新しい方向を模索しているようです。特に私は映像の埋め込みを何となく避けてしまっている節があるので、そういう要素をどんどん取り入れてこうとする彼女が羨ましいものです。「いずれはボタンのロールオーバーエフェクトですらもFLVで表現されるようになる」と日頃言っている私なのですが、そもそも映像が好きだったはずなのですが…どうも安全圏狙い過ぎかな。私の話はさておき、これからも貪欲に。

arflex | 2007 new model

2007.09.02 Web

arflex | 2007 new model

既にトツカさんが紹介されていますが、家具ブランドarflexの2007年新製品ウェブサイトが公開されました。

arflex | 2007 new model

AD&De: SHOTA TOTSUKA / Dv: AKIRA FUKUOKA

デザイン・ディレクションはトツカさん、私はFlash構築を担当。ポイントはキャラクターの異なる5つの製品。5つの異なるカラーとトランジションでキャラクターを表現しています。製品の違いを出しながらも一つのコンテンツにまとめあげています。個人的に押したいのは冒頭のメニューでのそれぞれ写真の切り替わり。ランダムなワイプがインパクトを与えています。内部的処理の解説は省きますが、マスクをlineToで描画するために久々に1次関数のお勉強をしたのでなんだか中学1年生の気分。咲いたコスモスコスモス咲いた。ちなみに加法定理の証明が東大入試に出たって言うのは有名な話かな。

arflex | 2007 new model スクリーンセーバー

…と話がそれましたが、サイトと同時にスクリーンセーバーも作成しました。パネルがマスゲームするかわいいスクリーンセーバーです。しかも時計付き。ぜひダウンロードを。サイトもスクリーンセーバーに関してもトツカさんのアイデアをいい形で形にできたかなと思います。


関連リンク:
arflex - アルフレックス ジャパン

ANTEPRIMA FW07ウェブサイトとその思いで。

2007.08.09 Web

ANTEPRIMA FW07

ANTEPRIMA FW07のサイトがラウンチしました。

ANTEPRIMA FW07 (英語)
ANTEPRIMA FW07 (日本語)

AD : Ogino Hideki (FICC inc.)
De : Wakita Takashi (FICC inc.)
Dv : Fukuoka Akira (FICC inc.)

ANTEPRIMA(アンテプリマ)の2007年秋冬コレクションサイト。今回もFlashコーディングは私が担当です。Wakita氏から受け取ったデザインを"立体化"しました。インパクトのあるプレゼンテーションと、コンテンツの一覧性を両立するレイアウト、そしてANTEPRIMAのコレクションそのものをお楽しみください。


…と。本当であればあまり解説をしない方が格好がつくのですが、後から見ておそらくこれが一つの節目になると思いますので、制作者の目線からいろいろと解説させていただきます。今回で私が関わるANTEPRIMAのコレクションサイトはこれで5回目になります。最初に携わったANTEPRIMA FW0506コレクションのサイトのラウンチから約2年が経ちました。5回目にして新しい挑戦、それがANTEPRIMA FW07ウェブサイトです。

最大の見せどころはやはり3Dパネルインターフェース。3Dのインパクトと操作性の両立、快適に操作できること。遡ればCOBYFICC Labsなどで培った技術を、「面白さ」と「操作しやすさ」を両立した形で結実させました。COBYウェブサイトが表現したのが子供らしい無邪気さ・自由奔放さであるならば、ANTEPRIMA FW07サイトが表現したものは大人の品位。空間の広がりを感じながらも迷わないで進める、今回のコレクションを余す所なく楽しんでいただけるインターフェースに仕上げました。実はこのサイトではマウスクリックの操作だけではなく、マウスホイールキーボード操作(アローキーやスペースキー)にも対応しています。ぜひマウスとは違った操作感を体験してみてください。

もう一つの大きなポイントはActionScript3での制作。おそらくこの規模のサイトでのAS3の利用はなかなかないであろう中で、0からスタートしてがんばってみました。もちろんただただ新しい技術に飛びついて導入したわけではありません。AS3の処理スピードが3Dパネルを手でめくるような滑らかな操作感を生みました。また、AS3の新しい機能を生かしたのが金の曲線です。

ANETPRIMA FW07オープニング

ANTEPRIMA FW07のインビテーションカードに印刷された「金の曲線」をウェブ上で、しかも動く形で再現。今回のサイトでは金の曲線がいくつか登場します。まずオープニングでマウスに追従するように滑らかな曲線が描かれます。マウスで操ることが可能なのでぜひ好きな模様を描き出してみてください。またダウンロードコンテンツのミュージックプレイヤーにも金の曲線が登場。

ANTEPRIMA FW07ミュージック

こちらはサウンドの再生あわせて空間を舞う金の曲線。あともう一つの金の曲線は…ぜひダウンロードコーナーの中から見つけ出してみてください。

音楽、と言えば今回のテーマ曲、岩村学氏による「Starlight Moonlight」。本当に素敵。ダウンロードコーナーからもMP3がダウンロードできますので、ぜひあなたのiPodへ。Starlight Moonlightはサイト内でもBGMとして再生されています。ぜひサイトを見る際にはヘッドフォン(またはイヤフォン)を装着してみてください。耳を澄ますと新しい発見がありますよ。


…と、ちょっと喋りすぎたかな(でも本当は全然喋り足りない)。ぜひ実際に触って、見て、確かめてみてください。そして各方面様々な方からのお力を借りてこのサイトを完成させられたことを、ありがたく、嬉しく思い…この場を持って皆さんへの感謝の気持ちを記します。ありがとうございました!!

タグホイヤー フォーミュラ1ドリームキャンペーン

2007.07.23 Web

タグホイヤー フォーミュラ1ドリームキャンペーン


FICCの最新作(私はノータッチですー)。なんとあのタグ・ホイヤーの国内キャンペーン用サイト。

タグホイヤー フォーミュラ1ドリームキャンペーン │ F1日本グランプリにご招待
AD : KENICHI SUZUKI / De: KENICHI SUZUKI / Dv : HIDEKAZU MAYUMI

クロノグラフ「リンク」の生誕20周年を記念して新たに発売されたモデルのプロモーションサイト。最大の見せ場はなんと言ってもサイトのために作成された高解像度映像。クオリティ高すぎてもう大変なことに。カッコ良すぎです。MIRAY DESIGNさんありがとうございました!!

そしてさらに。サイトローンチと同時に公開された「キャリバーS」ブログパーツ

タグホイヤー フォーミュラー1 ドリームキャンペーン

本物のクロノグラフがブログパーツに。ただの時計機能だけではなく、100分の1秒まで測定可能なストップウォッチ機能もつけて「キャリバーS」の動作を完全再現。使い方の詳細はブログパーツ内の「?ボタン」をクリックしてください。リアリティを追求したブログパーツ、ぜひ皆さんもブログに貼付けてくださいね。早速ブログに貼付けている方もいて嬉しい限りです。

制作に関わったSUさんMAYUさんお疲れさまでございました。そういえばFICCのサイトを見て思ったけど、私ここのところ何も作ってないですね…あらあらあら…。

PICT。登場。

2007.07.17 Web

WWW.AKIRAFUKUOKA.COM PICT

また名前の長いコーナーを作りました。今度はフォトブログです。

WWW.AKIRAFUKUOKA.COM PICT

こういうのはFlashでやろうか、とか他ブログに貼付けられたり…とか考えたりしましたが、うだうだやっててもしょうがないのでさらっと作りました。最近写真を撮る事が少なくなってて、自分がアウトプットする場所がないと写真撮らないような気がしたので。…というか要するにダカフェ日記さんですよ!! ええ!! も買いましたよ!! 初めて買ったブログ本ですよ!! いいなぁ、いいなぁ。ダカフェ日記さんを観る度に幸せな気分になる反面、自分の生活の侘しさを知る、というこの、なんていうかこの!! 俺一人っ子じゃないですか…だからいいなぁって!! …あれ、なんで俺、泣いてるんだろ…。

…と。はい取り乱しました。自分こういう展開好きなんですよ。若干ウソ入ってるし(一人っ子じゃないよ)。毎回毎回付き合ってもらっちゃってすみません。はいはいサイトについて。デザインも突貫、細部に関してもあまあまですが、肝心なのは中身ですよ。…っていい写真撮れる自信ねえ。かわいい写真が撮れるようにがんばるから。私。もしよろしければRSS登録していただければと。

大切なお知らせです。AnotherBookmarkが移転しました。

2007.07.03 Web

ABM has moved.

WWW.AKIRAFUKUOKA.COMをご覧の皆さんこんばんは。フクオカアキラです。今日は皆さんにとても大切なお知らせを一つ。FICC AnotherBookmarkが移転しました。

FICC Another Bookmark Beta

新しいURLは www.anotherbookmark.com です。AnotherBookmarkへリンクやブックマーク、RSSリーダーへの登録を行っている方はぜひ新しいURLに変更してくださいますよう宜しくお願いいたします。

また、おなじみAnotherBookmarkのブログパーツも少し新しくなりました。新しくなった点は、
・劇的にダウンロード量が小さくなった。
・デバイスフォントへ変更。読みやすくきれいに。
・画面に入りきらないタイトルはスライドして表示。
…等。まだありますがぜひそれはブログに貼付けてご確認ください。

既にお持ちのブログにAnotherBookmarkのブログパーツを設置している方はぜひ新しいブログパーツへの張り替えをお薦めいたします。以下の手順で簡単に張り替えが可能です。

(1) 自分のブログに貼られているブログパーツから「同じカラーリングでブログパーツを貼り直す」をクリック

自分のブログに貼られているブログパーツから「同じカラーリングでブログパーツを貼り直す」をクリック

旧ブログパーツには「同じカラーリングでブログパーツを貼り直す」ボタンが表示されているのでこれをクリックします。クリックするとwww.anotherbookmark.comへジャンプ。いきなりブログパーツ編集画面が表示されます。

(2) 自分のブログのURLが記入されている事を確認して「コード書き出し」をクリック。書き出されたコードをコピーする

自分のブログのURLが記入されている事を確認して「コード書き出し」をクリック。書き出されたコードをコピーする

AnotherBookmarkのブログパーツ編集が麺が表示されたら念のためブログパーツのカラーリングと、ご自身のブログのURLが正確に記入されているかどうか確認してください。確認ができたら「コード書き出し」ボタンをクリック。ボタンの下にブログパーツ張りつけコードが出力されます。出力された箇所をクリックすると自動的にクリップボードにコピーされるので、そのままご自身のブログ編集画面へ移動。自分ブログの貼付けたい箇所に、先ほどコピーしたコードをペースト(貼付け)してください。

(3) 張りつけ後、ブログを必要であれば再構築して、新しいブログパーツが貼付けられている事を確認してください

張りつけ後、ブログを必要であれば再構築して、新しいブログパーツが貼付けられている事を確認してください

ブログにコードを貼付けたら、必要ならばブログの再構築を行い、ブログに新しいブログパーツが貼付けられているかどうか確認してください。

ちなみに旧アドレスにアクセスするとちょっとしたおまけが…といってもアクセスして10秒後には新サイトに飛ばされます。


AnotherBookmarkは今後もどんどん面白くなっていきますのでお楽しみに。今後もAnotherBookmarkを宜しくお願いいたします。

御存知ですか?FICC LABSのこと。

2007.06.22 Web

FICC LABS(エフアイシーシー ラボ)

FICCに新コンテンツが登場していたのでした。その名も「FICC LABS」。

FICC LABS

「実際の業務の中で行った試みや、採用した新しい技術などの共有を目的としています」ということで、FICCスタッフが得た技術を広く公開して、他のクリエーターのお役に立ちましょう、というコンテンツ、つまりは実験場です。扱うテーマはCSS、JavaScript、Flash、PHPといったコード系だけでなく、FICCらしくPhotoshopなどのデザインツールに関しても取り上げていきます。私は今のところFlashに関する「カメラと被写体の関係から擬似3D空間を作る (1)」と「カメラと被写体の関係から擬似3D空間を作る (2)」の2エントリーを投稿。

FlashでTime Machineを再現

Papervision3Dの登場で一気にFlashでの3D表現が注目され始めた昨今ですが、改めて「映像が3次元に見えるとはどういう事か」を考え直してみました。(1)ではCOBY風の一定空間での3D表現。そして(2)ではTime Machine風の奥行き表現に挑戦しました。非常にラフな説明ではありますが、皆さんの制作のお役にたてれば嬉しいです。

…と私もいつまでたってもAS2に留まっていないでそろそろAS3をちゃんと見据えなければなりませんね。FICC LABS次回の更新ではPapervision3D(のカメラ)を取り上げるつもりなのでお楽しみに。


関連リンク:
FICC inc. | Creative Solutions
Apple - Mac OS X Leopard
Adobe : Flash CS3 Professional

[from ABM] Let The Game Continue...

2007.05.25 Web

Let The Game Continue...

機動戦士Zガンダム最終回、宿敵(であり元カノでもある)ハマーンに完全に追い詰められたシャア。絶対的優位にあるハマーンはシャアに言い放つ。
「続けるか、それとも終わりにするか?」
満身創痍、絶体絶命のシャアの答えがこれだ。
「それを決める権利がお前にあるのか?」
そのまま答えず質問返し。さすがシャア。ここでも正論である。しかし大抵の男はその決定権を持っていない。シャアですら答える事を避けている。そう、答えは既に決まっている。この決まった答えに男は購う事はできないのである。

Let The Game Continue...

もはや日本でもおなじみになった海外生まれの男性用フレグランス『AXE』。このAXEのプロモーションサイト。AXEのコマーシャルの方向は決まっていて基本は「ちょいエロ・ちょいバカ」。この「Let The Game Continue...」もこの路線は徹底されている(とはいえ日本よりはエロ成分強し)。最近のキャンペーンサイトらしく、全編映像で構成されている。ならばテレビと変わらないのでは?と思ったあなた。ちゃーんとインタラクティブが隠されているところが重要なのです。以下ネタバレ含むので先に本編をご覧ください。

車を事故らせた男性(けっこうワイルドめ)。無限に続くような道路をとぼとぼと歩いていると…ド派手なキャンピングカー、乗っているのはかなり飛んでる女の子…。あれよあれよという間にめくるめく世界。目が覚めて気がついたときには身ぐるみを剥がされ全身傷だらけに。あても無い、さてどうする…と、目線の先にはセクシーな女性が二人。しかし身体が…というタイミングで "奇跡的に" AXEが登場。ここでユーザーは選択を迫られる。

「Do Not Continue(終わりにする?)」
「Let The Game Continue(それとも、まだ続ける?)」

どちらを選ぶかはもちろん決まっている。こんな具合に主人公は幸運と災難に次々と見舞われていく。映像のディレクションもエロくなりすぎない様に(それでも十分でしょうけど)、おバカのテイストをいい具合にまぜてて女の子が観ても可愛い感じ。個人的には電飾水着の人が馬に乗って出てきたときは笑った。いいです素敵。

で、このサイトの肝ですが、タイトルのとおり「Let The Game Continue」。肝心な所はユーザーに選択させる。でも「Do Not Continue」を選ぶ人はいない。映像を見せるだけじゃない、たったこれだけの事でユーザーはコンテンツに参加し、没入していく。そう考えると、今迄にもこんな経験あったような…と思ったら、これゲームのFINAL FANTASYと同じなのです。美しい映像とドラマを見せながら、プレイヤーにゲームを自由に遊ばせている様に見せかけて、実は一本のレールを従順に進んでいく。進めば進むほどプレイヤーはその世界にどんどんハマっていく、というわけ。

選択肢はあっても選択の余地はない。実はRPGを本当に突き詰めていくと、最終的にはこの「Let The Game Continue」に行き着くのかもしれません。


関連サイト;
THE AXE EFFECT
ファイナルファンタジー - Wikipedia

[from ABM] scienceunderfire.com

2007.05.23 Web

scienceunderfire.com

日本びいきの外国の人を見るとウキウキするのはなんででしょうね。

brace yourself. scienceunderfire.com

黒幕を割って入るは忍者か、侍か、軍用義体か、いや、ロボットだ。コンテンツに入るといきなり派手に登場するロボット。インパクトは絶大。いや、ちゃんとしたコンテンツがFlash内に入っているわけではないですが(ポートフォリオは別ページ)、FLVで3Dモデリングされたロボットが動いてるよ!!しかもこのクオリティ!?ってのがミソ。CGのクオリティは文句無し。明らかに士郎正宗リスペクトを漂わせてくれていますが、外国の人だから許せちゃう。きっと日本好きなんだろうなぁ。がんばってメニューにルビを振ってるし(一部ちょっと何を意味してるのかわかんないところがあるけど…)。

そういうことで、このサイトの面白い所はやはり徹底的に「日本」に目を向けているということに尽きる。桜、琴、そしてロボット。これだけの要素を入れようとするとややもあざとくなりそうなものなのに、そう見えないのは、やはりCGのクオリティ、演出の妙か。サイトに対する姿勢、スキルも含めてうらやましい。

コンテンツのボーリュームから言って一発ネタじゃない、と言う人もいるかも知れませんが、いやいや。MAY 1ST REBOOTにエントリーするサイトは数あれどこういうアプローチは本当に珍しいのでは。「一撃」で決まる勝負もあるかも、ってことでしょう。

ちなみにリニューアル前のバージョンもかなりキテるサイトだったんだけど(メカメカしくてクリーンなCGが最高。ここの上から3番目の画像参考)、これは見れなくなっちゃってるみたい。せっかくならこれも見れる様にして欲しかったなー。「復活させてー!!」って本人に直接打診してみようかしら。

関連リンク:
MAY 1ST REBOOT - IN ALL CAPS
攻殻機動隊 STAND ALONE COMPLEX

AkiraFukuoka Interview @ The FWA

2007.05.19 Web

FWAでAkiraFukuokaインタビュー

世界有数のFlashアワードサイト「the FWA」に私AkiraFukuokaのインタビューが掲載されました。

The FWA - Akira Fukuoka FICC inc.

FWAでは今までANTEPRIMACOBYといったFICC制作(で私がFlashコーディング)のウェブサイトを取り上げられてきたこともあり、今回のインタビューに。用意された設問は、日々の業務、会社、制作物、Flashの今後、自分が興味があるサイト、会社、自分自身のこと…。全て素直に答えました(というか素直に穿っているというか)。

当然の事ながらFWAは海外サイトなので、質問とその英語は全て英語での記載です。きっと国際派の皆さんであれば日本語訳など用意せずともスラスラと読めてしまうでしょうから、私からインタビューの解説はしないことにします。ちなみに私は最初の質問からなんて言ってるか判りませんでした。

敢えてインタビューの読みどころを指摘するとすれば Q. What is the most expensive thing you've bought in the last week? でしょうか。日本で言うところの「ツッコミどころ」になっています。

関連リンク:
The FWA: Favourite Website Awards

FICC inc. ウェブサイト、リニューアル。

2007.04.19 Web

FICCリニューアル

FICC inc.ウェブサイト、待望のリニューアル。

FICC inc. | Creative Solutions

…と制作に指1本関わっていない私が言うのもなんですが、非常に完成度の高い自社サイトになりました。確かに前回のサイトからもポートフォリオのプレゼンテーションや情報配信、さらにMTを使ったサイト更新等、十分に先端機能を持ったサイトではありましが。が、今回目指したのは「わかりやすい」サイト。前回の「システマティックにポートフォリオを見せるサイト」からFICCらしさを残したまま、「誰もがFICCとその業務内容を理解してもらえるサイト」へと昇華させました。見た目はFlashサイトとは思えない、一見HTMLサイトのようなレイアウトですが、至る所に見せる工夫が。

FICCリニューアル。サムネールもスライドショー

ポートフォリオ内の作品を紹介するサムネール。よく見るとスライドショー。さらによく見るとケンバーンズエフェクト。

FICCリニューアル。拡大画面プレゼンテーション

サムネールをクリックすると更に詳しく画像を閲覧。

FICCリニューアル。クリエーター紹介ページ

新設された「クリエーター紹介」のページには私の紹介も。写真も初公開。

ポートフォリオだけでなく、まずFICCとは何者なのか、どういったことができる会社なのか、ということを語れるサイトになったかと思います(…と言いつつも私はやはりノータッチなのですが)。まだまだまだまだ、細かい点を言えばキリが無いですが、ぜひ新しいFICCウェブサイトを触って、読んで確かめてみてください。また、サイトリニューアルを皮切りにFICCは "新しい動き" を少しずつ見せていく予定ですので今後とも目を離さぬよう宜しくお願いいたします。

さて、一方のABMはどうなるのかな……?

ラージマハールウェブサイト、完成。

2007.04.10 Web

rajmahal_web.jpg


今年の異常気象のせいで(だって桜に雪だもの)風邪にかかってしまった私。39度以上の高熱に唸らされているうちに、あらっ、公開されました。

ラージマハール | 本場インドの宮廷料理をお楽しみ頂ける、インド王侯貴族の料理店

本場インドの宮廷料理店、ラージ・マハールのウェブサイトを作成しました。Flash部分の開発を私が、全体のデザインは鈴木クンが担当。インド王宮料理のお店という清潔感の中にも位の高さが光るデザインをしてもらいました。ので、私としても「王宮」的な優雅な動きを目指しています。その優雅さは至る所に。冒頭アニメーションの後にはひらひらとバラの花びらが舞い散ります。さらに細かいですがプリローダーの数字までフェードインアウトさせているという初めての試みも。

ちなみにサイトからの引用ですが

(ラージ・マハールの)オーナー、マルホトラ家は、クシャトリア階級の中でも三大名家といわれる、「カプール家」「カンナン家」「マルホトラ家」の出身。

…ですから、もうこれ以上の「本物」はないかも。ともかく、お店に足を運んでみたくなった方はラージ・マハールウェブサイトにメニュー表と各店舗への地図(Google Map)を用意してありますので是非参考になさってくださいませ。

[from ABM] Nada Go-Go

2007.02.07 Web

Nada Go-Go

Nada Go-Go

今日もAnotherBookmarkより。ABMに投稿されるサイトの中でもかなり特異なサイト。Tシャツ販売…てか紹介のサイト?ページのど真ん中にメールアドレスが、ってことは気になった人は連絡してってことか?非常に謎多きサイト。で、中身もなんていうかひどい。段ボールやらビニール袋で作ったサイトて。マッキーで模様描いたりジャギジャギでゆるゆるだったり…もう学園祭以下のクオリティ。音楽もパソコンに付属してるソフトで作ったんかなと思うくらいゆるーい。中央のダンサーも意味不明。まったくなんなんだこれは…

……ってところなんだけどトータルで見るとすごいいい世界観。絶妙な味付けと言うか。いわいるヘタウマとかユルカワとかの世界か。私はこういうのやれって言われても絶対このバランスには落とし込めない自信あり。これが狙ってできる人はむしろすごい。Nada Go-Goがきれいなサイトか…と言われればそうとは言えないでしょうが、インパクトだけはとにかくでかい。いいサイトとは必ずしもきれいだったりかっこ良かったり…といものでもなさそうですよ、という極端な例でした。

[from ABM] Master Plan - About the power of Google

2007.02.06 Web

Master Plan - About the power of Google

Master Plan - About the power of Google

久々に映像を作らねば…という気運にかられて今回はAnotherBookmarkのニュースからこんなサイトを。

先日、「NHKスペシャル|“グーグル革命”の衝撃 あなたの人生を“検索”が変える」という番組がNHKで放映されかなりの話題になりましたが、それのweb版(といってもほとんど映像だけどね)と言ったところでしょうか。"the Movie"となっていますが別に全米の劇場で公開!!みたいなことはない模様。Googleを題材にした映像作品ってことですね。内容としてはGoogleは自社の検索エンジンでweb検索の圧倒的なシェアを持っていて、更には広告、そしてソフトウェア分野でも大きな影響力を持っている。でも、彼らは我々の個人情報を握っていて、例えばGmailではメールの内容が検閲されているかもしれない。そしてこれからの未来、我々の個人情報は全てGoogleが管理する時代が来るかもしれない。住所、氏名、生年月日、指紋からDNAまで……と非常にありきたりなお話になってきましたが、そんなことは皆さん100も1024も承知ですから、やはりここは映像作品としてお楽しみください。テイストとしては少し以前の雰囲気も感じますがよーくできてます。アナログテイストはやっぱりかわいい。音と動きのシンクがいいんでしょうね。で、サイト自体の方も "ありそう" な感じにまとまってますが、せっかくならトップページでもっと遊んでもよかったのになー…。でもこの感じは好きな方。

で、これに近い皮肉りサイトとしてかの環境保護団体GreenpeaceがAppleを糾弾したサイトがあります。批判している内容をかいつまむと、AppleはMacやiPodを使い捨てさせて環境を破壊している、といったところなんですが律儀にもAppleのGet a MacのCM(日本で言うところのラーメンズがやってる「こんにちわMacです。こんにちわパソコンです」のやつです)のパロディーまで流してます。さすがにこれはAppleの思うつぼのような気がしますが…。Appleファンとして少し弁明させてもらうと、AppleStoreでは使わなくなったiPodを回収するサービスを行っています。ただし米国のみ。米国かっ。

[fromABM] Lee Crum

2007.01.21 Web

lee_crum.jpg

プロフィールにも書いた通り便宜上「webウェブデベロッパー」ということで通っているはずなのですが、今のところエントリーがiPhoneとシャアで6割を占めるというありさま(非常に端的に私を表しているような気もしますが…)。というわけでこれから週一回くらいのペースでAnother Bookmarkに掲載された面白い・スゲーサイトをちょっとだけ掘り下げて紹介。

Lee Crum

フォトグラファーサイト。額縁に飾られた作品をズームイン・ズームアウトで閲覧するインターフェース。世界観・アイデアが素敵です。額縁は縦横比合わせてランダムでつけてるのかな…と思いきや、決め打ちで写真ごとにつけているらしい。全ての写真(テキスト画像含め)をSWF化して読み込んでいるところをみるに、画像と一緒に当たり判定も持たせている雰囲気です。細かいところですが、音楽やパラメーターがいじれるスライドショー機能もついていい感じ。アバウトやコンタクトの見せ方もぐりぐり動いて気持ちいいです。特にコピーライトの見せ方が好き。

関連リンク :
FICC Another Bookmark Beta
COBY & ASSOCIATES.INC

WWW.AKIRAFUKUOKA.COM BLOG

2007.01.07 Web

afblog.jpg


いまさら。いまさら作りました。

「もういい年してブログも持たないなんて…私こんな風に育てた覚えはありませんからね!!」と言われ続けて早数年。ようやく一人前にブログが持てるようになりました。このようなかたちで御報告ができたのも、やはり皆様のお陰と言っても過言ではないでしょうこのくだりはもういいですかはい。

これまでwww.akirafukuoka.comの広報役はHitokoto.が担ってきましたが、役割をチェンジ。Hitokoto.は本気で一人言コンテンツに。携帯でちょこちょこ更新できるのがHitokoto.の強みなので、もちろんこれからも存続です。で、一人言よりもう少し大きな声で喋ることに関しては当ブログに綴っていく方針です。

個人的には久々のデザイン及びXHTML+CSSということでちょっと楽しかったです。お仕事もFlashコーディングが殆どなので。ちなみにCSSの基礎設計は吉兆日記を無断で参考にした部分が大きいので我らがトツカ先輩には本当に感謝しております。こんなときに頼りになる先輩でよかったっ☆エヘっ☆

TV | BLOG TOP

Archives

2015.06 2015.05 2015.04 2015.03 2015.01 2014.12 2014.10 2014.05 2014.03 2014.01 2013.08 2013.01 2012.12 2012.09 2012.08 2012.07 2012.06 2012.05 2012.03 2012.01 2011.12 2011.10 2011.09 2011.08 2011.07 2011.06 2011.05 2011.04 2011.03 2011.02 2011.01 2010.12 2010.11 2010.10 2010.09 2010.08 2010.07 2010.06 2010.05 2010.04 2010.03 2010.02 2010.01 2009.12 2009.11 2009.10 2009.09 2009.08 2009.07 2009.06 2009.05 2009.04 2009.03 2009.02 2009.01 2008.12 2008.11 2008.10 2008.09 2008.08 2008.07 2008.06 2008.05 2008.04 2008.03 2008.02 2008.01 2007.12 2007.11 2007.10 2007.09 2007.08 2007.07 2007.06 2007.05 2007.04 2007.03 2007.02 2007.01

Feed

Category

Profile

  • akirafukuoka
  • AKIRAFUKUOKA(福岡 陽)
  • FICC inc.所属。Flashコンテンツ開発担当、でもデザインや企画まで手がけることも。
  • WebデザインブックマークサイトAnotherBookmark、Web制作系求人情報サイトMOREWORKSの制作も担当。
  • また趣味的にクラブイベントRaw-Fi 主宰も。当ブログよりモノ系・文化系に特化したRaw-Fi Blogも更新中。
  • ABOUT AKIRAFUKUOKA

Link