เป้าหมาย: สร้างตัวอย่างเว็บไซต์ที่สวยงามและรองรับการใช้งานบนอุปกรณ์ต่างๆ สำหรับชุมชนเกมแนวลึกลับ / สยองขวัญสไตล์ญี่ปุ่นที่ชื่อว่า 月蝕綺譚 โดยแสดงผลทั้งในรูปแบบหน้าต่างเบราว์เซอร์บนเดสก์ท็อปและหน้าจอมือถือเคียงข้างกัน
ผืนผ้าใบ: ภาพนำเสนออัตราส่วน 16:9 บนพื้นหลังสีเทาอ่อน วางตัวอย่างเบราว์เซอร์เดสก์ท็อปขนาดใหญ่ไว้ทางซ้าย โดยใช้พื้นที่ประมาณ 75% ของความกว้าง และวางตัวอย่างสมาร์ทโฟนทรงสูงไว้ทางขวา ใช้เงาที่นุ่มนวล มุมอุปกรณ์แบบโค้งมน และการจัดวาง UI ที่สมจริง
สไตล์ภาพ: สุนทรียศาสตร์แบบโกธิคญี่ปุ่นที่หรูหรา พื้นหลังมีพื้นผิวเหมือนกระดาษวาชิสีขาวนวล แผงสีน้ำเงินเข้มเกือบดำ ขอบสีเทาบางๆ เน้นสีแดงหม่น ตัวอักษรญี่ปุ่นแบบมีหัวที่ประณีต เส้นสายที่ดูเหมือนหมึกซึม ลวดลายพระจันทร์เสี้ยว เอกสารเก่าแก่ แผนที่โบราณ ภาพป่ามืด/ยามค่ำคืน และการเว้นระยะห่างแบบพรีเมียมที่ดูเรียบหรู
เลย์เอาต์เดสก์ท็อป: หน้าต่างเบราว์เซอร์ที่มีแถบด้านบนสีเข้มและปุ่มหน้าต่างวงกลมเล็กๆ 3 ปุ่ม ส่วนหัวประกอบด้วยโลโก้ชื่อเว็บไซต์ 「月蝕綺譚」 ทางด้านซ้ายพร้อมเส้นโค้งพระจันทร์เสี้ยวบางๆ และตราประทับสีแดง, ลิงก์นำทางที่จัดกึ่งกลาง 4 ลิงก์ ได้แก่ 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 และปุ่ม Call-to-action สีน้ำเงินเข้มทางด้านขวาที่ระบุว่า 「メールで会員になる」 ด้านล่างให้สร้างส่วน Hero ที่แบ่งเป็นพื้นที่ภาพมืดขนาดใหญ่ทางซ้ายและการ์ดสมัครสมาชิกทางขวา ภาพ Hero แสดงท้องฟ้ายามค่ำคืนที่มีเมฆมากพร้อมพระจันทร์เสี้ยวที่เกิดสุริยุปราคาและข้อความชื่อเรื่องแนวตั้ง 「月蝕綺譚」 พร้อมเส้นวงโคจรวงกลมละเอียดและคำอธิบายแนวตั้งขนาดเล็ก วางแผงโปร่งแสงสไตล์เอกสารเก่าที่มีเอกสารญี่ปุ่นโบราณและการ์ดภาพตัวอย่างขนาดเล็ก 5 ใบ; ที่ด้านล่างของภาพ Hero ให้ใส่ภาพตัวอย่างแนวนอนจำนวน 5 ภาพ ได้แก่ อาคารเก่าในยามค่ำคืน, ภาพวาดผังห้องแบบพิมพ์เขียว, รายละเอียดสัญลักษณ์มืดๆ, เอกสารที่เขียนด้วยลายมือ และโต๊ะที่มีแผนที่/หน้าจอ
การ์ดสมัครสมาชิก: ทางด้านขวาของส่วน Hero บนเดสก์ท็อป ให้สร้างการ์ดรูปทรงตั๋วสีครีมที่มีขอบหยัก ขอบบาง ป้ายสีแดงเล็กๆ 「入会札」, หัวข้อ 「メールで会員になる」, ไอคอนซองจดหมาย, ข้อความอธิบายสั้นๆ, ช่องกรอกอีเมลพร้อมข้อความตัวอย่าง 「メールアドレスを入力」 และปุ่มสีแดงที่ระบุว่า 「登録する」 พร้อมลูกศรชี้ไปทางขวา เพิ่มข้อความสไตล์นโยบายความเป็นส่วนตัวขนาดเล็กไว้ด้านล่าง
เนื้อหาส่วนล่างของเดสก์ท็อป: ใต้ส่วน Hero ให้วางข้อความแนะนำขนาดใหญ่ทางด้านซ้ายพร้อมเส้นสีแดงแนวตั้งและหัวข้อ 物語の続きを、いちばん近くで。 พร้อมข้อความเนื้อหาขนาดเล็กสีเทา ทางด้านขวาให้วางการ์ดบทความจำนวน 3 ใบเรียงกัน การ์ดใบที่ 1 ส่วนหัว 「月蝕綺譚 最新便」 พร้อมภาพพระจันทร์ ป้าย NEW สีแดง หัวข้อ 「大型アップデート『〇〇』を公開しました」 วันที่ 2024.05.20 การ์ดใบที่ 2 ส่วนหัว 「開発記録」 พร้อมภาพสมุดบันทึกและปากกา หัวข้อ 「開発記録 #12:環境演出の調整について」 วันที่ 2024.05.18 การ์ดใบที่ 3 ส่วนหัว 「ご意見箱」 พร้อมภาพตู้จดหมายสีเข้ม หัวข้อ 「ご意見・ご感想をお聞かせください」 วันที่ 2024.05.16 การ์ดแต่ละใบมีลูกศรเล็กๆ ชี้ไปทางขวาในส่วนหัวและข้อความเกริ่นนำสีเทา
ส่วนท้าย (Footer): ส่วนท้ายสีน้ำเงินเข้มที่ครอบคลุมความกว้างของเดสก์ท็อปพร้อมลิงก์ 6 ลิงก์: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」 เพิ่มไอคอนพระจันทร์เสี้ยวใกล้ทางด้านขวาและข้อความลิขสิทธิ์ 「© 2024 月蝕綺譚」
เลย์เอาต์มือถือ: แสดงตัวอย่างสมาร์ทโฟนของเว็บไซต์เดียวกัน แถบสถานะด้านบนอ่านว่า 9:41 ตามด้วยส่วนหัวขนาดกะทัดรัดที่มีโลโก้ 「月蝕綺譚」 และไอคอนเมนูแฮมเบอร์เกอร์ หน้ามือถือจะเรียงตัวในแนวตั้ง: ภาพพระจันทร์ส่วน Hero พร้อมชื่อเรื่อง, ภาพตัวอย่างขนาดเล็ก 5 ภาพในแถบแนวนอน, หัวข้อแนะนำ 「物語の続きを、いちばん近くで。」, การ์ดสมัครสมาชิกอีเมลสไตล์ตั๋วแบบเดียวกับเดสก์ท็อป, จากนั้นตามด้วยการ์ดข่าวใบแรก 「月蝕綺譚 最新便」 พร้อมภาพพระจันทร์และป้าย NEW ตรวจสอบให้แน่ใจว่าองค์ประกอบทั้งหมดให้ความรู้สึกเหมือนเป็นเวอร์ชันที่ปรับเปลี่ยนให้เหมาะกับมือถือของเลย์เอาต์เดสก์ท็อป
ข้อจำกัด: ใช้เฉพาะข้อความภาษาญี่ปุ่นตามที่ระบุไว้ รักษาตัวอักษรให้คมชัดและอ่านง่าย หลีกเลี่ยงการเพิ่มส่วนเกินจากที่อธิบายไว้ รักษาจำนวนลิงก์นำทางเดสก์ท็อป 4 ลิงก์, ภาพตัวอย่าง Hero 5 ภาพ, การ์ดบทความเดสก์ท็อป 3 ใบ, ลิงก์ส่วนท้าย 6 ลิงก์ และเมนูแฮมเบอร์เกอร์มือถือ 1 เมนูให้ถูกต้องแม่นยำ