まさた｜Web制作をAIで自動化

これはコーダーもデザイナーも大歓喜のAIの使い方だわ...。 実案件あるあるな『PCのデザインカンプ』しかないときにNanobanana Proを使えば、一瞬でSPカンプが作れる。 添付の動画を見てもらったら分かるけど、短時間で良い感じのものが生成できてる。 実際に使ったプロンプトはこちら↓ --------------- # 命令 あなたは熟練したUIデザイナーです。 添付された「PC版Webデザインの一部（セクション）」画像を解析し、そのパーツがスマホ（SP）画面で表示された際の最適なレイアウト画像を生成してください。 # 生成のルール（セクション特化） 1. 独立したコンポーネントとして処理: - ヘッダーやフッター、余計なナビゲーションバーは一切追加しないでください。 - 画像にある要素（テキスト、アイコン、写真）のみを使用して再構成してください。 2. レイアウトのレスポンシブ化（Stacking）: - PCで横並び（Horizontal row）になっている要素は、スマホ用に縦積み（Vertical column）に変更してください。 - 余白（Padding/Margin）はスマホの狭い画面幅に合わせて適切に調整してください。 3. デザインの継承: - 元画像の配色、フォントの雰囲気、装飾スタイルを維持してください。 - 画像のアスペクト比は、要素が縦に並ぶことを想定して 縦長（3:4 または 9:16）で生成してください。 # アクション 添付画像のセクションを、スマホの画面幅（375px〜）に最適化したデザインカンプとして1枚生成してください。

78,088 Aufrufe