Facebook [架空]Webサイト「離れ宿 HANAREYADO TOKI」topics PC/SP対応の作成
Logo

[架空]Webサイト「離れ宿 HANAREYADO TOKI」topics PC/SP対応の作成

クレジット
Avatar
職業訓練生(Webデザイン・動画編集)
[架空]Webサイト「離れ宿 HANAREYADO TOKI」topics PC/SP対応の作成-1
シェア

[架空]Webサイト「離れ宿 HANAREYADO TOKI」topics PC/SP対応の作成

■作品概要   学校の卒業制作で作成した、企業からの制作依頼をもとに「クライアントの要望に応えるWeb サイト」の制作をテーマにした作品です。  計画、設計、デザイン、コーディングまで、一連の作業を担当。 ■ ターゲット ・日常の疲れを癒し、人目を気にせず静かに過ごしたい方 ・ひとり旅でも気兼ねなく、質の高い食事と温泉を楽しみたい方(特に30代~40代女性) ■ 配色設計(カラーコンセプト) 「派手ではない、本物のいい宿感」をテーマに、写真の魅力を最大限に引き出す配色を行いました。 ベース: 上質なオフホワイト。温かみのある白を用いることで、高級宿特有の「余白の美」を表現。 メイン: グレージュ。大人の女性に響く、控えめで洗練された高級感を演出。 アクセント: 深いボルドー。自分へのご褒美としての「特別感」や、凛とした女性らしさを添えています。 ■ 工夫した点 各プランやトピックスを紹介する際、写真の質感を損なわないよう、周囲に十分な余白を確保しました。文字情報を詰め込みすぎず、ゆったりとしたレイアウトにすることで、宿の静かな空気感をWebサイト上でも再現。30代~40代女性がリラックスして読み進められる、落ち着いたトーンを追求しました。 常に最上部に「空室検索・予約」のフォームを固定することで、ユーザーが「泊まりたい」と思った瞬間の熱量を逃さない設計にしています。また、フッター部分にはロゴやSNS、お問い合わせ先を整理して配置し、情報の信頼性を高めると同時に、サイト内の回遊性を向上させる視線誘導を意識しました。 ■使用言語・ツール HTML5/ CSS3/ JavaScript/ VS Code/ illustrator/ Photoshop ■ 制作時期:2026年3月~4月
クレジット
Avatar
職業訓練生(Webデザイン・動画編集)
シェア
Kazumiの他の作品
foriio

あなたのforiioを無料で作成

fori.io/
Logo
[架空]Webサイト「離れ宿 HANAREYADO TOKI」topics PC/SP対応の作成-1

[架空]Webサイト「離れ宿 HANAREYADO TOKI」topics PC/SP対応の作成

■作品概要   学校の卒業制作で作成した、企業からの制作依頼をもとに「クライアントの要望に応えるWeb サイト」の制作をテーマにした作品です。  計画、設計、デザイン、コーディングまで、一連の作業を担当。 ■ ターゲット ・日常の疲れを癒し、人目を気にせず静かに過ごしたい方 ・ひとり旅でも気兼ねなく、質の高い食事と温泉を楽しみたい方(特に30代~40代女性) ■ 配色設計(カラーコンセプト) 「派手ではない、本物のいい宿感」をテーマに、写真の魅力を最大限に引き出す配色を行いました。 ベース: 上質なオフホワイト。温かみのある白を用いることで、高級宿特有の「余白の美」を表現。 メイン: グレージュ。大人の女性に響く、控えめで洗練された高級感を演出。 アクセント: 深いボルドー。自分へのご褒美としての「特別感」や、凛とした女性らしさを添えています。 ■ 工夫した点 各プランやトピックスを紹介する際、写真の質感を損なわないよう、周囲に十分な余白を確保しました。文字情報を詰め込みすぎず、ゆったりとしたレイアウトにすることで、宿の静かな空気感をWebサイト上でも再現。30代~40代女性がリラックスして読み進められる、落ち着いたトーンを追求しました。 常に最上部に「空室検索・予約」のフォームを固定することで、ユーザーが「泊まりたい」と思った瞬間の熱量を逃さない設計にしています。また、フッター部分にはロゴやSNS、お問い合わせ先を整理して配置し、情報の信頼性を高めると同時に、サイト内の回遊性を向上させる視線誘導を意識しました。 ■使用言語・ツール HTML5/ CSS3/ JavaScript/ VS Code/ illustrator/ Photoshop ■ 制作時期:2026年3月~4月
クレジット
Avatar
職業訓練生(Webデザイン・動画編集)
シェア
Kazumiの他の作品
foriio

あなたのforiioを無料で作成

fori.io/