Axion AboutのAI・SaaSAboutページデザインとプロンプト

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

Axion AboutはAI・SaaSプロダクト向けの実用的な参考だ。 Aboutページはすでに配置され、寸法も測られ、いつでも作り直せる。「Through research, creative thinking and iteration we help growing brands realize their digital full potential」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は白 #EDEDEEの下地、深いの赤 #3E3133の文字、明るいのオレンジ #F26522のアクセント。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。モーションはcubic-bezier(0.25,0.1,0.25,1)で、コピーが主役のままになる程度に抑えている。 SaaSのAboutページを発注するなら、この構成から始めて主題だけ差し替える。

対象

このAboutページは、640x468の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
このAboutページにブロックを足していく社内チームには、12px〜18pxの可変型サイズ、12px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
このAboutページを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。

含まれる内容

検証できる数値. ブリーフの寸法はすべて、測り直せる数値だ（12px〜18pxの可変型サイズ、12px刻みの余白、cubic-bezier(0.25,0.1,0.25,1)のイージング）。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
お知らせのピル. お知らせは見出しの上の#F26522のピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#F26522を持ち、見出しは文字色に留まります。
1画面に収まる構造. Aboutページは、コピーが何より先に届くように組まれています。階層は文字が担い、640x468のフレームが構図を保ち、補助の値は静かに留まります。ページは640x468の1つの構図です。コピーが変わっても崩れないのはそのためです。
段階ではなくクランプで可変. ブリーフは見出しに12px〜18pxのクランプを使っています。長い行が不格好に折れないのはそのためです。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。

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

反応するのは操作要素

状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態）。状態が単純なので、どんなコンポーネント体系にも移植できる。インタラクティブな層は小さく保つ。この参考は640x468で収録しました。

時間も仕様に書く

状態変化は0と指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。示された時間が覆うのは状態変化だけなので、動きのうち仕様に書かれているのはフィードバックの部分になる。この参考は640x468で収録しました。

Aboutページの背後にある順序

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

このAboutページが立てる主張

1画面は読み手にとって1つの判断を意味し、それがこのレイアウトのコスト。残りはすべて折り返しの下へ移る。ブリーフが12px〜18pxの可変型サイズ、12px刻みの余白、cubic-bezier(0.25,0.1,0.25,1)のイージングを明記しているので、下のセクションも同じリズムを保つ。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。

Axion Aboutで最初に変えるもの

再利用できるのは構図のほうで、題材は自分のものである。見出しを入れ替え、タイプスケール（12px〜18pxの可変型サイズ）は維持し、#F26522のアクセントを自社のメディアの上で測り直す。新しい要素が提供内容や次の操作の説明に寄与しないなら、それはファーストビューの下に置く。メディアのトリミングは守る。書体と同じだけ働いている。