Erstellt ein responsives Desktop- und Mobile-UI-Mockup für eine atmosphärische Website zu einer japanischen Mystery-Geschichte oder einem Spiel.
Eingabe
Bild kostenlos generieren Ziel: Erstellung eines ausgefeilten Website-Mockups für ein japanisches Mystery-Spiel oder ein Story-Archiv mit dem Titel 月蝕綺譚 , dargestellt als responsive Design-Vorschau mit einem Desktop-Browserfenster auf der linken Seite und einem Smartphone-Bildschirm auf der rechten Seite.
Leinwand: Breitbild-Präsentationsbild im 16:9-Format auf hellgrauem Hintergrund. Platzieren Sie links ein großes Desktop-Browser-Mockup, das etwa 75 % der Breite einnimmt, und rechts ein schmales Smartphone-Mockup, das etwa 22 % der Breite einnimmt. Verwenden Sie realistische Geräte-Rahmen mit weichen Schatten.
Visueller Stil: Eleganter japanischer literarischer Horror, stille Mystik, Archivdokumente, mondbeschienene Dunkelheit. Farbpalette aus elfenbeinfarbenem Papier, schwarzer Tinte, tiefem Marineblau-Schwarz, gedämpftem Grau und einem starken zinnoberroten Akzent. Verwenden Sie japanische Serifentypografie, dünne Linien, ticketartige Ränder, subtile Papiertexturen, Bilder alter Manuskripte und dezente Grafiken von Mondsichel-Umlaufbahnen. Die Gesamtstimmung sollte sich wie eine hochwertige offizielle Website für ein narratives Spiel anfühlen.
Desktop-Layout: Zeigen Sie ein Browserfenster mit einer dunklen oberen Leiste und drei kleinen Fensterpunkten. Innerhalb der Seite verwenden Sie einen elfenbeinfarbenen Header mit dem Seitentitel 月蝕綺譚 auf der linken Seite, einem kleinen roten Siegel und genau 5 horizontalen Navigationselementen: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 und einem dunkelblauen Button mit der Beschriftung 「メールで会員になる」. Der Hero-Bereich darunter ist ein breites, dunkles Mondfinsternis-Visual mit dem vertikalen Titel 「月蝕綺譚」, der über einer leuchtenden Mondsichel/Finsternis zentriert ist. Überlagern Sie dies mit einer halbtransparenten Archiv-UI-Karte mit alten japanischen Dokumenten und genau 5 kleinen Sammler-/Dokumentenkarten am unteren Rand dieses Overlays. Am untersten Rand des Hero-Bildes fügen Sie genau 5 horizontale Thumbnail-Streifen ein, die Folgendes zeigen: eine nächtliche Straße, einen blaupausenartigen Raum, einen dunklen Ordner oder Gegenstand, alte handgeschriebene Papiere und eine Schreibtisch-/Arbeitsplatzkarte.
Desktop-Anmeldekarte rechts: Platzieren Sie rechts neben dem Hero eine große, ticketförmige Mitgliedskarte in Creme mit halbkreisförmigen Einkerbungen und einem dünnen dekorativen Rand. Sie enthält das kleine Etikett 「入会札」, ein Stempel-Emblem, die Überschrift 「メールで会員になる」, ein Briefumschlag-Symbol, einen kurzen erklärenden Text, ein E-Mail-Eingabefeld mit dem Platzhalter 「メールアドレスを入力」 und einen roten CTA-Button mit der Beschriftung 「登録する」 und einem Pfeil nach rechts. Fügen Sie darunter einen winzigen Datenschutzhinweis ein.
Desktop-Inhalt unten: Erstellen Sie unter dem Hero einen Bereich, der wie zwei Spalten wirkt. Links ein großer japanischer Slogan 物語の続きを、いちばん近くで。 mit einer dünnen vertikalen roten Linie und einem kleinen beschreibenden Absatz. Rechts platzieren Sie genau 3 Artikelkarten in einer Reihe. Die 3 Karten sind: 1) 「月蝕綺譚 最新便」 mit einem Mondbild, einem kleinen roten NEW-Label, dem Titel 「大型アップデート『○○』を公開しました」, Datum 2024.05.20; 2) 「開発記録」 mit einem Notizbuch- und Stiftbild, dem Titel 「開発記録 #12:環境音の調整について」, Datum 2024.05.18; 3) 「ご意見箱」 mit einem dunklen Briefkastenbild, dem Titel 「ご意見・ご感想をお聞かせください」, Datum 2024.05.16. Jede Karte hat einen dünnen Rand, einen kleinen Pfeil in der Kopfzeile und graue Platzhalter-Zusammenfassungszeilen.
Desktop-Footer: Fügen Sie einen dunkelblauen Footer hinzu, der sich über die gesamte Breite erstreckt, mit genau 6 Footer-Links: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Fügen Sie rechts ein Mondsichel-Symbol und den Copyright-Hinweis 「© 2024 月蝕綺譚」 hinzu.
Mobile-Layout: Zeigen Sie auf dem Smartphone rechts dieselbe Website, angepasst für Mobilgeräte. Die Statusleiste zeigt die Uhrzeit 9:41. Der Header enthält den Titel 「月蝕綺譚」 und ein Hamburger-Menü-Symbol. Darunter ein kompakter dunkler Hero mit der Finsternis und dem vertikalen Titel, dann genau 5 kleine horizontale Thumbnails. Fahren Sie fort mit dem Slogan 「物語の続きを、いちばん近くで。」, dann derselben ticketförmigen E-Mail-Anmeldekarte, dann der ersten Nachrichtenkarte 「月蝕綺譚 最新便」 mit Mondbild und rotem NEW-Label. Die mobile Ansicht sollte vertikal scrollbar wirken, aber innerhalb des Telefonbildschirms begrenzt sein.
Einschränkungen: Behalten Sie den gesamten sichtbaren Schnittstellentext wie angegeben auf Japanisch bei. Verwenden Sie eine saubere, hochauflösende UI-Mockup-Darstellung, klare Typografie, subtile Schatten und keine zusätzlichen Logos oder Wasserzeichen. Das Design sollte wie ein fertiges Web-/App-Mockup aussehen, das für die Implementierungsplanung erstellt wurde.