WebGallery

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

*

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

   

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

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

 

関山 中尊寺

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

 

住吉大社

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

 

せんぐう館

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

 

寒川神社

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

 

平等院

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

 

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

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

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

  関連記事

どの言語で閲覧してもデザインが崩れない

東京のデザインやファッション、食べ物や観光地・宿泊施設などを世界に紹介するWeb …

エイプリルフールに公開されたサイトをご紹介!第三弾「ロート製薬 NEXT SMART LIFE」

ロート製薬がエイプリルフールに公開した「NEXT SMART LIFE」の特設サ …

子供たちへの愛情がつまった地下足袋「FUM FUM」

化粧品やサプリメントを取り扱っているゲンナイ製薬株式会社と、靴の販売をしている株 …

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

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

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

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

2019年に流行しそうなwebデザイントレンド「ローディングアニメーション」を使ったサイト3選!

今年も1年が始まりましたね! 初詣にも行かず正に寝正月を過ごした私ですが、今年は …

ひし形のグリットを使って、授業風景などの写真を紹介している倉敷芸術科学大学のサイトがおしゃれ!

岡山県倉敷市にある大学「倉敷芸術科学大学 芸術学部」のサイトです。 ファーストビ …

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

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

多彩なアニメーションを使ったサイト

  私が言っていいものかどうか分かりませんが、懐かしきCyndi La …

アニメーションをゆっくりとした動きにし、筆のようなフォントや落ち着いた配色で重厚感を感じさせるデザイン

北海道沙流郡平取町にある「二風谷アイヌ匠の道」のホームページです。 黒・白・赤の …