Michiko Hasegawa

-portfolio site-

苔生宿Koke-musu:inn ゲストハウス

滋賀県琵琶湖にある建築デザイナーのオーナーが1棟家を丸ごとDIYしたゲストハウス

https://kokemusu-inn.com
苔生宿Koke-musu:inn ゲストハウス
制作の目的
サイトのリニューアル
旧サイトでは、文章のみの情報を1ページで掲載されており、内容が非常に分かりづらくビジュアル的にも見づらかった。予約ページにおいては、必要な情報をお客様自身が箇条書きで記載しなければならなかった。

解決方法・・・ゲストハウスのイメージに合う様に画像やイラストを使い、情報をまとめてサイトを見易くリニューアルした。
クライアント様の要望も含め下層ページを10ページ制作。膨大な情報を分ける事で情報を整理しました。予約ページはお客様の手間を省く為に必須項目を入力する欄を設ける事で簡単に予約出来る様に変更しました。 宿泊施設の紹介も、画像やイラストを使って説明。客層も考えモバイルファーストで制作する事も意識しました。
※7月初旬にGoogle mapを初め、各種旅行サイトにUPされる予定です。
情報設計
「まるで秘密基地の様なゲストハウス」をコンセプトに、見た人に面白そう、変わった宿だなぁ。と思ってもらえる仕掛けを沢山作りました。 下層ページを沢山使う事で膨大な情報をまとめ、写真やイラストも沢山使い、より分かり易く、見易いページになるように心掛けました。 メール予約はPHPを使用し、予約者様とクライアント様に同時に確認メールが行くように設定、送信後のTHANKSページはGIFでアニメーション動画を制作し最後まで楽しんで頂ける工夫を施しました。
デザイン
秘密基地やおもちゃ箱をイメージして全体的にPOPにイラストも沢山使って制作しました。 デザインを作る段階で再度訪問・宿泊させて頂きました。泊まりに来るお客様が何が必要かを自分でも再度確かめながら、どの写真があるとより便利なのか等イメージしながら撮影し、デザインに充て制作・配置致しました。 クライアント様と直接やりとりする事で、どのようにして欲しいのか、イメージのズレが無い様に注意を払いながらデザインしました。 建築デザイナーのオーナー様が一軒家を丸ごとDIYした事がゲストハウスの最大の売りでもあるので、TOPページに様々なDIYを連想させる仕掛けを施しました。スクロールすると工具を所々に浮きでてきたり、地図上に車を走らせたりしました。
制作範囲
写真撮影・・・2日
企画・提案・・・2週間
WF・・・1週間
デザイン・・・1ヶ月半
コーディング・・・1ヶ月半
使用ツール
Illustrator / Photoshop /Light room classic / XD / DW / Canva / GIF制作サイト
使用言語
HTML / CSS / JavaScript / jQuery / PHP

こだわりポイント3選

1.TOPページ 飛び出す工具と動く車

car

ワクワクする様なサイトにしたかったので、おもちゃ箱を開ける瞬間をイメージし色んな仕掛けをTOPページに施しました。 DIYで使用するペンチやスパナを飛び出させてみたり、楽しめる仕掛けとして地図上に車を走らせてみました。この部分はクライアントさんも大喜びでとっても可愛い〜!と絶賛頂きました。

2.ROOMページ 必要な情報は見易さを意識

items

お客様が必ず確認するアメニティグッズについては、イラストと文字で分かり易く表現しました。また、チェックイン・アウトの時間が通常の宿泊施設と異なることを強みとして訴求するため、大きく記載しました。

3.クライアントさんの意向を1番に考えて

コケタロウとコケミン

たくさんの要望の中でも、特にクライアントさん自身が制作したキャラクターを使用することが強く求められました。このキャラクターはオーナーご夫婦の分身であるため、ヒアリングを思い出しながら、どこに配置するか考えました。
まず、Aboutページでキャラクターを紹介し、どのページでも見られるように、メニュー欄にも配置しました。さらに、最終目標である予約完了ページ(THANKSページ)にも、GIFアニメーションでキャラクターを登場させました。 このGIFの制作には、キャラクターを登場させることだけでなく、お客様への感謝の気持ちと、制作を依頼してくださったクライアントさんへの感謝の気持ちを込めました。クライアントさんにも喜んでいただけたので、制作してよかったなと思います。 →制作したGIFはこちら←