「3年後に見ても面白いサイト」を目指した!西尾維新公式サイト制作の裏側 | 面白法人カヤック

『化物語』にはじまる<物語>シリーズや、昨年ドラマ化もされた『掟上今日子の備忘録』などで知られる人気作家西尾維新氏。同氏初の公式サイト制作をカヤックが手がけました。ファン垂涎の仕掛けが満載の同サイト。クライアントである講談社編集ご担当 矢島真理子氏とTBWA HAKUHODO(Data Arts Lab所属)インタラクティブプランナー栗林和明氏にもご同席いただき、クリエイティブディレクター天野清之、エンジニア中山祐平とともに、制作の裏側を聞きました。

「言葉遊びの面白さ」を存分に落とし込んだ公式サイト

― 制作のきっかけを教えてください。

矢島

2015年10月からアニメ『愚物語』と初の実写作品『掟上今日子の備忘録』の放送が決まり、一般の方が“西尾維新”の名前を目にする機会が増えるだろうとのことで制作が決定しました。春頃からお話を始め、6月頃に正式にお願いしたと思います。

― 今まで公式サイトがなかったのが意外ですね。

矢島

編集部としても制作したいという思いはずっとあったのですが、怒濤の刊行でめまぐるしくアップデートされるニュースやビジュアルを、シリーズを超えて統合するのが難しかったのと、何より西尾さんのスタイリッシュな作品イメージに堪えるサイトを制作しうるクリエイターになかなか出逢うことができずにいて。それが、2014年から博報堂チームとWebプロモーションでご一緒しはじめて、このチームとならきっといいものが作れると思ったんです。

― サイトのコンセプトはどのように考えられたのですか。

栗林

西尾作品の魅力を探すことから始め、やはり「言葉遊びの面白さ」がポイントだよねと。そこから「セルフリミックス」というコンセプトができました。Webにうまく落とし込むには相当なクリエイティビティとWebスキルがないと難しいと思いましたが、このチームならいけるな、と感じました。

「3年後に見ても面白いサイト」にしたい。

― 依頼時にカヤックの提示された条件を教えてください。

栗林

セルフリミックス小説をつくること、過去作のアーカイブかつポートフォリオにもなるサイトとして入口には各作品へのインデックスをつけること、そしてサイト単体でもエンターテインメント性が感じられる内容にすることが最初のプランニングで重要でした。

天野

それらを最初にお伺いした際、3年後に見ても面白いサイトにしてはどうかとご提案した覚えがあります。そのためには特殊かつ新しい技術も加えたいので、できれば最新ブラウザを主軸とした仕組みを考えたいと。

― どのあたりのブラウザを想定されたのですか。

中山

GoogleChromeやFirefoxの最新版、IEであればMicrosoft Edge、アニメーションはこの辺を想定しました。また、縦書きの珍しいデザインなので、ストレスのない操作感や美しい表示を保つよう意識して調整も加えました。今回はスマホサイトでのスクロールの快適さを重視したのでその調整が大変でした。

天野

短編小説に移動する時のアニメーションをスマホ版にも入れるかどうかは悩みました。スペック的な問題で一つのギミックに絞りましたが、操作感は気持ちよかったので、スマホでの縦書き横スクロールも意外とアリだなと。

中山

僕も実装しつつどうかと思いましたけど、意外と見やすいですもんね。

天野

実は、僕は前からやりたかったんですよ。一般的なUIは縦スクロール社会なのでもしかしたら怒られるかも…と(苦笑)。

技術と世界観を擦り合わせるチーム作業

― 縦書き表示は処理面などに特に違いはないのですか。

天野

いえ、入力できる文字に制限があるので矢島さんにずいぶんご相談しました。「100年」と書くとして1マスに入れるのか、1マスに何桁まで入れるか、それ以前に漢数字を使うのか…など、原稿のルールに関しては書籍の人間ではないのでお手上げで。

矢島

断片小説はもちろん西尾さんご自身が制作されていますが、サイトでは表示できない文字があることや、一行あたりの文字数が厳格に反映されることなど、制約を予めお伝えしました。密にやり取りして進めたので、単に寄稿しただけではなく、西尾さんも制作にコミットされたと言えますね。

― 表現と技術を融合させるための工夫ですね。

栗林

小説は各シリーズから抜粋された一文の集合体なので、それぞれの入口もできてありがたかったですね。西尾さんだからこその技だと思いますが、情報整理の意味でも美しいなと。

矢島

ご本人も自作を振り返ることで、発見が多かったと仰っていました。実は相当な過密スケジュールの中でお願いしたのですが、面白い企画だからと受けてくださったんです。

ファン目線を活かしたアニメーションとドメイン

― 実制作にはどれくらい時間がかかったんですか？

天野

約2カ月半ですね。断片小説をいただいた時点で一文ごとに作品に沿ったアニメーションをつける案を出していながら、諸々の問題で一度止めたんです。でも最終段階で思い直し、コンセプトと動きを固めてギリギリで中山に実装してもらいました。時間がない中でかなり無茶を言いましたね…。

矢島

私もWeb制作の知識がないのでどの段階でどこまでチェックすればいいのかわかっておらず、締切ギリギリになって表記を直してほしいとお願いすることになってしまい……。それでも即対応してくださって。

中山

そういえば前日でしたね。でも、僕にとっては楽しい思い出です(笑)。

― アニメーションのコンセプト例を教えてもらえますか。

天野

わかりやすい物だと「戯言」シリーズでしょうか。やはり「戯言だけどね」が一番重要な部分ですし、その文字をどう印象的に見せるか考えました。経験則として、ファン目線で見て「ここは押さえてほしい」という部分さえできれば、あとはかっこいい演出でなんとかなるなと。

矢島

この勘所がすばらしいんです。さらっと「『戯言だけどね』というセリフが大事」と仰いますが、未読の方にそれを理解してもらうのは実は難しくて。西尾さんは多作なので、読者にとってそのセリフがどれだけ重要か、作品ごとに説明するだけでも時間がかかってしまいます。それをスッと汲み取ってくださるとは！

―そういえば回文も作品のポイントですよね。ドメインもそうでは？

天野

はい。元のロゴがかっこいいので、サーバーのドメインを決める時にロゴみたいに回文風にしたいと話していたら「.in」が本当にインドにあるらしいと。「キター！」って勢いで栗林さんに相談したら「歴史に残るドメインキター！」と返事が返ってきて（笑）。

栗林

カヤックさんとのお仕事で一番勉強になったのは、ディティールの詰め方です。このドメインの話もそうですが、Twitterでシェアすると縦書きになる仕組みなどファンの心をくすぐる演出がたっぷり盛り込まれている。実際に口コミがどんどん加速していきましたし、さすがだなと感心しましたね。

「やっぱり西尾維新はすごい」と思わせるWebサイト

―ファンの反応はいかがでした？

栗林

一番は「やっぱり西尾維新はすごい」でしたね。それからこれは初めての経験なんですが、Web制作者、特にエンジニアさんの間では技術面が話題になったようですね。「誰がつくったの？」という書き込みをSNS上でもよく見かけました。

―今後、何か展開があったりしますか？

矢島

シリーズが増えると断片小説にも一文が追加されるはずなので、その楽しみもあるかと。サイト上で小説が生き物のように育っていく様子をぜひ見守っていただきたいです。

中山

スマホ版にもアニメーションをつけたいですね。来年ぐらいならバージョンもこなれて表現の幅も広がっている気がするので。

栗林

プラニングしたアイデアを実現するカヤックさんのプロフェッショナルなデジタルソリューション力を見せてもらえたことは素晴らしい経験になりました。今後どんな事が出来るか、非常に楽しみです。

最新の技術を扱いながらも、西尾さんの作品世界と魅力を全面に押し出していく。ファン目線を存分に活かし、時に客観的に効果を判断しながら制作するWebサイトはカヤックの得意分野です。新シリーズが登場するたびに成長するという同サイトの今後も楽しみですね。

西尾維新公式サイト
http://ni.siois.in/

このインタビューに登場したカヤック社員：
・クリエイティブディレクター天野清之
・エンジニア中山祐平

カヤックではWebサイト、アプリなど幅広い制作物を複数手がけています。