1. HOME
  2. デザイン
  3. 温泉旅館のWebサイトデザイン

温泉旅館のWebサイトデザイン

デザイン

授業内で「虎猪豊館」という空想の温泉旅館のWebサイトのデザインをPhotoshopで4週(週3限)で制作しました。
制作工程でこだわった箇所について紹介していきます。

色について

全体的に落ち着いた雰囲気にするために暖色や暗めの色を使用しました。
背景色に使用したのは煤竹色(#70564A)です。
煤竹色は室町時代に登場した色だそうで、「虎猪豊館」も室町時代からあるということで使用しました。他にも室町時代に登場した色はありましたがその中でも、暗めの落ち着いた雰囲気の煤竹色にしました。

サブカラーには弥生・古墳時代からあり、歴史のある銀朱色(#C73E3A)を使用しました。
その他アクセントとして高級感を出すために黄金色(#e6b422)を使いました。アクセントをつけるために黄色系とし、中でも光沢感のある黄金色にしました。

その他

背景などの模様

煤竹色の背景には縦の縞を入れて木の模様に見立て、白の背景には雲模様などを使用し、和紙のような模様に仕上げました。
グローバルナビゲーションや、TOPへのボタンに使用した背景は温泉に昔ながらにある掛札をモチーフにIllustratorで一から自分で制作をしました。



画像


メインのコンテンツとなる部分は写真をあえて切り抜かず全面に見せたかったので、角丸の四角で統一しました。
使用した画像は温泉の温かみを考え暖色系のものを主に使用し、全体的には色味の濃いものを使用し目立たせるようにしました。

背景に和紙の模様があるため、画像にグラデーションがかかっている部分はレイヤーマスクを使用し、薄っすらとですが背景が見えるように画像を透過しました。

アイコンなどの設置

料金設定の部分にはそれぞれ項目のイメージにあったアイコンを設置し、
【料金プラン】【空室状況】【新着情報】には和風といえば【松竹梅
というイメージがあったので松竹梅のアイコンを設置しました。
アイコンを設置した理由については、やはり見出しだけだと目をひくには少し物足りないと思い、
不透明度を下げ見出しも見せつつ目を引くようにという考えで置きました。

スタッフブログは(見出しは書いていませんが...)【ブログ】ということで人が投稿するものなので
吹き出しにし、人が呟いているかのようなイメージにしました。
人もモノクロにしてあるのでわかりにくい部分もありますが和傘や、着物をきた女性を使用し
和風感を出しました。


上記に書いた通り、メインとなる部分の写真は角丸の四角で統一したため、
面白みに欠けると思い、抜け感を出すため新着情報から下はガラッと形を変えました。
背景にも模様を入れているので形の変えたシェイプを置くのではなく白の背景を消し、
さらに後ろの背景を見せるようにしました。

新着情報は曇ったガラスを拭った時のようなイメージ
バナーの部分には温泉の湯気をイメージしました。



授業