website
架空サイト
旅館サイト
担当: 企画/デザイン/コーディング
WEBデザインの勉強として、個人で制作した架空のサイトです。
旅館で味わえる体験をイメージできるように 写真が主役となるシンプルなデザイン
  • 企画書

  • 目的と課題

    旅館の雰囲気や提供しているサービスを発信することで、 新規のお客様に宿泊のご予約をして頂く
  • ターゲット

    働き盛りの20代~30代の独身男女
    綺麗な温泉と地元の食事を楽しめ、丸一日旅館でゆっくり過ごしたいと思っている
  • デザインのポイント

    「ゆっくりくつろげそうな旅館」と感じてもらうため、開放感、空気感を感じさせるデザインや動きをつけることを意識しています。 ファーストビューをはじめとした、見出しの字間を広めに取ったり、余白を活かした区切りでゆとりを生み出しています。
    レイアウトや背景に変化を付けることで飽きさせないように工夫。 同じようなレイアウトが続くため、途中で背景色に変化を付けたり(トップページ)、あえて崩したレイアウト(お部屋詳細ページ)にしたりと変化を付けています。
    ユーザーにわかりやすい、ストレスフリーな配慮。 ボタンのホバーアニメーションを付けたり、アコーディオンで開くことがわかるよう装飾を工夫しています。 また、SPモードにした際、縦に長いページだとユーザーにスクロールの負担がかかるため、スワイパーで横にスクロールするように動きに変化を付けたり、 アコーディオンにしてデフォルトで閉じた状態にし、必要なときに閲覧できるよう、縦スクロールの負担による離脱防止を目的としたレイアウト設計を意識しています。
  • 使用ツール・技術

    Photoshop / Illustrator / Figma / HTML / CSS+Sass / JavaScript+jQuery / VS Code
  • 制作時間

    企画
    16時間(2人日)
    デザイン
    40時間(5人日)
    コーディング
    56時間(7人日)
  • 制作時期

    2025年4月~5月
  • Other Works