Objectif : Créer une maquette de site web responsive et soignée pour une communauté de jeu de mystère / horreur japonais appelée 月蝕綺譚, présentée simultanément sous forme de fenêtre de navigateur sur ordinateur et d'écran de smartphone.
Canevas : Image de présentation au format 16:9 sur fond gris clair. Placez une grande maquette de navigateur de bureau sur la gauche, occupant environ 75 % de la largeur, et une maquette de smartphone en hauteur sur la droite. Utilisez des ombres douces, des coins d'appareils arrondis et un encadrement d'interface utilisateur réaliste.
Style visuel : Esthétique mystère gothique japonais élégante, fonds texturés papier washi blanc cassé, panneaux bleu marine profond, bordures grises fines, accents rouge sourd, typographie japonaise serif raffinée, lignes subtiles évoquant l'encre, motifs de croissant de lune, documents d'archives, vieilles cartes, imagerie de forêt sombre/nuit et espacement de conception web haut de gamme et sobre.
Disposition bureau : Une fenêtre de navigateur avec une barre supérieure sombre et trois petits boutons de fenêtre circulaires. L'en-tête contient le logo du titre du site 「月蝕綺譚」 sur la gauche avec un fin arc de croissant et un sceau rouge, 4 liens de navigation centrés intitulés 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, et un bouton d'appel à l'action bleu marine sur la droite intitulé 「メールで会員になる」. En dessous, créez une section héroïque divisée en une grande zone d'image sombre à gauche et une carte d'inscription à droite. L'image héroïque montre un ciel nocturne nuageux avec un croissant de lune éclipsé brillant et un texte de titre vertical 「月蝕綺譚」, avec de fines lignes d'orbite circulaires et de petites annotations verticales. Superposez un panneau translucide de style archive contenant d'anciens documents japonais et 5 petites cartes miniatures ; le long du bas de l'image héroïque, incluez exactement 5 images miniatures horizontales : un vieux bâtiment de nuit, un dessin de pièce ressemblant à un plan, un détail symbolique sombre, des documents manuscrits et un bureau avec des cartes/écrans.
Carte d'inscription : À droite de l'image héroïque sur bureau, créez une carte en forme de ticket crème avec des bords crantés, une bordure fine, une petite étiquette rouge 「入会札」, le titre 「メールで会員になる」, une icône d'enveloppe, un court texte explicatif, un champ de saisie d'e-mail avec l'espace réservé 「メールアドレスを入力」, et un bouton rouge intitulé 「登録する」 avec une flèche vers la droite. Ajoutez un petit texte de style politique de confidentialité en dessous.
Contenu inférieur bureau : Sous l'image héroïque, placez un grand message d'introduction sur la gauche avec une ligne rouge verticale et le titre 物語の続きを、いちばん近くで。, ainsi qu'un petit texte descriptif gris. À droite, placez exactement 3 cartes d'articles en ligne. Section titre de la carte 1 「月蝕綺譚 最新便」 avec une image de lune, une étiquette rouge NEW, le titre 「大型アップデート『〇〇』を公開しました」, date 2024.05.20. Section titre de la carte 2 「開発記録」 avec une image de carnet et de stylo, le titre 「開発記録 #12:環境演出の調整について」, date 2024.05.18. Section titre de la carte 3 「ご意見箱」 avec une image de boîte aux lettres sombre, le titre 「ご意見・ご感想をお聞かせください」, date 2024.05.16. Chaque carte possède une petite flèche vers la droite dans l'en-tête et des lignes d'accroche grises.
Pied de page : Pied de page bleu marine couvrant toute la largeur du bureau avec exactement 6 liens : 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Ajoutez une icône de croissant de lune près de la droite et le texte de copyright 「© 2024 月蝕綺譚」.
Disposition mobile : Affichez un aperçu smartphone du même site. La barre d'état supérieure indique 9:41, suivie d'un en-tête compact avec le logo 「月蝕綺譚」 et une icône de menu hamburger. La page mobile s'empile verticalement : image de lune héroïque avec titre, exactement 5 petites miniatures dans une bande horizontale, titre d'introduction 「物語の続きを、いちばん近くで。」, la même carte d'inscription par e-mail style ticket, puis la première carte d'actualité 「月蝕綺譚 最新便」 avec l'image de la lune et l'étiquette NEW. Assurez-vous que tous les éléments donnent l'impression d'être la version responsive mobile de la disposition bureau.
Contraintes : Utilisez uniquement du texte japonais là où spécifié, gardez une typographie nette et lisible, évitez les sections supplémentaires au-delà de celles décrites, respectez les comptes exacts de 4 liens de navigation bureau, 5 miniatures héroïques, 3 cartes d'articles bureau, 6 liens de pied de page et 1 menu hamburger mobile.