今回は今年創業100周年を迎えるシャープのアニバーサリーウェブコンテンツ「ANNIVERSARY SHARE」を分析します。このコンテンツでは、自分や家族の「メモリアル」の瞬間を捉えた写真や動画を、その理由とともに投稿できます。結婚式や子どもの誕生日、初めて巨大な蛇に触った日など、さまざまな投稿に「Congratulations!（おめでとう）」が押せるようになっており、自社サイトに集まった人たちがお互いにおめでとうと祝福するという仕掛け。マーケティング視点での解説は、J-CAST ウェブサイト拝見でご覧ください。
ANNIVERSARY SHAREは写真投稿サイトです。
技術的な要素をあげると、
1.写真のアップロード
2.独自の投票システム
3.facebook、Twitterへのシェア機能
4.遷移の少ない気持ちいいUX
それぞれ見ていきましょう。
1.写真のアップロード
このサイトのメインの機能の一つです。
アップロードするには以下の二通りの方法があります。
・PC上のファイルを選択する
こちらはPCに保存された写真をアップロードします。
アップロードにはHTML5のfile APIが使われています。それによってドラッグ&ドロップでのアップロードを実現しています。
【参考】html5のFileReaderでドラッグ&ドロップなファイルのアップロード
file APIについてはまた機会を見て解説したいと思います。
スマホからではアップロードに対応していない
このアップロード方法はPCのみで有効で、スマートフォンでは特定のアドレスにメールを送ることになります。
iPhoneではSafariからのファイルの選択が出来ないためです。
・facebookのアルバムから選択する
こちらはfacebookとコネクトさせて、facebookのアルバムから写真を選択出来ます。
こちらであれば、スマートフォンでも選択して投稿することができます。
2.独自の投票システム
投票には「Congratulation」というオリジナルのボタンを設置しています。
一度クリックすると、24時間は同ユーザーからクリックすることはできません。
これはちょうど以下の回で紹介した全日空の「IS JAPAN COOL?」と似ています。
・HTML5 videoタグ、独自いいね！ボタンを実装したANA「IS JAPAN COOL?」
3.facebook、Twitterへのシェア機能
各作品にはfacebook/Twitterボタンが付き、シェアすることが出来ます。
オリジナルデザインのいいね! /Tweetボタン
こちらのシェアボタンはオリジナルデザインを使用していますね。
以前も紹介しましたが、以下の記事をご参照ください。
・Facebookの「いいね！」ボタンをオリジナルデザインに変更する
4.遷移の少ない気持ちいいUX
今回のサイトの特徴のひとつに、非常に遷移が少ない、ストレスのないユーザー体験があります。
二つ例を挙げてみていきます。
▽横スクロールで見せるグリッドフォト
▽ダイアログを重ねて表示させる
▽横スクロールで見せるグリッドフォト
滞在時間をぐっとのばす横スクロール
このサイトではトップページの左右の矢印を押すことによって投稿された写真がスライドしていきます。
これによって遷移することなく複数の画像を閲覧することができます。そうすることで多くのコンテンツを読者に提供することができ、結果として滞在時間をのばすことが出来るようになります。
仕組みとしては、以下のような順になります。
1) ページロード時に一度に画像を読み込み、横方向へ順に配置
2) 矢印ボタン押下時にを画面を横スクロール
3) 画像以外の部分はposition fixedで固定させたままにする
横スクロールの裏側には、jQueryのanimate関数とeasingプラグインが使われています。
また、positon：fixedが実装されていないスマート端末はjavascriptで調整しています。
▽ダイアログを重ねて表示させる
確認する程度のコンテンツは重ねてダイアログ表示させる
こちらはトップの「Post now!」を押し、その後にサンプルの写真を選択したときのキャプチャです。
2回クリックしていますが、ダイアログを重ねることにより、遷移せずに表示させています。
上のキャプチャの例では、投稿された写真を確認しています。このように、確認する程度の重要度の低いコンテンツは遷移させずにダイアログを重ねることで対応しています。
これは、主にCSSの以下の3つのパラメータで、制御しています。
a)position:fixed
b)display：none
c)z-index
ちょっと詳しくに見ていきましょう。
a)position:fixed
こちらは先程も出てきましたが、絶対位置でかつ固定位置を示します。
まず、絶対位置とはブラウザ内の左上からのpx数で位置を指定することを示します。
CSSの位置指定には、この他に相対位置指定(position:relative)があります。
相対位置指定では他の表示物との相対的な関係で位置が決まります。
詳しくは以下のリンクが参考にしてください。
・CSS : positionの「absolute」「relative」「fixed」のリファレンス
b)display：none
display：noneで指定された要素が非表示になります。
ダイアログは表示前はdisplay：noneになっており、クリックされたときのこのプロパティを変更して表示させています。
c)z-index
これは表示順番を制御しています。0を基準として、値が大きいものほど上になります。
これによってダイアログの上下を決めています。
以上、遷移を少なくさせる工夫の2点でした。
ソーシャルメディアと連携した、ユーザー参加型の写真投稿 / 投票キャンペーンを企画・提案・制作する機会は少なくないかと思います。ぜひご参考に。
