WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 宿泊・観光
  4. ホテルタウ熊本

webcan analyze tau-kumamoto.com

HOTEL & TRAVEL · 熊本県 · PICKED 2026.10.17

ホテルタウ熊本宿泊・観光のホームページデザイン参考 — ブックホテル・手描きのロゴ・余白

ホテルタウ熊本のトップページ（PC）
PC（1440px）
ホテルタウ熊本のトップページ（スマホ）
スマホ（375px）
出典：tau-kumamoto.com ↗確認日 2026.10.17
ホテルタウ熊本宿泊・観光 · 熊本県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

手描きのロゴと短い一文だけのファーストビューで、「本と文化のホテル」という個性を先に伝える。

熊本市中央区のブックホテルのサイト。ファーストビューは、ピンクの手描きの線で描いた楕円のロゴ、「熊本を愉しむ。街中のハブとして人と文化をつなぐブックホテル」という短い文章、楕円の矢印ボタンの3つだけを白い余白に置いている。その下に客室の大きな写真、併設のミュージアム「夏目パージアム」の入口と館内の写真、通し番号つきのお知らせと続く。ヘッダーには日本語・英語の切り替え、インスタグラム、オンラインショップ、ご予約を並べている。

  1. 01ファーストビューは手描きのロゴ・短い文章・楕円の矢印ボタンの3つだけで、写真は置かずに余白を大きくとっている
  2. 02ホテルとミュージアム「夏目パージアム」の入口を、ロゴ・短い文章・矢印ボタンと、角を丸めた大きな写真という同じ組み合わせで縦に並べている
  3. 03白い背景に濃いグレーの文字とボタンで統一し、ロゴだけをピンクの手描きの線にしている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線ご予約 / お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内

予約の入口をヘッダーに固定する

PCでもスマホでも、画面上部に固定したヘッダーに「ご予約」を置いている。スマホのヘッダーは「ご予約」とメニューだけに絞っていて、どこまで読んでも予約へ進める。

2つの施設の入口を同じ型で並べる

ホテルとミュージアムを、同じ部品の組み合わせ（ロゴ・短い文章・矢印ボタン・大きな写真）で縦に並べている。泊まりたい人にも、展示を見たい人にも、自分の入口がすぐ分かる。

お知らせに通し番号と日付をつける

お知らせを「004」から「001」までの通し番号と日付つきで、新しい順に並べている。企画展や新しい客室の告知が続いていることが一目で分かり、施設が動いている印象を与える。

チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#333132本文テキスト・ボタン・フッター · ダークグレー

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文
使用フォント
筑紫ゴシック Pro B
無料で近いもの
Noto Sans JP
用途
英数字（日付・番号など）
使用フォント
DIN Next LT Pro Medium
無料で近いもの
Barlow
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
本文（p）14.1px / 6001.8014px / 600
ボタン11.7px / 6001.0013px / 600

実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    右上に日本語・英語の切り替え、インスタグラム、オンラインショップ、ご予約（外部リンクの矢印つき）とメニュー。スマホはご予約とメニューだけ。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    左に手描きの楕円のロゴ、中央に短い文章、右に楕円の矢印ボタン。スマホでは縦に並べる。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    客室の写真

    角を丸めた横長の大きな客室の写真。文字は重ねない。

    ファーストビュー／全面写真＋コピー型
  4. 04

    夏目パージアム

    英字のロゴ・短い紹介文・楕円の矢印ボタンと、館内の大きな写真。

    コンセプト／写真＋メッセージ型
  5. 05

    お知らせ

    通し番号・タイトル・日付・矢印を1行ずつ。

    お知らせ／お知らせ一覧型
  6. 06
ホテルタウ熊本の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01ファーストビューはロゴ・短い文章・ボタンの3つに絞り、余白で印象を残す
  2. 02施設や事業が複数あるときは、それぞれの入口を同じ部品の組み合わせで並べて見比べやすくする
  3. 03予約の入口はヘッダーに固定して、どこまで読んでも押せるようにする
  4. 04お知らせは日付つきで新しい順に並べ、更新が続いていることを見せる

FAQよくある質問

ホテルタウ熊本のサイトで使われているフォントは？

和文は筑紫ゴシック Pro B、英数字は DIN Next LT Pro Medium を組み合わせています。どちらも有料のフォントです。無料で近づけるなら、和文は Noto Sans JP、英数字は Barlow（どちらも Google Fonts）が使えます。

ファーストビューに写真を置かなくても大丈夫ですか？

ロゴや言葉そのものに個性がある施設なら成り立ちます。ただし宿泊施設は部屋の様子が予約の決め手になりやすいので、このサイトのように、スクロールしてすぐの位置に客室の写真を大きく見せることが前提です。

どんな業種の参考になりますか？

ブックホテル・デザインホテル・ゲストハウスのほか、カフェや書店、ギャラリーを併設した施設など、複数の場所や事業を1つのサイトで案内したい施設に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はホテルタウ熊本および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの宿泊・観光の参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の宿泊・観光施設のサイトを。

「ホテルタウ熊本のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら