• HTML5
  • CSS2
  • CSS3
  • jQuery
  • ワンページスクロール型

香梅屋Re

温泉旅館【香梅屋】(リデザイン)

http://yane-ni-kabochano.com/koubaiya_re/
ページ数 1p (現在トップページのみ / ワンページスクロール)
使用ツール Photoshop , Illustrator , Fireworks ,
Dreamweaber
使用言語 HTML5 , CSS3 , jQuery
コンセプト 青森の十和田温泉郷にある温泉旅館を想定して作成。若い女性の旅行客に向けて「落ち着いた色合いでかわ いらしく」、「和風だが堅苦しさのない宿」というイメージ。
備考 写真素材…フリー写真素材 「足成」/フリー素材屋Hoshino
和柄素材…かわいい「和」素材集
渓流写真…自分が撮影したもの
制作期間 2014年7月

以前、修了制作として作成した初サイト【香梅屋】を、改めてリデザイン・HTML5でリニューアルしてみるという試みです。

当初のコンセプトやイメージを踏襲しつつ、当時よりもワイドになった横幅や、フルスクリーンに近い大サイズ画像を取り入れ、より印象的なトップページを目指しました。

  • サイトイメージ
  • サイトイメージ
  • サイトイメージ
  • サイトイメージ

制作時の思考あれこれ

サイトを作るにあたって、学習目標やサイトの目的を明確にして取り組みたいと考えていました。
以下はこのサイトを制作するにあたって考えた・感じたことをまとめています。
(サイトの出来にはあまり関わりのない取り組み姿勢的な部分なので、読み飛ばし可)

コンセプトイメージ

今リニューアルするならば

当初の想定通り、客層は20代以上、女性客をターゲットに、当旅館の魅力を伝えることを目的に作成しています。


前回作ったロゴ、使用した和柄素材も、色味やサイズを替えて再利用。ランダムな画像の配置や、曲線イメージなど、全体の印象を大きく変えつつ、旧サイトのイメージにも沿わせたいと考えました。


落ち着いた色合いはそのままに、色数を増やし、より若い女性に受け入れてもらえるよう明るく柔らかい印象にまとめました。

旧サイトのイメージを引き継ぎながら制作する

旧・香梅屋サイトは、初制作ということもあって、テンプレート的なレイアウト(+時代を感じさせる幅設定)でした。そのため、今の主流を取り入れながら、改めてデザインを再構成することを目指しました。


最近の傾向として、モニタいっぱいに写真を表示させるサイトが増えていることを参考に、今回は全画面表示風のレイアウトを採用。渓流の写真を大きく配し、パノラマ風に見せることで、観光名所の魅力をよりダイナミックに出したいと考えました。

宿の魅力をトップページ内に/ ワンページスクロール

サイトイメージ

前回は散策マップなどを観光アピールとして加えていました。

しかし、旅の魅力をアピールするのなら、「ページ変移させるより、トップページ内で完結させてしまった方がユーザーの目に届きやすいはず」と考え、今回はワンページスクロール風にアピールポイントをまとめました。


旅のアピールポイントは、『周辺観光』『温泉』『食事』『宿泊』の4つ。各セクションごとに複数のイメージ画像を配置。旅行に訪れた際の流れを綴ることで、宿泊利用した場合のイメージをより具体的に想起させる狙いです。


とは言っても、jQueryでスムーススクロール効果を付けた、ページ内リンクの移動でしかないので、実際にはワンページスクロール風味というのが正確なところです。jQueryライブラリ『easing』のエフェクトを使用しています。

HTML5化

HTML5とCSS3でサイトを作る

これまでのサイトはXHTML1.0で制作をしており、HTML5の勉強がしたくてサイトを制作しました。ひとまず、HTML5で新たに加わったタグを使用しながら1ページ制作してみることが第一目標でした。

HTMLの点ではheader、footer、nav、article、sectionなどの、基本中の基本タグへの変更、CSSの面では角丸transitionでのホバーエフェクトなどを取り入れています。

元画像

写真のレタッチ練習

トップに大サイズで使用した奥入瀬渓流の写真は、以前、私自身がコンパクトデジカメで撮影した写真です。旅行の思い出・風景スナップ以外の何物でもない、素人撮影です。

元画像は、撮影した日が曇り空(雨模様)のため、全体的に色が白く飛んでいます。大サイズで見ると、若干ピンボケ風味。これをトップで使うため、『多少はマシ』にすべく補正と合成を試みました。

加工後イメージ

今回は大サイズで使用するため、全体を明るく、木々や水面の色に鮮やかさ・透明感を加えるために試行錯誤しました。

白く色抜けした部分も多く、全体の光源のバランスを取るため、雲の入った青空を合成
露光やコントラストなどを調整し、明るい水辺の風景に整えました。しかしながら、大サイズで使うには粗が目立つ画像であることには変わりなく、もっと写真のレタッチも覚えなければ…と反省しています。

ページトップへ