いま,見ておきたいウェブサイト

第70回 フィッティングルーム(H&M),An explanation of the CSS animation on Apple's iPhone 4S webpage,Media Queries

この記事を読むのに必要な時間:およそ 2 分

朝だけでなく夜間の冷え込みも厳しくなり,ゆっくりと冬の近づきを感じ始めている今日このごろ,皆様いかがお過ごしでしょうか。今回も個人的に感じた,素晴らしいサイトの特徴をいくつかお話したいと思います。

無限に広がるコーディネート

フィッティングルーム | H&M

ファストファッションブランドのH&Mがウェブサイト上で行っている試着サービス,⁠フィッティングルーム』です。

図1 各種アイテムが自由に試着できる,H&Mの『フィッティングルーム』

図1 各種アイテムが自由に試着できる,

『フィッティングルーム』では,ユーザーがモデルに好みの各種アイテム(洋服やアクセサリーなど)をドラッグ&ドロップで試着させながら,コーディネートを楽しめます。ユーザーが選んだアイテムの組み合わせは,FacebookやTwitterなどのソーシャルメディアを使って共有も可能です。

図2 モデルの背後から試着の確認ができるなど,細かい変更が可能

図2 モデルの背後から試着の確認ができるなど,細かい変更が可能

男女のモデルの向きや各種アイテムの色,試着室の背景なども変更できる,細部にこだわりを感じるサービスになっています。

ソーシャルメディアの意見は,企業を動かすか

2011年6月末に,世界中のH&Mのウェブサイトで開始されたこの試着サービスですが,日本では公開から約4か月後,⁠モデルに面白いアイテムの組み合わせを着せて楽しむ」という,本来,企業側が想定しなかったサービスの使われ方で話題となりました。

やがて,ソーシャルメディアなどで話題が拡散するに従って,サービスに対するユーザーの意見が飛び交い始めます。その内容も「組み合わせが面白い」といった感想から始まり,次第にサービスの改善点が挙げられていくなど,企業にとって貴重な意見へと変化していきました。

今回の『フィッティングルーム』のように,ソーシャルメディアでは,いつ,どこで,どんなタイミングで注目が集まるのか,予測もコントロールもできません。このため,ソーシャルメディアの利用に対して,いまだに及び腰となっている企業も少なくありません。

とはいえ現時点では,ユーザーの率直な意見が聞ける"好機"であるのも事実です。こうした意見に素直に耳を傾けることができるのか。また,そうした意見を取り入れ,さらなる改善が進められるのか。今回の事例を含め,ソーシャルメディアによって企業側にどんな変化が起こるのか,今後も注視していきたいと思います。

あのウェブサイトの"タネ明かし"

An explanation of the CSS animation on Apple's iPhone 4S webpage -- John B. Hall

Appleのスマートフォン「iPhone4S」製品紹介ページで使用されている,CSSアニメーションの詳細を解説したウェブサイト,⁠An explanation of the CSS animation on Apple's iPhone 4S webpage』です。

図3 Appleのウェブサイトで使われているCSSアニメーションを解説している

図3 Appleのウェブサイトで使われているCSSアニメーションを解説している

credit:John B. Hall

ブラウザで実際にユーザーが見る領域(青枠のボックス部分)とそれ以外の領域を表示しながら,CSSアニメーションを使った移動や回転など,ダイナミックな画像の動きを説明しています。

特に,ブラウザで表示されない部分を含めて,実際の動きが確認できるのは,非常に面白いアイデアだと思います。

"タネ明かし"が生む,次のレベル

この連載でも,⁠ウェブサイトで,どんな技術が使用されているか」について言及することがありますが,文章で技術や仕組みのすべてを伝えるのは,非常に難しいことです。

このウェブサイトでは,実際の仕組みを動かしながら"タネ明かし"することで,使用されている技術をより深く理解できます。まさに"百聞は一見にしかず"を具体化したウェブサイトと言えるでしょう。

今後,似たようなウェブサイトを制作すれば,⁠あれを参考にしたな」と,ユーザーに与える印象は薄くなります。こうした印象を与えないため,制作側にはさらなるアイデアや工夫,努力が求められるでしょう。

以前,⁠手品のタネ明かし」が大流行しましたが,その後,公開されたトリックを知っていても驚いてしまう手品が次々と登場しています。同様に,こうした仕組みが公開されても,ユーザーを驚かせることのできるよりレベルの高い表現が生まれてくることを期待したいと思います。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入