Erstellt ein responsives Desktop- und Mobile-Landingpage-Mockup für eine elegante japanische Gothic-Mystery-Spiel-Newsletter-Seite.
Eingabe
Bild kostenlos generieren Ziel: Erstellung eines ausgefeilten, responsiven Website-Mockups für eine japanische Mystery-/Horror-Spiel-Community namens 月蝕綺譚 , dargestellt als Desktop-Browserfenster und Smartphone-Bildschirm nebeneinander.
Canvas: 16:9-Präsentationsbild auf hellgrauem Hintergrund. Platzieren Sie links ein großes Desktop-Browser-Mockup, das etwa 75 % der Breite einnimmt, und rechts ein schmales Smartphone-Mockup. Verwenden Sie weiche Schatten, abgerundete Geräteecken und ein realistisches UI-Design.
Visueller Stil: Elegante japanische Gothic-Mystery-Ästhetik, Hintergründe mit cremefarbener Washi-Papier-Textur, tiefdunkelblaue Panels, dünne graue Ränder, gedeckte rote Akzente, raffinierte japanische Serifenschrift, subtile tuscheartige Linien, Mondsichel-Motive, Archivdokumente, alte Karten, dunkle Wald-/Nacht-Bilder und ein zurückhaltendes, erstklassiges Webdesign-Layout.
Desktop-Layout: Ein Browserfenster mit einer dunklen oberen Chrome-Leiste und drei kleinen kreisförmigen Fenster-Buttons. Der Header enthält links das Logo mit dem Seitentitel 「月蝕綺譚」 mit einem dünnen Mondsichel-Bogen und einem roten Siegel, 4 zentrierte Navigationslinks mit den Bezeichnungen 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 sowie einen dunkelblauen Call-to-Action-Button auf der rechten Seite mit der Aufschrift 「メールで会員になる」. Darunter erstellen Sie einen Hero-Bereich, der in einen großen dunklen Bildbereich auf der linken Seite und eine Anmeldekarte auf der rechten Seite unterteilt ist. Das Hero-Bild zeigt einen bewölkten Nachthimmel mit einer leuchtenden, verfinsterten Mondsichel und vertikalem Titeltext 「月蝕綺譚」, mit feinen kreisförmigen Umlaufbahnen und kleinen vertikalen Anmerkungen. Legen Sie ein halbtransparentes Panel im Archiv-Stil darüber, das alte japanische Dokumente und 5 kleine Thumbnail-Karten enthält; am unteren Rand des Hero-Bildes fügen Sie genau 5 horizontale Thumbnail-Bilder ein: ein altes Gebäude bei Nacht, eine blaupausenartige Raumzeichnung, ein dunkles symbolisches Detail, handschriftliche Dokumente und einen Schreibtisch mit Karten/Bildschirmen.
Anmeldekarte: Erstellen Sie rechts neben dem Desktop-Hero eine cremefarbene, ticketförmige Karte mit eingekerbten Rändern, dünnem Rand, kleinem roten Etikett 「入会札」, der Überschrift 「メールで会員になる」, einem Umschlag-Symbol, einem kurzen erklärenden Text, einem E-Mail-Eingabefeld mit dem Platzhalter 「メールアドレスを入力」 und einem roten Button mit der Aufschrift 「登録する」 und einem Pfeil nach rechts. Fügen Sie darunter einen kleinen Text im Stil einer Datenschutzrichtlinie hinzu.
Desktop-Inhalt (unterer Bereich): Platzieren Sie unter dem Hero auf der linken Seite eine große Intro-Nachricht mit einer vertikalen roten Linie und der Überschrift 物語の続きを、いちばん近くで。 sowie einem kleinen grauen Fließtext. Platzieren Sie rechts genau 3 Artikelkarten in einer Reihe. Karten-Titelbereich 1: 「月蝕綺譚 最新便」 mit einem Mondbild, rotem NEW-Tag, Überschrift 「大型アップデート『〇〇』を公開しました」, Datum 2024.05.20. Karten-Titelbereich 2: 「開発記録」 mit einem Notizbuch- und Stift-Bild, Überschrift 「開発記録 #12:環境演出の調整について」, Datum 2024.05.18. Karten-Titelbereich 3: 「ご意見箱」 mit einem dunklen Briefkasten-Bild, Überschrift 「ご意見・ご感想をお聞かせください」, Datum 2024.05.16. Jede Karte hat einen kleinen Pfeil nach rechts im Header und graue Teaser-Zeilen.
Footer: Dunkelblauer Footer, der sich über die gesamte Desktop-Breite erstreckt, mit genau 6 Links: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Fügen Sie in der Nähe der rechten Seite ein Mondsichel-Symbol und den Copyright-Text 「© 2024 月蝕綺譚」 hinzu.
Mobile-Layout: Zeigen Sie eine Smartphone-Vorschau derselben Seite. Die obere Statusleiste zeigt 9:41, gefolgt von einem kompakten Header mit dem Logo 「月蝕綺譚」 und einem Hamburger-Menü-Symbol. Die mobile Seite ist vertikal gestapelt: Hero-Mondbild mit Titel, genau 5 kleine Thumbnails in einem horizontalen Streifen, Intro-Überschrift 「物語の続きを、いちばん近くで。」, dieselbe ticketartige E-Mail-Anmeldekarte, dann die erste Nachrichtenkarte 「月蝕綺譚 最新便」 mit dem Mondbild und dem NEW-Tag. Stellen Sie sicher, dass sich alle Elemente wie die mobil-responsive Version des Desktop-Layouts anfühlen.
Einschränkungen: Verwenden Sie nur japanischen Text, wo angegeben, halten Sie die Typografie klar und lesbar, vermeiden Sie zusätzliche Abschnitte über die beschriebenen hinaus und bewahren Sie die genaue Anzahl von 4 Desktop-Navigationslinks, 5 Hero-Thumbnails, 3 Desktop-Artikelkarten, 6 Footer-Links und 1 mobilem Hamburger-Menü.