HW17A177　松井凱
指導教員　倉地宏幸

制作の動機・目的

　パララックスとは、直訳すると「視差」という意味で二地点での観測地点の位置の違いにより、対象点が見える方向が異なることを意味する。Webデザインにおけるパララックスは、スクロールといった動作に応じて、視覚要素を異なる
スピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法のことを指す。パララックスサイトは主に観光地や期間限定のキャンペーンのサイトなどに使われている。

　このパララックスを使って大阪を舞台にした文芸作品「初天神」を制作しようと考えた。初天神とは、松富久亭松竹の作とされており、年始の天満宮に参拝に来た父親と息子の物語である。主に落語として語られることが多く、わがままな息子に振り回されて困惑気味の父を、やや冷めた目線でシニカルかつ風刺的に描いている。
　

　How Walking Dead Zombies Are Madeというテレビドラマのキャンペーンサイトがあり、スクロールするだけでキャラクターが左から右に歩いて行き、背景が変わったり吹き出しが表示されてキャラクター同士の会話があったりと、見ていてとてもおもしろいと思ったのと同時に、パララックスを用いてこんなことができるのかと興味を持った。そして自分もパララックスを使ってこんなことをやってみたいと思った。

制作の内容

初天神の物語の風景をパララックス効果を用いて表現したウェブコンテンツを制作した。開発にはAdobe Dreamweaverを使用しHTML、CSS、jQueryのコーディングを行なった。
　

　人物や背景などそれぞれのレイヤーごとにスクロールの速度を調整し、人物などは速くし建物や背景は遅くすることによって奥行き感を表現した。初天神に描かれている当時の人の姿や街並みなどを表現するために大阪市立図書館デジタルアーカイブが公開している浮世絵などの資料を使用した。このデジタルアーカイブは大阪井市立中央図書館が所蔵している古文書や写真、絵葉書、地図などの画像が計約13万枚以上閲覧可能で、商用利用、二次利用、画像の加工を行うことができる。

成果

落語の初天神でしか知らない人に対して、パララックスを用いて落語の中では表現されていない街並みや初天神の賑わいを視覚的に表現できた。動画や落語のようにただ流れているものを見ているのではなく、ユーザーが能動的にストーリーを進めることで興味を深められる、落語とは全く違う形の初天神を表現することができた。

初天神⇦こちらから作品を閲覧できます。