Bloom AIのAI・SaaSヒーローセクションデザインとプロンプト

このテンプレートについて

Bloom AIは書き下ろされたブリーフ1本から組んだSaaSのヒーローセクションで、このページはそのブリーフを記録している。見出しは「Innovating the spirit of bloom AI」で、ヒーローセクションの残りはその周りに配置されている。配色は深いのブルー #030E1Aの下地、くすんだのグリーン #AAD9C3の文字、グリーン #2E5648のアクセントに絞り、書体はPoppins。実装はReact、Lucide iconsだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。主題ではなく構造を借りる。ヒーローセクションとその数値は、そのまま自社ブランドに移せる。以下に引用する値はすべてこのブリーフのもので、800x564の枠から最小の余白ステップまで含む。

対象

このヒーローセクションを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく50px刻みの余白を渡せ。
見出しをBloom AIと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
ヒーローセクションをモデルに指示する人は、3,900文字のプロンプトを出発点に使う。

含まれる内容

操作より前に置くリンク. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#2E5648の操作1つを、ブリーフで最小のタイプ段階に収めています。リンクはワードマークより小さいサイズで組み、#2E5648の操作だけがバーの中で重みを持つ要素です。
文字と画幅で1つの尺度. レイアウトに勘で決める部分はない。ブリーフが50px刻みの余白を明記し、実装はその値に合わせる。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
トーンを担うタイポグラフィ. 大見出しはPoppinsで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。スケールはグレースケールで確認する。
お知らせのピル. お知らせは見出しの上の#2E5648のピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#2E5648を持ち、見出しは文字色に留まります。

モーションとインタラクション

ホバーは控えめに

インタラクティブな層は意図的に小さい（すべてのカードではなくボタンとリンクのホバー状態）。状態が単純なので、どんなコンポーネント体系にも移植できる。インタラクティブな層は小さく保つ。この参考は800x564で収録しました。

邪魔をしないモーション

スクロールライブラリはない。800x564の構図は静止したままで、動くのは自分に反応する要素だけだ。仕様にアニメーションライブラリはなく、作り直しは小さく済む。静止も有効な選択だ。

Bloom AIで動くもの

アニメーションの予算はブリーフに明示されている。ホバー状態と押下状態。このヒーローセクションで、値の付いていない動きは一つもない。このヒーローセクションで、動くために動く要素はない。この参考は800x564で収録しました。

AI・SaaSプロダクトがここで得るもの

SaaSのヒーローセクションを発注するとき難しいのは、ファーストビューが何を言わないかを決めること。 Bloom AIはそれを先に答えている。見出しの一行と、その後ろのナビゲーション、お知らせのピル、数値の行、カードグリッド、背景のクリップだ。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。この参考は800x564で収録しました。

Bloom AIの最初の読みの順序

このページには意図された順番がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。見出しが表示サイズを取り、支える一行が提供内容を説明し、グリーン #2E5648のアクセントが主操作を示すので、次の一手が分からなくなることはない。ほかに競合するものはない。最初の判断より前にカードのグリッドは置かれず、それによってSaaSの案件でもヒーローセクションが重く感じられない。 SaaSの読み手は、選択肢より先に訴求を受け取る。