WebGallery

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

*

デザインの参考にしたい!スプリットスクリーンを使った旅館のサイト3選!

   

「分割式スクリーンレイアウト」や「分割式レイアウト」とも呼ばれるスプリットスクリーン。レイアウトは同じでも、動きや使い方は異なっていて見ていてとても面白いです!

今回は画面を分割した「スプリットスクリーン」を使った旅館のサイトを3つ紹介します!

 

別邸 越の里

新潟県にある温泉旅館のサイトです。
黒と金を基調とした高級感のある雰囲気のデザインです。左側にメニュー・右側にスライダーを配置することで、アニメーション効果も相まってとても印象的なファーストビューになっています。

 

黒川温泉 旅館 山河

このサイトは、左側は白背景・右側は背景に写真を入れることで左右にメリハリができています。
スクロールすると、それぞれバラバラに動くようになっていて、旅館の色々な写真を見ることができます。
左と右で文字の色も正反対なのも、コントラストが出ていてカッコいいです!

 

 湯の里 肘折温泉

こちらは左側のメニューの方が気持ち幅を広くとっています。
右側の写真は看板や街並みから、どことなく昭和な雰囲気を感じる写真です。こちらのサイトは左側は固定で、右側のみスクロールするようになっています。
メニューにカーソルを合わせると、その下に子メニューが横並びで出てくるようになっていて、白い背景のアクセントになっていてオシャレですね!

 

画面を大きく2つに分割したレイアウトだと、それだけでとてもインパクトのあるwebサイトになっているのですが、旅館やホテルの綺麗な写真が背景に配置されると、よりいっそう印象的なサイトになっていますね!

 - ホテル, 写真で表現, 旅館 , , , , ,

  関連記事

カレッタ汐留で開催するイルミネーションの特設サイトが綺麗!

東京都港区にある「カレッタ汐留」で、2017年11月16日から2018年2月14 …

見出しにアニメーションをつけてインパクトを出す

茨城県の「キャピタルマリーナ」のホームページです。トップページの波の形を連想させ …

手軽さやオシャレ感を上手くアピールする

「MY BAGEL」というPascoのパンを色々アレンジして楽しもうという紹介サ …

視線誘導がとても上手い「STRIA CLINIC」

福岡県福岡市にある医療レーザー脱毛専用医院「STRIA CLINIC(ストリア …

手描きのようなアイコンで視認性だけでなく、見た目にも可愛らしさを

東京都中央区新川にある和菓子屋「翠江堂(すいこうどう)」のホームページです。 左 …

高級感だけでなく、馴染みやすいデザインを加えることでターゲット層を増やす

  新潟県にある株式会社サルーンが経営する「ビフテキバル極」の公式ホー …

冬の夜の静まり返った雰囲気を、画面いっぱいに表示される星空や雪のアニメーションを使って表現

2016年6月に、京都府南丹市にある宿泊や日帰りでの温泉が楽しめる温浴宿泊施設「 …

白を基調にして衣装や料理の写真を際立たせているモダンレストランのサイトがオシャレ!

愛知県安城市にある和モダンレストラン「hana no utage(花の宴)」のホ …

ボタンに地図を使用し、見ただけでどこにあるのか一目で分かる

株式会社ベネッセホールディングスと公益財団法人 福武財団によって行われているアー …

ネイルの写真でカラフルなデザインにしたサロンのサイトが可愛くておしゃれ!

東京・埼玉・北海道に支店をかまえるネイルサロン「Nail Mix」のホームページ …