個人制作
架空のホテルサイト

モックアップ画像

概要

このWebサイトは、都会の喧騒から一歩離れた「夜の隠れ家」をテーマにした架空のホテルサイトです。
心を落ち着ける静かな音楽と上質なサービス、月夜を思わせる洗練された空間で、訪れる人々に特別な夜を演出します。
誕生日や記念日、大切な人とのひとときにふさわしい上質さを備えながらも、一人の時間をゆったりと過ごせる心地よさも大切に。
「心を整える夜の静寂を」コンセプトに、また訪れたくなる特別な夜を届けるWebサイトです。

クライアント

架空サイトのためクライアント不在

担当内容

企画、デザイン

制作期間

5日(企画1日、デザイン3日、修正1日)

使用ツール

Figma / Photoshop

斜め配慮のデザイン画像

01仮想クライアント情報

都心で働く20~40代の男女を対象にしたラグジュアリーホテル「Nocturne Tokyo」
仕事帰りや記念日、特別な夜に“心を整える夜の静寂”をコンセプトに、都心にありながら非日常を味わえる隠れ家として誕生。ビジネス利用からプライベートまで幅広く対応し、利用者の心に寄り添うホテル体験を提供する。

02課題

都心ホテルは高級感はあるが「価格が高い」「入りにくい」というイメージが根強い。また、宿泊特化型ホテルは“心を休める体験”に乏しく、特別な夜を過ごしたい利用者の期待に応えられていない。もっと日常的に、かつ「ちょっとしたご褒美」としても選ばれる存在になる必要がある。

03目的

都心にいながら「心を解きほぐす夜」を体験できる場をつくること。宿泊そのものだけでなく、空間・サービス・デザインを通じて“特別すぎないラグジュアリー”を提供し、日常と非日常の間にあるご褒美時間を演出する。利用者にとって「安心して長居できる居心地の良さ」と「憧れ」を両立させることを目的とする。

04ターゲット

20~40代の社会人(アクセスや利便性を重視する層)
記念日や特別な日に、落ち着いた空間で大切な人と過ごしたいカップル出張や仕事帰りに、一人でも気軽に滞在できる“都心の隠れ家”を求める人。

05デザインの工夫

エントランスや食事を横スライドで配置

利用者が最も気になる「入口(雰囲気)」「食事」のイメージを最初に横並びに見せることで、滞在の魅力が一目で伝わるようにした。

金色バナーで高級感を演出

「Room」「Restaurant & Bar」などの見出し部分にゴールドを用いることで、ラグジュアリーホテルらしい品格と特別感を表現。

黒を基調とした上質な世界観

サイト全体を黒ベースでまとめ、写真の光や料理の色彩が映えるようにデザイン。高級感と都会的な洗練さを兼ね備えた印象を与えている。

光と影のコントラストを活かした写真構成

夜景や料理写真では光の輝きを強調し、「夜の隠れ家」としての魅力を視覚的に訴求。

アイコンによる直感的なサービス案内

宿泊者が知りたい情報はアイコンで簡潔にまとめ、分かりやすさと信頼感を両立。

Design Process

完成までの変遷と試行錯誤

デザイン案1

デザイン案1

デザイン案2

デザイン案2

デザイン案3

デザイン案3

デザインカンプ完成

デザインカンプ完成

初期段階では、白と黒を組み合わせた配色でレイアウトを設計し、情報を見やすく整理することを優先した。
しかし、全体を見たときに「高級ホテルらしい上質感」がやや弱く感じられたため、完成版では背景を黒で統一。
これにより、写真やゴールドのバナーがより一層引き立ち、ラグジュアリーで洗練された雰囲気を演出できるようにした。
大きな変更点はアメニティの見せ方である。最初は写真のみで構成し、その後は文章を中心にして情報量を整理したが、どちらも引きで見たときに「見にくい」「分かりにくい」と感じる課題があった。
最終的にはアイコンを活用し、視覚的に直感で理解できるように改良。黒背景と余白を組み合わせることで、読みやすさと高級感を両立させた。

完成図

完成図 (pc)