SaaSランディングページビルダー[Neito]のクリーンなブランド検証用プレゼンテーションボード。同一のウェブサイトとブランドアイデンティティシステムを、[blue, green, orange, purple]の4つのアクセントカラーテーマで展開。
構図とレイアウト:
十分な余白を持つすっきりとした2×2グリッドに配置された、アスペクト比16:9の白いキャンバス上の4つのモックアップパネル。各パネルは左側の大きなランディングページモックアップと、右側の細いブランドガイド列の2つの領域で構成。
ランディングページモックアップ詳細:
- トップナビゲーション:2本のスラッシュに続き「Neito」と小さな星/スパークアイコンのロゴマーク、「Product」「Templates」「Pricing」「About」のリンク、黒い丸角の「Get started」ボタン。
- ヒーローセクション:各パネルのアクセントカラーによる柔らかなぼかし円形グラデーションリングの上に、エディトリアル調のセリフ体大見出し「[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」(Mainの白系とアクセントカラーの2つの丸いスウォッチ、HEXコード付き)、「TYPOGRAPHY」(見出し用セリフ体「Aa」と本文用サンセリフ体「Aa」)、「VISUAL LANGUAGE」(「Flow」「Connection」「Simplicity」「Flex」の4つの丸型トークン)、プレビューカード「From thought to landing page.」。
スタイルと質感:
ミニマルなFigmaスタイルのデザインシステム展示、モノトーンのタイポグラフィ、極細のグレー境界線、鮮明なUI要素、微細なシャドウ、すりガラス調グラデーション、十分なホワイトスペース。人物、端末フレーム、暗い背景は含めない。
uiデザインブランディングランディングページ