これは、参考になる！「LiVE for WebLiFE*」で作成するリッチなスクロール型Webサイト集

様々なアイデアが光る！オススメLive10サイト

前回、Web制作ソフトウェア「LiVE for WebLiFE*」（以下略LiVE）で作成された優秀なサイトを紹介した。前回取り上げたサイトから見えてきたのは、LiVEで作成するスクロール型Webサイトは、その制作方法が比較的容易であり、創りたいテーマ自体に集中できるという点だ。筆者も簡単ではあるが、実際に作ってみたところ、できあがったあとの感覚はスケッチに絵を描いたときのような達成感がある。技巧もさることながら、自分の想うとおりに表現したいものが表現できた時にはそういう達成感をおぼえる。

「LiVE for WebLiFE*」を世に送り出すデジタルステージでは、ユーザーさんたちから自慢のWebサイトを毎月募集している。ニュースサイトやコミュニティサイトのような活字の"情報"を伝えるのではなく、どれもいわゆる右脳を刺激するような創造性を伝えようとする作り手の気持ちが伝わってくる。今回も、前回に引き続き、筆者が独断で選ぶWebサイトを紹介していきたい。

[PICK UP 01]　映画の世界観をそのままWebに落とし込んだような映画「白夜」公式サイト

最初に紹介するサイトは映画「白夜」の公式サイト。この映画はドストエフスキー原作の映画『白夜』を知る人ぞ知るフランスの名監督ロベール・ブレッソンが1971年映画化した作品。日本でも78年に劇場公開されたが、上映機会が少なかったためファンの間で幻の一作と呼ばれたもの。その公式サイトだ。

サイトは、利用する背景画像、テキストの配置、夜の街を流れるように動くスライドなど、まるで極上のパンフレットをそのまま見ているような気にさせてくれる。スライドの画像と流れは、映画の舞台である70年代のパリをイメージさせる色彩と夜の闇を美しく表現している。

サイトの作りは画像全面配置のシンプルな横スクロールながらも、厳選された映画の画像とストーリー性をもったスライドの配置、それによって醸し出される独自の雰囲気がある。

[PICK UP 02]　素材の質感まで伝わる写真がいい！「NEUTRAL」

ワークウェアブランドの「NEUTRAL」が新商品のプロモーションサイトとして作成したのもこのWebサイト。商品が気に入ればサイトからリンクでオンラインショップにアクセスして購入することができる。

商品の紹介サイトだけあってトップで使用されている超拡大画像は、デニムや皮などの素材感までよくわかるすばらしい出来栄えだ。また横スクロールのフォトギャラリーで様々なコーディネートをスライドでテンポよく見られるのも非常によい。

作者は、「プレゼンテーションサイトとして機能するように、写真の撮影からレイアウトまで、こだわりました。作品の魅力が肉眼以上に引き立つようなマクロ撮影を行いました。」と使用した画像に対して並々ならぬこだわりを見せている。作成のコツに関しては「複雑なことを意識せずスライドショーを作るような感覚で写真を配置する所からでもやってみるといいかと思います。それだけでも今までのサイトとはぜんぜん違うものになります！」という、初心者へのはげみになるコメントをいただいた。

[PICK UP 03]　子供たちの写真がまぶしい「20万人キッズスマイルプロジェクト」

「20万人キッズスマイルプロジェクト」は、群馬県内の幼稚園や保育園における子供たちの日常を「写真というカタチ」で子育てする父母に届ける。県内に笑顔を広げていこうという「So happy」が企画する地域活性化プロジェクト。活動を通して写真の撮影会や交通安全支援活動、震災復興支援活動などを行っている。

Webサイトは、かわいらしい子供たちの写真をたくさん使った五種類のフォトギャラリーとフォトアルバムで構成されている。これらの写真だけでも、見ていて思わずニッコリしてしまう。加えて、サイトに流れるBGMもイメージにピッタリあっていて、これもまた印象的だ。スライドのデザインはオーソドックスながらもコンパクトにまとめられており、複数のスライドも適切に使われているように思う。つくづく、コンテンツが重要であるということを感じさせてくれる。

[PICK UP 04]　音楽とビジュアルが融合した表現者のための実験サイト「the universal soul playing lab」

「the universal soul playing lab.」は、アーティストである「the universal soul」氏が自身の活動の基盤として立ち上げた実験的ディスコグラフィーサイト。

音楽はスライドごとに違う贅沢な仕様だ。ドキュメントスライド内にも別の音源が配置されており、一部の音源は、ダウンロードすることができる。ディスコグラフィーのページでもたくさんのBGMを聞くことができる。また、音楽だけでなく使用されている画像もサイトのイメージにマッチしている。音楽と映像という言葉では語り得ないものを巧みに使っていることがわかる。

現役ミュージシャンの作成したサイトだけに当然、BGMはすばらしい。トップページからテクノ調のオリジナル音源が流れ、背景も黒をベースに似顔絵をモチーフにした画像を配置している。

PICK UP 05　写真屋への思い入れが光る「写真屋 春光社」

「写真屋 春光社」のWebサイト。同社が行っている「記念撮影」や「デジタル変換」、「アルバムカフェ」などの業務がスライドでわかりやすくまとめられている。

サイトはトップページがシンプルな横スクロール構造になっており、そこから縦スクロールのフォトギャラリーページへ流れる構造になっている。「Camera ＆ Goods」のページではカメラやフィルムなどが背景と別に流れるように動くパララックスが活用されている。カメラというご自身のアイテムに対する思い入れが文章やキャッチからも伝わる。"「一瞬」の思い出を、「一生」の楽しみに"にある文章は、まさにLiVEにも当てはまると思った。写真家や芸術家の写真表現というと、遠い存在に思うかもしれないが、あなたが撮った写真だから価値があるという写真もあるという主旨のメッセージ。

「記念撮影」ページは、お宮参りや七五三など子供たちの伝統行事がフォトギャラリーで子供の成長に合わせて流れるように見ることができる。

[PICK UP 06]　思わずスイーツが食べたくなる「The Official Site of patissier Nishikawa Kenji」

2012年度の"KOBE Selection"にも選ばれたパティシエ西川健司氏のWebサイト。氏の提案するコンセプトと作り上げるスイーツの数々を見せつけられる。

ページの構成はシンプルながらスライドに全画面で貼り付けたスイーツの写真が印象に残る。これらの写真に加えて、フルーツタルトの作成模様を撮影したモノクロ風にアレンジした動画を見ることができるスイーツの躍動感ある鮮やかな色。モノトーンの背景から赤、黄、緑が画面から浮き出てくるように構成してあるのがわかる。

画面いっぱいに映し出されるフルーツタルト、カヌレ、シフォンケーキなどの画像は、まるで甘い香りや食感まで感じてしまったのは筆者だけであろうか。

[PICK UP 07]　カフェの雰囲気がそのまま伝わってくる「CAFE BOWL」

名古屋でフード＆ドリンクを提供するカフェ「CAFE BOWL」のWebサイト。サイト内で一部のメニューや店内模様、レンタルスペースの予約の確認なども可能だ。ページは縦スクロールのシンプルな構成。スライドに全画面で貼り付けられたカフェの写真とメニューの画像。

そして、店内を様々な角度から写した「店内アルバム」はカフェの雰囲気を前面に出したもの。料理もさることながら、たしかにカフェでは場の雰囲気も事前に知りたいものだ。中庭と陽射しが差し込む、広い空間でマッタリ。そんなイメージでの時間の過ごし方を想像してしまう。

[PICK UP 08]　現場の熱さが伝わってくるWebサイト「株式会社三進商会」

昭和22年創業の塗装一筋の神奈川県の会社「株式会社三進商会」のWebサイト。同社は、一般社団法人「エコステージ」のステージ3を同業他社に先駆けて取得。「塗装」というカテゴリの中で環境問題に対しても積極的に取り組んでいる。

サイトの構成に関しては、スライドショーと縦スクロールを組み合わせたシンプルなもの。写真は働く人々、様々な道具にスポットライトを当てている。

このWebサイトで特筆すべきは、なんといっても塗装の現場を写した圧倒的な写真の数々。クレーンで吊された大きな対象に塗装を施すひた向きな仕事が喚起される。それを取り囲むように、いろんな機材が出番を待っているかのようだ。サイトの制作者の「ganecchi」氏は、環境問題に真剣に取り組んでいる姿を塗装の現場、塗装に関わるすべての「人」を焦点に合わせて写真撮影を行ったという。そういった思いがあますことなく表現されている。

[PICK UP 09]　現代に生きる鍛冶屋が伝える薪ストーブのある暮らし「『鉄の仕事屋』の薪ストーブ造り」

現代に生きる鍛冶屋「鉄の仕事屋」が送る薪ストーブのある暮らしをテーマとしたWebサイト。薪の集め方から、使い方、そして作り方と薪ストーブに関する思いがまとめられている。

「薪づくり」から「薪ストーブのある暮らし」、「巻きストーブの作り方」という大きく三つのコンテンツで構成されている。コンテンツは、ストーリー仕立てになっている。

魅力的な自然と薪ストーブの写真もさることながら、このWebサイトの最大のポイントは、薪の入手方法、ストーブを所有する魅力、鉄で作る薪ストーブのすばらしさをスライドで見事に表現している点だ。思わず薪ストーブが欲しくなる見事な"プレゼンテーションサイト"といってもいいだろう。

[PICK UP 10]　21周年を迎える尾道市立土堂小学校の恒例行事「土堂っ子太鼓」

今年で21周年を迎える尾道市立土堂小学校の恒例行事「土堂っ子太鼓」を紹介するWebサイト。土堂っ子太鼓の成り立ちや活動、太鼓の演目、過去の演奏の動画へのリンクが掲載されている。

構成は土堂っ子太鼓の成り立ちとその活動をまとめた「土堂っ子太鼓とは」のスライドが中心。このスライド内に掲載された太鼓の練習に励む子供たちの活動の記録写真そのものが、このサイトのメインコンテンツだ。

サイトに多数掲載されている「土堂っ子太鼓」に打ち込む子供たちの姿、それを見守る先生や地域の大人たちの姿、太鼓にまつわるエピソードをまとめたフォトギャラリーやスライドショーが感動的だ。