日本のミステリーゲーム向けウェブサイトモックアップ
エレガントな和風ゴシックミステリーゲームのニュースレターサイトに向けた、レスポンシブ対応のデスクトップおよびモバイル用ランディングページモックアップを生成します。
プロンプト
ゴール: 月蝕綺譚 というタイトルの和風ミステリー／ホラーゲームコミュニティ向けに、洗練されたレスポンシブ対応のウェブサイトモックアップを作成してください。デスクトップブラウザのウィンドウとスマートフォンの画面を並べて表示します。
キャンバス: ライトグレーの背景に 16:9 のプレゼンテーション画像。左側に幅の約 75% を占める大きなデスクトップブラウザのモックアップを、右側に縦長のスマートフォンモックアップを配置してください。柔らかな影、角丸のデバイスフレーム、リアルな UI を使用します。
ビジュアルスタイル: エレガントな和風ゴシックミステリーの美学。オフホワイトの和紙テクスチャの背景、深みのあるネイビーブラックのパネル、細いグレーの境界線、落ち着いた赤のアクセント、洗練された明朝体の日本語タイポグラフィ、繊細な墨絵のような線、三日月のモチーフ、古文書、古い地図、暗い森や夜のイメージ、そして高級感のある控えめな余白構成。
デスクトップレイアウト: 上部にダークカラーのクロームバーと 3 つの小さな円形ウィンドウボタンを備えたブラウザウィンドウ。ヘッダー左側にはサイトタイトルのロゴ「月蝕綺譚」と細い三日月の弧、赤い印章を配置。中央に 4 つのナビゲーションリンク「お知らせ」、「開発記録」、「ご意見箱」、「アーカイブ」を配置し、右側にダークネイビーの CTA ボタン「メールで会員になる」を配置します。その下にヒーローセクションを作成し、左側に大きな暗い画像エリア、右側にサインアップカードを配置します。ヒーロー画像には、輝く三日月が浮かぶ曇った夜空と、縦書きのタイトル「月蝕綺譚」、繊細な軌道線と小さな縦書きの注釈を描きます。半透明のアーカイブ風パネルを重ね、古い古文書と 5 つの小さなサムネイルカードを表示します。ヒーロー画像の下部には、夜の古い建物、設計図のような部屋の図面、暗い象徴的なディテール、手書きの文書、地図やスクリーンが置かれた机という、計 5 つの横並びのサムネイル画像を配置してください。
サインアップカード: デスクトップヒーローの右側に、切り込みの入ったクリーム色のチケット型カードを作成します。細い枠線、小さな赤いラベル「入会札」、見出し「メールで会員になる」、封筒アイコン、短い説明文、プレースホルダー「メールアドレスを入力」と書かれたメール入力フィールド、右矢印付きの赤いボタン「登録する」を配置します。その下にプライバシーポリシーへのリンクテキストを小さく追加します。
デスクトップ下部コンテンツ: ヒーローの下、左側に縦の赤い線と見出し 物語の続きを、いちばん近くで。、および小さなグレーの本文を配置します。右側には 3 つの記事カードを横並びに配置します。カード 1 のタイトルセクションは「月蝕綺譚 最新便」、月の画像、赤い「NEW」タグ、見出し「大型アップデート『〇〇』を公開しました」、日付 2024.05.20。カード 2 は「開発記録」、ノートとペンの画像、見出し「開発記録 #12：環境演出の調整について」、日付 2024.05.18。カード 3 は「ご意見箱」、暗い郵便受けの画像、見出し「ご意見・ご感想をお聞かせください」、日付 2024.05.16。各カードのヘッダーには小さな右矢印とグレーのティーザーテキストを含めます。
フッター: デスクトップの幅いっぱいに広がるダークネイビーのフッター。6 つのリンク「お知らせ」、「開発記録」、「ご意見箱」、「アーカイブ」、「利用規約」、「プライバシーポリシー」を配置します。右側に三日月のアイコンと著作権表記「© 2024 月蝕綺譚」を追加します。
モバイルレイアウト: 同じサイトのスマートフォンプレビューを表示します。上部のステータスバーは 9:41 とし、その下に「月蝕綺譚」ロゴとハンバーガーメニューアイコンを備えたコンパクトなヘッダーを配置します。モバイルページは垂直に積み重ねます：タイトル付きのヒーローの月の画像、5 つの小さなサムネイルの横並びストリップ、導入見出し「物語の続きを、いちばん近くで。」、チケット型のメールサインアップカード、そして最初のニュースカード「月蝕綺譚 最新便」（月の画像と NEW タグ付き）。すべての要素がデスクトップレイアウトのモバイルレスポンシブ版として自然に見えるようにしてください。
制約事項: 指定された箇所には日本語のみを使用し、タイポグラフィは鮮明で読みやすくすること。説明以外の余計なセクションは追加しないこと。デスクトップのナビゲーションリンク 4 つ、ヒーローのサムネイル 5 つ、デスクトップの記事カード 3 つ、フッターリンク 6 つ、モバイルのハンバーガーメニュー 1 つという正確な数を維持すること。
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
GPT Image 2 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 画像 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 画像 プロンプトを見る
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。