和風ミステリーゲームのWebサイトUIモックアップ
和風ミステリーゲームまたは物語アーカイブサイト「[月蝕綺譚]」の洗練されたレスポンシブWebモックアップ。明るいグレーの背景に、左側に幅約75%のデスクトップブラウザウィンドウ、右側に幅約22%のスマートフォン画面を配置し、リアルなデバイスフレームと柔らかな影で表現。 ビジュアルスタイルと配色： 日本の文学的ホラー、静謐なミステリー、記録文書、月夜の暗闇を感じさせる優雅な世界観。生成り色の紙、墨黒、深いミッドナイトネイビー、くすんだグレー、鮮やかな朱赤のアクセントカラー。明朝体日本語タイポグラフィ、繊細な罫線、チケット風の飾り枠、かすかな月軌道の幾何学模様、古文書のテクスチャ。 デスクトップUIレイアウト： - 上部にダークチャコールの3つのウィンドウボタン付きブラウザバー。 - 生成り色のヘッダーにサイト名「[月蝕綺譚]」、小さな朱印、5つのナビ項目「お知らせ」「開発記録」「ご意見箱」「アーカイブ」、濃紺の「メールで会員になる」ボタン。 - メインビジュアル：輝く月蝕と中央の縦書きタイトル「月蝕綺譚」。半透明の文書UIカード、5枚の収集品カード、下部に並ぶ5つのサムネイル帯（夜の路地、青図面の部屋、黒い書類挟み、古い手書き原稿、机上の捜査地図）。 - 右側の登録カード：半円の切り欠きと飾り枠が付いたチケット型の生成り色カード。「入会札」のタグ、捺印マーク、「メールで会員になる」の見出し、プレースホルダー「メールアドレスを入力」の入力欄、赤いCTAボタン「登録する →」、微細な規約テキスト。 - 下部コンテンツ：左側に縦の赤線と大きな見出し「[物語の続きを、いちばん近くで。]」、説明文。右側に3枚のカード（1:「月蝕綺譚 最新便」月画像・赤NEWラベル・「大型アップデート『○○』を公開しました」2024.05.20、2:「開発記録」ノート画像・「開発記録 #12：環境音の調整について」2024.05.18、3:「ご意見箱」ポスト画像・「ご意見・ご感想をお聞かせください」2024.05.16）。 - 濃紺のフッター：6つのリンク（「お知らせ」「開発記録」「ご意見箱」「アーカイブ」「利用規約」「プライバシーポリシー」）、三日月アイコンと「© 2024 月蝕綺譚」。 スマートフォンUIレイアウト： ステータスバーは9:41。ヘッダーに「月蝕綺譚」とハンバーガーメニュー。縦スクロール型に再構成された月蝕ヒーロー、5枚のミニサムネイル、キャッチコピー「[物語の続きを、いちばん近くで。]」、チケット型会員登録カード、赤いNEW付きの第1ニュースカード。 精密なUI/UX表現、くっきりとした日本語フォント、端正なレイアウト、余分なロゴや透かしのない完成されたデザイン。
