Global Agenda Turning Points2015

Global Agenda TurningPoints 2015 特設ページ

http://sp.mensclub.jp/fashion/globalagenda/2015/

Category:

Type:キャンペーンサイト

Concept:「未来の新聞ってこんな感じかな?」をイメージし、未来を感じさせるサイトに

Skill: / / / /

※プレーヤー右下の「Vimeo」をクリックしたリンク先のページで高画質版を閲覧できます。

The New York Times紙が世界31カ国で、年に一回刊行するグローバルマガジン「Global Agenda Turning Points」。 その日本版Webスペシャルページを製作させていただきました。
180日間の期間限定公開です。

本誌の実に約70ページ分をWebページ化。 『知的でグローバル、最先端なページに』というご要望から、発行元であるNew York Times紙をイメージさせる「News Paper」と「未来を感じる」をイメージソースに『未来の新聞』をキーワードにデザイン。
全編をpjaxという手法を使って作成し、閲覧者のアクションに対してシームレスかつダイナミックにページの内容が変化していくという新しい感覚を提供するデザインに。

Global Agenda Turning Points2015 - Responsive

「未来の新聞」であるならば、当然持ち運ぶデバイス上での閲覧が主と考え、モバイルでの閲覧性を特に重要視した。
同時に、多くの方にもご覧いただける状態にしたいとの考えからIE8までの閲覧に対応。(※pjaxがIE10以降しか稼動しない為、IE8,9では通常のページ遷移になります)
ビジュアル的には実際の新聞紙をスキャンして取り込んだテクスチャを背景に使用し、アナログなものの上でハイテクノロジーが稼働するといったイメージに。

Design & UX

global-agenda_ui

インタラクティブに切り替わるページレイアウト

特集のカテゴリー毎にまとめてレイアウトされている各リンクエリア。
そのいずれをクリックしたかによって、アニメーションと共にダイナミックにレイアウトが次々に変化。(※冒頭動画参照)どの特集カテゴリーかによってレイアウト構成を変更するという仕様に。

global-agenda_motion

複数パターンのコンテンツ切り替えモーションとコンテンツ表示モーション

表示するコンテンツによってコンテンツ切り替えモーションと、切り替わった後の表示モーションが変化。 多数のページを持つサイトの回遊時に変化を持たせ飽きさせないつくりに。

global-agenda_essay

ランダムに選ばれるスペシャルエッセイ

全11あるエッセイの中から、ページロード時にランダムに5つを表示。
「現在表示されている分がすべてではない」という示唆の為、ナンバリングはオートでの追加ながらもそれぞれのエッセイに与えられた番号を表示。

global-agenda_crossmedia

他のWebメディアと連携したコンテンツ

誌面上では写真として載せることしかできないが、同じWeb上だからこそ、せっかくならばと「実際のツイート」をページに埋め込み、その場でリアクションを行うことができるように。

JavaScript Not Working!

当サイトでは閲覧の快適性向上と、あなたの操作に対し応答を行う為にJavaScriptを利用しております。
JavaScriptがOffの状態ではこれらの機能が動作しません。本来の状態で閲覧するにはJavaScriptを「有効」にして、ブラウザの「再読み込み」をお願い致します。

» 各ブラウザでのJavascriptをオンにする方法