FRAME

이미지 프롬프트 · GPT Image 2

일본 미스터리 웹사이트 목업

일본 미스터리 웹사이트 목업 예시 이미지

분위기 있는 일본 미스터리 스토리 또는 게임 웹사이트를 위한 반응형 데스크톱 및 모바일 UI 목업을 생성합니다.

프롬프트 (한국어)

목표: 왼쪽에 데스크탑 브라우저 창 하나, 오른쪽에 스마트폰 화면 하나가 있는 반응형 디자인 미리보기로 표시되는 {argument name="site title" default="月蝕綺譚"}라는 제목의 일본 미스터리 게임 또는 스토리 아카이브에 대한 세련된 웹사이트 모형을 만듭니다.

캔버스: 연한 회색 배경의 와이드 16:9 프레젠테이션 이미지입니다. 너비의 약 75%를 차지하는 대형 데스크톱 브라우저 모형을 왼쪽에 배치하고, 너비의 약 22%를 차지하는 큰 스마트폰 모형을 오른쪽에 배치합니다. 부드러운 그림자가 있는 사실적인 장치 프레임을 사용합니다.

시각적 스타일: 우아한 일본 문학적 공포, 조용한 미스터리, 기록 문서, 달빛이 비치는 어둠. 상아색 종이, 검정 잉크, 진한 네이비 검정, 차분한 회색, 강렬한 주홍색 액센트 1개로 구성된 팔레트입니다. 세리프 일본어 타이포그래피, 얇은 괘선, 티켓 같은 테두리, 미묘한 종이 질감, 오래된 원고 이미지, 희미한 초승달 궤도 선 그래픽을 사용하세요. 전체적인 분위기는 내러티브 게임의 프리미엄 공식 홈페이지 같은 느낌이 나야 합니다.

데스크탑 레이아웃: 어두운 상단 표시줄과 세 개의 작은 창 점이 있는 브라우저 창을 표시합니다. 페이지 내부에는 왼쪽에 사이트 제목 {argument name="site title" default="月蝕綺譚"}가 있는 상아색 헤더, 작은 빨간색 도장 표시, 정확히 5개의 가로 탐색 항목(일본어: ご意見箱), 「아카이브」, 그리고 짙은 남색 버튼을 사용하세요. 아래의 영웅 섹션은 빛나는 초승달/일식을 중심으로 세로 제목 「月蝕綺譚」이 있는 넓고 어두운 월식 영상입니다. 반투명 아카이브 UI 카드를 오래된 일본 문서와 오버레이 하단에 정확히 5개의 작은 수집품/문서 카드로 오버레이합니다. 히어로 이미지 맨 아래에는 밤거리, 청사진 같은 방, 어두운 폴더 또는 개체, 손으로 쓴 오래된 서류, 책상/작업 공간 지도 등 정확히 5개의 가로 썸네일 스트립이 포함됩니다.

데스크톱 오른쪽 가입 카드: 영웅 오른쪽에 잘린 반원 노치와 얇은 장식 테두리가 있는 대형 크림색 티켓 모양의 회원 카드를 놓습니다. 여기에는 작은 라벨 '入会札', 우표 엠블럼, 헤드라인 '메일데 会員になRU', 봉투 아이콘, 짧은 설명 텍스트, 자리 표시자 '메이르아드레스を入力'이 포함된 이메일 입력 필드 1개, 오른쪽 화살표가 있는 '登録 suru' 라벨이 붙은 빨간색 CTA 버튼이 포함되어 있습니다. 아래에 작은 개인정보 보호정책 텍스트를 포함하세요.
데스크탑 하단 콘텐츠: 영웅 아래에 2단 느낌의 섹션을 만듭니다. 왼쪽에는 얇은 수직 빨간색 선과 작은 설명 단락이 있는 큰 일본어 태그라인 {argument name="tagline text" default="物語の続きを、いちばん近くで。"}가 있습니다. 오른쪽에는 정확히 3개의 기사 카드를 일렬로 배치합니다. 3개의 카드는 다음과 같습니다: 1) 달 이미지가 있는 「月蝕綺譚 最新便」, 작은 빨간색 NEW 라벨, 제목 「大型appdemeit 『○○』を公開しました」, 날짜 2024.05.20; 2) 노트와 펜 이미지가 있는 「開発記録」, 제목 「開発記録 #12:環境音の調整について」, 날짜 2024.05.18; 3) 「ご意見箱」, 어두운 우체통 이미지, 제목 「ご意見・ご感想をとご意見・ご感想をとをとをあそせだしい」, 날짜 2024.05.16. 각 카드에는 얇은 테두리, 헤더의 작은 화살표, 회색 자리 표시자 요약 줄이 있습니다.

데스크톱 바닥글: 정확히 6개의 바닥글 링크가 포함된 어두운 남색 바닥글을 추가합니다: 「일본어」, 「開発記録」, 「ご意見箱」, 「아카이브」, 「利用規約」, 「프라이바시포리시」. 오른쪽에 초승달 아이콘과 저작권 「© 2024 月蝕綺譚」을 포함합니다.

모바일 레이아웃 : 오른쪽 스마트폰에 모바일에 맞춰진 동일한 사이트를 보여줍니다. 상태 표시줄 시간은 9시 41분입니다. 헤더에는 제목 「月蝕綺譚」과 햄버거 메뉴 아이콘이 포함되어 있습니다. 그 아래에는 일식과 세로 제목이 포함된 콤팩트한 어두운 영웅과 정확히 5개의 작은 가로 미리보기 이미지가 표시됩니다. 계속해서 태그라인인 「일본어의 続kiを、いちばん近ikuded.」, 그 다음에는 동일한 티켓 모양의 이메일 가입 카드, 그리고 달 이미지와 빨간색 NEW 라벨이 있는 첫 번째 뉴스 카드 「月蝕綺譚 最新便」입니다. 모바일 보기는 세로로 스크롤할 수 있어야 하지만 전화기 화면 내에 포함되어야 합니다.

제약 조건: 표시된 모든 인터페이스 텍스트를 지정된 대로 일본어로 유지합니다. 깨끗하고 충실도가 높은 UI 모형 렌더링, 선명한 타이포그래피, 미묘한 그림자를 사용하고 추가 로고나 워터마크가 없습니다. 디자인은 구현 계획을 위해 생성된 완성된 웹/앱 모형처럼 보여야 합니다.

원문 프롬프트

Goal: Create a polished website mockup for a Japanese mystery game or story archive titled {argument name="site title" default="月蝕綺譚"}, shown as a responsive design preview with one desktop browser window on the left and one smartphone screen on the right.

Canvas: Wide 16:9 presentation image on a light gray background. Place a large desktop browser mockup occupying about 75% of the width on the left, and a tall smartphone mockup occupying about 22% of the width on the right. Use realistic device frames with soft shadows.

Visual style: Elegant Japanese literary horror, quiet mystery, archival documents, moonlit darkness. Palette of ivory paper, black ink, deep navy-black, muted gray, and one strong vermilion red accent. Use serif Japanese typography, thin ruled lines, ticket-like borders, subtle paper texture, old manuscript imagery, and faint crescent-orbit line graphics. The overall mood should feel like a premium official website for a narrative game.

Desktop layout: Show a browser window with a dark top bar and three small window dots. Inside the page, use an ivory header with the site title {argument name="site title" default="月蝕綺譚"} on the left, a small red seal mark, and exactly 5 horizontal navigation items: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, and a dark navy button labeled 「メールで会員になる」. The hero section below is a wide dark moon-eclipse visual with the vertical title 「月蝕綺譚」 centered over a glowing crescent/eclipse. Overlay a translucent archive UI card with old Japanese documents and exactly 5 small collectible/document cards along the bottom of that overlay. Along the very bottom of the hero image, include exactly 5 horizontal thumbnail strips showing: a night street, a blueprint-like room, a dark folder or object, old handwritten papers, and a desk/workspace map.

Desktop right signup card: To the right of the hero, place a large cream ticket-shaped membership card with clipped semicircle notches and a thin decorative border. It includes the small label 「入会札」, a stamp emblem, headline 「メールで会員になる」, an envelope icon, short explanatory text, one email input field with placeholder 「メールアドレスを入力」, and a red CTA button labeled 「登録する」 with a right arrow. Include tiny privacy-policy text beneath.

Desktop lower content: Under the hero, make a two-column-feeling section. On the left, a large Japanese tagline {argument name="tagline text" default="物語の続きを、いちばん近くで。"} with a thin vertical red line and a small descriptive paragraph. On the right, place exactly 3 article cards in a row. The 3 cards are: 1) 「月蝕綺譚 最新便」 with a moon image, a small red NEW label, title 「大型アップデート『○○』を公開しました」, date 2024.05.20; 2) 「開発記録」 with a notebook and pen image, title 「開発記録 #12:環境音の調整について」, date 2024.05.18; 3) 「ご意見箱」 with a dark mailbox image, title 「ご意見・ご感想をお聞かせください」, date 2024.05.16. Each card has a thin border, a small arrow in the header, and gray placeholder summary lines.

Desktop footer: Add a dark navy footer spanning the bottom with exactly 6 footer links: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Include a crescent moon icon and copyright 「© 2024 月蝕綺譚」 on the right.

Mobile layout: On the right smartphone, show the same site adapted to mobile. Status bar time reads 9:41. Header contains the title 「月蝕綺譚」 and a hamburger menu icon. Below it, show a compact dark hero with the eclipse and vertical title, then exactly 5 small horizontal thumbnails. Continue with the tagline 「物語の続きを、いちばん近くで。」, then the same ticket-shaped email signup card, then the first news card 「月蝕綺譚 最新便」 with moon image and red NEW label. The mobile view should be vertically scrollable-looking but contained within the phone screen.

Constraints: Keep all visible interface text in Japanese as specified. Use clean, high-fidelity UI mockup rendering, crisp typography, subtle shadows, and no extra logos or watermarks. The design should look like a finished web/app mock generated for implementation planning.

작성자 🍺 イケハヤ@「月蝕綺譚」開発 · 원문 보기

수집 자료의 원작성자와 출처를 표시합니다. 개별 자료의 이용 조건은 원문에서 확인하세요.

갤러리에서 열어 복사·저장하기 →

이 프롬프트 쓰는 법

  1. 원문 프롬프트를 복사해 GPT Image 2에 붙여 넣습니다.
  2. 제품이나 인물처럼 내 것으로 바꿀 부분만 고칩니다. 조명과 구도를 적은 부분은 그대로 둡니다.
  3. 같은 프롬프트로 두세 번 만들어 보고 고릅니다. 매번 조금씩 다르게 나옵니다.

한국어로 적어서 내 것으로 바꾸기 →

Higgsfield에서 GPT Image 2로 만들기 ↗ 제휴 링크

비슷한 프롬프트