あけましておめでとうございます!
FICC KYOTOより新年のご挨拶を兼ねてお届け致しました、ニューイヤーコンテンツはご覧いただけましたでしょうか。
この記事では、ニューイヤーコンテンツ制作の裏側をお話しようと思います。

【目次】
1. コンテンツの企画
2. 具体的な実装方法
3. 表現と技術的な障壁

1. コンテンツの企画

「お正月コンテンツをつくろう」と声があがったのが12月24日。最後の就業日は12月27日。なんともタイトな日程の中、ニューイヤープロジェクトは始動しました。

正月三が日といえば、実家に帰省されていたり親戚に新年の挨拶をしたりと、のんびりされている方や様々な所へ外出されている方が多かったのではないでしょうか?
そのため皆さんの過ごし方に合わせ、スマートフォンコンテンツとして制作する方が沢山の方に見てもらえると考えました。

次に「スマートフォンサイトだからできる驚きや楽しみを届ける方法はなんだろう」と考えてみると、PCサイトとスマートフォンサイトの決定的な違いが見えました。
それは、スマートフォンサイトは指で“触れる”ことができる。ここにユーザー体験の大きな違いを見出しました。

ここまでくると後はアイデアのブレスト。とんとん拍子でアイデアが形を帯びていきました。
「午年・・・馬・・・ゾートロープなんてどうかな」
「ゾートロープ?」
「スマートフォンでゾートロープ、面白いね!」

こうして、自分自身がフリックするという動作で馬を走らせ「?」から「!」になる瞬間を届けよう!と決まりました。

ゾートロープは、光がチカチカするとき前に見ていたものが残って見える残像効果という現象を利用しています。実際に作ってスマートフォンで見てみると、チカチカする動きがストレスを与えているように感じたので、オリジナルのままではなくアレンジを加え現在の形になりました。

2. 具体的な実装方法

ニューイヤーコンテンツは、大きく2つの仕組みを組み合わせて実装しています。

[横フリック]

ポーズが少し違う12枚の馬画像を置き、X軸(横にフリックする指の動き)を解析しながら画像をスライドさせています。
「指を置いたとき」「指を滑らせているとき」「指が離れたとき」それぞれのタイミングで座標を計測・計算すると加速度を算出できるので、あとは摩擦力を考慮して自然な触り心地になるよう調整を重ねています。

[走る馬]

12枚の画像をスマートフォンの画面横幅分(iPhoneだと320px)を0.4秒毎にスライドすることでパラパラ漫画のようになり、馬が走っているように見えます。
次の画像に移る間隔を1秒にするとゆっくり走り、0.1秒にすると高速で走り出します。
今回は、駆け抜ける疾走感を最も表現できている間隔が0.4秒でした。

下図のようにコマ送りの画像をコマ数分に分けてスライドすると、走るアニメーションになります。
※実際に見えているのは赤枠の部分

horse-run

最初は[横フリック]の操作、一定以上フリックすると自動で[走る馬]アニメーションに切り替えています。そうすることで、ユーザーが行ったフリック操作によって画像がシンクロし、馬が走りだす感覚が得られます。
あとはタイムラインアニメーションの要領で「レトロ馬→白馬→ご挨拶」と繋げています。この時、滑らかな動きを実装するためにCSS3 animation, transitionを活用しました。

3. 表現と技術的な障壁

スマートフォンでの表現は、アプリでは作ることができてもモバイルブラウザでは超えることが難しい障壁がたくさんあります。
例えばMobile Safari(iPhone標準搭載のブラウザ)では、画面スクロール中はsetTimeout, setIntervalのようなタイマー関数が停止する仕様のためアニメーションが遮られてしまったり、
スクロールを検知するタイミングがPCはスクロール最中ずっとに対し、スマートフォンは“スクロールが終了したときだけ”であったりと、PCサイトの制作では問題とならないような箇所が障壁となることがあります。

また、同じWebkitでもiOSとAndroid OSでは挙動が違ってくることがあり、iPhoneでは軽快に動作していてもAndroidでは処理をする領域を広げるとレンダリングが顕著に重くなってしまうなどの現象が起こりました。実機検証に加え、Androidエミュレータ『Genymotion』などで検証を重ね、障壁を超えてきました。

140108_img_00

このようにスマートフォンサイト実装の背景には制約や障壁が数多くあるので、どうしても特別な印象が残りにくい似通った表現のサイトになりがちです。
しかし、これはチャンスだとも考えられます。
障壁があるからこそ、競合サイトはまだ一歩踏み込めていない状況ではないでしょうか。

当ブログをスマートフォンで見られている方はお気づきかもしれませんが、モバイルファーストの視点で軽快かつ直感的に閲覧できるブログを目指しチャレンジを重ねました。私たちはスマートフォンサイトの表現力を高めるため、独自にライブラリを作りながら技術的な障壁を突破・蓄積する試みを続けています。
PCサイトだけでなくスマートフォンサイトでも多彩な表現をしたいとお考えの方がいらっしゃいましたら、一度お声掛けください。

≫ 2014年 お正月スペシャルコンテンツ