Glow Featuresの制作会社・スタジオ機能紹介セクションデザインとプロンプト

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

Glow Featuresは制作会社・スタジオ向けの機能紹介セクションの作り方を一つ示し、それを生んだ手順も公開している。「My entire desktop setup is built for power. It is silent, durable, and holds my focus」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。ページ全体は黒 #0A0A0Bの下地、くすんだの赤 #FFB1CEの文字、明るいの赤 #FF3D77のアクセントでできている。納品物はReactとTailwind CSSで、1834x1362で記録しているため、コードを書く前に枠が決まっている。記録されたブリーフから始め、機能紹介セクションをゼロから作り直すのではなく編集する。

対象

この機能紹介セクションを引き継ぐマーケターは、14pxで固定した表示サイズ、40px刻みの余白で書き直しが尺度を保ったか確認する。
機能紹介のコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
複数案件を同時に進めるスタジオ責任者は、この機能紹介セクションを他ページが踏襲する型として使う。

含まれる内容

既定値に頼らない構成. ここでは文字と余白を同じ1つのリストから取る（14pxで固定した表示サイズ、40px刻みの余白）。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
ベースラインに乗る数字. この行は機能紹介セクションの高い位置に、装飾ではなく根拠として置く。数値だけが#FF3D77のアクセントを持ち、周囲は文字色に留まります。
構造を作るのはカード. 文章を流し込む場所にパネルを並べている。機能紹介セクションを見渡せるのはそのためだ。パネルの高さはコピーに従い、行が長くなっても列の揃いが崩れない。文字を小さくする前に、パネルを1枚削る。この参考は1834x1362で収録しました。
彩度を使うのは1か所. 色はアクセント1色に絞ります。操作には明るいの赤 #FF3D77、それ以外は黒 #0A0A0Bです。#FF3D77と黒 #0A0A0Bのコントラストが、小さいサイズでもアクセントを読ませる。

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

最初の画面に生きている情景

1834x1362の画枠で視覚を担っているのはWebGLのキャンバスで、文字はその上か横に組む。その空間をほかに埋めるものがないので、構図はレンダリングが失敗しても成立する必要がある。

邪魔をしないモーション

仕様はアニメーションを省き、1834x1362のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。仕様にアニメーションライブラリはなく、作り直しは小さく済む。

機能紹介セクションを自社のものにする

再利用できるのは構図のほうで、題材は自分のものである。見出しを入れ替え、タイプスケール（14pxで固定した表示サイズ）は維持し、#FF3D77のアクセントを自社のメディアの上で測り直す。新しい要素が提供内容や次の操作の説明に寄与しないなら、それはファーストビューの下に置く。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。

機能紹介セクションの再配置

ここでは書体を段階的ではなくクランプで決めており（14px〜40pxのクランプ）、幅を変えても見出しのサイズが跳ねない。再配置を越えて残るのは階層だ。

この構図が制作会社で効く理由

テンプレートがファーストビューをモジュールで埋めるのに対し、この機能紹介セクションは数値の行、カードグリッドで止める。差は14pxで固定した表示サイズ、40px刻みの余白に出る。空白を埋めるための余白はない。 Glow Featuresは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。