学校課題

架空ホテルのWebサイト

Design / Coding

架空ホテルHarmonyHotel様のサイトリニューアルを手がけました。
※トップページのみの制作

Url : https://harmonyhotel.rika-tachibana.site/

ターゲット

・20〜30代の若い方が多い
・シニア層からの支持もある
・今後は海外のお客様のシェアも広げていきたい

目的

レスポンシブ対応、客数アップ狙ったサイトリニューアル

課題

・予約ページまでの導線をスムーズにする必要がある
・シティホテルだが、高級感が伝わりにくい配色になっている
・メニューやセクションが英語表記で読みやすさに欠ける

クライアントの要望

・レスポンシブ対応・客層を狭めず集客をはかりたい
・様々な設備が備わっており、来館された方に特別な1日を提供できることをアピールしたい

情報設計

予約への導線をスムーズにするため、予約・空室検索ボタンをヘッダーメニュー、ハンバーガーメニュー、ファーストビュー下に設置。ヘッダーメニューは上にスクロールすると下に降りてくる仕様です。可読性に関してはナビゲーションメニュー、セクション名は2言語表記に変更することでどの層にも読みやすいよう配慮しました。セクションにおいてはアイコンも設置しています。アニメーションは視線誘導の目的で施し最低限の動きにしています。要望にあった特別な1日はファーストビューで演出しています。スライドの写真から特別感や設備の充実を訴求します。

デザイン

高級感、上品さを表現するためベースカラーはゴールドを使用。レスポンシブ表示になった時にサイト全体のイメージが変わらないようなレイアウトを意識しました。あしらいにはホテルに関連するものを配置したかったので、ロゴのエンブレムを背景に配置しました。

制作範囲・期間

企画・ワイヤーフレーム : 1日
デザイン : 5日
コーディング : 1週間