Genera un mockup dell'interfaccia utente desktop e mobile responsive per un sito web dedicato a una storia o a un gioco di mistero giapponese dall'atmosfera suggestiva.
Obiettivo: Creare un mockup di sito web curato per un gioco o un archivio di storie di mistero giapponesi intitolato 月蝕綺譚, mostrato come anteprima di design responsive con una finestra del browser desktop a sinistra e lo schermo di uno smartphone a destra.
Canvas: Immagine di presentazione in formato 16:9 su sfondo grigio chiaro. Posizionare un ampio mockup di browser desktop che occupi circa il 75% della larghezza a sinistra e un mockup di smartphone verticale che occupi circa il 22% della larghezza a destra. Utilizzare cornici di dispositivi realistiche con ombre morbide.
Stile visivo: Horror letterario giapponese elegante, mistero silenzioso, documenti d'archivio, oscurità al chiaro di luna. Palette composta da carta avorio, inchiostro nero, blu navy profondo, grigio tenue e un forte accento rosso vermiglio. Utilizzare tipografia giapponese serif, linee sottili, bordi simili a biglietti, texture di carta delicata, immagini di antichi manoscritti e grafiche sfumate con orbite a mezzaluna. L'atmosfera generale deve richiamare quella di un sito web ufficiale di alta qualità per un gioco narrativo.
Layout desktop: Mostrare una finestra del browser con una barra superiore scura e tre piccoli punti finestra. All'interno della pagina, utilizzare un'intestazione color avorio con il titolo del sito 月蝕綺譚 a sinistra, un piccolo sigillo rosso e esattamente 5 elementi di navigazione orizzontali: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 e un pulsante blu navy scuro con l'etichetta 「メールで会員になる」. La sezione hero sottostante presenta un'ampia immagine scura di un'eclissi lunare con il titolo verticale 「月蝕綺譚」 centrato sopra una mezzaluna/eclissi luminosa. Sovrapporre una scheda UI d'archivio traslucida con documenti giapponesi antichi ed esattamente 5 piccole schede di oggetti collezionabili/documenti lungo la parte inferiore della sovrapposizione. Lungo la parte inferiore dell'immagine hero, includere esattamente 5 strisce di miniature orizzontali che mostrano: una strada notturna, una stanza simile a un progetto, una cartella o un oggetto scuro, vecchi documenti scritti a mano e una mappa di una scrivania/area di lavoro.
Scheda di iscrizione a destra (desktop): A destra dell'hero, posizionare una grande scheda di iscrizione a forma di biglietto color crema con tacche a semicerchio e un sottile bordo decorativo. Include la piccola etichetta 「入会札」, un emblema a timbro, il titolo 「メールで会員になる」, un'icona a busta, un breve testo esplicativo, un campo di inserimento email con segnaposto 「メールアドレスを入力」 e un pulsante CTA rosso con l'etichetta 「登録する」 e una freccia rivolta a destra. Includere un piccolo testo sulla privacy policy in basso.
Contenuto inferiore (desktop): Sotto l'hero, creare una sezione che dia l'idea di due colonne. A sinistra, un grande slogan giapponese 物語の続きを、いちばん近くで。 con una sottile linea rossa verticale e un piccolo paragrafo descrittivo. A destra, posizionare esattamente 3 schede articolo in fila. Le 3 schede sono: 1) 「月蝕綺譚 最新便」 con un'immagine della luna, una piccola etichetta rossa NEW, titolo 「大型アップデート『○○』を公開しました」, data 2024.05.20; 2) 「開発記録」 con un'immagine di un taccuino e una penna, titolo 「開発記録 #12:環境音の調整について」, data 2024.05.18; 3) 「ご意見箱」 con un'immagine di una cassetta delle lettere scura, titolo 「ご意見・ご感想をお聞かせください」, data 2024.05.16. Ogni scheda ha un bordo sottile, una piccola freccia nell'intestazione e linee segnaposto grigie per il riassunto.
Piè di pagina (desktop): Aggiungere un footer blu navy scuro che copra la parte inferiore con esattamente 6 link: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Includere un'icona a mezzaluna e il copyright 「© 2024 月蝕綺譚」 sulla destra.
Layout mobile: Sullo smartphone a destra, mostrare lo stesso sito adattato al mobile. L'ora nella barra di stato segna 9:41. L'intestazione contiene il titolo 「月蝕綺譚」 e un'icona a menu hamburger. Sotto, mostrare un hero scuro compatto con l'eclissi e il titolo verticale, poi esattamente 5 piccole miniature orizzontali. Proseguire con lo slogan 「物語の続きを、いちばん近くで。」, poi la stessa scheda di iscrizione email a forma di biglietto, quindi la prima scheda di notizie 「月蝕綺譚 最新便」 con immagine della luna ed etichetta rossa NEW. La vista mobile deve apparire scorrevole verticalmente ma contenuta all'interno dello schermo del telefono.
Vincoli: Mantenere tutto il testo dell'interfaccia visibile in giapponese come specificato. Utilizzare un rendering del mockup dell'interfaccia utente pulito e ad alta fedeltà, tipografia nitida, ombre sottili e nessun logo o filigrana extra. Il design deve apparire come un mockup di web/app finito, generato per la pianificazione dell'implementazione.