WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 宿泊・観光
  4. グリーンパーク山東

webcan analyze greenpark-santo.com

HOTEL & TRAVEL · 滋賀県 · PICKED 2026.10.17

グリーンパーク山東宿泊・観光のホームページデザイン参考 — アウトドア施設・コラージュ・イラスト

グリーンパーク山東のトップページ（PC）
PC（1440px）
グリーンパーク山東のトップページ（スマホ）
スマホ（375px）
出典：greenpark-santo.com ↗確認日 2026.10.17
グリーンパーク山東宿泊・観光 · 滋賀県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

写真とイラストのコラージュで楽しさを見せ、すぐ下で「今日あいているか」と「予約」に答える。

滋賀県米原市のアウトドア・レジャー公園のサイト。ファーストビューは、キャンプやBBQを楽しむ人の写真と手描きのイラストを重ねたコラージュに、かすれた質感の大きな英字の施設名と、縦書きのコピー「自然とわくわくが無限に広がる。」を置いている。その下に重要なお知らせ、アイコンで並べた施設のメニュー、営業状況と予約の入口、ニュースと続く。

  1. 01ファーストビューは、写真・手描きのイラスト・かすれた質感の英字を重ねたコラージュ
  2. 02キャンプ・BBQ・宿泊・レストランなどの施設を、アイコンつきのメニューで横一列に並べている
  3. 03淡いミント色を背景に、黄色・赤・青・ティールの明るい色を差している

CONVERSION集客の工夫

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

営業状況と予約をファーストビューのすぐ下に

施設ごとの営業状況を「OPEN」と大きく示し、その横に「ご予約・空き情報」と「団体様向けおすすめプラン」の入口を置いている。天候や季節で営業が変わる施設では、来る前に知りたいことに最初に答えるのが効く。

重要なお知らせを目立たせる

ファーストビューの直下に、ピンクの帯で「重要なお知らせ」を日付つきで並べている。予約の停止や新しい施設のオープンなど、来場に関わる情報を見落とされにくい。

アクセスと団体プランを常に表示

PCでは画面右端に、スマホでは画面下に「アクセス」と「団体様向けおすすめプラン」を固定している。個人の来場者にも、学校や会社などの団体の幹事にも、入口が常に見える。

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

COLOR配色

#E1F4F2背景 · ペールミント
#0B8388ボタン · ダークティール
#30C5B6差し色 · ティール
#FEC352差し色 · イエロー
#F45562差し色（重要なお知らせなど） · レッド
#292929本文テキスト・濃色

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

TYPOGRAPHYフォント

用途
和文
使用フォント
ヒラギノ角ゴシック
無料で近いもの
Noto Sans JP
用途
英字（見出し）
使用フォント
Jost
無料で近いもの
Jost
用途
手書き風の英字
使用フォント
Caveat
無料で近いもの
Caveat
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h115.5px / 4001.6014px / 400
h213.3px / 7001.6011px / 700
本文（p）15.5px / 7001.6017px / 700
ボタン13.3px / 4001.6011px / 400

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

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

  1. 01

    ヘッダー

    左上に白い枠のロゴ、右上にメニュー。

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

    ファーストビュー

    写真とイラストのコラージュに、大きな英字の施設名と縦書きのコピー。

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

    重要なお知らせ

    ピンクの帯に日付つきで。

    お知らせ／お知らせ一覧型
  4. 04

    施設メニュー

    キャンプ・BBQ・宿泊・レストランなどをアイコンつきで横一列に。

    記事・メディア／カテゴリナビ＋検索型
  5. 05

    営業状況と予約

    施設ごとの営業状況（OPEN）、ご予約・空き情報、団体様向けおすすめプラン。

    インフォメーション／診療時間・休業日バー型
  6. 06

    NEWS

    お知らせを写真つきのカードでカルーセルに。

    記事・メディア／記事カードグリッド型
  7. 07

    ABOUT

    大きな英字の見出しと、施設の紹介文。

    コンセプト／写真＋メッセージ型
  8. 08

    STAY・EAT・PLAY

    泊まる・食べる・遊ぶを色分けした入口で。

    メニュー・サービス／アイコン／写真グリッド型
  9. 09
  10. 10

    スマホ追従ボタン

    アクセス・団体様向けおすすめプラン。

    行動喚起／SP追従ボタンバー型
グリーンパーク山東の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01楽しさを伝えたい施設は、写真とイラストを重ねたコラージュでファーストビューをつくる
  2. 02営業状況（開いているか）と予約・空き状況の入口を、ファーストビューのすぐ下に置く
  3. 03施設やサービスの種類が多いときは、アイコンつきのメニューで一覧にする
  4. 04個人向けと団体向けの入口を分けて用意する

FAQよくある質問

グリーンパーク山東のサイトで使われているフォントは？

和文はヒラギノ角ゴシック、英字の見出しは Jost、手書き風の英字には Caveat を使っています。無料で近づけるなら、和文は Noto Sans JP が使えます。Jost と Caveat は Google Fonts で無料です。

写真とイラストのコラージュは、どんな施設に向いていますか？

家族連れや若い世代が来る、にぎやかさを伝えたい施設に向いています。落ち着いた高級感を出したい宿泊施設なら、写真1枚を大きく見せるほうが合います。

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

キャンプ場・道の駅・テーマパーク・観光農園などのレジャー施設のほか、地域のイベントや祭りの公式サイトに応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

「グリーンパーク山東のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら