WebGallery

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

*

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

   

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

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

 

関山 中尊寺

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

 

住吉大社

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

 

せんぐう館

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

 

寒川神社

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

 

平等院

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

 

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

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

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

  関連記事

浴衣の色合いや金魚を使って清涼感を出した「鈴乃屋ゆかたコレクション2018」のサイトが綺麗!

鈴乃屋ゆかたコレクション2018「2018 YUKATA COLLECTION」 …

文字を光らせ幻想的な世界観を創造する

  えのすい(新江ノ島水族館)で行われるナイトワンダーアクアリウムの特 …

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

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

永く使えるやさしい傘の専門店のムービーがカッコいい!

東京都渋谷区にある傘の専門店「株式会社 Caetla(サエラ)」のホームページで …

愛媛ならではのサイクリングコースを紹介した「ゆっクル」

愛媛ならではの温泉めぐりのサイクリングコースを紹介している「湯めぐりサイクル」の …

コンテンツの区切りを波のアニメーションにすることで、ワインぽさを演出したサイト

山梨県笛吹市にあるワイン製造工場「モンデ酒造」のホームページです。 コンテンツの …

メッセージ性が強い!ヒーローヘッダーにこちらを見る動物の写真を使ったサイト5選

一昨年の9月あたりから猫を飼い始めたのですが、飼うようになってから分かるようにな …

今後の参考に!スタイリッシュなアニメーション効果を使ったサイトをご紹介!

コーディングをしているときに「どんなアニメーションをつけようか」と考えるのが1つ …

「ミルク王国」という世界観を大切にしたデザイン

石川県河北郡内灘町の「ミルク王国ウチナダ」のホームページです。 パステルカラーの …

ついついボタンを押したくなる「伊勢丹新宿店 食品フロアのツボ」

伊勢丹新宿店の食品フロアガイド「伊勢丹新宿店 食品フロアのツボ」のホームページで …