クリエイティブで話題にあがるウェブサイト。そこには、ユニークなアイデアが満ち溢れていたり、デザインの精度や高度な技術で驚くような体験が提供されており、学ぶべきものが多々あります。
この記事では最近話題になった国内のウェブサイトを5つ紹介します。
※2016年10月から2017年2月までの期間で、ICS編集部が「ユーザーにどのような体験を提供するのか」という部分が工夫されていると感じたサイトをピックアップしています。
五五七二三二〇 /「四味一体」MASHUP MUSIC PLAYER
日清シスコ株式会社のビスケット「ココナッツサブレ」のスペシャルコンテンツ。ココナッツサブレが4つの小分けなったことにかけて、4つの異なる楽曲と映像が提供されており、それぞれを同時に再生すると楽曲と映像がミックスされるという、ユーザーを驚かせる仕掛けが施されています。このサイトは海外でも評価され、インタラクション性の高いウェブサイトが数多く掲載されているブックマークサイト「FWA」でFWA OF THE DAYを受賞しています。
▲楽曲をマッシュアップしている様子。楽曲の切り替えとともに映像が変化します。※YouTube動画には音声はありませんが、サイトには音声があります。音量をオンにしてアクセスしてみましょう
映像はJavaScriptの3DライブラリであるThree.jsで実装されています。リアルタイムで描画しているので、ユーザーの操作に合わせた演出の切り替えが実現されています。
クレジットはPARTYのサイトに記載されています。主にDentsu Lab Tokyoや株式会社電通テック、株式会社BIRDMAN、株式会社ホムンクルスらが制作に関わっているようです。
KAWANO | セレクトショップ
アパレルブランド「KAWANO」のコーポレートサイト。ブランドのコンセプトである「シャープ」「セクシー」「エレガント」な雰囲気をガラスの破片で表現しています。一見ガラスの表現は映像にも見えますが、マウスを動かすと追従してカメラが移動し、ガラスの美しい映り込みの変化が楽しめます。このサイトもFWA OF THE DAYを受賞しています。
▲サイトの様子。ガラスの破片演出以外にも、さまざまな箇所に演出が施されている
印象的なガラスの破片が浮遊する演出はThree.jsで実装されています。ページ遷移時の破片がグーッと上る演出も見ごたえがありますが、グローバルメニューのマウスオーバーアニメーションやページ遷移時の文字の消える演出など、細かい部分にも演出が施されています。
クレジットは株式会社バケモノのサイトに記載されています。
MOZZ TOKYO(モズ・トーキョー)
動画制作会社MOZZ TOKYOのコーポレートサイト。実績の動画を最大限に引き立てるために、動画を背景全体で表示するという動きのあるサイトとなっています。各実績のマウスオーバーアニメーションは、ボタンの背景がゆらゆらと傾いたり文字がノイズのように揺れたりと、主役である動画の見やすさを邪魔しないように演出されています。
▲ボタンをマウスオーバーしている様子。
これらの演出は、CSS3のtransform属性などをJavaScriptから操作して実装されています。板はtranslate3dで傾け、文字は色と透明度の異なる文字列を重ねて上下左右に揺らして演出しています。とくに文字の演出は見た目に反してシンプルな手法で実装されており、実装者の演出の応用力が光っています。
クレジットは株式会社EPOCHのサイトに記載されています。
GREEN EMOJI MAP | キリン淡麗グリーンラベル
キリンビール株式会社が販売する発泡酒「淡麗グリーンラベル」のスペシャルコンテンツ。日本地図を絵文字で表現しており、ユーザーが自由に絵文字とコメントを変更することで、ユーザー同士で地図を作り上げていくものとなっています。メニューも文字ではなくすべて絵文字で表現され、最初のローディングのアニメーションも非常に作り込まれていたりと、ユーザーをコンテンツの世界に没入させる工夫と徹底さが見られます。
▲絵文字の日本地図が表示されていく様子。絵文字を瞬時に切り替えてアニメーションさせるという、絵文字の特徴にあった演出となっています
地図の拡大縮小などのUIはGoogle Maps JavaScript APIで実装されています。配置されている絵文字はユーザーが編集してTwitterやFacebookで共有できるようになっており、編集した絵文字の周囲5×5の絵文字がシェアする文章に含まれます。コンテンツ内の体験だけではなく、「ユーザーにどのようにシェアしてもらうのか？」というところも考えられています。
クレジットはPARTYのサイトに記載されています。主に株式会社電通や株式会社アドブレーン、株式会社FUTUREKが関わっているようです。
はみ文字 | はみ出しプロジェクト | 新しい学校のリーダーズ×コイケヤ
総合スナックメーカーのコイケヤが展開する「はみ出しプロジェクト」のスペシャルコンテンツ。コンテンツ内の入力フォームにカタカナや絵文字を入力すると、人文字（はみ文字）へ変換されます。用意されているはみ文字は、ターゲットである学生のシェア心をくすぐるようなちょっとおバカでポップなアニメーションになっています。
▲はみ文字ができるまでの様子。学生が友達に教えたくなるポイントが各所に散りばめられている
変換されたは端末内にGIFアニメで保存でき、ターゲットである学生が普段から使っているLINEやTwitterでシェアしやすいようになっています。
▲「アイシーエス」という文字列で作成したはみ文字のGIFアニメ
クレジットはWeb Designing 2017年4月号の「WD SELECTION」に記載されています。主に株式会社電通アドギアや株式会社電通、株式会社AID-DCCが関わっているようです。
最後に
今回紹介したウェブサイトはユーザーをあっと驚かせる仕掛けを施していたり、体験を友達にシェアしやすい仕組みが用意されていました。企画の段階で「エンドユーザーがどのような体験に感動するのか？」「どのようなものをシェアしたくなるのか？」がじっくり議論されているためと考えられます。
前回の記事「2016年夏〜秋のウェブサイトまとめ」でもあっと驚く仕掛けが実装されたウェブサイトが数多くありました。あわせてご覧ください。
ICS MEDIAでは普段ウェブサイトをチェックする時間が取れない方に向けて、その時に話題になっているウェブサイトをまとめた記事を定期的に公開する予定です。今後もご期待ください！
