こんにちは。アメーバ事業本部 デザイナーのパジェロです。
2013年11月17日に行われたdotFes2013京都についてのレポートをお届けします。
dotFesとは『Web Designing』と『クスール』が運営し、Webクリエイターのためのトークセッションやタイブパフォーマンス、インスタレーションに参加できるコミュニケーションイベントです。
弊社では2010年の開催以降、毎年有志を募ってインスタレーションを出展しております。 過去のレポートはコチラ。
今回出展した作品はこちらです。
今回は、このKIRAKIRAKINGYOのデザインが完成するまでの過程をお話ししたいと思います。
「普段の業務では用いない技術や表現にチャレンジしよう」というスローガンのもと、今話題のleapmotionや脳波を使ったインスタレーションなどの提案がなされました。こうした様々な意見が交わされる中で、KIRAKIRAKINGYOのアイデアは固まっていきました。
まず金魚の形態について、いくつもの表現を試し、決まった金魚のデザインに対して様々な背景をあてはめ、それらを見比べて最適な表現になるよう模索しました。
モニター側のおおまかなデザインが決まり、ここから金魚すくいというゲームとしての見え方を調整します。
今回、金魚の点数は大きさに応じて５段階のレベルがあったので、５つのサイズの金魚を用意し、それぞれのレベルに応じてカラバリも増やしました。
まず、必要な画面遷移を想定してワイヤーを引いていきます。
モニター側に合わせて、背景や全体の雰囲気を統一。文字周りやレイアウトでは、Amebaのサービスであまり実践する機会のない、線が細く余白を活かすデザインに挑戦しました。
什器、屋台のデザイン
会場設営の状況について、前回まではプロジェクターで壁面に投影するスタイルだったので、現場で任意に画面の大きさを調整できたのですが、今回はTVモニターのため大きさが限定されてしまいます。
用意されている会場の面積に見合う空間的ボリュームや演出も踏まえてブースの制作をすることにしました。
気をつけたポイントは、
・遠くから見たときに縁日の屋台を想起するような構造
・ゲーム内のビジュアルを反映させる
・組み立て～分解～配送～再組み立てのできるもの
・テスト期間がほぼ無いので失敗の無い素材選びと発注計画（重要）
です。
当初は枠なども自作する予定でしたが構造上の強度と制作期間を考え今回は既成のアウトドア用品で代用することに。布の模様に関してはオリジナルプリントしました。
モニターまわりはテレビ枠の幅が上下違うバッファを読みつつセンターになるよう枠を組み、厚みがなるべく出ない薄めのアクリルを天板としてかぶせるのですが、当日、天板によりかかるユーザーなどを想定して強度的に問題の無い構造を考え、図面を引くのはなかなかイマジネーションのいる作業でした。
当日の設営は予想通りバタバタでしたが、メンバー全員の協力で無事搬入時間内に完成させることが出来ました。
次回は、ディベロッパーサイドから見たKIRAKIRAKINGYO制作レポートをお送りします。お楽しみに！
2013年11月17日に行われたdotFes2013京都についてのレポートをお届けします。
dotFesとは『Web Designing』と『クスール』が運営し、Webクリエイターのためのトークセッションやタイブパフォーマンス、インスタレーションに参加できるコミュニケーションイベントです。
弊社では2010年の開催以降、毎年有志を募ってインスタレーションを出展しております。 過去のレポートはコチラ。
今回出展した作品はこちらです。
KIRAKIRAKINGYOとは
KIRAKIRAKINGYOはスマートフォン用アプリをダウンロードし、アプリを立ち上げると、自身のスマートフォンが金魚すくいのポイになりブースに設置された水槽の金魚をすくって、得点を競うゲームです。Ameba事業部に所属する2012年・13年新卒入社のクリエイター・エンジニアを中心とする有志メンバーが、通常業務が終了した後に集まり、自主研究のような形で1か月ほどかけて制作しました。今回は、このKIRAKIRAKINGYOのデザインが完成するまでの過程をお話ししたいと思います。
モチーフのアイデア出し
まずは出展作品の題材を何にするか、アイデア出しのところから始まりました。「普段の業務では用いない技術や表現にチャレンジしよう」というスローガンのもと、今話題のleapmotionや脳波を使ったインスタレーションなどの提案がなされました。こうした様々な意見が交わされる中で、KIRAKIRAKINGYOのアイデアは固まっていきました。
世界観のアイデア出し
金魚すくいというモチーフが決まってから、作品全体をどういう世界観にしていくかという検証を始めました。まず金魚の形態について、いくつもの表現を試し、決まった金魚のデザインに対して様々な背景をあてはめ、それらを見比べて最適な表現になるよう模索しました。
金魚が泳ぐ水面のアニメーション表現などは、デザイナーとディベロッパーの間でお互いに提案しあい、案を絞っていきました。
モニター側のデザイン決定
モニター側のおおまかなデザインが決まり、ここから金魚すくいというゲームとしての見え方を調整します。
今回、金魚の点数は大きさに応じて５段階のレベルがあったので、５つのサイズの金魚を用意し、それぞれのレベルに応じてカラバリも増やしました。
iPhone側のUIデザイン
モニター側のデザインが決まってから、プレイヤーが操作するコントローラであるiPhoneのUIデザインに取り掛かりました。まず、必要な画面遷移を想定してワイヤーを引いていきます。
モニター側に合わせて、背景や全体の雰囲気を統一。文字周りやレイアウトでは、Amebaのサービスであまり実践する機会のない、線が細く余白を活かすデザインに挑戦しました。
什器、屋台のデザイン
会場設営の状況について、前回まではプロジェクターで壁面に投影するスタイルだったので、現場で任意に画面の大きさを調整できたのですが、今回はTVモニターのため大きさが限定されてしまいます。用意されている会場の面積に見合う空間的ボリュームや演出も踏まえてブースの制作をすることにしました。
気をつけたポイントは、
・遠くから見たときに縁日の屋台を想起するような構造
・ゲーム内のビジュアルを反映させる
・組み立て～分解～配送～再組み立てのできるもの
・テスト期間がほぼ無いので失敗の無い素材選びと発注計画（重要）
です。
当初は枠なども自作する予定でしたが構造上の強度と制作期間を考え今回は既成のアウトドア用品で代用することに。布の模様に関してはオリジナルプリントしました。
モニターまわりはテレビ枠の幅が上下違うバッファを読みつつセンターになるよう枠を組み、厚みがなるべく出ない薄めのアクリルを天板としてかぶせるのですが、当日、天板によりかかるユーザーなどを想定して強度的に問題の無い構造を考え、図面を引くのはなかなかイマジネーションのいる作業でした。
当日の設営は予想通りバタバタでしたが、メンバー全員の協力で無事搬入時間内に完成させることが出来ました。
展示風景
苦労の甲斐もあって当日は大盛況！200人以上の来場者に遊んでいただきました。
おわりに
KIRAKIRAKINGYOを通して、一般のお客様だけではなくweb業界の方々、インスタレーションの専門家の方々とふれあう機会もあり技術者として貴重な経験をすることができました。今後もこういった、通常業務以外の実験的な活動を続けていきたいと思います！次回は、ディベロッパーサイドから見たKIRAKIRAKINGYO制作レポートをお送りします。お楽しみに！