こんにちは。シナップに加わって３ヶ月目になるデザイナーの飯山です。

8月20日に公開したWebアプリ「すまほ風鈴」ですが、公開時には画面内がたくさんの風鈴で賑わい、みなさんお楽しみ頂けているようでとても嬉しく思います。
今回は、「すまほ風鈴」制作にあたって、デザインの観点からのこだわった点や苦労した点など、制作秘話をお届けします！

「すまほ風鈴」は、プロトタイプを徐々に成長させて完成させていくアジャイルプロセスという制作手法の元、社内で検討を重ねながら育てていき、公開に至りました。

風鈴は素材の質感と趣を
初期の風鈴は、プロトタイプということもありIllustratorを使って平面的な線画イラストで描きました。ポップでカジュアルな印象から、徐々に情緒や趣をプラスできる様にブラッシュアップを重ねたのですが、形や音色や色も異なる数多の風鈴を一同に介して見られた風鈴彩祭は風鈴デザインのバリエーションを検討する上でとても参考になりました。

さらに、実際の風鈴を持ち帰って観察し、そこからデザインを書き加えました。ガラスの透明感をもった「傘」、その内側にある「舌（ぜつ）」、風を受けて揺れる「短冊」、それぞれを結ぶ「紐」。実物を手元に置き、構造を分解して働きを考えながら、平面的だったプロトタイプに立体感や素材の質感を加えていき、最終的な風鈴が出来上がっていきました。

郷愁を感じさせる夏空の背景画
風鈴の趣と季節感を引き立たせる背景は、「秒速5センチメール」や「言の葉の庭」など魅力的な情景の作品を世に送り出している日本のアニメーション作家、新海誠さんの世界観を参考にして制作しました。（あの心を揺さぶられる作品の魅力には到底及ばないのですが、目標は常に高く！）
写真を元に、Photoshopで加工して制作していったのですが、自然界の微妙な色の移り変わりのグラデーションをレイヤー効果を使って表しつつ、風鈴のイラストとマッチした世界観とクオリティを表現することに試行錯誤しました。特に、夜の深い闇の中にあるグラデーションを表現するのには、数十回ものブラッシュアップを重ねました。

「すまほ風鈴」では、時間の変化に応じて、朝方、昼、夕方、夜と４つの背景に変化していきます。山の地平線位置が固定されているのは、同じ位置から風鈴を眺めている時間の流れを表現するためでもあります。背景が変わる瞬間もゆっくりと変わるので、ぜひお手元の画面でも体験して頂きたいです。

空の表情が異なるのも時間帯だけでなく、夏は入道雲などその季節ならではの表情を持っています。空の背景画を制作するにあたり、雲の形や、夕焼け空や月夜の繊細なグラデーションを意識する様になり、外を歩く時の空の見方が変わりました。

アンビエントとしての背景BGM
風鈴の音色も種類が幾つか違いがあります。そして、スマートフォンは未対応ですが、PCからアクセスして頂くと時間帯に応じた夏らしいBGMも流れます。夏の外の景色を感じさせる風物詩としてのBGMも、「すまほ風鈴」の魅力をさらに引き出せるように選定しました。是非はお手元のスマートフォンだけでなく、PCからもアクセスしてみて夏の爽やかな景色を味わって頂きたいです！

以上、「すまほ風鈴」デザイン制作秘話を飯山がお伝えしました！

SINAP SUMMER2013 「すまほ風鈴」
スマートフォンで下記のサイトにアクセスしてください。
http://summer.sinap.jp/

※PCから上記サイトへアクセスいただいても「すまほ風鈴」をお楽しみ頂けます。