本誌の原稿を一通り拝見させていただいて、「これは非常に素晴らしい内容だ！」と感銘を受けました。しかも本国アメリカ版での掲載内容のほぼすべてを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」という技術を用いることにしました。

pjaxという新しい技術

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

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

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

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

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

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

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