ホーチミン観光情報ガイド
ツアー予約はこちら

カテゴリー

エステ・スパ・美容ベトナム雑貨・お土産レストランツアー・観光

おすすめコンテンツ

\ stroke-width='2' d=article_d記事一覧\ stroke-width='2' d=coupon_dクーポン\ stroke-width='2' d=pin_d\ stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'すべての場所\ stroke-width='2' d=mail_dお問い合わせ

インフォメーション

このサイトについて運営会社プライバシーポリシー利用規約サイト運営チーム

フォローする

FacebookXInstagramTikTokYouTube

© 2026 ホーチミン観光情報ガイド

Style Guide

Design system for category_article layout

Colors

Brand Colors

Primary

#ec4899 / pink-500

Primary Dark

#db2777 / pink-600

Body Text

#1a202c / gray-900

Secondary Text

#4a5568 / gray-600

Surface Colors

Background

#ffffff / white

Surface

#f7fafc / gray-50

Border

#edf2f7 / gray-200

Footer

#1a202c / gray-900

Accent Colors

Facebook

blue-500

X (Twitter)

black

LINE

green-500

YouTube

red-600

Star Ratings

yellow-400

Lab Tokens

Visual identity for the 旅行ラボ (Travel Lab) experience — a "research room" aestheticcombining navy precision, vermillion accents, and paper-toned surfaces. Defined inapp/assets/stylesheets/tailwind.cssunder @theme.

Lab Colors

Navy

#1F3A5F / lab-navy

Vermillion

#C9302C / lab-vermillion

Paper

#FAF6EE / lab-paper

Rule

#E5DEC9 / lab-rule

Body

#4A5B73 / lab-body

Meta

#6B7280 / lab-meta

Lab Typography

Research-room label — IBM Plex Mono, uppercase, tracking-widest

THEME #001 — COFFEE THIRD WAVE

Hypothesis heading — Noto Sans JP, bold, lab-navy

ホーチミンのコーヒーは第三波へ移行している

Body — Inter / Noto Sans JP, lab-body

旅行者と研究員が共に問いを立て、観察し、記録する。観光カタログでは出会えない街の表情を、一杯のコーヒーから読み解いていく。

Meta — Inter, lab-meta, small

研究員: ヴィン ／ 開催日: 2026年6月15日 ／ 募集中

Archived Tone Filter

Apply .archived-toneto images in the lab archive to give them a desaturated, sepia-tinted "past records"feel. Hovering restores the full-color image.

Archived (default) — hover to restore

Original (no filter)

Typography

Font Family

Inter, Noto Sans JP, system-ui, -apple-system, sans-serif

Hero Title (h1) - 3.75rem / font-bold

ホーチミンの魅力を発見

Section Title (h2) - 1.875rem / font-bold

セクションタイトル

Card Title (h3) - 1.125rem / font-bold

カードタイトル

Body Text - 18px / normal

これは本文テキストです。記事の本文は18pxで表示され、読みやすい行間で設定されています。日本語と英語が混在するコンテンツでも美しく表示されるよう最適化されています。

Secondary Text - 0.875rem / text-gray-600

補足テキストや説明文に使用します。

Caption / Meta - 0.75rem / text-gray-500

2024年1月15日 更新

Buttons

Primary Buttons

Primary ButtonPrimary Rounded

Secondary Buttons

Dark ButtonOutline Button

Action Pills

Action PillSuccess PillDanger Pill

Cards

Standard Card

Image Placeholder

カードタイトル

カードの説明文がここに入ります。長い説明文は3行でクリップされます。

2024年1月15日
Image Placeholder

カードタイトル

カードの説明文がここに入ります。長い説明文は3行でクリップされます。

2024年1月15日
Image Placeholder

カードタイトル

カードの説明文がここに入ります。長い説明文は3行でクリップされます。

2024年1月15日

Place Card

共通パーシャルapp/views/places/_card.html.slimをカテゴリー一覧、エリア一覧、検索結果などで使用します。

ローカルパラメータ:show_image_badge(画像左上の「予約可能」バッジ)、show_area(メタ列にエリア名)、show_reservation_pill(メタ列に予約可能ピル / 既定 true)。

render 'places/card', place: place

480 × 320

クアン・ブイ・ガーデン

Quan Bui Garden

緑あふれる庭で楽しむ本格ベトナム料理。フォーやバインミーなど定番から珍しい一品まで。

バインセオフォーバインミー
★ 4.6(32件)ベトナム料理予約可能

render 'places/card', place: place, show_image_badge: true, show_area: true, show_reservation_pill: false

480 × 320
予約可能

レストラン名

Restaurant Name

説明文。

バインセオフォー
★ 4.4(12件)ベトナム料理ドンコイ通り

render 'places/card', place: place, show_area: true

480 × 320

レストラン名

Restaurant Name

説明文。

★ 4.2(8件)ベトナム料理ベンタイン市場周辺予約可能

Tour Card

共通パーシャルapp/views/shared/_tour_card.html.slimを Item を表示するすべてのグリッド／CTA で使用します。Item の表示箇所では新しいバリアントを作らず、必ずこのパーシャルを使ってください。

ローカルパラメータ:position(data-position 用)、anchor(item_path に付ける anchor。例:reservation_form)、data(link_to の data-属性にマージ)。

render 'shared/tour_card', item: item

400 × 300

メコン1日ツアー（チョコレート工場+永長寺）

13,600円
2,230,000 VND
観光スポット
400 × 300

クチトンネル日帰りツアー

8,500円
1,395,000 VND
観光スポット
400 × 300

ホーチミン市内観光ハーフデイ

5,000円
820,000 VND
観光スポット
400 × 300

ナイトクルーズ＆水上人形劇

6,200円
1,015,000 VND
観光スポット

render 'shared/tour_card', item: item, anchor: 'reservation_form',data: { track: 'related_cta_click' }

関連ツアー／記事内 CTA など、予約導線に使う場合はanchor: 'reservation_form'を渡して item ページの予約フォームへ直接スクロールさせます。

Components

Breadcrumb

Social Share

SHARE
fXL

Author Box

この記事を書いた人

著者名

ホーチミン在住のライター。グルメとカフェ巡りが趣味。地元の人しか知らない穴場スポットを紹介しています。

他の記事を見るフォローする

Reservation Banner

今すぐ予約する

お得なツアーを見つけよう

ツアー一覧を見る

Pagination

Desktop Pagination

ページ送りコンポーネント。現在のページはピンクでハイライトされます。

Mobile Pagination

モバイル向けのシンプルなページ送り。前後のボタンとページ番号を表示します。

Disabled State

最初または最後のページでは前後ボタンが無効化されます。

Layout

Grid System

レスポンシブグリッドの例

3-Column Grid (Articles)

Column
Column
Column

4-Column Grid (Items)

Item
Item
Item
Item

Content Widths

max-w-4xl (896px) - Article body

max-w-7xl (1280px) - Section grid

Forms

Icons

アイコンはSVGインラインで使用します。

🏠
Home
🔍
Search
❤️
Favorite
📍
Location
📞
Phone
⭐
Star
📅
Calendar
✏️
Edit

Popular Food Icons

レストランカードと詳細ページで、タグに含まれる人気フード名を可愛いアイコンで表示します。対応キーワード: Pho / Banh Mi / Banh Xeo / Cha gio / Goi cuon (大文字小文字は不問)。

バインセオ
バインセオ
.text-gray-400.font-mono = slug
フォー
フォー
.text-gray-400.font-mono = slug
バインミー
バインミー
.text-gray-400.font-mono = slug
揚げ春巻き
揚げ春巻き
.text-gray-400.font-mono = slug
生春巻き
生春巻き
.text-gray-400.font-mono = slug

Food Icon Chips (Detail Page)

バインセオフォーバインミー揚げ春巻き生春巻き

Main Layout Components

These components use Bootstrap 3 and custom SASS styles (not Tailwind).

CRO Reservation Block

The primary CTA block on the homepage. Uses trust bar, LINE CTA, and category-colored cards.

CSS Classes:

  • .cro-reservation-block — Container
  • .cro-trust-bar — Trust signals row
  • .cro-line-cta — LINE CTA (green #06C755)
  • .cro-card--spa — Spa card (pink gradient #C2185B)
  • .cro-card--tour — Tour card (teal gradient #00796B)
  • .cro-card-sm--restaurant — Restaurant card (orange gradient #E65100)
  • .cro-card-sm--ticket — Ticket card (blue gradient #1565C0)

File:app/views/layouts/_reservation_links.html.slim

Place Cards

Place list cards use .list-container with .media layout (Bootstrap 3).

  • .list-container — Card wrapper
  • .media — Bootstrap media object
  • .place-card-name — Place name (100% font-size on mobile)
  • .price-jpy — Price display (115% font-size on mobile)

File:app/views/places/_list.html.slim

Mobile Header

Fixed header with logo, category nav icons, and hamburger menu.

  • header.menu — Fixed header (65px, z-index: 10)
  • .mobile-header — Container (position: relative)
  • .slidemenu — Hamburger icon (absolute, right: 12px, z-index: 11)

File:app/views/layouts/_header.html.slim

Mobile In-Page Navigation

Sticky horizontal nav bar on mobile top page. Anchors to page sections.

  • .mobile-in-page-nav — Sticky container (top: 65px, z-index: 9)
  • .mobile-in-page-nav__inner — Flex scroll container
  • .mobile-in-page-nav__item — Nav item with glyphicon + label
  • [id^="section-"] — Anchor targets (scroll-margin-top: 120px)

File:app/views/layouts/_mobile_in_page_nav.html.slim

Reference Files

  • app/views/layouts/category_article.html.slim- Reference layout
  • app/views/category_articles/show.html.slim- Reference page
  • app/assets/stylesheets/category_article/application.scss- Custom styles
  • .claude/skills/design-system/SKILL.md- Full design system documentation
LINE公式アカウント