今回は番外編第四回です！
今回は2021年1月20日にSexy Zoneがドラマ『でっけぇ風呂場で待ってます』主題歌をシングルリリースしたということで、大きいお風呂つながりで温泉旅館サイトのトップページの上部を作ってみました。
ホームページ制作の依頼を考えている人はぜひ参考にしてみてください。
それでは見てみましょう！
外観
今回は、温泉街の写真で非常にノスタルジックな雰囲気を出しているものがあったので、それを全面に映し出してみました。
ロゴやヘッダーメニューを見やすくする場合は以下の様なデザインにしてみるのもよいかもしれません。
ヘッダーの背景色を黒にして、画像をメニューの高さぶん小さくしました。
この場合、メニューが見やすく、ロゴの金が非常に映えます。
ただし、画像はやや小さく表示されてしまうため、どちらが良いかは悩みどころですね。
ロゴ代わりの左上の箇所には、旅館の名前を意識して「楽」と書いてみました。
また、フォントはGoogleフォントのさわらび明朝を用いてみました。
さわらび明朝はこちらのリンクから確認できます。
https://googlefonts.github.io/japanese/
このフォントは、本文用に扱いやすいフォントということで少し細めに設定して、さりげない強調、高級感といったものを狙っています。
ヘッダーメニューや画像内のキャッチコピーは、すべて縦書きにしてみました。
旅館や居酒屋など和を感じさせるようなホームページを作る際には、このような縦書きにしてみると雰囲気を出せるのではないかと思います。
キャッチコピーは、ふるさとを思わせるような雰囲気の画像だったことと、旅館に泊まるという普段はなかなか無い楽しいイベントということで、「郷愁漂う別世界。」という表現にしてみました。
画像
今回はスライドにせず、画像1枚にしました。
元の画像はこのような画像です。
幻想的で、旅館に泊まるワクワク感、非日常感をかきたてる画像だと思います。
これに加えて、館内の暖かそうな雰囲気の画像、館内の露天風呂、夕食としてふるまわれる料理、といった順でスライドにできれば、旅館に泊まる一連の流れを想像させることができます。
あるいは、今回は旅館の外観のイメージでこのような画像を選びましたが、四季折々の露天風呂の画像でスライドにするのも、温泉の魅力を伝えられるので良いですね！
ホバーアニメーション
ヘッダーメニューは、カーソルが当たったことが分かるように以下の様なホバーアニメーションを入れています。
実際にカーソルを当ててみてください。
※分かりやすくするために背景色を黒くしています。
ホバーした箇所の文字を金色にしています。
ヘッダーに色を付けない場合は、ホバーした箇所の周りの色を黒色に変化させています。
上品さを出したい場合は、このようなさりげないアニメーションにするとよいと思います。
今回もいくつかのサイトを参考に、メニュー項目を設定してみました。
縦書きの場合、横に占める幅は狭いため、今回はハンバーガーメニューを使用しませんでした。
使用した場合は、余白を広げコンパクトに収められるため、すっきりとした印象に仕上げられると思います。
まとめ
いかがだったでしょうか。
ホームページ制作のイメージが湧いた！と思っていただけると非常に嬉しいです。
現在はなかなか外に出歩けず、今回の写真のような温泉街に出かけられないことかと思います。
ぜひ、新型コロナウイルスが落ち着いたら、観光を兼ねて温泉旅館に泊まってみてください！