朝晩の寒さが厳しくなるとともに、街のいたるところで紅葉が色づき、秋の深まりと冬の近づきを感じつつある今日このごろ、皆様いかがお過ごしでしょうか。今回も個人的に感じた、素晴らしいサイトの特徴をいくつかお話したいと思います。
「Type R」で見えてくる、裏の世界
2015年の夏に販売が予定されている「HONDA Civic Type-R」のYouTubeチャンネルを使ったプロモーション、『The Other Side』です。
図1 YouTubeを利用した「HONDA Civic」のプロモーション『The Other Side』
credits：Wieden + Kennedy London、Stinkdigital、Somesuch & Co、The Mill、Factory UK
「HONDA Civic」に乗った父親が、娘たちを迎えに行くシーンからスタートする動画を再生すると、"PRESS AND HOLD THE R KEY TO SEE THE OTHER SIDE（裏側を見るために、Rキーを押したままにしてください）"というメッセージが表示されます。
図2 動画を再生すると、メッセージが表示される
キーボードのRボタンを押すと、「The Other Side」というタイトルが表すように、「HONDA Civic Type-R」に乗った父親の別の姿を映した動画に切り替わるという仕組みです。
動画のプロモーションは、どこで行うべきか
『The Other Side』の素晴らしい点として、動画に登場する「HONDA Civic Type-R」に合わせ、「Type R＝Rキーを押す」仕組みを採用したことが挙げられます。意味もわかりやすく、動画を切り替えるたびに"Type R"を自然に意識するようにできています。
図3 Rキーを押すと、同時に再生されている2種類の動画が切り替わる
また、プロモーション自体をYouTubeのチャンネルで行っている点も特徴的です。動画を中心としたコンテンツであれば、わざわざプロモーションのためにウェブサイトを立ち上げる必要もないのではと思わせるほど、よくできています。
ユーザーにしてみれば、プロモーションがどの場所で行われようと、アクセスできれば問題はありません。YouTubeを利用することで、コンテンツの拡散を期待できる点は、クライアント側にも大きなメリットでしょう。「動画を利用するプロモーションは、動画の得意なYouTubeで」という事例が当たり前になるのも、そう遠いことではないかもしれません。
AIが変える、ウェブサイトの構築
AI（人工知能）の力を利用して、自動的に最適なウェブサイトを構築できるサービス、『The Grid』です。
図4 ウェブサイトの構築に、AIを利用する『The Grid』
『The Grid』は、ユーザーがテキストや画像、動画などを用意するだけで、コンテンツ内容に最適な構成（デザインやレイアウトなど）をAIが自動的に判断し、ウェブサイトを構築するというサービスです。
図5 ウェブサイトでは、AIを利用することで、自動化されるサービス内容が並んでいる
ウェブサイト構築後も、電子商取引やソーシャルフィード、レイアウトの変更といった単純な機能の追加・変更だけでなく、ニーズの変化（「ショップの売上目標を達成したい」「訪問者数を増加させたい」など）に応じて、ウェブサイトを最適化（進化）させることも可能です。
AIを利用することで、最近増加しつつある「コードやデザインができなくても簡単にウェブサイトが構築できるサービス」とは一線を画した、画期的なサービス内容となっています。
画期的なサービスは、実現するか
グリッドやタイポグラフィの最適化、顔検出と画像の最適なトリミングの自動化、ショッピングカートの追加、ドラッグ＆ドロップを利用したモバイルツールの提供、コンテンツの追加によるレイアウトの自動変更、A/Bテストの自動化など、紹介されているサービスは、まるで夢のような内容です。
『The Grid』の概要を説明した動画
実は、この『The Grid』、まだサービスを開始していません。ウェブサイトでも募集しているように、現在はクラウドファンディングを通じて、開発資金の調達や創業メンバーとしての出資を募っている段階です。
今のところは「こうしたサービスが、本当にAIを使って実現できるのか」と半信半疑の状態ですが、FAQによれば、2015年の春に第1弾のサービス開始、2015年の終わりにはeコマースエンジンの公開が予定されているとのこと。実現すれば、大きなインパクトを与える本格的なサービスの開始まで、注目していきたいと思っています。
わずか5秒で学ぶ、コードとデザイン
わずか5秒の動画を使って、コードとデザインのレッスンを行うウェブサイト、『Madrassa』です。
図6 "5秒のGIF"を使って、コードとデザインのレッスンを行う『madrassa』
コードとデザインのレッスンを行う『madrassa』">
コードとデザインのレッスンを行う『madrassa』" title="図6 "5秒のGIF"を使って、コードとデザインのレッスンを行う『madrassa』" />credit:Karim Amrani
アラビア語で「学ぶ場所」の意味を持つ『Madrassa』では、"Code & Design Courses Reduced To 5sec GIFs"（5秒のGIFに単純化したコードとデザインのコース）のメッセージ通り、5秒のGIFアニメーションを使って、コードの書き方とデザインが学べます。
図7 GIFアニメーションを使い、アプリのプロトタイプを制作するステップが説明されていく
現在、ウェブサイトでは、紙、ペン、モバイルアプリの「POP」を使った、「Prototype Your App Ideas In A Couple Of Minutes（数分で作るアプリのアイデアのプロトタイプ）」が無料で公開されています。
短くなってきた、ユーザーの動画に集中する時間
身近な映像表現の一つであるコマーシャルよりも極端に短い、「わずか5秒の動画で学ぶ」という『Madrassa』を初めて見た時には、「これはジョークかも」と一瞬思いました。
しかし、「Vine」（最長6秒の短いループ動画を共有できるアプリ）のようなアプリが普及していることを考えると、ユーザーが動画に注目してくれる時間は、思っている以上に短くなっているのではないかと考えています。
短い動画をつなげて制作された「HP Pavilion x360」のプロモーション動画
事実、こうした流れを受けて、海外では数秒単位の短い動画をつなげたコマーシャルが登場しています。動画を最初から見られなくても、ユーザーが途中から視聴に注目できるような、変化が多く飽きさせない作り方は、これから重要視されるでしょう。
視聴するユーザーの集中力と、動画への注目を切らさないために、こうした制作方法を採用するコマーシャルは、国内外で増加していくと思われます。もちろん、コマーシャルはウェブサイトで利用される動画とは異なります。とはいえ、動画を利用する場面が増えてきているウェブサイトにおいても、変化の流れを汲み取りながら、それらをどのような形でコンテンツの中に生かすのかを常に考えていく時代に入ったといえるのではないでしょうか。
というわけで、今回も最後まで読んでいただき、ありがとうございました。それでは次回をおたのしみに。
コードとデザインのレッスンを行う