【課題】架空の宿 サイト制作

【制作時間】

・要件定義：18h

・WF/デザインカンプ：18.5h

・コーディング：2w

＜ 目次 ＞

　1. 要件
　2.工夫したこと
　3.制作物

1. 要件

■ 目的

宿の魅力を伝えて、宿泊予約をしてもらうためのWEBサイト

■ ターゲット

・日頃の疲れを旅行で癒したいと思っている方

・日常を忘れたい方

■サイト名

円音荘-Madokanesou-

■デザインイメージ

・海が目の前に広がる景色が伝わる写真を使用

・隠れ家感のある落ち着いた色味

■参考サイト

箱根・強羅 佳ら久　https://www.gora-karaku.jp/

那須いちやホテル　https://nasu18.com/

多田屋　https://tadaya.net/

2. 工夫したこと

・レスポンシブ対応をしました。

・ナビゲーションは上部固定とし、いつでも任意のセクションに飛べるようにしました。

・海が見える絶景宿を売りにしているので、ファーストビューには、「宿から見える穏やかな海」をイメージさせる写真を使用しました。

・落ち着いた印象を与えるフォントを使用し、余白を多めに取ったデザインにしました。

・宿の名前にも含まれている「円」という字からも連想されるように、コンセプトのセクションでは館内写真を円形にトリミングし配置しました。

・おもてなしのセクションではslickを用いることで、写真を大きく表示させました。

・PCサイズのおもてなしセクションの写真は、対角を丸くトリミングすることにより柔らかい印象を与えました。

・よくあるご質問のセクションでは、回答をJqueryを用いてアコーディオン形式にすることにより、見やすいデザインとしました。

・高級感や落ち着いたイメージを与えるために、Jqueryを用いてそれぞれのセクション内容がフワッと浮き出るような動きをつけました。

3. 制作物

リンク：https://ajitamamorita.com/madokanesou/

【PCサイズ】

【SPサイズ】