おはようございます・こんにちは・こんばんは。

フロントエンド担当の松島です。

シナップが毎年公開している夏のお楽しみ企画"SINAP SUMMER PROJECT"。

今年は「すまほ風鈴」と銘打って8月20日から公開していますが、みなさま、お楽しみいただけていますでしょうか？

ぼくも開発チームのメンバーとして、UI 全般、みなさんの操作に反応する部分の動きや機能を作っていました。

今回は「すまほ風鈴」について制作チームが語る制作秘話シリーズの３つめとして、アジャイルで臨んだチーム開発の風景と、アニメーションへのこだわりについて書きたいと思います。

ざっくり「UI 全般」といってみても、担当範囲がいまひとつわかりづらいですね。

ぼくはこんなふうに作業していました。

「まずなによりも風鈴の揺れ方が気持ちよくないとね。
　このあたりで絵を分けて、それぞれこんなふうに揺らせば......お、どうよ、これ」

「ここで操作すると、これが出て、かわりにこれは消える。
　ラベルのあるボタンがわかりやすいかな。この辺の位置にこんな色で置いてみよう」

「ここでタップすると音が鳴って、サーバにも通知して。
　それからこう、このへんに風鈴が動いて、と」

「ここで通知を出そう。通知のインタフェイスはこの辺にこんなデザインかな。
　出方と消え方が気に入らない！　調整しよう。うん。こんなかんじ？」

「ここはアニメがもたつくし、音の鳴りも引っかかる。通信への反応も悪いな。
　ここの処理をこう直すとどうだろう......あ、よかった、良くなった」

「自分の名前を入力して相手に伝えたいって？　やっぱりみんなそう思うよね。
　よし、短冊に文字を書けるようにしたかったら、それにしちゃえ。」

　＊

......ううん。なんだか、その場の思いつきで作っている人にしか見えない（苦笑）

そういうわけではないのです。ただ、今回の開発スタイルはすこし新しい試みだったので、まずこれについて少し紹介させてください。

このサマープロジェクトには社員全員が何らかのかたちで関わっているのですが、今回、開発チームに関してはクリエイティブディレクタ１名＋実装３名の少人数で編成されました。

みんなでなにを作るかを決め、基本的な機能とおおよその画面遷移を検討するあたりまではおおよそ例年どおりなのですが、今年はそこから、ちょっとかわった方式を採ってみることにしました。

週１回別室に閉じ込もり、このプロジェクトだけに集中してさせてみる、というハッカソン的な半合宿形式で進めることにしたのです。

お籠もりメンバは、デザイナの飯山とエンジニアの村山、そしてぼく。

飯山は画面の遷移や要素配置を図に起こし、文章まわりのデザインを行い、あとは時間の許す限り丹精を込めて風鈴や背景を描き込んでいました。

一方で村山はサーバ側のシステムを入念に調査・設計して、フロントエンドのぼくがさわりやすいように API を整えてくれたり、公開まで細かい調整を行っていました。

そうして整った素材を環境に合わせて掴んで伸ばしてくっつけて、ぼくはウェブアプリの形に組み上げる役目だったわけですが、同室にいる３人は逐一「こういう場合、こっちとこっちどっちがいい？」「こっち！」みたいな会話を繰り返していました。これは、グラフィックについてもシステムについてもそれぞれ同様です。

したがって、さきほどの様子ではひとりで思いつくままにやっているように見えたかもしれませんが、実際は、プロトタイプをどんどん作って見せあっては「いいね！」「うーん、それはちょっと」みたいなことを繰り返していくアジャイルプロセスを共有して進行していたというわけです。

作業成果は常に社内のみんなにも公開していたので、途中途中で意見を貰っては修正しながら進めていました。もちろん最終的には社員総出で詳細に見直して、新機能を追加したり、一部の UI をデザイナにブラッシュアップしてもらったりもしています。

終盤の作り込みになってからは集まって籠もることもなかったのですが、途中までは過酷ながらもたのしい、グループワークだったのです。そんななかで、冒頭のようなことをつぶやいてはフィードバックを貰いつつ、「すまほ風鈴」はできあがったのでした。

......なんとなく伝わりましたでしょうか。

　＊

そんなふうに比較的オープンなプロセスで作ったのですが、とはいえ、細部の細部については各担当者それぞれが独自にこだわった部分があるわけです。ぼくの場合、今回はアニメーションでしたので、次はそれについてお話ししてみたいと思います。

誰かがここをこうすると、こういう条件のときはこうなって、この部分がこのように変化する。UI には、そういうフィードバックのわかりやすさや気持ちよさが必要です。アニメーションはあくまでその１要素に過ぎませんが、今回のように楽しさを大切にした企画では、かなり重要な位置を占めます。

もっとこだわりたかったなあとは今でも思っています。気がかりなままリリースしてまった点がたくさんあるんですよね......。でも、自社プロジェクトでコストのかけ方にある程度の自由がきくとはいえ、自分がすべてに納得するまでこだわるというわけにもいきません。それは開発を始める前からわかっていたので、今回は、自分なりに達成したい目標をあらかじめ２つ決めてみました。

風鈴の揺れや動きにはこだわろうと思いました。評価はご判断に委ねるしかないのですが......いかがでしょうか。

揺れについては、ユーザの操作にかかわらずずっと続くので、うっとうしくなく、でも、風鈴らしい存在感ははっきり持たせたいと考えました。

仮素材で進めていた開発中盤の時点で、けっこう気持ちのいいものができたと思っていたのです。しかしながらデザイナの飯山が仕上げてきた風鈴は、こだわっただけあってなかなか素敵な出来映えでしたので、「やるなあ」というわけで、ぼくもさらにこだわりを深めて......結局とてもシンプルで、かつ満足のいくものになったと思っています。

風鈴を選ぶときや画面を切り替えるときの動きは、風鈴らしく凜として軽やかな印象をと頭で念じつつ、操作に対する軽快さを意識して調整しました。ほんとうは、さわった風鈴は「さわられた！」という動きをさせたりもしたかったのですが......。反応の悪さでかえって違和感が出てしまったり、全体の軽快さを損なう面が大きかったので、あきらめざるを得ませんでした。でも、どうでしょう、ふわっとした浮遊感と、ささっとした軽快さを感じていただければ嬉しいです。（逆に、ぼくの苦心はどうか見えませんように）

ここはちょっと専門的な話になるのですが、アニメーションはすべて CSS で実装し、簡潔な号令をひと声かけるだけで全要素が一斉に変化するようにしてみようと考えました。

さっきお話しした揺れは CSS Animations / Transitions で実装しています。ほか、風鈴選択・画面切り替え時の遷移をはじめ、ユーザの操作に応じたアニメーションも、ほぼすべて CSS Transitions によるものです。その、操作に応じたアニメーションについては、肘掛け椅子から指先１つで魔法をかけるように、ドラマティックに実行したいと思ったのでした。

詳細はもしご要望があればということで端折りつつ、もうすこしだけ具体的に説明してみますね。

たとえば「自分の風鈴」の画面から「みんなの風鈴」の画面への切り替えは、HTML 中のある１カ所の class を変更するだけで完了します。１カ所の class 変更だけで、画面内のたくさんの要素が出たり消えたり位置を変えたりしているのです。

これはつまり、ひとつの要素の class の違いでその要素以下のスタイルががらりと変わるように、あらかじめ各画面状態に応じたスタイルを用意してあるのです。そして同時に各要素には transition も指定してあるので、あとは class を１カ所変えるだけで、いくつもの風鈴がひゅんひゅん飛び交い、ボタン類は出たり消えたりするというわけです。

CSS によるアニメーションは、デバイスやブラウザがそれぞれ最適な方法で実行してくれるので、命令を理解できる環境では処理負荷の面でも見た目の上でもメリットの大井方向です。今回は移動の他にぼかしの変化や拡大縮小もあり、なかなか負荷のかかる表現なのですが、それでもそれなりに軽快に動いてくれました。今後も追求していきたいと思える実装体験になったと思います。

　＊

......どちらもちょっと趣味的でしたね。ただ、もちろんこれは個人的なこだわりポイントの代表にすぎません。ほかにも、もうひとつのキモであるリアルタイム通信の制御や、風鈴の音、パソコンで見たときだけについている環境音、シェアされる URL のパラメータ、などなど、工夫したところはたくさんあります。UI のメイン担当として最優先にしたのは、自分のこだわりも含め、全体をあわせたときの調和として、涼しくてシンプルなウェブアプリになっているかどうか、でした。

いかがでしたでしょうか？　まずはどうかたくさんの人に、涼しい気持ちで「すまほ風鈴」を楽しんでいただけましたら嬉しいです。そして幾人かの奇特なみなさんには、ブラウザの開発ツールなど開きながらニヤニヤ楽しんでいただければ、これもまた幸いでございます。

ではまた！　チリンチリン。