NexaCore ResultsのAI・SaaS機能紹介セクションデザインとプロンプト

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

NexaCore Resultsは判断の履歴を残しており、この機能紹介セクションを生んだブリーフは9,261文字。「NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track」は、レイアウトが背負うために組まれた一行。カラースキームは白 #EBEBEBの下地、インディゴ #C86FFFのアクセントで、ページはMazzard Hで組む。納品物はReactとTailwind CSSで、640x466で記録しているため、コードを書く前に枠が決まっている。 AI・SaaSの機能紹介セクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。

対象

この機能紹介セクションを引き継ぐマーケターは、14px〜18pxの可変型サイズ、角丸36pxで書き直しが尺度を保ったか確認する。
見出しをNexaCore Resultsと同じ長さに保ったまま機能紹介セクションを書き換えるコンテンツ責任者のために作った。
#EBEBEBと#C86FFFをブランドの2色として固定し、その制約の中で機能紹介セクションを組み直せ。

含まれる内容

文字と画幅で1つの尺度. ブリーフは14px〜18pxの可変型サイズ、角丸36px、20px刻みの余白を固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
1行にまとめた根拠. 数字はMazzard Hで、本文よりも見出しに近いサイズで組む。数値だけが#C86FFFのアクセントを持ち、周囲は文字色に留まります。
必要な箇所だけ可変. 文字サイズは固定の段階ではなく14px〜18pxのクランプで指定するため、ディスプレイの行はブレイクポイント間で飛ばずに比例を保ちます。モバイルメニューも同じブリーフに含まれているため、畳んだ状態も設計済みです。狭いレイアウトは設計してください。潰して縮めないでください。
スケールがスタイルになる. タイポグラフィはMazzard Hです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。サイズが大きくなるほど字間を詰めるため、14–18pxの範囲でディスプレイの行がまとまります。

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

ポインター状態以外は何もしない

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。この参考は640x466で収録しました。

モーションはほぼない

仕様はアニメーションを省き、640x466のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。動くのはポインターに反応する要素だけだ。

機能紹介セクションを支える数値

この機能紹介セクションをブロックごとに分解しても、値はそれを説明し続ける。枠と、その下のリズムを決めているのが14px〜18pxの可変型サイズ、角丸36pxだ。この機能紹介セクションに、初期値任せの部分はない。

機能紹介セクションを支えるタイミング

仕様はすべてのトランジションを値に結びつけている（ホバー状態と押下状態）。だからこそ、モーションのプリセットを上から載せたテンプレートには見えない。この機能紹介セクションで、動くために動く要素はない。この参考は640x466で収録しました。

この構図がSaaSで効く理由

SaaSのページの多くは、セクションを増やし、グラデーションを増やし、主張を増やすことで失敗する。 NexaCore Resultsは逆を行く。「NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track」が最初のフレームからその役割を担っている。構図は白 #EBEBEBに留まり、操作にだけインディゴ #C86FFFを使う。意図して組んだと見えるにはそれで足りる。 NexaCore Resultsは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。