Global Agenda Turning Points2015

Global Agenda TurningPoints 2015 特設ページ

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

Category:

Type:キャンペーンサイト

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

Skill: / / / /

Back Stage!

本誌の原稿を一通り拝見させていただいて、「これは非常に素晴らしい内容だ!」と感銘を受けました。しかも本国アメリカ版での掲載内容のほぼすべてをWebページ化(※)するという企画だった為、これは是非とも多くの方に読んでいただきたいと考えました。
しかしながら、完全に「読み物」である本誌。文章量も非常に多く、ページが増えれば増えるほど読み切るには大変な労力が要ります。そこで、本案件の重要コンセプトとして『多くのページを読んでもらいやすくデザインする』を第一に考え構成していきました。

※Global Agenda Turning Points2015の日本版には専用のコラム・エッセイが多数掲載されています。日本版専用のコラム・エッセイに関しては一切Webページ化されていません。

The New York Times様とハースト婦人画報社様のダブルチェックと『知的でグローバル、最先端』というオーダー

同時に、この案件のお話をいただいた際、日本版発行元のハースト婦人画報社様の担当の方から「Global Agendaは社としてもかなり力を入れている」との一言をいただき、これはいつも以上にしっかりやらなければ、と気を引き締めていたところ「New York Timesのチェックもあるのでそのつもりで…」という追記もいただき「ああ、これは本当に大変な案件になるだろう…」と身震いしたものです。

担当の方からいただいたオーダーは『知的でグローバル、最先端』ー
この中の「最先端」というキーワード、実は結構難題です。
なぜなら、アメリカはWebならびにそれに付随するテクノロジー面では間違いなく世界最高峰であり中心。この分野での日本の常識はメッカであるアメリカからすれば「ひどい型遅れ」もいいところです。そこにある老舗メディアを唸らせなければならない。これは非常にハードルの高いものでした。

その上で、「文章量の多い多数のページを読んでもらう」というコンセプトも両立させる。
様々なものをリサーチしながら暗中模索で『パズルを組み立てる感覚』でのスタートでした。
…しかし、この時のこの『パズルを組み立てる』というキーワードが後々重要な意味を持つことになります。

多くのページを回遊していただくために、工夫。

当初、誌面の70ページほどのページをWebサイト化と聞いて「さて、どうしたものか…」とかなり悩みました。
基本的に「読み物」だった本誌は、1つのコラム・エッセイが「文章のみで数ページ」。1つのコラム・エッセイを1ページにしたとしても21ページものページ数になりました。特設サイトとはいえ、これだけものページ数を閲覧してもらうには工夫が必要です。web上で多数のページをまたいで閲覧するのは結構な重労働です。同じ分量の本を読むよりずっと大変で疲れます。
また、ページ間の移動も非常に面倒です。

そこで考えたのが「非同期通信での入れ替え」でした。これはAjaxという技術を用いて内容を差し替えていく方法があります。 Ajaxを利用すると、通常のページ移動よりも早くページ内容を切り替えることができる為に、移動の際のストレスを軽減させることもできます。 しかし、これだけではまだ不十分。ただ入れ替わっていくだけでは単調で5,6ページも読めば飽きがきてしまいます。 また、最先端なイメージにもちょっと足りない。
加えて言うと、切り替わった後、「前の内容を見たい」際はブラウザの「戻る」などが効かない為、非常に不便です。

これらを解決する手段として、今回「pjax」という技術を用いることにしました。

global-agenda_pjax global-agenda_history

pjaxは非同期で内容を差し替えると同時に、ちょっとした演出も加えられ、かつブラウザの「戻る/進む」も有効になるため、ユーザビリティも高まります。 この演出を凝ることで、次のページへ進む際の期待感も膨らませつつ、「飽き」を軽減することができるようになりました。

pjaxを用いることで、まだ多くの方が体験したことのない新鮮なユーザー体験を提供できるようになりました。
ただ、これでもまだ足りない。そこでpjaxをさらに掘り下げ
「まだこういった使い方をしているところはない」が、こういうものがあると面白いな、というつくりにデザインしました。

pjaxという新しい技術

「新しい」とは言うもののpjax自体は実は結構以前からあった技術ではあります。pjaxは「Ajax」と「pushState」という二つの技術が組み合わさったもので、
ユーザビリティの向上と、新しいユーザー体験をもつくることができる画期的で素晴らしい技術です。
しかしながら、実装には少々手間がかかり、実装していても(知っている人以外には)さほど気づかれないというものでもありました。

ブラウザにヒストリーを追加する方法はpjax以外にもあります。代表的なものでは「#」を使うハッシュというものがあります。

しかしそれらの中でもpjaxが非常に優れている点があります。 pjaxによって書き換えられたURLは「見せかけのURLではありません」。実在するため検索からでも表示可能です。

pjaxでの複数エリアのコンテンツ切り替え

今まであったほとんどのpjax利用サイトでは、コンテンツ切り替えを行うのは一つのエリアでのみでした。 「複数エリアでの切り替えも可能」と記載はされていても、実装しているサイトもありませんでした。 しかし、今回最初に思いついたアイデアとして「コンテンツが切り替わる際に、レイアウトまで変化する」という構造を実現するためには複数エリアでの切り替えが必須でした。

ただ、この実現は非常に困難で、思ったよりずっと実装に手間取りました。 最終的にWordPressなどのCMSの構築からヒントを得て、一つのベースとなるテンプレートファイルの上に、パーツを並べてパズルのように組み替えていく、というかたちで実現させました。

そう、このアイデアはBack Stage最初の文脈の最後にあった『パズルを組み立てる感覚』から着想を得たものです。苦しい中のイメージが意外なブレイクスルーのアイデアになるとは、本当に何が起こるか分からないものです。

Author's Comment

Designer: 深井 学

実は手放しに喜べない結果

この案件も身に余る光栄なお話でした。
しかしながら本当に時間が無い中での製作だったうえ、少々ややこしいプログラムを書いたせいでバグのオンパレードになってしまい、気持ち的に非常に追い込まれてしまいました。
ハースト婦人画報社の担当の方が本当に親身になって色々と助けて下さったお陰で乗り切れたもので、担当の方の助力無しには完成させられなかったものでした。

最終的にはハースト婦人画報社様のチェックも無事通り、New York Times様にも仕上がりをお褒めいただけたのは大変嬉しく、自信にもつながりましたが、正直なところ最終納品時にもバグを完全に見つけきれていなかったという「完成」とはなかなか言い難い完成度で、大変光栄で恐悦至極な案件だったにもかかわらず、苦い思い出となってしまったことが心残りではあります。

この悔しさをバネに、今後は一層精進し、最終的なクオリティにもっともっと拘っていく所存です。

JavaScript Not Working!

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

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