Tategaki

再現プロンプト

山あいの宿「行間」。写真と縦書きの余白をめぐり、客室・四季・滞在プランを選べるブランドサイト。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build an original, fully responsive one-page Japanese inn website called 行間 (GYOKAN), with the tagline あわいの宿. Return one self-contained HTML file with inline CSS and JavaScript. GSAP and ScrollTrigger may be loaded from a pinned CDN version; all photographs must be supplied as local original assets. This is a fictional brand concept, with an explicitly labelled planning demonstration, not a working booking service. Do not fabricate availability, a successful reservation, payment, a street address or guest reviews. The site's main objective is to help a visitor understand the place, compare its four rooms and review a stay plan. There must be no inert call-to-action and no button labelled as booking that merely jumps to the top.

## Art direction
Use a quiet, Japanese editorial direction. The palette is warm paper #F4F1E9, deep ink #252B26, moss #58634F, divider #D2D2C6, dark seasonal panel #323D32, and pale booking surface #EAE9DF. Photography retains natural colours. Use Hiragino Mincho ProN with Yu Mincho and serif fallbacks for Japanese text, system-ui for small utility labels, and Georgia for English numerals. Do not introduce a font download requirement. Main headings use weight 400; ordinary copy is 14–16px with line-height 2.2–2.4. Utility labels are 10–12px with letter-spacing .14–.18em. Japanese display headings range from 30 to 56px, hero vertical display from 48 to 94px, with .12em tracking. Use font-feature-settings: palt. Spacing steps are 8, 16, 32, 64 and 128px. Desktop sections have 112px vertical and 7.5% horizontal padding, mobile sections 64px and 24px. No rounded-card grid, animated noise overlay, fake loading screen, bouncing seal, testimonial fabrication or decorative marquee.

## Photography assets
Use local WebP assets. The hero is a wide 1536x1024 photograph of a small traditional inn in a wooded Japanese mountain valley at dusk, with pale mist, a visible moon, one warm entrance light, no lettering and no people. Preserve the cabin toward the lower centre and leave calm darker space at the upper right for white vertical typography. For the story section use a quiet photograph of tree shadows on shoji screens with afternoon sunlight crossing tatami mats, no typography. Four original room photographs show: 望, a corner room opening to misty mountains; 凪, a detached room's veranda, wet stone and a water basin; 墨, a writing desk with inkstone and brush; 灯, a paper lantern lighting a room at dusk. Four seasonal photographs show cherry shadows on shoji, pale summer light through a mosquito net, an autumn writing desk and bamboo cricket cage, and snow viewed through a low shoji window. The Motion Palette demo stores these under /img/demos/tategaki/ as inn-vista.webp, 02.webp, room-nozomi.webp, room-nagi.webp, room-sumi.webp, room-akari.webp, season-haru.webp, season-natsu.webp, season-aki.webp and season-fuyu.webp. These paths identify the original project's assets, not publicly guaranteed assets for another website: use the user's provided files or generate original replacements before delivery. Never leave broken image paths. Give each image a meaningful Japanese alt. The hero is eager with high fetch priority; subsequent media is lazy loaded with explicit dimensions and fixed aspect-ratio containers.

## Section 1: Navigation and hero
Build a paper masthead with the 行間 wordmark, small GYOKAN letters, links 宿について / 客室 / 四季 / ご滞在案内, and a separate ご宿泊を計画 button. All four navigation destinations remain available on small screens, arranged in a second row. Do not hide them without a replacement menu. The hero fills the visible content height, with a desktop minimum of 580px and a phone minimum of 540px. The photograph covers the area, object-position 50% 62%, with a restrained dark gradient for contrast. Set the main text vertically on the right: 余白に、 / 泊まる。 Its supporting vertical line reads 日常と、わたしのあいだに。 A small outlined 行間 seal sits next to the title. Above, a small caption reads A SMALL INN, A LITTLE SPACE. and 山あいの宿 ／ 一日四組. At the lower left place 予定をほどいて、 / 何もしない時間を、ひとつ。 At the lower right, 宿を知る and a thin outlined circular down arrow take the visitor to the story. Navigation and CTA are usable immediately; do not delay them behind the title sequence.

## Section 2: Story
Use the label THE SPACE BETWEEN / 行間という場所. Place a large 4:5 crop of the shoji photograph at the left with a small vertical outside caption 耳をすませば、山の呼吸。 The right column begins with a vertically set heading 何もない、が / 満ちてゆく。 Below it use three short readable paragraphs: 窓の外を、雲がゆっくりと渡る。湯気の向こうで、季節がひとつ動く。 / 行間は、山あいに佇む四室だけの宿。旅の予定を増やすより、心に少しの余白をつくる場所でありたい。 / 本を読む。お茶を淹れる。空を見る。どうぞ、ご自身の速さでお過ごしください。 Finish with an underlined 四つの客室をめぐる action. At phone widths place the photograph above the text, keeping a short vertical heading but ordinary horizontal body copy. Never force long instructions into vertical columns.

## Section 3: Rooms
Heading: それぞれの、間。 Supporting copy: 眺めも、光も、過ごし方も。今の気分に合う一室を。 Create an accessible four-tab room selector. Each tab includes one large kanji and small reading: 望 のぞみ / 凪 なぎ / 墨 すみ / 灯 あかり. The selected tab is ink on paper reversed to paper on ink. Selecting a tab updates a single panel containing a large room photo, room name, description, area, equipment and example nightly room price. ArrowLeft/ArrowRight, Home and End operate the tablist with roving tabindex and aria-selected; connect each tab to its panel with aria-controls and aria-labelledby.
The illustrative room data is: 望, 68㎡, mountain corner room, viewing bath/veranda/twin beds, ¥88,000; 凪, 82㎡, garden annex, private garden/semi-open bath/twin beds, ¥108,000; 墨, 54㎡, writing room, writing desk/indoor bath/Japanese bedding, ¥78,000; 灯, 62㎡, moon-viewing room, moon room/indoor bath/twin beds, ¥92,000. Capacity is 1–2 adults per room. Clearly describe these as tax-inclusive example room rates including two meals, based on a fictional inn. The この部屋で滞在を計画 button scrolls to planning and carries the selected room into that form. The picture changes through a 180ms opacity transition only. Desktop uses photo/detail columns in a 1.35:1 ratio with a 7% gap; narrow screens stack them.

## Section 4: Seasons
Use a full-width, two-column dark moss section with a 720px-tall seasonal photo at the left. On the right place IN EVERY SEASON / 四季の間, the vertical heading 季節が、 / おもてなし。, and accessible 春 / 夏 / 秋 / 冬 tabs. Selection updates both photograph and the caption: 花を眺める、という予定だけ。 / 涼しさは、風の通り道に。 / 筆を置いて、虫の音を聴く。 / 雪の白さに、心ほどける。 An underline marks the selected season. Do not auto-advance. Support the same keyboard behaviour as the room tabs. At widths up to 440px use a 340px photo above a horizontal heading and the tabs.

## Section 5: Stay guide
A paper section with the label BEFORE YOUR STAY, heading 旅の、支度。, a brief introduction, and four native details/summary disclosures. Topics: check-in/out, meals and allergies, transport, cancellation and changes. The sample check-in is 15:00–18:00 and check-out 11:00. Explain that the inn is fictional, no location is provided, and actual transport and cancellation details would belong here for a real property. Mark the information as example content. Every summary has an adequate tap area and visible focus. A plus symbol rotates 45 degrees on expansion and is decorative; do not replace native keyboard semantics.

## Section 6: Plan a stay
Use MAKE ROOM FOR YOURSELF / ご宿泊を計画 and 次の余白は、いつに。 Above the form visibly state that this is a demonstration, with no availability request, reservation, payment or external submission. Provide labelled controls for room, required arrival date, nights 1–3 and adults 1–2. The date minimum is the current local date, not a hard-coded date and not a UTC date string. A submit button 滞在プランを確認 validates required fields before displaying a focusable inline summary. The summary echoes the selected room, date, nights and guests and calculates room.price times nights. These are room rates; explicitly explain that one guest uses the same example room price as two. Changing any input clears the previous summary. Move focus to the newly displayed summary, without falsely stating that a booking succeeded. Include 条件を選び直す to return to the form. No personal information needs to be collected. Keep the complete flow usable by keyboard and touch.

## Section 7: Footer
Close on ink with a large 行間 wordmark, あわいの宿 and the sentiment 日常へ帰る、そのときに。少し軽くなった、あなたがいますように。 Add a labelled circular top button and the small disclosure MOTION PALETTE · FICTIONAL BRAND CONCEPT. This is the only action that should return to the top.

## Motion, performance and accessibility
Use a single vertical column-mask vocabulary: clip-path inset(0 0 100% 0) to inset(0 0 0% 0), 0.9 seconds, GSAP power3.out, opening delay 0.2 seconds and 0.08-second stagger. Navigation, supporting body text and actions are visible from the start. Subsequent heading masks trigger once at top 90%; do not hide them again on reverse scrolling. On desktop widths at least 900px with a fine pointer, the hero photograph moves at most yPercent 5 across the hero's scroll distance, scrub true and linear. No perpetual animation loop is necessary. CSS response easing is ease-out at 280ms; photo swaps use opacity only at 180ms. Use gsap.matchMedia and revert all contexts on teardown or motion preference changes. Disable masks, parallax, smooth scrolling and transitions for prefers-reduced-motion; final content stays fully visible. Reuse the existing project's scroller, avoiding a second competing scroll library. A standalone HTML page may use normal document scrolling; an embedded React version must use its actual inner scroller for ScrollTrigger. On narrow screens preserve navigation, labels, meaningful photo crops, focus outlines and 44px primary controls. Test at 375, 768 and 1440px, reduced motion, keyboard navigation, changing room/season tabs, invalid date submissions, summary recalculation and going back to edit. Do not claim a commercial booking system or guaranteed reproduction until these checks pass.

## Japanese site content (current specification)
The site is aimed at Japanese-speaking visitors. Keep brand and typeface names where appropriate. Use Japanese navigation, headings, body, product information, CTA labels, validation and confirmation. Use lang=ja. Adjust line-height, line wrapping and SVG text measurement for Japanese; do not retain Latin-only text widths. Use the following display copy from the implemented Japanese page. It supersedes the earlier English prose, headlines and sample claims in the design brief.
[
  "望",
  "のぞみ",
  "山を望む角部屋",
  "角部屋の窓の向こうに広がる朝靄の山なみ",
  "窓を開けると、山の一日が始まる。二面の窓と広い縁側を備えた、眺めのよい一室です。",
  "展望風呂・縁側・ツインベッド",
  "凪",
  "なぎ",
  "庭にひらく離れ",
  "離れの縁側に続く濡れた石と手水鉢",
  "母屋から少し離れて、水音のそばへ。庭に向かう縁側で、ふたりだけの時間をお過ごしいただけます。",
  "専用庭・半露天風呂・ツインベッド",
  "墨",
  "すみ",
  "書に親しむ静かな間",
  "静かな和室の文机に置かれた硯と筆",
  "読みかけの本と、まだ白い便箋と。文机に向かう時間が、いつもとは少し違う余白をつくります。",
  "文机・内風呂・和の寝室",
  "灯",
  "あかり",
  "月を待つ奥の間",
  "薄暮の和室をやわらかく照らす行灯",
  "日が暮れるにつれて、美しくなる部屋。行灯のやわらかな光と、窓から届く月明かりを楽しむ一室です。",
  "月見の間・内風呂・ツインベッド",
  "春",
  "障子越しに映る桜の枝影",
  "花を眺める、という予定だけ。",
  "夏",
  "蚊帳越しに差し込む夏の淡い光",
  "涼しさは、風の通り道に。",
  "秋",
  "文机に置かれた筆と竹の虫籠",
  "筆を置いて、虫の音を聴く。",
  "冬",
  "雪見障子から望む雪の庭",
  "雪の白さに、心ほどける。",
  "行間 トップへ",
  "行間",
  "行間のご案内",
  "宿について",
  "客室",
  "四季",
  "ご滞在案内",
  "ご宿泊を計画",
  "行間のサイト",
  "月明かりの山あい、木立に囲まれた小さな宿の灯り",
  "山あいの宿 ／ 一日四組",
  "日常と、わたしのあいだに。",
  "余白に、",
  "泊まる。",
  "行",
  "間",
  "予定をほどいて、",
  "何もしない時間を、ひとつ。",
  "宿を知る",
  "行間という場所",
  "障子に映る木立の影と午後の光が差す畳",
  "耳をすませば、山の呼吸。",
  "何もない、が",
  "満ちてゆく。",
  "窓の外を、雲がゆっくりと渡る。",
  "湯気の向こうで、季節がひとつ動く。",
  "行間は、山あいに佇む四室だけの宿。",
  "旅の予定を増やすより、",
  "心に少しの余白をつくる場所でありたい。",
  "本を読む。お茶を淹れる。空を見る。",
  "どうぞ、ご自身の速さでお過ごしください。",
  "四つの客室をめぐる",
  "それぞれの、間。",
  "眺めも、光も、過ごし方も。",
  "今の気分に合う一室を。",
  "客室を選ぶ",
  "広さ・定員",
  "／ 1〜2名",
  "しつらえ",
  "料金例",
  "1室・2名・1泊2食付き／税込の設定例",
  "この部屋で滞在を計画",
  "架空の宿のデザインサンプルです。",
  "四季の間",
  "季節が、",
  "おもてなし。",
  "季節を選ぶ",
  "旅の、支度。",
  "気になることを、先に少し。",
  "安心して、余白の時間へ。",
  "以下はサイトの構成を体験するための設定例です。",
  "チェックイン・チェックアウトについて",
  "チェックインは15時から18時、チェックアウトは翌11時の設定です。到着後はラウンジでお茶をお楽しみいただけます。",
  "食事・アレルギーについて",
  "夕食と朝食を含むプランです。実際の宿泊施設では、ご予約前にアレルギー対応の範囲を施設へご確認ください。",
  "交通・送迎について",
  "この宿は架空のため、所在地や地図は掲載していません。実際のサイトでは、最寄り駅・駐車場・送迎予約の情報をここに掲載します。",
  "キャンセル・変更について",
  "この画面で予約やお支払いは発生しません。実運用時には、予約確定前にキャンセル条件と変更方法を表示します。",
  "次の余白は、いつに。",
  "お部屋と日程から、滞在を思い描く。",
  "条件を選ぶと、料金の目安を確認できます。",
  "体験用の予約フォームです。空室照会・予約確定・決済・外部送信は行いません。",
  "お部屋",
  "チェックイン",
  "泊数",
  "泊",
  "人数",
  "大人1名",
  "大人2名",
  "滞在プランを確認",
  "YOUR STAY · ご選択の内容",
  "の間で、",
  "泊。",
  "から ／ 大人",
  "名 ／ 1室",
  "税込・料金例",
  "1室料金のため1名でも同額の設定です。実際の空室・宿泊料金を示すものではありません。",
  "条件を選び直す",
  "あわいの宿",
  "日常へ帰る、そのときに。",
  "少し軽くなった、あなたがいますように。",
  "ページの先頭へ戻る"
]