Neito ブランドカラー探索ボード

4 つのアクセントカラーバリエーションを用いた、2×2 の SaaS ブランドアイデンティティおよびランディングページモックアップボードを生成するための構造化プロンプト。

プロンプト

目的: Neito という架空の SaaS ランディングページビルダー向けに、クリーンなブランド探索ボードを作成する。同一のウェブサイトとブランドアイデンティティシステムを、4 つのカラーバリエーションで展開する。キャンバス: 16:9 の横長ホワイトキャンバス。4 つの完全なブランド／ウェブサイトモックアップパネルを 2×2 のグリッド状に配置し、十分な余白を確保する。各パネルは、アクセントカラーとソフトなぼかしグラデーションの装飾以外はほぼ同一とする。レイアウト: 4 つのパネルそれぞれに 2 つの主要エリアを配置する。左側に大きなランディングページのモックアップ、右側に細いブランドガイドカラムを配置する。4 つのアクセントテーマは、1: ブルー、2: グリーン、3: オレンジ、4: パープルとする。ランディングページモックアップの詳細: 左上にロゴマークとして、2 本のスラッシュとそれに続く「Neito」、および小さな星／スパークのシンボルを配置する。上部ナビゲーションには「Product」、「Templates」、「Pricing」、「About」、および黒い角丸の「Get started」ボタンの計 5 つの項目を配置する。中央に大きなエディトリアルセリフ体の見出し「Words become landing pages.」を配置する。その下に、アイデアやコンテンツを美しい共有可能なランディングページに変えるという内容の小さなグレーの補足コピーを添え、さらに黒いピル型ボタン「Start for free」を配置する。ボタンの下には「No code」、「Quick setup」、「Always in sync」というアイコン付きの小さな機能チップを 3 つ配置する。ヒーロー見出しの背後には、パネルのアクセントカラーを用いた、大きく軽やかなぼかし円形グラデーションリングを配置する。下部のウェブサイトカード: 各ヒーローセクションの下に、細い枠線と角丸を持つ長方形のコンテンツカードを 3 つ配置する。カード 1 は「Build pages from your ideas.」と記載し、小さな黒いピル型ボタン「Try Neito」を添える。カード 2 は「Launching soon.」と記載し、小さな角丸のメール入力ピル、黒い「Notify me」ボタン、および細い抽象的な円形ラインのグラフィックを含める。カード 3 は「01」と番号を振り、「Type your thoughts.」と記載し、小さな説明テキストと右下に大きく切り取られたぼかしアクセントカラーのリングを配置する。ブランドガイドカラム: 小さな見出し「BRAND IDEA」と、小さな黒いテキストによる短い日本語スタイルの段落ブロックを追加する。その下に、細いグレーの水平線で区切られた 4 つのセクション（COLOR PALETTE、TYPOGRAPHY、VISUAL LANGUAGE、サンプルカード）を作成する。COLOR PALETTE には「Main」と「Accent」とラベル付けされた 2 つの円形スウォッチを表示する。Main はほぼ白、Accent はパネルのカラーと一致させ、それぞれの横に小さな 16 進数のカラーコードラベルを添える。TYPOGRAPHY には、見出し用の大きなセリフ体「Aa」と、本文用の小さなサンセリフ体「Aa」の 2 つの書体サンプルを表示する。VISUAL LANGUAGE には「Flow」、「Connection」、「Simplicity」、「Flex」とラベル付けされた 4 つの円形トークンを表示し、1 つ以上でアクセントカラーのぼかしリングを使用する。最後のサンプルカードには「From thought to landing page.」と記載し、小さなサブテキストと切り取られたぼかしアクセントカラーのリングを添える。ビジュアルスタイル: ミニマルでプレミアムなウェブデザインプレゼンテーション。モノクロームのタイポグラフィ、十分な余白、細いライトグレーの区切り線、繊細な影、ソフトなすりガラス風グラデーション、エディトリアルなセリフ体の見出しと小さなモダンなサンセリフ体の UI ラベルの組み合わせ。Figma のブランド探索スクリーンショットのように、すべてを鮮明に保つ。メインの繰り返しヒーロー見出しには Words become landing pages. を、4 つのカラーバリエーションには blue, green, orange, purple を、キャンバス比率には 16:9 を使用する。制約事項: パネルは正確に 4 つ、パネルごとの下部ウェブサイトカードは正確に 3 つ、パネルごとのブランドエリアは正確に 2 つ、ブランドガイドごとのカラースウォッチは正確に 2 つ、ブランドガイドごとのタイポグラフィサンプルは正確に 2 つ、ブランドガイドごとのビジュアル言語トークンは正確に 4 つとすること。写真、人物、デバイスフレーム、暗い背景、余分なパネルは追加しないこと。