WebGallery

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

*

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

   

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

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

 

関山 中尊寺

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

 

住吉大社

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

 

せんぐう館

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

 

寒川神社

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

 

平等院

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

 

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

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

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

  関連記事

シネマグラフを使った写真が印象的!「京都 宇治 伊藤久右衛門」のサイト

「京都 宇治 伊藤久右衛門」のホームページです。 ファーストビューのスライダーが …

フラットデザインで見やすい

  大阪経済法科大学のサイト。フラットデザインのイラストがとてもおしゃ …

アニメの世界観を大切にしたサイトがカッコよくておしゃれ!

2017年の10月に放送が開始されるアニメ「魔法使いの嫁」の公式ホームページです …

画面いっぱいに表示されるメニュー

愛知県にある栽培支援システム開発会社「株式会社プラントライフシステムズ」のホーム …

文章よりも映像や写真を使って社内風景を見せたサイトがシンプルでカッコいい!

福岡県福岡市に本社をかまえる「株式会社メディアコンテンツファクトリー」のホームペ …

色鮮やかな染め物の映像の上に、虹色のアニメーションを重ねてさらに綺麗に!

岐阜県羽島郡笠松町にある染め物屋さん「丸京染色株式会社」のホームページです。 フ …

トップの部分だけでなく、色々な場所で背景に動画を使用する

毎年夏に東京ビッグサイトで行われるアートイベント「万国學生藝術展覧祭 學展」のホ …

コントラストの強い配色で高級感のある雰囲気を演出したサイト

フランスのファッションデザイナー「pierre cardin」の日本公式サイトで …

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

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

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

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