日本のミステリーサイトのモックアップ
雰囲気のある日本のミステリーストーリーやゲームサイト向けの、レスポンシブなデスクトップおよびモバイル UI モックアップを生成します。
プロンプト
ゴール：月蝕綺譚 というタイトルの日本のミステリーゲームやストーリーアーカイブ向けの洗練されたウェブサイトモックアップを作成する。左側にデスクトップブラウザのウィンドウ、右側にスマートフォン画面を配置したレスポンシブデザインのプレビューとして表示する。
キャンバス：ライトグレーの背景に 16:9 の横長プレゼンテーション画像。左側に幅の約 75% を占める大きなデスクトップブラウザのモックアップを、右側に幅の約 22% を占める縦長のスマートフォンモックアップを配置する。ソフトシャドウをかけたリアルなデバイスフレームを使用すること。
ビジュアルスタイル：エレガントな日本の文学的ホラー、静かなミステリー、アーカイブ資料、月明かりの闇。アイボリーの紙、黒インク、深いネイビーブラック、落ち着いたグレー、そしてアクセントに鮮やかな朱色を使用する。日本語のセリフ体タイポグラフィ、細い罫線、チケットのような枠線、繊細な紙の質感、古い原稿のイメージ、そして淡い三日月軌道のライングラフィックを用いる。全体的なムードは、ナラティブゲームのプレミアムな公式サイトのように感じられるものとする。
デスクトップレイアウト：ダークなトップバーと 3 つの小さなウィンドウドットを備えたブラウザウィンドウを表示する。ページ内には、左側にサイトタイトル 月蝕綺譚、小さな朱色の印章、そして「お知らせ」、「開発記録」、「ご意見箱」、「アーカイブ」の 4 つの項目と、ダークネイビーの「メールで会員になる」ボタンという計 5 つの水平ナビゲーション項目を配置したアイボリーのヘッダーを使用する。その下のヒーローセクションは、輝く三日月／日食の上に垂直のタイトル「月蝕綺譚」を中央配置した、ダークな月食のワイドビジュアルとする。その上に、古い日本の文書をあしらった半透明のアーカイブ UI カードを重ね、オーバーレイの下部に 5 つの小さな収集品／文書カードを配置する。ヒーロー画像の一番下には、夜の街、設計図のような部屋、暗いフォルダやオブジェクト、古い手書きの紙、デスク／ワークスペースの地図を示す 5 つのサムネイルストリップを並べる。
デスクトップ右側の登録カード：ヒーローの右側に、半円形の切り込みと細い装飾枠が入った、クリーム色の大きなチケット型会員カードを配置する。小さな「入会札」というラベル、スタンプのエンブレム、見出し「メールで会員になる」、封筒アイコン、短い説明文、プレースホルダー「メールアドレスを入力」と書かれたメール入力フィールド、右矢印付きの赤い「登録する」CTA ボタンを含める。その下に小さなプライバシーポリシーのテキストを記載する。
デスクトップ下部のコンテンツ：ヒーローの下に、2 カラム構成のようなセクションを作る。左側には、細い垂直の赤い線と小さな説明文を添えた、大きな日本語のタグライン 物語の続きを、いちばん近くで。 を配置する。右側には、3 つの記事カードを横に並べる。カードの内容：1) 月の画像と小さな赤い「NEW」ラベル、「大型アップデート『○○』を公開しました」というタイトル、日付 2024.05.20 を含む「月蝕綺譚 最新便」；2) ノートとペンの画像、「開発記録 #12：環境音の調整について」というタイトル、日付 2024.05.18 を含む「開発記録」；3) 暗い郵便受けの画像、「ご意見・ご感想をお聞かせください」というタイトル、日付 2024.05.16 を含む「ご意見箱」。各カードには細い枠線、ヘッダーに小さな矢印、グレーのプレースホルダーの要約行を含める。
デスクトップフッター：下部にダークネイビーのフッターを配置し、「お知らせ」、「開発記録」、「ご意見箱」、「アーカイブ」、「利用規約」、「プライバシーポリシー」の 6 つのリンクを並べる。右側に三日月のアイコンと著作権表記「© 2024 月蝕綺譚」を含める。
モバイルレイアウト：右側のスマートフォンには、モバイル向けに最適化された同じサイトを表示する。ステータスバーの時刻は 9:41 とする。ヘッダーにはタイトル「月蝕綺譚」とハンバーガーメニューアイコンを配置する。その下に、日食と垂直タイトルを表示したコンパクトなダークヒーロー、次に 5 つの小さな水平サムネイルを表示する。続いてタグライン「物語の続きを、いちばん近くで。」、チケット型のメール登録カード、そして月画像と赤い「NEW」ラベル付きの最初のニュースカード「月蝕綺譚 最新便」を配置する。モバイルビューは垂直スクロールが可能に見えるようにしつつ、スマホ画面内に収めること。
制約事項：表示されるすべてのインターフェーステキストは指定通り日本語にすること。クリーンで高精細な UI モックアップレンダリング、鮮明なタイポグラフィ、繊細なシャドウを使用し、余計なロゴやウォーターマークは入れないこと。実装計画用に生成された完成済みのウェブ／アプリモックアップのように見えるデザインにすること。
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
GPT Image 2 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 画像 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 画像 プロンプトを見る
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。