読者です 読者をやめる 読者になる 読者になる

Strength Finderやってみた

最近会社で話題になっていた、Strength Finderをやってみました。

www.gallupstrengthscenter.com

Gallupの調査によって、人は自分が最も得意なことにフォーカスすると成功することが証明されています。才能を見つけ、それを強みに発展させたとき、人は、より高い生産性を発揮し、パフォーマンスが向上し、より意欲的に取り組むようになります。

GallupのClifton StrengthsFinderテストは、人が自分の才能を特定するための第一歩です。Clifton StrengthsFinderの結果は、スキル、才能、知識の独自の組み合わせ、つまり強みについて話し合い、それを発展させる方法を示します。

とのことです。

結構30分くらいぶっ続けでやらなきゃいけなくてしんどかったけど、正直に答えました。

結果は、

  1. 最上志向
  2. 適応性
  3. 慎重さ
  4. 収集心
  5. 戦略性

 で、なんとなく当たっている感じでした。

品質を重視していこ。

 

さあ、才能(じぶん)に目覚めよう 新版 ストレングス・ファインダー2.0

さあ、才能(じぶん)に目覚めよう 新版 ストレングス・ファインダー2.0

 

 

fonts.comでMonotype定期購読はじめた

いまさらだけどfonts.comでMonotypeの定期購読をはじめました。

 

www.fonts.com

 

ついこのあいだ出た「たづかね角ゴシック」と、「AXIS Font Japanese Condensed( Re:CREATORSでつかわれてるやつ )」のWebフォントが使えるっぽいし、その他2,200以上の有名欧文フォントが使えるとのこと。

 

年間契約すると$9.99/月。

とりあえず1年使ってみようと思います。

tyranoscript + Electronで「五〇度の真夏が巡る」というノベルゲームを作った

まずはC91お疲れ様でした!!!!!(まだ終わってないけど)

 

いつもやっているOTARIBAというアイドル・アニソンのクラブイベントのメンバーで1日目西の-14aで吉祥寺を舞台にした「五〇度の真夏が巡る」というノベルゲームの体験版を出しました。自分はスクリプトとゲームのUIや小物周り、ロゴのデザイン、特典冊子の装丁などを担当しています。

 

今回出展者として初参戦だったのですが、「絵がかわいい」「クオリティが高い」など、来てくださった方から嬉しいお言葉をいただき、良い年末年始が迎えられそうな気持ちです。

本当にありがとうございました!

 

このエントリではどうやって作ってるのか聞かれることがたまにあったので、まとめておこうかと思います。

 

ゲームの基本的なシステムは最初から作るのは大変なので、オープンソースtyranoscriptというノベルゲームエンジンを使っています。

 

github.com

 

これはノベルゲームの開発によく使われる吉里吉里をウェブのプラットフォーム上で動くようにしたもので、フロントエンド周りの技術を多少おさえている人であればわりと簡単に本格的なノベルゲームを作ることができます。

他にも似たようなノベルゲームエンジンはあるのですが、tyranoscriptを選んだ理由としては、

  • デスクトップアプリケーション(WindowsMac)、スマートフォンアプリ(iOSAndroid)、ブラウザゲームにワンソースで展開できる。
  • 自分が普段の仕事で使っている領域の技術でカバーできる(HTML、CSSJavascript)
  • 自由度がかなり高い
  • メンテナンスが活発に行われている
  • 開発者がいい人そう

チームで最初の構想を練っている時に「ゆくゆくはiPhoneアプリにしたいよね〜」と話していたので、もし展開するとなったときに開発コストが少なくてすむようにしたいなと思っていました。

また、普段の自分の仕事領域のフロントエンドの技術で完結するのも魅力的で細かいデザインのカスタマイズなどもCSSで全部書けるので最高だなと思っています。

あと開発者さんのshikemokumkさんがとてもいい人そうで、交流掲示板に寄せられた質問やバグに丁寧にこまめに返事をしていたり、この間2016年振り返りのエントリを書かれていて、モノづくりに対する姿勢にすごく共感しています。

 

shikemokumk.hateblo.jp

 

開発スピードも活発で新機能がどんどこリリースされるので素晴らしいです。

 

また、デスクトップアプリケーション化するところにあたっては、Electronを使用しています。

github.com

ElectronはGithubが作っているクロスプラットフォーム向けのデスクトップアプリを開発できる、オープンソースの開発プラットフォームで、数行設定を書くだけで、簡単にWindowsMac両対応のデスクトップアプリケーションを作ることができます。

 

tyranoscript公式ではアプリケーションのパッケージ化にあたってはnw.js(旧名:node-webkit)を使っていたのですが、

  • 自分が個人的に作っていたTumblrのgifでVJができるアプリでElectronを採用していて慣れていた
  • 周辺のライブラリが充実してるっぽい
  • Githubが作ってるし安心感ある(?)

という理由で採用しました。

Electronは開発が活発なため、1年前に今回のゲームで作ったパッケージ化の環境がC91の1週間前に動かなくなるというトラブルもありましたが、アプリケーション側のソースとまったく結合してないため環境を最新にして動かすとすんなり動いてくれてたすかりました。。。(アップデートはこまめにやろうな)

 

今回さわりだけ紹介しましたが、もっと突っ込んだ話もいずれ書きたいなと思います。

開発にあたってはこの辺にお世話になりました。

 

「五〇度の真夏が巡る」の体験版は次回コミティア119にも出展しますので是非起こしいただけると嬉しいです!

 

明日はKOMEWORKS木緖なちさんのロゴ本が欲しいので普通にコミケの3日目に遊びにいきます。

 

それでは良いお年を!!!

Maison book girl 2nd oneman live 『Solitude HOTEL 2F』に行ってきた

以前からとても好きなMaison book girl(通称:ブクガ)のセカンドワンマンに行ってきました。なんとこのライブ即日完売でした。買っといてよかったよ。。。

www-shibuya.jp 

 

ブクガは誰がなんと言おうと音楽よし、世界観よし、キャラクターよしで最高のアイドルです!

そしてついに来たる11月30日に「river」(cloudy irony)というシングルで徳間ジャパンからメジャーデビューします!

www.youtube.com

 

このMV、曲はもちろんのこと、色調とかタイポグラフィとか細部に至るまで作り込みがすごくて本当に好みです。。。 

 

LIVEはというと、世界観を壊さないように(?)MCを最後まで入れること無くぶっ通しでやってて一つの舞台を見てるようでした。。。

 

でもさすがに休憩しないと息あがってメンバーもお客さんも死んでしまうので、MCタイムの代わりに気持ちのよいエレクトロニカ(?)が流れる中、ひたすら野菜を切る映像に合わせてポエムが読まれる(見た人じゃないとなんのこっちゃ分からんと思いますが)という演出もあり、あのへんで謎のカタルシスを得ました。

 

そして最後まで突っ走ったかとおもいきや、アンコールでmy cut(自分が一番好きな曲)がかかり会場の熱気もすごく、もう膝から崩れ落ちて帰ってきました。。。はぁ最高。。。

 

セトリは誰かが公開してくれるはずだ。

[追記]公開されてました。ありがとうございます!

 

 

 

また、ブクガのすごいところは物販が普通にかっこいいし普段も着れるところ。

チェキ券もしゃれておったよ。

最後になんといっても自分が一番言っておきたいのはこちらの矢川葵さんが世界一かわいいってことです。

こんなに自然体でかわいい人見たことないよ。。。かわいすぎる。すごい。なんなんだよ。

f:id:putchom:20161106220556j:plain

www.youtube.com

 

メジャーデビューめでたいし、これからも頑張って欲しいと思うのでした。現場からは以上です。 

 

river【初回限定盤】

river【初回限定盤】

 

 

動画仕上げについて調べた

とある事情でアニメのOP動画のようなもの(といっても静止画を動かす感じのやつ)をつくる必要が生まれたので最近のアニメっぽい仕上げに近づけるにはどうやるのかなーと思って調べた備忘録的なメモです。動画の制作はAfter Effectsでやってます。

 

ちなみに最近のアニメっぽい仕上げっていうのはこういうキャラの輪郭が少しボケてボワーってなってるやつです。

f:id:putchom:20161023233906j:plain

普通に絵描いただけではこんな感じにならないので、神は細部に宿る的な処理なんだろうなーと思っていたのですが、自分でも作ってみたくなったので調べました。

 

いろいろ調べてみるとこんな良さげな記事が出てきました。

アニメを作る! 撮影編 | すたぶろ

 

アニメの撮影の工程では静止画をパラパラ漫画の要領で組み合わせたあと、こういう処理をやってるらしい。

・エフェクトワーク:エフェクトを追加し、場面に臨場感を与える
・ライティング:光源を意識し、場面にリアリティを与える
・セル調整:ほほのぼかしや肌にグロー効果を加える
・色調整:人物、背景間等で色味が合わない場合、合うように調整する
・テクスチャ貼りこみ:人物、背景以外で追加したい素材を合成する

 

とりあえずライティングとセル調整のところだけやってみました。

ちなみに元の絵はこんな感じ。

 

f:id:putchom:20161023234308p:plain

 

ライティング

f:id:putchom:20161023234709p:plain

 

絵の影が右下に向かって落ちているので、こういう左上に光源がくるようなグラデーションエフェクトを平面を上に乗っけて、オーバーレイにしたあと、不透明度を40%ぐらいにしたらこんな感じになった。 

 

f:id:putchom:20161024001406p:plain

 

左上の光源にした方が少し明るくなって現実味が出た気がする。

さっきのブログに、

人物セルのこちらからみて右側にある「カゲ」にリアリティや画面全体の空気感を与えることができるのです。

とあるので、背景絵がもう少しちゃんとしてるとわかりやすいのかも。

EQにしろドロップシャドウにしろエフェクトはわからないくらいかけるのがちょうどいいって誰かが言ってた気がするのでこのまま進めます。

セル調整

セル調整はディフュージョンフィルタというのをかけたあとに、画像のジャギを取ってグロー効果というのをかけるらしい。なるほど。

「DF(ディフュージョンフィルタ)」という処理をセルにかけます。これは明るい色だけを「飛ばす」効果処理です。この効果をかけることを前提に「明るい色」と「暗い色」のメリハリをつけていきます。

このディフュージョンを行うと、明暗色間での調和をとることができるのですが「明るい色」を突出して飛ばすという処理のメカニズムから人物の「主線」のくどさを軽減することができます。

まずディフィージョンフィルタをかけてみたんですが、AEでのかけ方がわからなかったので調べたらスッと出てきました。

ch.nicovideo.jp

 薄めがいいなと思ったので上のエントリのDF-Aの方法でやりました。

↑一番上のレイヤー
複製レイヤー①:合成モード「オーバーレイ」にして不透明度30%。
        トーンカーブで軽くS字にしてコントラスト上げて、
        ブラー(滑らか)を20でかける。
複製レイヤー②:合成モード「輝度」にして不透明度30%。
        ブラー(滑らか)を20でかける。
オリジナルレイヤー:何もせずにそのまま置く。
↓一番下のレイヤー

 

f:id:putchom:20161024001446p:plain

 

おお!なんかだいぶボヤッとしてきた!よさだ!

 

ここで、ジャギとりをしとくっぽい。

調べると、OLMという会社(?)のOLM Smootherっちゅうプラグインを使うとさくっとできるっぽい。

olm.co.jp

なんでもポケモンとか妖怪ウォッチの制作にも使われてるツールなのに無料で使えるらしい。太っ腹過ぎる...ありがとうございます!

 

ジャギを取ったので、グロー効果をかけます。

グロー効果がどんなものなのかはここが分かりやすかったです。

ichi-up.net

上の記事はPhotoshopでの方法ですが、AEでも同じような事ができました。

その結果、、、

 

f:id:putchom:20161024002640p:plain

肌がツヤツヤした!!!!!!

テカらせすぎてPhotoshopオバケみたいになってる気もするので、もう少し微調整したほうがよさそうですが、だいぶイメージに近づきました!

 

制作の現場の方はこんな処理を毎回やってるのかー!!すげぇ大変だな...

(ある程度自動化されてるとは思うけども)

処理工程を知ったことで、普段見ているものがもっとありがたく感じられそうです。

 

ありがたや...ありがたや...

 

はじめよう!  作りながら楽しく覚える After Effects

はじめよう! 作りながら楽しく覚える After Effects

 

 

お産合宿でファミコンっぽい音楽が作れるアプリを作った

会社の開発合宿であるお産合宿10に参加して「picotii(ピコティ)」というChiptune(ファミコンっぽい音楽)が簡単に作れるiOSアプリを作ってきました。

自分がデザイン、@kuroyamが開発を担当しました。

f:id:putchom:20160918135439p:plain

osan.pepabo.com

 

結果としては、ちゃんと目標としていたApp Storeに申請するところまで行けました!!!!!

審査早く通ってほしい!!!!!!!

忘れないうちに、今回このアプリを作る上で自分なりに工夫した点を書いておこうかと思います。

Sketch + Zeplinでモックアップの共有を素早く行った

最近自分が携わっているminneiOSAndroidアプリ開発でも使い始めたZeplinを使用することでスピーディーに画面・指示書を共有することができました。

zeplin.io

【⌘ + E】でSektchで作成した画面を瞬間アップロードすることが出来るので素晴らしいです。

こんな感じで要素間のマージンなども自動計算してくれます。

f:id:putchom:20160918134135p:plain

 

また、フォントの色やサイズも自動でリストアップしてくれます。

f:id:putchom:20160918134550p:plain

超絶便利。

音楽作りの敷居を下げることを意識した

音楽を作る系のアプリは大体専門用語が飛び交っていてその分野に明るくない人には難しいなーと感じていたので、擬音語や誰でも分かる言葉に置き換えることを意識しました。

また、音楽を作るモチベーションを上げるために、キャラクターや世界観を作ることでアプリに没入してもらうことを意識しました。

 

以下ざっくり思考過程です。 

- 一番優先することは音楽作りの敷居を下げたり、モチベーションをあげること

- 「親しみやすいキャラクター」と「アプリに没入するための世界観」を作ろう

- キャラは宇宙船が壊れて祖国に帰ることができなくなった宇宙人

f:id:putchom:20160918135525g:plain

- 「カイルくん」みたいにちょっと鬱陶しい感じにしたい(逆に愛着を持ってもらう)

- 変な関西弁を喋る

- この宇宙人を祖国に返すために曲を作る

- プレイヤーは曲を作るたびに「オトのカケラ(宇宙船を直すための部品みたいなもの)」を集められる(ゲーミフィケーション)

- 助けてあげてるのにめっちゃ上から目線で話しかけてくる

- 全体的に8bitなゆるい見た目にする

- 楽器の名前は小難しい名前ではなく「ぴこぴこ」とか「ポロポロ」みたいな擬音語にしよう。

f:id:putchom:20160918135813p:plain

というのをざっくり考えてチーム内で共有しました。

何か判断迷った時にあらかじめ設定・世界観チーム内で共有しておいたのでブレずに最後まで進められたのかなと思います。 

この辺のキャラ・世界観設定のノウハウは去年のお産合宿で作ったギャルゲーの知識が生かされている(はずです)

f:id:putchom:20160918135944p:plain

novelgame.jp

 

毎回お産合宿前は、画面設計やサービスのトンマナレベルのものはあらかじめ決めていくのですが、今回他タスクに追われバタバタしていたこともありアプリの名前すら決まっていませんでした。。。

しかし思ったよりスピーディに開発を進めることができよかったです。@kuroyamに感謝。  

まだまだ詰めが甘いところだらけなのでこれからブラッシュアップしていきたいと思います。

来年も参加するぞ!!!!!!11111

 

[2016年9月25日追記]

 

ついにリリースされました!!!!!!

appsto.re

 

技術的な話はこちらのエントリに

kuroyam.hatenablog.com

解像度が異常に低いゲーム「どとこい」をプレイしてみた

最近ノベルゲームコレクションというノベルゲーム投稿サイトがオープンしたので面白いゲームがないか漁っていたら常軌を逸したゲームを見つけました。

novelgame.jp

 

タイトルは「どとこい」。

どすこいみたいでイカツいタイトルですが、UIが8bit調ですごい好み。 かわいい。

f:id:putchom:20160911142511p:plain

 

さっそく軽い気持ちで始めてみるとギャルゲーにありがちなファーストコンタクト「通学路でぶつかる→イテテテ...」が起きます。

 

テンプレ乙とおもいきや、 

 

f:id:putchom:20160911133547p:plain

 

f:id:putchom:20160911142817j:plain

 

なんだこれは...

ピンク色の正方形が喋っておる...使徒っぽい。

メインヒロインだけかと思いきや登場するヒロインが全員正方形でした。

ビースティ・ボーイズの『Hot Sauce Committee Part Two』のジャケットを彷彿とさせます。

 

サイトの説明文をよく読むと、

 

高校の入学式当日、主人公は悪魔に呪いをかけられます。
それは、主人公から見る美少女の解像度が下がりすぎて、もはや■に見えてしまうというもの。
好感度を上げていけば、女の子の画質も上がり表情が豊かになります。 

 

などと書いてあり、会社の同僚がはまっていた寿司ネタと恋愛する乙女ゲー以来の衝撃です。

 

とりあえず進めて好感度をあげていくと、美少女の解像度がどんどん上がっていきました。これがとても楽しい!!!!

 

f:id:putchom:20160911140314p:plain

そしてようやくエンディングで各ヒロインのご尊顔が拝めました。

絵もとても好みな感じ。

ありがたみが今までのゲームとは段違いです(当社比)。

 

ギャルゲーって基本的に「エンディングを見る」という長期的な目標に向かって進んでいくので途中で中だるみしてしまいがちなんですが、「ヒロインの解像度をあげる」という中期的目標も設定してあって作り方がうまいなーと思いました。

 

あと全体的にギャグセンスが素晴らしかったです。

ヒロインの好感度をあげると正方形が少し角丸になるなど図形に関するネタも随所に散りばめてあってデザイナがクスッとなる内容でした。

 

また、BAD ENDも普通はだいたい暗くて陰鬱な気持ちになるのですが、一番意味わからなくて笑いました(正確にはBAD ENDではない)

 

自分はこちらの#6e89b8の関根唯ちゃんが最高に好みでした。

思わずPhotoshopのカラーパレットに追加しました。

 

f:id:putchom:20160911135500p:plain

 

1時間ほどあれば全ルートプレイできるのでぜひプレイしてみてはどうでしょうか?

 

novelgame.jp

 

Hot Sauce Committee Pt. 2

Hot Sauce Committee Pt. 2