浅田真央選手の軌跡を描く朝日新聞デジタル「ラストダンス」ができるまで　新聞社にしかできないコンテンツ目指して（2/3 ページ）

公開 2014年03月07日 14時34分

更新 2014年03月10日 11時14分

[ITmedia]

印刷する Googleで優先するソースとして追加

記者、デザイナー、カメラマン、エンジニアが一緒に

　開発は、デザイン部の寺島隆介さんらのラフをベースにデジタル編集部のエンジニア陣が具現化するというプロセスで行った。一見、要望に応えてコーディングするスタイルに見えるが、より効果的な伝え方を記者やデザイナーと相談しつつ検討するため「むしろ自分のやりたいことや挑戦したい技術を入れ込める自由さがある」と以前はカーナビシステムのUXデザインに携わっていた佐藤さんは言う。

　現在同社で特集ページをはじめとした制作に関わる開発エンジニアは6人。前職はゲーム開発という白井政行さんは「テキストではなく視覚でどう伝えるか、一瞬で理解してもらうためにビジュアルとアニメーションをどう使うか。前職とジャンルは違うが試行錯誤の根源は同じ」と話す。

物語に引き込む最初の5秒

　とにかく、ページを開いた瞬間の動きに徹底的にこだわった。最初の数秒で「これは何かが違う」と思わせたい。権利的・技術的にできることとやりたいことの狭間でさまざまなアイディアが飛び交う中、普段は新聞紙面を制作しているデザイン部から出てきた案が「線画アニメーション」だった。真っ白な背景に浮かび上がる鉛筆の線画。64コマ、5秒間で浅田選手がショートプログラムの演技開始位置につくまでの流れるような仕草を描いた。物語のスタートだ。

線画は64枚にもなった

　「演技動画がWebで使えないために行き着いた案ではあったのですが、結果的に線画アニメーションの方がずっとよかった。映像はテレビで何度も流れるし、ネットでも公開されている。すでに読者の記憶にあるものをそのまま二番煎じで見せてもここまで印象に残らなかったはず」（古田さん）

　アニメーションが終わると、演技開始直後の浅田選手が氷上に立っている。この“立っている”静けさを伝えるため、画面サイズに関わらず必ず中央に彼女の写真が来るように、周囲の余白にスケートリンクが映えるように調整した。開発エンジニアの1人、佐藤義晴さんは「一番苦労したのはこの一連の始まり方。スクロール型のリッチコンテンツは最初のつかみで読者に前のめりになってもらうのが重要」と振り返る。

ウィンドウサイズに関わらず氷上に立っていることがわかるように

　没入感を高めるため、左にテキストが流れ、右の写真が切り替わってくスタイルを守った。目線を移動させることなく、全3章で計5000字にもなる文章を読みきってもらうためだ。浅田選手の幼少期や10代の頃の写真を交え、本をめくるようにストーリーは進行していく。

　物語は、リンクに次々と花束が投げ込まれて終わる。実際のフィギュアスケートと同じ光景だ。ラストの締め方を悩んでいたところ、「現場一番印象的なのはやっぱり」と写真部から出てきたアイディアだった。現場に居合わせ、被写体を追いかけているからこその発想だ。当初は写真1点を想定していたが、開発陣の熱意によりスクロールに合わせて複数の花束が投げ込まれるようなアニメーションに決まった。

　過去の記事や資料を元に、事前に制作できる部分を仕上げ、当日を待った。彼女の演技の写真とコメントが入らなければ完成しない。浅田選手はショート・プログラム終了時点で16位。その試合をリアルタイムに社内のテレビで観戦後、粛々と準備を進めるチームに一抹の不安がよぎった。「フリー、出ないなんてことがあったら」――。

次ページへ「朝日新聞、やるじゃん」　3日間で100万PV超え