Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML

confirm cancel

Report adult content:

click to rate:

Account: (login)

More Channels

Showcase

Channel Catalog

Subsection Catalog

Articles on this Page

Browse the Latest Snapshot

Browsing All Articles (239 Articles)

Live Browser

02/24/11--21:50: ユーザーを逃さない！海外Webアプリの入力フォームいろいろ

入力するのがたのしくて、気が付いたらアカウントを作っていた？！

入力画面とエラー表示、ついつい触ってチェックしちゃいます。(^p^)

エラーメッセージもユーザーとのコミュニケーションと考えると、

できるだけたくさんのパターンを知りたいですよね。

今回は海外のwebアプリや、webサービスを中心に

ログイン、会員登録のフォームと、エラー表示をあつめてみました。

あなたなら、どんなフォームに入力してみたいですか？

シンプルすっきり！機能性重視のフォーム

github

gitのプロジェクトホスティングサービス

つかいやすいインターフェイスがデベロッパーに人気です。

スマートで抑えるべきところは抑えているUI

このフォームのポイント！

上部のボックスでエラー表示
入力時にリアルタイムのエラー判定
それぞれのフォーム下部にエラー文言
項目名を赤く目立たせる

Postmark

余白を十分にとったシンプルなデザイン。

このフォームのポイント！

上部のボックスでエラー表示
該当のフォームを赤い地色で囲んで目立たせる
それぞれのフォーム下部にエラー文言
項目名を赤く目立たせる

Wufoo

アンケートフォームなどを作成できるサービス。

このフォームのポイント！

入力中の項目が黄色くフォーカスされる
上部のボックスでエラー表示
該当のフォームを赤い地色で囲んで目立たせる
それぞれのフォーム下部にエラー文言
項目名を赤く目立たせる

トランジションでユーザーの興味をひこう！

LAUNCHLIST

サイト公開時のチェックリスト作成サービス。

ログインを押すと上部にサイトが展開されて

ログインフォームがでてきます。

このフォームのポイント！

フォームが展開されるトランジション
自動で入力箇所にフォーカスされる

CULINAR

こちらも、グローバルしたのエリアに

ログイン画面がニュッ！とでてきます。

フォームが展開されるトランジション
上部のボックスでエラー表示
大き目のエラーアイコン

pulley

ピンクエラーのリストが上部から出現します！

このフォームのポイント！

入力中のフォームはグリーンの枠線で表示
エラーのリストがオーバーレイで展開
該当のフォームをピンクの太枠でめだたせる

サイトの世界観にあわせて、ユーザーをいざなう！

Carbonmade

オンラインポートフォリオサービス

ポートフォリオ自体のUIも直観的に使えるような工夫がこらされています。

角丸とイラストが効いている、すっきりしたフォーム。

このフォームのポイント！

入力時にリアルタイムのエラー判定
該当フォーム右下に赤字でエラー表示
ツールチップで項目のエラー内容を表示

CULINAR

さきほどはログインフォームのトランジションを紹介しましたが、

新規登録フォームでのエラー表示はシックです。

このフォームのポイント！

色相をあわせたエレガントなエラー色。
フォーム内にアイコンと項目名が表示されている。

eWedding

サイトの世界観を踏襲した招待状のような美しいフォーム。

エラーもエレガントに表示されました！w

このフォームのポイント！

上部に装飾されたエラー表示

deviantART

アート作品を中心としたインターネットコミュニティ。

老舗ともいえるウェブサービスです。

サイトの地色を生かしたフォーム。

このフォームのポイント！

入力箇所に自動でフォーカス
ツールチップでにフォームの右側にエラー表示

入力項目が多いフォームは、まとめてカンタンにみせる！

campaignMonitor

アカウント登録の流れを

1Pのなかでブロックわけしてわかりやすくみせています。

このフォームのポイント！

複数の項目をグルーピングしてフロー化
該当のフォーム下部にアイコンとエラー内容を表示

ballpark

こちらもブロックごとにわけたデザイン。

アイコンが目にとまります。

このフォームのポイント！

複数の項目をグルーピングしてフロー化
上部のボックスでエラー表示
該当のフォームの地色をイエローに
それぞれのフォーム右側にエラー文言

入力フォームはユーザーとの最初のコミュニケーション！

入力中にもしエラーをだしてしまっても、

こんなふうにわかりやすく、親しみやすく表現されていたら

くじけないかもしれません。

ぜひユーザーとのファーストコンタクトを

素敵に彩りたいものですね！

カヤックではそんなホスピタリティあふれる

アートディレクター、デザイナー、マークアップエンジニアをいつでも募集しています！

わたしたちと一緒にわくわくするサービスを作りませんか？

02/28/11--10:15: 【重くても】インタラクティブなPV集（世界編）【気にしない】

海外の最近のインタラクティブなPVって？

2011年ってもっと未来かと思ってたよ...(　´･‿･｀)こんにちわ。セキネです。
突然ですが、インタラクティブって良いですよね。
つまりユーザーが見て、触って、はじめて真価を発揮するようなコンテンツ達です。
そして昨今は、ミュージックビデオのプロモーションにもそんなインタラクションが組み込まれるようにもなってきました。（日本では去年の暮れにバズった「映し鏡」とかが有名ですね）

今日はそんなPV達をブクマからまとめてみたので放出してみようと思います chick では、続きからどうぞ！ chick 三3

「The Wilderness Downtown"」名付けられたプロジェクト。
Googleストリートビューと連携したPV。
「SEARCH」のところに自分の生まれた地域を入力する。
すると、PVの1シーンに自分の故郷が組み込まれているかのような構成になる。
ただ田舎すぎるとmapが出てこなくて悲しくなります。Google Chrome推奨。
Chrome Experimentsにページありました。

ちなみに、Arcade Fireは3,4年前くらいからインタラクティブPVみたいな感じなのちょくちょくやってましたね。
NEON BIBLEとかBlack Mirrorなどなど。

the Streets - computers and blues interactive film

the Streetsの新アルバムのプロモーションフィルム。
選択式のストーリーが展開されていく中でアルバムまるっと視聴させてしまう。やりおる。

Placebo - The Never-Ending Why

とにかく重い！色彩がやばい。目が。モルコ。
制作はアムステルダムのChampagne Valentine。

Steye & The Ottowanians - Wonderful

360°ビュー。インタラクティブPVは結構このパターンが多いです。
自分でカメラを自由に動かせるっていうのがポイント高いのでしょうか。

Lissie - Cuckoo

天気連動のインタラクティブPV。現在位置の天気によって色々変わる。アイデアが面白い。

Robyn - We Dance to the Beat

映像と音楽のRemixer。体感的なコンテンツ。
以前にKilling meというtwitter連携のプロモーションもやってました。
制作はstopp

Labuat

クオリティ高いです。これもう2年前なんですね。
PVをユーザーが描いていくイメージ。

Cold War Kids - i've seen enough

この形式もベタなパターンですかね。
メンバーの楽器スタイルを選択できます。→さらにその結果をシェア、という黄金パターン。

Alice in Chains - Acid Bubble

まさかのAlice in Chains。360°ビュー系。
なんというか、暗くて良くわからない。

Craig Wedren - Are We

これも360°ビュー系ですが、クオリティーは高いです。
ただ重いです。想像より3倍は重いです。

Radiohead - House Of Cards

トム・ヨークが粒子に。内側からトムを見れちゃうよ。激重。

...などなど、この他にもまだまだありますが、今日はこの辺で。
日本のものと比べるとやはり大味でインパクト重視のものが多いですよね。
国別とかでプロモーション方法を比較しても面白いかもしれませんね(　´･‿･｀) ではでは。

02/28/11--16:07: javascriptの基礎を学びながら「面白診断」を作って、オマケに3DSが当たるキャンペーンがいろんな意味で話題に。 #jsdoit #3ds

jsdo.itでこんなキャンペーンが始まったようです。

3DSが当たる！お手本コードをフォークして面白○○診断を作ってみよう！

初めての方もカンタンに始めることができます。

2種類のお手本コードを用意しました！

お手本コードをあなたらしくアレンジ(=Fork)するだけで、

とっても簡単に○○診断が作れます！

今ならNINTENDO 3DSが当たるキャンペーンを実施中です！

jsdo.itはhtml、CSS、javascriptを書いてその場で実行→シェアできるサービスです。
お手本コードをアレンジするだけなので、変数の基礎や配列の基礎を遊びながら覚えられる企画ですね。

こんな診断が投稿されています

ネタ系

ぼくと契約して魔法少...じゃなくて

ぼくと契約して魔法少…じゃなくて - jsdo.it - share JavaScript, HTML5 and CSS

あなたに足りない成分

あなたに足りない成分 - jsdo.it - share JavaScript, HTML5 and CSS

変態系

ME診断

ME診断 - jsdo.it - share JavaScript, HTML5 and CSS

Javascript予約語診断

Javascript予約語診断 - jsdo.it - share JavaScript, HTML5 and CSS

こんな凝った診断も

jsdo-monster maker

jsdo-monster maker - jsdo.it - share JavaScript, HTML5 and CSS

3/23までに診断を作ればNINTENDO 3DSが当たる！

javascriptのことが気になってていたけどキッカケがなかった人にはちょうどいいイベントなのではないでしょうか。

3DSが当たる！お手本コードをフォークして面白○○診断を作ってみよう！

jsdo.itの最新情報はtwitterで！

中の人が毎日愉快につぶやいています。

03/02/11--12:17: 初めての企画書が、最終選考に残った　アイデアの出し方

販促会議賞という企画コンペに出させていただき、ファイナリストに残ることが出来ました！
本職デザイナーが、どうやって考えて企画を立てたか。思考の足跡をつらつらと書きます。

ちなみに出した企画はこちら。

ただいまWeb投票もしているので、企画見てオモロイ！と思った方は、ぜひ投票お願いしまーす！

まずは販促会議賞ってなに？という人にご説明。

販促会議賞は、いろんな企業から「この商品の販促アイデアを考えて下さい」という感じでお題が出され
そのどれかに応募するというものです。
企画をパワーポイントにA4サイズ10枚以内で、容量は5MB以内にまとめてくださいというルール。
誰でも参加可能、いくつでも提出OKです。

今回は、全27社から28課題出てました。

1.まずやったこと

どうしたら勝てるか研究しました。
販促会議賞は第2回目だったので、1回目の受賞作品をざざっと拝見。

思ったこと

第１回の優勝者、コカ・コーラ企画の右のひとはイケメン斉藤兄弟に似ている。
というのは置いておいて、コカコーラの企画以外どれも分かりづらいなーと思いました。
触れる情報量が圧倒的に多いこの時代、
3秒で分かり、かつ面白いと思える内容じゃないとまず流行らない。
これは、KAYACの自社サービス運営で、ダイレクトにユーザーの反応を見て日々実感していたこと。
ちょっと見てなんだかわかんないと、もう見ない。

さらにこのコンペの選考方法は、

グランプリ、ゴールド、シルバー各賞は審査員の1次審査・2次審査を経てファイナリストを選出後、
本サイトで企画書を一般公開し、投票イベントの来場者による最終投票で決定。
協賛企業賞は協賛企業による審査で1点決定。

というものなので、ファイナリストに残った後が本当の勝負。
会場やWeb上で大多数の人がよいと思ったものが一番素晴らしいという評価をされるのです。

会場での展示方式は、でっかい部屋にパネルがズラーッと並んでいて、企画書がぱーっと貼られているというもの。
そんなにいっぱい企画あるのに、見に来た人は全部ちゃんと読むはずがない。

まず2・3ページしか見てくれないだろうという前提で、シンプルで分かりやすい企画にしなくてはいけない。
プロがみて、これなら効果ありそうだねというものは2次まで。
最終審査は、ちょっと見ただけでいいねと思えるモノ。

つまり販売促進として成立しており、かつ多くの人が「いいね！」と思う、
わかりやすく、面白いアイデアが優勝する

という仮説を立てました。

2.アイデアの出し方

企画出してみよっかと集まり、何から手をつけてよいかわからず、まずやったことは、
28個のお題すべてに5分づつ、思いついたアイデアをひたすら言っていくというブレストです。
その場で思いついたアイデアをワーワーだしながら、5分×28個＝140分
この課題なら面白いのが出せそうだというアタリをつけました。

バラバラとアイデアを出していく中でわかってきたことは、
・商品をいかに売るかというアイデアを出すには、まずその商品のよいところを見つけなければならない。
・大賞を狙いやすい課題と、そうでないものがある。
・課題によってアイデアの出しやすいものと、出しにくいものがある。

ということです。

さらに2回ほどブレストをして、
大賞を狙いやすい、分かりやすく面白いアイデアが出そうなもの数個に絞りました。

そして、残った課題がこちら

グルーポン
ファミリーマート
パイロット

3.企画の出し方

受賞作品の研究から導き出した、
わかりやすく・面白い企画
を出すにはどうすればよいか考えました。

わかりやすいということは、簡単な言葉で説明できるということ。
「商品をいかに売るかアイデアを出すには、まず商品の魅力を見つけなければならない」
と分かったと書きましたが、その魅力というのをかんたんな言葉で表現していきました。

そして、面白いということは、なにかが面白いということです。（笑
そのなにかを、フックといいます。（心が針にかかるという事で
何がひっかかるかわからないので、
聞いてもらうのが一番早いということで、思いついたアイデアがオモロイかどうか
目の前にいる他人＝相方に簡単な言葉で説明してみて反応を探りあい、アイデアの取捨選択をしていきました。

これはなかなか良い方法でした。

その商品が何であるか洞察し、商品の魅力を定義付け、魅力をどういう表現でつたえるかフックを考える。
すると、わかりやすく＋面白い企画ができる。
あとは、その仕組みでアイデアをどんどこ出していくだけでした。

そして、出したアイデアがこちら

4.出した企画

グルーポン

お題：日本国民総グルーポン化計画

考えたこと：
グルーポンとは、「みんなで買えば安くなる」もの。
日本国民みんなが欲しくなるようなものを出せば、みんなグルーポンつかってよさが体験できる！
小学生の時、日本人全員から1円貰えば億万長者だ！って考えたことあるけど、
あれと同じで元気玉みたいにみんなでお金出しあってなんかでっかいもん買うとかできないかな・・・。
それさえできれば、国民みんなが参加して、グルーポンを体験することになるからいい販促に違いない！

という枠にはめてアイデアを出そうということになりました。

そこででたアイデアがこちら

「花火大会、会場日本」

日本を会場に、全国どんな家からも見えるようなでっかい花火を打ち上げようという企画。
海外で、「そういえば今日、日本で花火大会あるらしいよ！」みたいな話題になって
世界中でTV放送されまくる！！スゲーいいアイデア！と思い実現可能か調べました。
宇宙花火という、宇宙規模の花火があるらしいということまで分かったのですが、
西日本だけor東日本だけしか見えないらしい＆思ったより地味そう
＆すでに研究用として宇宙花火が打ち上げられたことがある。
ということでボツ。

「軌道エレベーター」

昔クーリエかなんかで読んだのですが、宇宙までいける軌道エレベーターをつくることは今の技術で可能で、
お金さえあればすぐにつくりはじめられるそう。
そしてそれは、「世界中の国が１年間戦争をやめてお金を出しあえばできる！」とのこと。
ほんとにそうかどうかは置いておいて、考え方が最高！
戦争やめて平和になり、かつ世界中の人が喜ぶ。それめちゃんこいいアイデアじゃん！
と思い、同じスキームをグルーポンに当てはめられないかと考察。
1億人が1000円づつ出したとして、予算1000億で買える夢広がるモノはなんだろう
と考えてみたが、アイデアが出ずボツに。
政府主導じゃなくみんなでお金を出しあってみんなが欲しい物つくるってめっちゃ今っぽい！
と思ったが、アイデア出なくちゃしょうがない。

と、ここまでアイデアを出してグルーポンってつまりは、「みんなで買うから安くなる」ものだよね。
みんなでお金を出せば〇〇が買えるってのはズレてるかも。
ということで、この方向性自体がボツに。

むむっ。どうやらこの記事長くなりそうだぞ。
ということで、後はさっと説明。

ファミリーマート

お題：これまでのコンビニのプロモーションを脱した、見たことも無い集客アイディアを、30 周年のファミリーマートに！

考えたこと：
コンビニって、選ばないよね。喉が乾いたとか、小腹満たしたいとか、
ニーズを満たせさえすればどこのコンビニでもいいから、あまり差別化しにくいねー。

つまりは、どこのコンビニもやってないニーズを満たす場所になれば、
「ファミリーマートだから行く」という図式ができるかも！

という思考過程で、コンビニにないニーズを出してみました。

コンビニに行くシーンは、
・会社or学校にいるときに何かが欲しくなって
・遊びに外に出ているとき

じゃあこの時に、コンビニにないけどあったら便利なものってなんだろう？
携帯の充電とかめっちゃ困るよね。
じゃあ充電器おけばいいじゃん！しかもタダで。
そしたら、絶対ファミマ行くし、充電待ちになにか買うかも。
実現させるのにコスト低そうだし、とにかく、ファミマにこさせさえすれば売上上がりそう。

でも、他のコンビニでもすぐ真似できるし、そもそも与件満たしてないし賞向きのアイデアじゃない。
ということでボツ。

じゃあ、シブカサみたいな持ち歩きたくないけど、突然必要になるものってないかな？
もしくは、いらなくなったけど捨てるのもったいないし、誰かにあげたいようなものを置いてもらうとか。
なんでもシェアリングボックスってどうかな？→わかりにくいし、使われにくそうだなぁ。
じゃあ、読み終わった本を自由に置いていったり、もって帰ったり出来る棚を設置するとか！

といろいろ出したのですが、「見たことも無い集客アイディア」ではないなーということでどれもボツ。

パイロット

お題：消えるペン「フリクション」をもっとたくさんの人に手に取ってもらうためのプロモーション案

考えたこと：
フリクションのよいところは、書く敷居をさげることだ！
「書いても消せる！」から気軽に書ける。

じゃあ店頭に置いてある、試し書きシートがついつい書きたくなってしまうモノだったら、
書いて消してを体験できるし、いいじゃん。
昔、よく教科書にらくがきしたけどあれって偉そうな人いるとついつい書いてしまうよね。
「人の顔＋ペン＝ラクガキ」という一般認識あるからつかえるんじゃない？

店頭の試し書きシートを、人の顔にするってのはどう？

おもしろいじゃん！
それに、面白いラクガキ書こうとする過程で、
自然と書いたり消したりってのを体験できるしね！
前に書いた人の残したラクガキがめっちゃおもしろかったりしてｗ
小学校で流行りそう！
ラクガキ王決定戦とか、やったらWebでも盛り上がるねーｗ
→「偉人にラクガキ」でいいじゃん！

という流れで、今回提出した企画ができました。

意見をもらう

でも、出した後にもらった意見だと、おおっぴろげに人の顔にラクガキするとかちょっとネガ要素あるかも。
と言われてしまい、たしかになぁと。

ラクガキOKな人にしておけば良かったと反省しました。
例えば江頭さんとかダチョウ倶楽部の人とか、
そういう企画に理解あってOKしてくれそうな芸人さんにお願いすれば、プロモーションとかにも使いやすいし
イメージつく。

メディアでの反応を見る

あとは、Twitterでの反応を見ていて、結構細かいプラン書いてあっても、読んでくれる人は読むんだなーと

さらに、そういう企画の細部まできっちり読んでくれる人ほどツイートする熱量を持っている。
だから、前半をとことんシンプルにわかりやすくまとめ、後半に詳細という形で
上手にかけたシートは、ビリっと破って持ち帰れるようにして、そこにQR入れておいて、
簡単にWebコンテストに参加できるなどなど。
細かいこと書いてもそこの勝負じゃないからいらないやと、コアアイデアだけ書いていたのですが、
キャンペーンとしての広がりをもう少し詳細に説明しておけばよかったなと反省しました。

フリクション、良いペンです。

ちなみに、今回の企画考えるために初めてこのペン買ったのですが、
かき心地いいし、間違っても消せるし、めっちゃ便利！ということで、今では愛用ペンです。
スケジュール書くのや、サイト設計するときにすごく重宝
会社の人にも勧めてます（笑

最終選考について

最終選考は、Webと会場による一般投票できまります。
これは、つまり自らの企画を一番販促できた人が勝つということですね？宣伝会議さん！

最終選考は、販促合戦だー！
ということで、さっそく販促の記事を書かせていただきました（笑

しかしこのコンペ、一般投票で優勝者決定という仕組みがうまくできてますね。
たくさん投票を集めたいファイナリストが、それぞれ自分の企画を販促して、
販促会議賞のページに人を呼んでくる。
それが、販促会議賞自体の販促にもなっているという販促。
認知度上がって、次回も参加者が増えそう！

さらに、企画コンペにしたことで、企画を考えるために商品を理解しようと、深く商品に触れる。
コンペに参加する過程自体が、商品の販促となっており協賛企業も喜んで協賛できます。
この販促会議賞自体が、協賛企業の販促プランになっているのですね！？そりゃ1回目・2回目と協賛企業がどんどん増えるわけです！
うーむ、販促を考えさせることが販促になっていて、審査も販促になるようになっている。
販促に販促を重ねる、すばらしい販促。

こりゃ一本取られた！

というところで終わりたいと思います。

あ、企画見てオモロイ！と思った方は、ぜひ投票お願いしまーす！

Web投票はこちらから！
他の方の出したアイデアも載ってるので、ぜひぜひ参考に！

03/10/11--08:02: 第0回 HTML5プログラミング＆クリエイティブコンテストに作品を応募しました

HTML5の可能性を示すコンテスト

ども、久々に投稿になります。ME課の比留間です。
さて、先日開催された「第0回 HTML5プログラミング＆クリエイティブコンテスト」に作品を応募してみました。

結論から先に言ってしまうと、残念ながら賞をいただくことはできませんでした。
しかし、先日開催されたデブサミ2011のブースで、HTML5関連として自分の作品を展示していただくことができました。（コンテストのリンク先では「デブサミ2011でのブース展示に使わせていただいた作品」という項目に掲載されています）

自分は当日は参加することができなかったので、どういった形で展示されたのかはわからないのですが・・。ちなみに実際に展示された作品は下にある、canvasで描かれたシューティングゲームです。（※音が鳴るので注意）

実際に展示された作品

Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

昨今のHTML5ブームで、今後ますますJavaScriptの需要と重要性は増して行くことは間違いないでしょう。
きたるHTML5時代に向けて、今からJSを学んでおくことは間違っていません。

そんな中、最近自分がはまっているサイトが「jsdo.it」です。
（まぁ弊社で運営しているサービスなので宣伝みたいですが、実際に自分のアカウントの投稿一覧を見てもらうと、かなり投稿してますｗ）

最近では、JS関係の質問を、コードプレビュー付きで投稿できるQ&Aコンテンツも出来たので、なかなか検索で目的の情報が見つからないときに質問してみてはどうでしょうか。
自分が作成した作品のバックアップにもなるので、これからJavaScriptを勉強しよう、という人はぜひぜひjsdo.itを使ってみてくださいね！

03/12/11--21:11: 東北地方太平洋沖地震に対し、デザイナーができること

東北地方太平洋沖地震にて、募金や各種支援活動がありますが、デザイナーでも出来ることをまとめてみました。

※こちらの情報は随時更新していく予定です。デザイナーでもできる活動がありましたら Twitter @barimi 、Facebookページ面白法人カヤック意匠部、もしくはこちらの投稿フォームにご連絡ください。どうぞよろしくお願い致します。

#ideaforlife

東北地方太平洋沖地震のため、命のためにできるアイデアを募集しているハッシュタグ。アートディレクターの森本千絵( @morimotochie )さんも参加して活発なやりとりが行われています。

節電広告

http://setsuden.tumblr.com/

節電を促進するためのポスターが集められたサイト。自身でデザインしたものを送ると、ここに掲載されます。

OLIVE

震災地での生活で作れるデザイン/飲食料/アイデアのWikiです。だれでも書きこむことが出来ます。

#thanksfromjapan

世界から日本への祈りのハッシュタグ( #prayforjapan ) に対する、日本から世界への感謝のハッシュタグ。

東北地方太平洋沖地震にWeb/携帯から募金する方法まとめ | nanapi[ナナピ]

募金ができるサイトと、募金方法がまとめられています。

最後に、震災で被災された方々にお見舞い、ご冥福をお祈りいたします。また、一日も早い復旧を心よりお祈りいたします。

03/17/11--22:44: Make for JAPAN / 東日本大震災復興支援オンラインハッカソンやっています

東日本大震災の復興支援のための、オンラインハッカソン

個人的なイベントの告知ですが、つくることで復興支援をしている人、支援のために何かつくりたい人、何かしたい人、
そういった人達を応援したい人のオンラインイベントを現在開催中です。

Make for JAPAN / 復興支援オンラインハッカソン

http://www.facebook.com/event.php?eid=207405119286527

Facebook上にイベントを作りましたので、ご興味ある方は参加ボタンを押してくださいませ。
ハッカソン(*)とありますが、エンジニアでもデザイナーでもディレクターでもコピーライターでも、誰でも参加できます。
開催時間が長いのですが、そのなかで参加できる範囲でもちろんOKです。(また元来、ハッカソンは同じ場所に集まり行われるものですが、実際に人が集まることが困難なため、オンライン上で開催しています。)

テーマとしては、東日本大震災の復興を支援するものであればなんでもOKです。
レポート制作から、サービス開発まで、何でも構いません。

03/25/11--23:28: kinectを使って「攻殻機動隊 S.A.C.」シリーズの電脳空間を再現!!!（動画つき）

カヤックの受託向けラボチーム「BMCL（ブッコミクライアントワークラボ）」のデザイナー、佐藤ねじです。今回は、BMCLよりビッグなお知らせです！「攻殻機動隊 S.A.C.」シリーズの中で登場する「電脳空間」をBMCLが作りました！

これは、Kinectセンサを活用して「攻殻機動隊 S.A.C.」シリーズの『電脳空間』を再現したインタラクティブコンテンツ。渋谷PARCO PART1 5F(monozoku)で開催中の「攻殻機動隊 S.A.C. プレミアムショップ」に展示するために制作しました。指定位置に立ち、自分の体を動かすと、その動きに合わせて電脳空間を自由に遊泳することができます。プレイヤーは、空間内に常駐する「タチコマ」の指示により時間内に電脳空間を飛び回る「タチコマ」をつかまえるミッションに参加します。実際にその様子を見てみましょう。

電脳空間システムの動画

電脳空間システムの遊び方

ここで簡単に電脳空間システムの遊び方をご紹介します。

１：指定位置に立ち、画面の指示にしたがってポーズをとり、カメラに自分を認識させます。

2：認識が完了すると電脳空間へ接続され、ゲームが始まります。

3：電脳空間は体の動きに合わせて移動します。

4：タチコマを見つけたら、タイミングよく光りの輪を放ちます。見事タチコマを捕獲すれば、ゲームクリアです。

2つの大画面スクリーンの前に立つと、なかなか圧巻です。
このコンテンツを展示している、渋谷PARCO PART1 5F(monozoku)で開催中の「攻殻機動隊 S.A.C. プレミアムショップ」は、4/19（火）まで開催しています。是非お立ち寄りください！！

渋谷PARCO

03/31/11--06:30: 野球部女子マネがオススメ！ぼくらの甲子園！

コンチわ！アプリデザイナーのIKOYAMAです！
今日は女子高生ゲストが来てくれましたー↓↓

アヤ：オッツー、マネージャーのアヤでーす。
好きな食べ物はシュークリーム☆★
「ぼくらの甲子園！」ていうモバゲーで配信中のソーシャルアプリ内で、
野球部のマネージャーとしてユーザーのみんなをサポートしてまーす。

今日はデザイナーブログ読者のみんなにも
「ぼくらの甲子園！」の面白さを紹介しに来たょ。楽しんで行ってね！

どんなゲーム？

「ぼくらの甲子園！」は高校球児となって甲子園優勝を目指すシュミレーションゲームだょ。
ユーザーのみんなは約二週間に一回開催される甲子園大会のために
「練習」や「特訓」でいろんな能力に磨きをかけながら、各都道府県のリーグ戦に挑んでるんだー！
今は100万人以上のひとが遊んでくれてるよ。みんないつもアリガトー！
もちろん、登録は無料だヨ！

画期的♪「特訓」＆「練習」のシステム

試合はスタメンの能力値によって自動で勝敗が決まるから、
それまでに「特訓」と「練習」で能力を上げておくのがのキモ！

「特訓」はミニゲームをプレイして成果をあげることで能力があがるシステムだよ。
うまくなりたい人はもりもり特訓してね！
ミニゲームは4〜6種類もあるからやり応え充分！！

「練習」は一週間に一度セットすると、時間が経てば自動的に能力のあがるシステムだよ。
これなら忙しいひとも楽しめるネ！！！

3/31〜イベント開催中！！

今日から「いざ勝負！春の甲子園大会！」っていうイベントが始まったよ。
「イベント」っていうのは、番外編みたいなものかな。
いつもの本編とはちょっと違ったシステムで遊べるキャンペーンなんだー。

今回は「春の選抜大会」の代表に選ばれちゃったところからお話が始まるよ！
で、みんなでミニゲームをして相手チームのキャプテンと勝負するんだー。
ポイントを沢山獲得して、キャプテンを攻略できれば試合にも勝利！次に勝ち進むことができるよ。
もちろん、最終目標は優勝！！
みんなも是非参加してね！

燕山(エンヤマ)：ま、誰が来ようと私たちが勝ちますけどね。

アヤ：ムキーーーー！どっから出て来たのー！！
この人、最初の対戦チームのキャプテンなんだけど、あたしたちの事すっごい見下してるの！
絶対負けたくない！お願い、一緒に倒してこいつの鼻を明かしてやろっ！

http://pf.mbga.jp/12000501

ということで、登録待ってるよー。マネージャーのアヤでしたー。

03/31/11--06:30: Web制作業界最速？！CS10の新機能を使い倒してみた！ #aprilfool

もう使ってる？CS10！

さてさて！先日発売されました、待望のCS10。

デザイナーなら誰しもが使っているであろう、Photoshop。
その最新版の新機能をご紹介したいと思います！

電脳メガネｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

CS10の最大の特徴ともいえば電脳メガネ！

前回のCS9から、拡張スクリーン対応になったのですが、
CS10からはなんと拡張スクリーンメガネ付きで販売されています！
なかなかおしゃれ！と評判もよく、街中でこのメガネをしているデザイナーが増えているとか？！

ずっとみんな欲しかった！？上司に応じる、これ如何に？！

新人デザイナーなら一度は経験する、上司からのニュアンスでの指示。
そんな指示に柔軟に対応できるのがこの機能。
プルダウンから擬音語を選ぶだけで、それっぽい画像が出来上がります！

もっとバーンと！

このような画像を作った後に、上司からの「え～もっとなんかバーンとさせてよ～！」なんて言われたときはこれ！
プルダウンから選べばOK！

バーン！とした画像に変換されます。

子供をもつ親御さんに人気！年齢フィルタを使ってみた！

スライドを動かすだけで、見た目の年齢を調整できる年齢フィルタ。

デザイナーさんだけでなく、子供を持つ親御さんに、この機能は人気のよう。
また若い頃を思い出したい、ご年配の方にも今CS10が売れているだとか！

将来の姿が見れちゃう？！

年頃の女性の写真。スライドを動かすだけで、見た目年齢が変わります。

デフォルトの画像

＋50歳で、おばあちゃんに。

マイナスにすると若返ります。

マジでほしい、翻訳機能！

さて、最後の紹介になりますこの翻訳機能。
文字パネルの翻訳するにチェックを入れ、プルダウンで選択するとテキストが自動で翻訳されます。

さらにこの機能、翻訳した後、言語に合わせて自動で字詰めをしてくれるので、
文字が変なところで改行されたり、画面から切れてしまうなんてこともありません。
かなり優れものの機能です。

各国語に対応してます！

チェックを入れて、プルダウンから選択。

英語に翻訳されました！

最後に

さて、2011年のKAYAC Designer Blogによるエイプリルフール記事はいかがだったでしょうか？
今後も、デザイナーさんやマークアップエンジニアさんにちょっと役立つ記事を書いていきますので、
どうぞよろしくお願いします！

※この記事はエイプリルフール用に書かれたジョーク記事です。実際のCSシリーズの機能とは一切関係ありません。

04/21/11--14:01: 2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。

MIX11で「SVG女子」が紹介されました！

弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。
こちらがその様子です。

日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。

それでは続きからどうぞ！

SVGの気になる疑問に答えます！

SVGって何？

SVG（Scalable Vector Graphics）は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia

簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。

SVGって何がすごいの？どういうところが便利なの？

ベクターデータなので拡大しても荒れません。

例えば、今まで「PC用」「スマホ用」「サムネイル用」などと複数のサイズの画像を用意していたところを、一つのSVGファイルでまかなえるかもしれません。

JavaScriptなどでアニメーションさせたり、動的に変化させることができます。

「曜日や時間によって色を変える」といったことも1つのSVGファイルとJavaScriptがあれば実現できるかもしれません。

どうして今までSVGが普及しなかったの？

最大のシェアをもつInternet Explorer 8（+6,7）がSVGに対応していませんでした。そのため実用的ではなかったのです。

しかしIE9からSVGに正式に対応することとなり、近い将来SVG対応ブラウザが多数を占めることになります。

SVGファイルはどうやって作るの？

Adobe IllustratorからSVG形式で書き出すことができます。

とはいえIE6,7,8に対応しないわけには…

調べてみるとこのようなJSのライブラリがありました。

SIE - SVG形式の画像を表示できるオープンソースのJavaScriptライブラリ

百聞は一見にしかず！これがSVGだ！

「PLAYボタン」をクリックして実行してみてください。
ただの画像のようですが、「Ctrl +」でブラウザを拡大表示してみてください。まったく荒れません・・・！
SVGに埋め込んだテキストを選択できるのも注目ポイントです。
さらにFirefox4で表示するとアニメーションもします！

SVGで笑い男 - jsdo.it - share JavaScript, HTML5 and CSS

また、コードビューにきりかえて、どのようなhtmlが記述してあるかもチェックしてみてください。svgがどのようなものかわかると思います。

100%SVGのオリジナルアニメが4/26に日本上陸！

SVGを駆使したアニメーションコンテンツ「SVG女子」が4/26に日本でも公開されます！
現在ティザーページでは「SVG女子」の物語が少しずつ公開されています。ぜひ、公開までもうしばらくお待ちください！

またSVG女子を制作したjsdo.itチームのtwitterもありますのでよかったらぜひぜひフォローしてください！

04/25/11--15:17: SVG女子を90%軽くしたSVG軽量化テク+α #svggirl

あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。

HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、
世界を（いろんな意味で）驚かしてきましたが、

ついに本日、日本でも公開されました！

しかも日本版に合わせてアニメーションも長くなっています！
こっそりブラウザを英語にして見ていた人も必見です！

（神風動画さんによる予告編動画！）

神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、
プログラムについては

SVG Girlの公開と内部実装（プログラマーブログ）

で担当プログラマーの吾郷が説明していますが、とにかく

いかにSVGをきれいに軽くするかが最重要！

SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、
今回は1500枚を超えるレイヤーによる250コマに及ぶ大量のSVG！
それをぐりぐり動かすとあって、そう簡単にはいきませんでした。

始めた頃は150MB超、気がつけば15MB台にまで落ちたファイルサイズ

この記事ではイラストをSVGに変換する過程で得た、SVGの軽量化テクニックをご紹介したいと思います〜
（あとイラレでSVGを扱った時のバグを未解決も含めていくつか）

SVGってなに？って方はこの記事をみてからどうぞ！

2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。

まずは制作過程（最終版）をさらっと紹介します

神風さんからいただいたビットマップ素材からアニメーション構造を設計する
素材を階層ごとに分けてまとめる（レイヤー化）
レイヤー化した素材に連番と階層で名前をつける。
トレスして軽量化。同時にカラーコードで色調整をする
トレスが終わった素材はSVGZで書き出す
SVGZをサーバーにコミットしてプログラムで動かせるようにする

ここまでが、SVG素材の準備の過程になります。
さらにアニメーションのための準備として、アニメーションの開始コマと終了コマの座標を指定したりしました。

パス自体のトレスの話などはイラレの扱いとして方々に出ていますので、なるべくSVGに限った軽量化の話をします。

SVGからSVGZヘ: MAX70%CUT!

SVGZとはSVGをZIP圧縮したファイル形式で、ファイルサイズが1/3ぐらいまで落ちます。
もちろん圧縮したファイルは展開する必要があるので、ブラウザ上では読み込んだ後に解凍する時間を要しますが、そこを差し引いても十分にユーザー環境を快適にしてくれます。

方法は簡単でイラレから書き出しの際に、拡張子の欄で.svgの下にある.svgzを選ぶだけです。

ちなみにSVGZは圧縮ファイルのため、SVGと違いHTMLエディタなどで開けなかったりします。
手持ちで中身を確認できたのはフリーのベクターソフトのInkscapeだけでした。

SVGZをさらに最適化する: MAX20%CUT!

ネット上にSVGZ最適化プログラムがあり、そちらを使用するとさらに10-20％ぐらいファイルサイズが落ちます。
ただ、キャンバスのサイズが変わったり不可思議な挙動も見受けられたので、最終的に採用は見送りました。

残念ながらサイトの方も今年に入って閉鎖されてしまったようです。

試した際に見た感じだと、レイヤー名などの削除など、とにかく描画に不必要な部分を削っている感じでした。

SVGの書き出しにこだわる: MAX20%CUT!

SVGと一口に言っても、イラレからの書き出しの設定はいくつかあり違いも分かりにくかったので今回使用したものを載せます。
（設定はSVG、SVGZ共通のものです）

重要な項目は以下

・CSSプロパティ：プレゼンテーション属性

CSSプロパティは色情報などCSSコントローラブルな情報をどう記述するかの設定です。SVGでは基本パスごとに色情報などを書き込んでいるため、大量のパスになるとその違いも馬鹿にできません。
４種類のうち、実際に書き出したサイズが一番軽いこの指定を使いましたが、用途によっては「スタイル属性（実体参照）」もおすすめです。
こちらは各パスにスタイルタグを入れ、ヘッダーでスタイルごとにまとめてCSS記述をしています。色数が多くパーツが細かい素材などに適しています。

・小数点以下の桁数：「1」

小数点以下をどこまで記入するかの設定です。パスごとの情報量が変わるのでファイルサイズにかなり影響してきます。
もちろん、もともと小数点が入らないように整数で描画していれば関係のない設定ですが、細かいイラストなどの場合、ここでざくっと削る事もできます。

今回の作業では推奨されている「3」から「1」へ削った所10-20%ほどファイルサイズを軽減できました。
あまりやりすぎると線がずれていることが目立ってしまうため、確認は必要です。
またずれた状態で再編集をするとさらにずれることもあるので、編集用のオリジナルを保持した上で作成してください

・その他

「<tspan>エレメントの出力を制御」
デフォルトでチェックが入っているので、そのままにしました。

他、「〜を含める」系は必要ないので全てカットしています。
「Illustratorの編集機能〜」も外すとpdfプレビューなどができなくなりますが、カットで！

手動トレスがキレイで軽い。: MAX99%CUT!!!

これはSVGに限った話ではありませんが、やはり一番効果的でした。

今回、神風さんからは画像として素材をいただいているので、一からトレースをするのが大仕事。

イラレのライブトレースを使って始めはやってみたのですが、100MBをあっさり超えてしまい断念。

ほぼ同じ場所に２つ３つアンカーを置くなど、見た目には判別しづらい無駄なパスの生成と、細部は細切れのパスに無駄に変換するため、サイズがかなりかさみますし、きれいじゃない。

結局、ほとんどのシーンを手作業に切り替え、最終的には手作業で全体の75%ぐらいの200コマ近くを作り直しました。残りのコマもパスの間引きなどはしています。
おかげでファイルサイズは劇的に減り、あるシーンではライブトレースで2MBは必要だったものを、一から根気づよく作り直した所45KBまで落ちました。
見た目には遜色ないどころか、細部の描写は手動のほうがやはりきれいです。

もちろん、かかった時間はライブトレースのボタンをぽちっとするのに比べて圧倒的ですが、
今回は精度をもとめたので手作業でごり押し。他のデザイナーに何度も何度もてつだっていただきましたm(_ _)m

手作業でのトレスではFlash Liteでのベクター軽量化テクニックなどを用いています。
上の手動トレスしたSVGだとアンカーポイントが4162個です。（ライブトレースは91000個w）

この辺はイラレの話なので割愛します。

ちなみに今回のファイルに限っては、1000アンカーポイントあたりSVGZで8KBぐらいという見積もりが立てられました。

共通パーツをJSで動かして省略する

もともとはパラパラ漫画のように、一コマずつSVGを用意していましたが、
最終的には、セル画アニメのようにSVGを手前から奥へレイヤーとして重ねる構造へ変更しました。

背景など同じ素材が複数コマに渡っている場合、同じ素材を使う事が可能になり、
また基本的に背景の方が描写が細かいので、かなりのファイルサイズを軽減することができ、
この作業当時40MBほどだった全ファイルサイズも25MBまで削減する事ができました。

ただ、この作業をするにあたって、今まで１コマ１SVGだったものを
コマ辺り２−５枚のSVGに解体する必要があり、かなりのSVGを修正したり新規でつくりました。

結果

ライブトレースでSVG（150MB超）
SVGをSVGZに圧縮
SVGZからさらに軽量化プログラムを走らせる→やめる
ライブトレースから一部手作業に移行（約40MB）
共通レイヤーをJSで動かす（約25MB）
ほぼ全てのコマに手作業で手を入れる（15MB切る）

という感じの劇的なファイルサイズダウン。
無事、公開となりました！

バグなどあれこれ

今回確認された事項です。
中には再現性が低いものもありますが、今後の参考として
対処方法と合わせて書いておきます
（特に書かない限りSVGとSVGZの両方です）

レイヤーやグループに同じ名前をつけると、あとのものに連番がつく
（発生頻度：常に）

名前はSVGではIDとして処理されるため、同名の場合は書き出し時に「名前-1-」などと連番が付け足される。

対処↓
書き出し時の仕様らしい。
あらかじめパーツの命名表をつくって管理をし、重複を無くした。
イルカの名前はご愛嬌。

SVG/SVGZに書き出すとレイヤーが一つになる。
（発生頻度：常に）

複数レイヤー書いた場合は、それぞれがグループに変換されて一つのレイヤーに収められる。
その際、レイヤー名は「レイヤー１」になる。
もともとレイヤーが一つの場合はそのまま。

対処↓
特に困らないのでそのまま

スウォッチで指定された色がブラウザでは無色になる
（発生頻度：一度だけで再現せず）

アイの服だけ透けたりして焦りました。
焦りつつブラウザで検証をしていたら、さらに後ろ指をさされるようになりました。

対処↓
スウォッチをリストから削除しても、画面上に色が残っているとスウォッチ設定は解除されないらしく、そこではまりました。
スウォッチで指定した色を全て別の色に変えて一旦保存。
スウォッチ設定をリセットさせて、あらためて色を振り直すと正常に表示される。

SVGZで保存して、再度開くとアートボードの位置がずれている
（発生頻度：よくある）

これ、けっこうくせ者で、アニメーションさせているSVGなんかはviewportタグを使って動かしているので、
アートボードの位置がずれるとアニメもずれる。

対処↓
原因がわからなかったので、ずれた位置を基準にするか、Inkscapeなど別アプリでviewportタグだけ修正

いかがでしたでしょうか！

スマフォやモダンブラウザにより、再び脚光を浴び始めたSVG。
その制作のお役に立てたら幸いです！

これを読んでどんな技術使ってんのって気になった人は

SVG Girlの公開と内部実装（プログラマーブログ）

をポチッと！

SVGをはじめとしたHTML5をぐりぐり触りたい、活かしたいと思ったあなたは
今すぐカヤックへジョイン！！

05/05/11--23:34: 【5/8まで展示中】ノンスタイル石田につっこめる！インタラクティブ漫才「つっこめ屋」とは。

カヤックの受託向けラボチーム「BMCL（ブッコミクライアントワークラボ）」のデザイナー、佐藤ねじです。先月「攻殻機動隊 S.A.C.」シリーズの中で登場する「電脳空間」を作ったという記事を書きましたが、続いて今回は、吉本興業さんとコラボして、インタラクティブ漫才「つっこめ屋」を制作しました。

マネキンにつっこんで、漫才を疑似体験！

これは、お笑い芸人のNONSTYLEの、つっこみ担当「井上さん」を体全体で操って相方の「石田さん」のボケにつっこむアトラクションです。リアルにつっこんだ触感を味わうために、ユーザーの隣にはマネキンを立たせ、そのマネキンにつっこみを入れると、それがスイッチとなり、つっこみが発動します。つっこみが成功すると、石田さんはふっとんだり、肩が爆発したり、いろんな仕掛けを用意しています。実際にその様子を見てみましょう。

つっこめ屋の動画

NONSTYLEさんには、このアトラクションのために、新作ネタを４本書いてもらっています！

この企画は、4月29日（金）から5月8日（日）までのゴールデンウィーク期間中、吉本興業さんが表参道ヒルズの開業5周年のテーマ“SMILE”にちなんで開催中の、東日本大震災へのチャリティーイベント「Smile Bazar」のために制作された展示の１つです。この他にも、TwitterやUSTREAMとも連動し、会場の外からでも参加できる企画が満載です。

スマイルバザールの情報はこちら！

プレイ中の様子。プレイヤーと井上さんは同じ動きをしてくれていることが分かります。

マネキン（石田さん）につっこむと、それがスイッチとなり、画面内でもつっこみが行われます。

井上さんにどつかれて、奇面組のようにちっちゃくなってしまう石田さん。

井上さんの寒いセリフに凍ってしまった石田さん。つっこみによって解凍。

つっこみの衝撃で、幽体離脱する石田さん。

実際にプレイしてみると、つっこみ成功時にいろんなアクションがあったり、笑い声や拍手が鳴り響いて、けっこう快感です。展示は５月８日（日）までですので、体験したい方はお早めにどうぞ！

吉本興業：スマイルバザール

「100人の芸人が100万人を笑顔にし、その笑顔を日本中に届けたい！」

会場　：表参道ヒルズB3F　スペースオーギャラリー

期間　：4/28～5/8

入場料：無料

05/08/11--17:17: AndroidゲームデザインWORDDICT!の試行錯誤

最近スマートフォンをメインにデザインをしているshiihoです。
今までWEBのキャンペーンサイトやFlashサイトを担当していて
Androidのデザインは初めての体験でしたので、その試行錯誤をまとめたいと思います。

今回デザインを担当したのは英単語をつくるパズルゲームWORDDICT!
画面に次々と出現するアルファベットから英単語を見つけていくゲームです。
悪役のバグバグの侵略を阻止しながら高得点を目指していきます。

Android Marketはこちら
 紹介サイトはこちら
それでは早速、試行錯誤の一部をまとめてみましょう。

WORDDICT!を遊ぶには
Android OS 2.2 以上
Adoobe AIR が搭載されている必要があります。

デザインの流れ

パネルの方向性

このアプリで一番デザインのやり取りが多かったのがゲームのプレイ画面
企画が英単語パズルゲームを作るという所からスタートしたので、まずはどういうパズルが良いかとパターン出し
親指がのるということを考えると面積が広いパターン4がいいよねということで初期はこちらで決定。
この時は指をなぞるとパタパタパネルが回るという演出を想定。

UIの検証

ゲームのルールと照らし合わせながら必要な要素を置いていったもの
まだ要素を置くという目的しかなかったので色味も特になし。
この段階では4人対戦ができて文字のマス目もいっぱいありスクロールできる想定。

テイストの調整

チーム内ではポップなものにしたいという意見が一致したので、そのカラーパターン。
最終的に調整をして右のモノになる。
この時ではモックが完成していてチーム内でプレイをしながらUIを検証。
ただ、プレイ画面しかできていないので全体の世界観は謎の領域。

世界観の構築

このあたりで他の画面やストーリーの構成ができてくるが
プレイ画面にストーリーがないということでそれぞれの要素にストーリー性をからませることに。
もっと分かりやすい世界観を作るためにできたのが右。

演出での失敗

初めての失敗はユーザビリティを重視しすぎて演出が淡白になってしまったこと。
(操作の邪魔にならないようになるべくエフェクトを小さくするなど)
その結果、テストプレイしていて爽快感を感じなく、ただつらいだけの作業ゲーになってしまった。
改善策として下記のように調整。

レベルアップを画面に覆いかぶさるくらいド派手に

一定時間経過するとペナルティでマス目が入れ替わるシャッフル演出を盛る。などなど・・・

デザインでつまづいたこと

戻るボタンはつけるかどうか

Android端末はデバイス側に戻るボタンがついて、そのボタンでアプリの制御が可能。
初期はつけない想定でいたが、まだAndroid端末が国内で浸透していないことも考え戻るボタンはアプリ内に設置。
また、他の某有名鳥を飛ばすパチンコゲームもアプリ内にボタンがあったのも決め手に
(こちらはiPhoneをそのまま移植した可能性もありますが・・・)

決定ボタンは右かどうか

これについては悩みました。右にした理由としては

「オレ左利きだけどゲームのコントローラーのボタン右側だしそっちになれちゃったな」
「そういえばエンターキーとか電卓のイコールボタンも右側についてるね」
「決定ボタンと言われるものは、ほとんど右にあるからそっちの方が違和感ないかも、Flickrの決定ボタンが左で違和感あったな」

という意見をもとに、一番多いであろうと予測して右に配置しました。

ただ、プレイしてみると左に決定ボタンがある方が右手だけの操作時に親指が自然と動く。
しかし左手で片手操作する人もいるかもしれない・・・
実は真ん中に合った方がいいんじゃね？(載せる情報量が収まらないのでこちらは断念)
社内でアンケートをとってみてもどっち付かずな結果に・・・
などなど、様々な意見が交差して無限ループ状態に
最終的には左右どちらにも置けるよう設定を追加した方が良いかも、という結果に落ち着く。

WORDDICT！で学んだこと

ゲームはアプリケーションとは別物

普段WEBのデザインをしていると、ユーザービリティなどをガチガチに想定しますが、
WEB寄りの考えだとゲームのデザインでは通用しないということが分かりました。
ユーザーにどのように成功体験をさせるか、など演出も含めてゲームのデザインだと感じました。

プレイしてみないと分からない

静的なWEBサイトと違いゲームはプレイしてみないと見た目以上のものは想像できません。
プレイしてみて淡白だな、面白くないな、分かりにくいなという部分を含め
何度もデザインをアップデートしていきました。
WEBの仕事で8割の部分を置き換えてみるとモックアップだったのではないかと思うほどに・・・

スマートフォンの画面は指で隠れる

WEBサイトや既存の携帯とは違いタッチでバイスは指で隠れてしまう部分が出てきます。
親指で画面をタッチする方もいれば人差し指でタッチする方もいます。
これにより画面が隠れる面積が変わってくるのでそちらも想定したデザインにしなければいけませんでした。

ユーザーが見ている情報の優先度によりデザインを変える

実際にテストプレイしてみると、アルファベットのマス目しかほとんど見てないことが分かりました。
これにより優先度が低い情報を指で隠れる画面の下に配置したり、
演出も一瞬で分かるような大げさなものに調整をしました。

おまけ

実はAir製のゲーム

AIR for Androidで制作されています。軽量化をするのに苦労しましたがFlashの演出能力の高さを引き継げるという利点がありました。
こちらについてはFlashチームブログのlevel0にて解説をされています。

隠されたイースターエッグ

イースターエッグというほどでもないですが、ちょっとした隠し要素がこのゲームには含まれています。
ヒントは限界までスクロールすると・・・

Android端末を持っている方、是非遊んでみてくださいね。

05/14/11--03:14: もしもフロントエンジニアがSVG女子をイジったら。音声認識やfpsコントローラなど本気だしすぎな件

SVG女子が公開されて2週間がたちました

たいへん多くの方に視聴していただいているようで、感激しています！
「SVG」がすっかりバズワードになっていますね。
まだの方はぜひご覧ください！

SVG女子を見る

SVG女子にはユーザーが自由にイジってオリジナル作品を作れるモードがあります。

いわゆる「神モード」というやつです。
この「神モード」に公開直後から多くの作品が集まっています。（嬉しい！）
SVGはJavaScriptから操作できることが特徴です。
色を変えることはもちろん、オブジェクトを変形させたり
再生速度を変えることもJavaScriptからできてしまうんですね。

このSVG女子がすごい！今見ておくべきフロントエンジニアの本気！

セピアカラー

カラフルなSVG女子の世界がセピア色になってます。

SVG女子の消失

アイちゃんが消えて影だけが残っています。

再生コントローラー

再生・停止・fpsのコントロールなどができます。

音声認識で色変更

Google ChromeのSpeach APIを利用。

音声認識女子 - jsdo.it - share JavaScript, HTML5 and CSS

SVG Glitch女子

強烈なビジュアルがステキ。

SVG Glitch女子 - jsdo.it - share JavaScript, HTML5 and CSS

コンテストに挑戦して豪華賞品を当てよう！

jsdo.itとSVG女子が連動して、コンテスト企画を開催しています！

コンテスト1「SVG大喜利」

起き上ったアイちゃんがびっくりして一言！なんといったでしょうか？
くすっとしちゃうようなオチをつけて投稿してください。
抽選で1名様にamazonギフト券プレゼント！

例のアレ - jsdo.it - share JavaScript, HTML5 and CSS

コンテスト2「SVG女子神モード」

この記事でも紹介しているコンテンツです。こちらは優秀作品1名様にXbox 360とKinectをセットにしてプレゼントいたします！ぜひぜひご参加ください！

05/31/11--14:07: HTML+CSS主体のJavaScriptエフェクト！簡単で「使える」jQueryテクニック（解説つき）

4月から入社した2011年度新卒社員です。

ハロこんにゃんセヨ
がぜんウェブウェブしているほんだです。

今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。
入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。

そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。
jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。

この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。

jQueryってなんぞってとこと、使う前の準備をざっくり解説

jQueryは海外の超優秀なチームがつくったJSライブラリです。
jQueryを使うと、JSでもっともやっかいなWebブラウザでの挙動の違いを吸収してくれたり、
複雑に記述する必要のあるコードを、シンプルに記述できたりします。

使う前の準備！

jQueryのファイルは以下からダウンロードできます。
URL：http://jquery.com/

jQueryはHTMLに以下のように記述して読み込みます。（head要素内に書くのが一般的です。）
自分がコードを書くJSファイル（ここではmain.js）をjQueryの後に読み込まれるよう、その下に記述します。

JSファイルへのパスは、自分がファイルをおいたディレクトリの場所に適宜変更してください。
また、以下のように記述すると、jQueryファイルをダウンロードせずに用いることができます。

ちなみに

jsdo.it のエディタでは「+」ボタンから簡単に読み込めます。
ちょっとだけ触ってみたい！って人におすすめです。

Jsdo.itってなんぞ

jsdo.it（http://jsdo.it）はHTML+CSS+JSのコードを共有して遊べるサイトです。
HTML5やCSS3などの新技術や、業務的にはあまり使わないようなJSを使って楽しめます。
さらに、人のコードを盗び学ぶことで勉強もできちゃいます。

jsdo.itについて、こちらの記事で詳しく解説しています。

jsdo.itでは、chromeアプリケーション版「JustEdit」も最近リリースしたので、
ぜひインストールして使ってみてください。

lightbox風のフェードインでコンテンツを表示する！

フォトギャラリーなどの演出によく用いられるlightboxのようなフェードインを自前で実装します。

【コピペJSer向け】lightbox風のフェードインでコンテンツを表示する - jsdo.it - share JavaScript, HTML5 and CSS

「PLAY」ボタンか、画面中央の再生ボタンをクリックすると、サンプルコードのデモを閲覧できます。
さらにデモのPLAY中に「STOP」ボタンをクリックすると、コードをHTML、CSS、JS別に確認できます。

「動画を見る」ボタンをクリックすると、ページ全体が黒半透明で覆い隠され、動画が表示されます。
ちなみにJSコードはこのような感じになっています。

$('.btn_playMovie a').click(function() { // ボタンをクリックした時に
    $('#blockMovie').fadeIn(); // blockMovieがフェードイン
    return false;
});
$('#blockMovie').click(function() { // 動画の周りの範囲をクリックした時に
    $(this).fadeOut(); // blockMovie自身をフェードアウト
    return false;
});

これだけです！

HTML+CSS側であらかじめ用意したボックスを、ボタンクリックで表示非表示を切り替えています。

ポイント

このコードのポイントは、以下のHTMLとCSSでボタンクリック後に表示させる要素を
あらかじめ定義し、CSSの「display: none;」で非表示にしている点です。

jQueryの「fadeIn()」が実行されれば自動的に「display: block:」と上書きされ、要素が表示されるわけです。

HTML（該当部分）

CSS（該当部分）

#blockMovie {
    display: none; /* 非表示にしておく */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
#blockMovie .content {
    width: 250px;
    margin: 10% auto 0;
    padding: 30px;
    background: black;
}

ちなみに

コード中の動画は弊社運営のソーシャルゲーム「英雄になりたい」の関連動画です。

途中からついてくるボックス！

さいきん流行ってる？ページを途中までスクロールすると追従がはじまるナビゲーションをつくります。

【コピペJSer向け】途中からついてくるbox - jsdo.it - share JavaScript, HTML5 and CSS

デモを下にスクロールしてみてください。「box」が途中からついてくると思います。
JSコードは以下のようになっています。

var boxTop = $("#box").offset().top; // boxのページ上からの距離を取得
var ducumentScroll = 0;

$(document).scroll(function(){ // スクロール発生時の処理の記述を開始
    ducumentScroll = $(this).scrollTop(); // ユーザのスクロールした距離を取得

    if (boxTop = ducumentScroll) { // スクロールがページ上まで戻ったら、
        $("#box").removeClass('follow'); // classを削除
    }
});

「offset()」メソッドを用いてボックスのページ上の位置、
「scrollTop()」メドッドを用いてページをスクロールした分量を取得します。
ボックスに"follow"というclassを加えることで、ボックスのスタイルを上書きしています。

ポイント

このコードのポイントは、jQuery側で後から追加されるclassについて、
あらかじめ以下のようにCSSスタイルを定義しておく点です。

CSS（該当部分）

#content .follow {
    position: fixed; /* 「position: fixed;」に変えることで追従にできる。 */
    top: 0;
}

あらかじめCSSを定義しておくと、 JSで後から動的に追加した class にもスタイルが適用されます。

2つのボックスを入れ替わりで開閉する！

jQueryのスライドダウン、スライドアップを2つのボックスで相互関係的に入れ替えるという見せ方。

【コピペJSer向け】2つのボックスを入れ替わりで開閉する - jsdo.it - share JavaScript, HTML5 and CSS

2つのテキストリンクをクリックすると、各リンクに対応したボックスが上下に開閉します。
さらに、2つのリンクを交互にクリックしてみてください。

1つのボックスが開いている時にもう片方のリンクをクリックすると開いていたボックスは閉じる、という2つのボックスが同時には開かない仕様になっています。

JSコード以下のようになっています。

 
/* Box01の開閉 */
$('.opentoBox01').click(function() { // 1つ目のリンクをクリックした時に
    $('#box01').slideToggle(); // #box01をスライドさせて表示を切り替え
    $('#box02').slideUp(); // #box02をスライドアップで非表示に
});
/* Box02の開閉 */
$('.opentoBox02').click(function() { // 2つ目のリンクをクリックした時に
    $('#box02').slideToggle(); // #box02をスライドさせて表示を切り替え
    $('#box01').slideUp(); // #box01をスライドアップで非表示に
});

これだけ！

2つのリンクともに、2つのボックスに対してエフェクトを設定しています。

ポイント

1つ目に紹介した「途中からついてくるボックス！」のように、
あらかじめリンククリック後に表示する要素をHTML+CSS側で用意しておきましょう。

HTML（該当部分）



サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト



サンプル02サンプル02サンプル02サンプル02サンプル02サンプル02
サンプル02サンプル02サンプル02サンプル02サンプル02サンプル02
サンプル02サンプル02サンプル02サンプル02サンプル02サンプル02

CSS（該当部分）

#boxWrap {
    border-top: solid 1px #a7c2b1;
    border-bottom: solid 1px white;
}
#box01, #box02 {
    display: none; /* あらかじめ非表示に */
    padding: 10px;
}
#box01 {
    background: #fffdbd;
}
#box02 {
    background: #e2ffd8;
}

このコードのポイントはボックスの表示非表示を切り替えるためのエフェクトとして、
「slideToggle()」を利用している点です。

jQueryには「slideDown()」と「slideUp()」というエフェクトも用意されており、これらの方がよく使います。
しかし今回は、2つのボックスを相互関係的にスライドさせたかったため、「slideToggle()」を用いて「非表示だったら表示、表示だったら非表示」という処理をしました。

加速度をつけてスライドさせる！

上のコードだと、スライド開閉があまりスムーズでないというか、気持ち良くないと思います。
そこで加速度をつけてみます。

【コピペJSer向け】2つのボックスを入れ替わりで開閉する（加速度つき）） - jsdo.it - share JavaScript, HTML5 and CSS

jQuery Easing プラグインを導入し、「slideToggle()」と「slideUp()」にプロパティを追加すると、
エフェクトに加速度をつけられます。JSコードは以下のように変わります。

/* Box01の開閉 */
$('.opentoBox01').click(function() {
    $('#box01').slideToggle('easeOutCirc');  //プロパティを追加
    $('#box02').slideUp('easeOutCirc');  //プロパティを追加
});
/* Box02の開閉 */
$('.opentoBox02').click(function() {
    $('#box02').slideToggle('easeOutCirc');  //プロパティを追加
    $('#box01').slideUp('easeOutCirc');  //プロパティを追加
});

jQuery Easing プラグインをダウンロードし、自分のつくるサイトのディレクトリ下に設置、
HTMLにて、jQueryの次に読み込むよう記述してください。JSファイルへのパスは、自分がファイルをおいたディレクトリの場所に適宜変更してください。

ちなみに

jsdo.it のエディタでは「+」ボタンから簡単に読み込めます。
ちょっと試してみたい！って人におすすめです。

jQueryをいちから学びたいかたへ

この記事ではjQueryの基本的な使い方は省いてしまったので、
jQueryをいちから学びたいという方は以下のサイトがおすすめです。

gihyo.jp×jsdo.itスペシャルコラボオンラインですぐに試せるJavaScript

jsdo.itを用いて、jQueryの基本をわかりやすく学べます。
http://jsdo.it/sp/gihyo/

jQuery 日本語リファレンス

jQueryの基本がわかってきたらこちらのサイトを参考に色々試してみると面白いです。
http://semooh.jp/jquery/

おわりに！(・Å・)∫

実はこのブログに記事を書くのははじめてではなくて、
昨年9月インターンシップに来たときに以下の記事を書かせていただきました。

おひまでしたらこちらもぜひ。

カヤックではマークアップエンジニアを超募集中です！！

HTML5などの新技術の登場で、マークアップエンジニアはどんどん面白くなっていく職種です！

Vimmer(Vimの使い手）になりたい！というマークアップエンジニアさんのご応募もお待ちしています！！！

06/06/11--04:38: ぐったりくまリオネット@WHY DON'T YOU PINK?展

コンニチワ私も東京女子 aoizmです。
このたび、6.3(fri)-6.26(sun)に開催される東京女子プロジェクト「WHY DON'T YOU PINK?」展にかわゆいインタラクティブコンテンツを出展しました。

東京女子プロジェクトは東京でがんばる女子による、東京でがんばる女子のための、シアワセ開発プロジェクト。
KAYACでもWEBサイト制作をお手伝いしたりしています。

東京女子プロジェクト

『WHY DON'T YOU PINK？』展

世の中いろいろあるけど、PINKにすればいつもよりちょっと楽しくなるでしょ"を合言葉に、今をときめく３３組のアーティストが生み出す「PINK作品」の展示・販売会です。
3月開催の予定が震災の影響で延期となっていましたが、本日6.3(fri)-6.26(sun)に華々しく復活！東京女子プロジェクトのキーカラーでもある「PINK」をテーマに様々なジャンルの才能が生み出す、ちょっとシアワセな「PINKの世界」は必見！

『WHY DON'T YOU PINK？』展　by 東京女子プロジェクト

＠btf
東京都中央区勝どき2-8-19近冨ビル倉庫3F3A
開催日程／6/3(金)〜26(日)
開催時間／11:00〜19:00（火曜日のみ13：00～19：00）　月･祝定休
料金／無料
http://tokyojoshi.com/pinkex/

ぐったりくまリオネット

今回KAYACでは、Kinectセンサを活用して東京女子プロジェクトのキャラ　ぐったりくまちゃんのかわゆいインタラクティブコンテンツを制作しました。

会場に入ると、壁にかかった絵の中に閉じ込められたぐったりくまちゃんが！

ぐったりくマリオネット from BMCL on Vimeo.

くまちゃんはあなたの姿を認識すると、目の前のあなたに操られてバタバタと動き出します。
おしゃべり好きのぐったりくまちゃん。操られている間は、目の前のあなたや時間に合わせてぶつぶつつぶやいています。今日も元気な彼女のつぶやきを一部紹介してみましょう。

「なにそれ！変なポーズ！」
「足、つりそう。責任とってよね。」
。。だそうです。

開催期間中のくまちゃんのつぶやきはリアルタイムで Twitterとも連動中です。 @kumarionette

たくさんのアーティストが出展中なのでぜひ足を運んで体験してみてください！

06/13/11--06:39: これからの主流？ jQuery Mobileに触ってみよう - ADC MEETUP ROUND01に登壇してきました

今回の主題は「モバイルを攻略せよ」

先週の土曜日（6/11）に、Adobeが主催する、ADC MEETUP ROUND01に登壇してきました。

主題は「モバイルを攻略せよ」ということで、DreamweaverやFlashなどを使って、スマートフォンアプリやサイトの制作についての話に焦点が当てられました。

今回自分が話した内容は、「ネイティブアプリに変わる、新しいアプリ開発スタイル」というタイトルで、今まのでアプリ開発（言語）から、HTML5+JavaScriptを使った開発へのシフトする可能性、それらを実現するフレームワークや注意すべき点などを発表させて頂きました。

プレゼン資料もHTML

プレゼン資料もHTML5です！　と言えればいいのですが、実際はHTML5の要素はほとんど使っていませんｗ　あえて言うならCSS3でしょうか。（HTML5ではないですが）

なので、土曜日のセッションで使用した資料は、jsdo.it上ですでに公開されています。よかったら見てみてください。（※WebKitに最適化されています。また、最近のVersionUpでGoogle Chromeでの閲覧がなんだかおかしなことになってるので、Safariで見てもらえると幸せになれます）

「ADC MEETUP ROUND01 - ネイティブアプリに変わる、新しいアプリ開発スタイル」の資料はこちら

jQuery Mobileに触ってみよう

さて、資料をみていただくと分かりますが、その中身の大半は「jQuery Mobile」の話です。Dreamweaver CS5.5がサポートしたことによって、そのシェアはかなりのものになると予想しています。

もともと、jQuery自体のシェア率がとても高いので、親和性が高いことも上げられます。また、jQueryの使いやすさと同じように、jQuery Mobileもとても使いやすいものとなっています。

極端に言えば、jQueryとjQuery Mobile、jQuery Mobileで使用するCSSを読み込み、あとは作法に則ってマークアップするだけで、まるでアプリのような外観と機能を持ったサイトが作れてしまいます。

そんなお手軽なjQuery Mobileを、手軽に触ってみよう、ということで、jsdo.itでは今、イベントを行っています。その名も「jQuery Mobileを触りながら覚えよう！」です。

ちなみに実際に作ってみたデモは↓こんな感じです。

jQuery Mobileデモ1 - jsdo.it - share JavaScript, HTML5 and CSS

テストするためにゴミファイルもでないし、アカウントさえ持っていれば、ボタンを押すだけで基本的な要素（JSの読み込みとかHTMLのベースとか）が含まれた状態でコーディングを開始できるので、ちょっと触ってみたいなーと思っている人には最適なイベントになっています。ぜひぜひ、試してみてください。そして、jQuery Mobileのすごさを体感してみてください。