• XHTML1.0
  • CSS2
  • Flash

香梅屋

温泉旅館【香梅屋】(架空サイト)

http://yane-ni-kabochano.com/koubaiya/
ページ数 13p (flashマップ・ブログ風ページ含む)
使用ツール Photoshop , Illustrator , Fireworks ,
Flash , Dreamweaber
使用言語 XHTML1.0 , CSS2
コンセプト 青森の十和田温泉郷にある温泉旅館を想定して作成。若い女性の旅行客に向けて「落ち着いた色合いでかわ いらしく」、「和風だが堅苦しさのない宿」というイメージ。
備考 写真素材…フリー写真素材 「足成」/フリー素材屋Hoshino
和柄素材…かわいい「和」素材集
散策マップ使用写真…自分が撮影したもの
制作期間 2010年11月

このサイトは、Web制作コースの修了制作として作成した初サイトです。当時学んだXHTMLとCSSの基礎をふまえて作成しました。

和風旅館ということで、濃グレーをベースに、旅館名からイメージしたピンクを彩度を抑えて要所に使用。全体の色を抑える分、暗くなりすぎないようトップ画像に鮮やかな色合いの写真を配置しました。

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

制作時の思考あれこれ

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

コンセプトイメージ

作品コンセプト

何を作ればいいのか手探り状態だった初サイト。ちょうど青森旅行にて周辺散策していたことから十和田湖温泉郷にある旅館、というイメージで作成しました。

想定される客層は20代以上、また、宿泊先の自社ページまで確認するのは女性の方が多いように感じたため(違うかもしれないですが…)、女性向きの柄を配置してあります。

温泉・料理・客室案内といった基本情報を、2カラムで分かりやすくまとめました。

渓流イメージ

このサイトが提供できる情報はなんだろう?

作成当初、同業他社のサイトを参考にしていましたが、「大手の旅行代理店の予約サイトに登録し、自社サイトを持たない宿泊施設」も少なくありませんでした。

基本情報を提示するだけなら予約サイトでも事足りる。(自社ページを持つことによってイメージを確立させる、などの利点はあるにせよ)このサイトが発信出来る情報を載せたいが…。

と、考えた末に景勝地散策マップをFlashで周辺情報をブログ風に随時提供するコンテンツを追加しました。

追加コンテンツの意図

散策マップで取り上げている景勝地・奥入瀬渓流は、十和田湖観光のハイライトの一つです。事前に道路状況や予備知識など、分かっているとより楽しめる情報を提供する狙い

自然散策や美しい景色が観光の主力であるため、雨天を気にする観光客も多い。周辺情報をブログで紹介しつつ、雨天の場合でも楽しめそうなポイントも挙げる。雨天であっても旅行を楽しんでもらい、あらためて再訪したいと思える場所を目指す。紅葉等の見頃のアピールにも。

2カラムイメージ

修了制作として、CSSでスタンダードなレイアウトを組む

Web講座でXHTMLとCSSの基礎を学んだことを踏まえて、まずは基本的な2カラムレイアウトで1サイト制作することを第一目標に取り組みました。

第二目標として、どこかにFlashかjavascriptを取り入れてみたいと思っていたため、今回はFlashマップを作成。たどたどしい出来栄えの散策マップとなりました。


2014年に、この香梅屋サイトをリデザインしました。詳細はコチラ

ページトップへ