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

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

IntelligentXは640x462で記録し、ギャラリー用の画像ではなく仕様として残した。配色は白 #EDEEF5の下地、黒 #1A1A1Aの文字、明るいのライム #9FFF00のアクセントに絞り、書体はInter。納品物はReactとTailwind CSSで、640x462で記録しているため、コードを書く前に枠が決まっている。書いている間は開いておく。4,182文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、640x462の枠から最小の余白ステップまで含む。収録したプロンプトは640x462で記録したので、このページで引用する値はすべてそこにたどれる。

対象

モーションを外さざるを得ないなら、このヒーローセクションは110vhのセクション、16px刻みの余白が階層を担ったまま読める。
見出しをIntelligentXと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
このヒーローセクションをクライアントに引き渡す制作会社には、ブランドの外装を載せる前に#9FFF00と#EDEEF5を照合する必要がある。

含まれる内容

一行に収めたナビゲーション. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#9FFF00の操作1つを、ブリーフで最小のタイプ段階に収めています。リンクはワードマークより小さいサイズで組み、#9FFF00の操作だけがバーの中で重みを持つ要素です。
刻みを名指しするブリーフ. 値そのものが仕様です。110vhのセクション、16px刻みの余白は640x462での収録値で、スクリーンショットから推測したものではありません。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
役割ごとに指定した字重. 最上位の文字はInterで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。
ビューポート基準の計測. 値そのものが仕様です。110vhのセクション、16px刻みの余白は640x462での収録値で、スクリーンショットから推測したものではありません。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。ページを持ち込むときも、名指しされた値はそのまま使ってください。

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

モーションはほぼない

スクロールライブラリはない。640x462の構図は静止したままで、動くのは自分に反応する要素だけだ。モーションは装飾ではなくフィードバックとして扱う。

静止も設計

スクロールライブラリはない。640x462の構図は静止したままで、動くのは自分に反応する要素だけだ。モーションは装飾ではなくフィードバックとして扱う。動きは操作要素にとどめる。

ヒーローセクションを支えるタイミング

既製のアニメーションパックを使えば早く出せたはず。ブリーフはあえてホバー状態と押下状態を指定しており、ページが演出ではなく設計として読めるのはそのため。このヒーローセクションで、動くために動く要素はない。この参考は640x462で収録しました。

IntelligentXの最初の読みの順序

SaaSの読み手は、1画面に着くと読む前に走査する。このレイアウトはそれに応える。ナビゲーション、お知らせのピル、数値の行、フォーム、背景のクリップは走査される寸法で置き、110vhのセクション、16px刻みの余白が各停留点を区別する。 SaaSの読み手は、選択肢より先に訴求を受け取る。

IntelligentXで最初に変えるもの

トレードオフは見分けのつきやすさ。 IntelligentXを残しすぎると他人のページに見え、数値を残して中身を変えれば自社のページとして読める。フレームとスケールは保ち、変えるべきなのは題材のほうです。この参考は640x462で収録しました。

よくある質問（FAQ）

IntelligentXの背後のブリーフには、実際に何が入っていますか？

気分を書いた説明ではなく、制作のための仕様です。640x462のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

IntelligentXはReactとTailwind CSSにどこまで依存していますか？

IntelligentXはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

IntelligentXのデザインはどこから来たものですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は640x462で収録しました。