SMALLSHIFT
← サイト事例に戻る

WEBSITE STUDY / 海外

Delparco Hotel

暗い背景にホテルの写真を並べ、部屋・食事・周辺観光を交互の区画で紹介する。

公式サイトを見る ↗
公式サイト / 掲載確認用
Delparco Hotelの公式サイト画面

DESIGN NOTES

このサイトの設計を読み解く。

01

階段の造形からホテルの印象を始める

冒頭は階段の曲線と吊り下がる照明を見上げた写真で、中央にホテル名と短い言葉を置く。部屋の一覧から始めず、建物の造形を通してホテルの雰囲気を伝える。施設全体に特徴がある場合、その細部を最初の一枚に選ぶ方法が参考になる。

02

濃い背景と白い文字で調子をそろえる

全体は黒に近い灰色を基調とし、白い文字と控えめな枠線で案内をそろえる。写真の中の照明や木の床、果物の色が暗い背景の中で際立つ。色を多く足すのではなく、施設や料理の写真そのものに色の役割を渡している構成になっている。

03

写真と説明を左右交互に並べる

本文画面では部屋の写真を左、説明を右に置き、食事の区画では位置を逆にする。中央の境界にはベッドや食器の丸いアイコンがあり、話題の切替を示す。写真と説明の関係を繰り返しながら、左右の変化で単調さを抑える配置が見られる。

04

観光と仕事の滞在条件を両方示す

公開テキストでは客室、食事、周辺地域に加えて、受付時間、Wi-Fi、ビジネス向けサービスも紹介する。休日の観光と仕事での宿泊の両方を想定した内容だ。施設の雰囲気だけでなく、目的ごとの必要条件を短い項目にして比較できるようにしている。

05

予約・問い合わせ・電話を分けて置く

予約、問い合わせ、電話が別々の行動として記載され、上部にも予約と問い合わせの入口が見える。空室を決めたい人と、先に相談したい人の段階を分ける構成だ。公開テキストには空港や主要道路からの距離・時間もあり、交通条件からの判断も支えている。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

ホテルでは建物の象徴的な細部で印象を作り、部屋・食事・周辺地域を同じ形式で整理できる。観光客と仕事の客に必要な条件を、写真とは別の項目で示したい。

そのまま真似する前に

公式予約の最良料金という表示や口コミは施設側の掲載内容で、比較や真正性は未検証。暗い背景の細い文字、交通時間、問い合わせフォームの実動作は別途確認が必要になる。

次に見ておきたい参考

一覧へ →
Delparco Hotelの公式サイト画面