WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

ファーストビューに動画を取り入れた神社・お寺のサイト5選

   

数年前から背景に動画を使用したデザインをよく目にするようになりました。
動画を効果的に使用して、ユーザーに伝えたい情報を分かりやすく、印象的なサイトになります。

日本でも増えていますが、今回はトップページのファーストビューに動画を取り入れている神社・お寺のサイトを5つご紹介します!

 

関山 中尊寺

四季折々の神社の風景が撮影された動画を使用しています。上下に黒い余白をつけることで、映画を見ているような気分になります。動画自体に色味を抑えた加工をしており、重厚感のあるファーストビューになっています。
スマートフォンでの表示は、動画ではなく縦長の写真を使用しており、スマホからでもスムーズにサイトが表示されるように工夫されています。

 

住吉大社

こちらは1つめに紹介した中尊寺のサイトとは変わって、陽の光が当たる神社の動画を使用しており、暖かみのあるホームページになっています。
様々なアングルから撮影された神社だけでなく、行事の様子や内装なども一緒に撮影しており、境内の様子もよく分かるようになっています。

 

せんぐう館

こちらは伊勢神宮の「式年遷宮」を紹介している博物館のサイトです。
「遷宮」とは、神殿を建て替えたり修理を行う時に神霊を仮殿(かりどの)と呼ばれる一時的にご神体を安置する場所から本殿に移すことを言うそうです。(知らなかった!)
見出しのフォントや要素を表示させる時にアニメーションを使って、タイミングよく表示されるようになっています。

 

寒川神社

こちらは一見写真に見えますが、明かりが灯っている部分のみ動く「シネマグラフ」を使っています。
その写真の上には薄く霧がかったようなアニメーションを使用しており、神聖な神社の雰囲気が出ています。スクロールすると雲が流れるアニメーションを使って、下に降りていくようなモーションが使用されています。
また、メニューにカーソルをホバーさせると、それぞれの内容に合わせた動画が切り替わるようになっています。

 

平等院

世界遺産の一つ「平等院」のホームページです。
音楽をつけるのではなく、鳥の鳴き声やセミの声、川のせせらぎや砂利を踏む足音など、まるで自分が平等院を間近で見ているような臨場感のあるファーストビューになっています。
右下に固定された「トップに戻る」ボタンは、平等院のトレードマークでもある鳳凰を使用していますね!

 

神社やお寺の美しい外観や内装をファーストビューで紹介することで、ユーザーの興味を引き、SNSを利用したりサイト全体にアニメーションを使用したりすることで、神社やお寺の「古臭い」といったマイナスのイメージを払拭しているデザインばかりです!
神社やお寺のサイト巡りも、色々な発見があって面白いですよ!

以上、ファーストビューに動画を使用した神社・お寺のサイト5選でした。

 - 動きで表現, 映像で表現, 神社・寺

  関連記事

動画・写真を活用した重厚感のあるデザインの酒造会社のサイト4選!

先週から暑い日が続いていますね…最近は「暑い」しか言っていない気がします。 夏の …

地域の土地・文化・人とのつながりを大切にしたアロマブランド

日本の地域の土地や人・文化とつながりながら各地の香りを展開するアロマブランド「N …

国内の観光スポットを、30秒の動画を使って紹介している「30 seconds trip」のサイト

人気の観光スポットを30秒の動画で紹介する「30 seconds TRIP」のホ …

遠近感のあるサイト

  動物病院のサイト。可愛いイラストを使って構成されており、親しみやす …

かき氷ができるまでを撮影した映像は、インパクト大!「新食感」のかき氷で暑い夏を吹き飛ばそう!

台湾生まれの”新食感”かき氷専門店「ICE MONSTER(アイスモンスター)」 …

背景を道に見立てたデザインの地図アプリのサイトがおしゃれ!

株式会社Strolyが制作した地図アプリ「Stroly」のホームページです。 フ …

「ACSL」のサイトのフライトシミュレーションがとにかくスゴい!

「ACSL|株式会社自律制御システム研究所」のホームページです。 ファーストビュ …

ロゴマークの表示を統一することで、ページにアクセントをつける

福岡県福岡市にある「がんこクリニック」のホームページです。 まず初めに、画面いっ …

ブロックボタンの見やすいサイト

写真やボタンをブロックにしてデザインしているサイトです。ブロックすべてがボタンに …

商品の見せ方がオシャレでかっこいい!ガトーショコラ専門店「Chocolaphil」

ガトーショコラ専門店「Chocolaphil」のホームページです。 鮮やかな青い …