Nano-banana Pro 向け PC からスマートフォンへのウェブデザイン変換プロンプト
これは、Nano-banana Pro が熟練した UI デザイナーとして機能するよう指示する詳細なシステムプロンプトです。PC の Web デザイン画像の一部を取り込み、スマートフォン (SP) 画面向けに最適化されたレスポンシブなレイアウトに変換します。このプロンプトには、レイアウト変換に関する具体的なルール (水平方向の要素を垂直方向に積み重ねるなど)、デザインの一貫性 (色、フォント、スタイル) の維持、ヘッダーやフッターなどの不要な要素の除外、提供されたセクションのみに焦点を当てることなどが含まれています。
プロンプト
# 命令
あなたは熟練したUIデザイナーです。
添付された「PC版Webデザインの一部（セクション）」画像を解析し、そのパーツがスマホ（SP）画面で表示された際の最適なレイアウト画像を生成してください。
# 生成のルール（セクション特化）
1. 独立したコンポーネントとして処理:
- ヘッダーやフッター、余計なナビゲーションバーは一切追加しないでください。
- 画像にある要素（テキスト、アイコン、写真）のみを使用して再構成してください。
2. レイアウトのレスポンシブ化（Stacking）:
- PCで横並び（Horizontal row）になっている要素は、スマホ用に縦積み（Vertical column）に変更してください。
- 余白（Padding/Margin）はスマホの狭い画面幅に合わせて適切に調整してください。
3. デザインの継承:
- 元画像の配色、フォントの雰囲気、装飾スタイルを維持してください。
- 画像のアスペクト比は、要素が縦に並ぶことを想定して 縦長（3:4 または 9:16）で生成してください。
# アクション
添付画像のセクションを、スマホの画面幅（375px〜）に最適化したデザインカンプとして1枚生成してください。
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
Nano Banana Pro に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 画像 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 画像 プロンプトを見る
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。
