Creative Studioの制作会社・スタジオランディングページデザインとプロンプト

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

Creative Studioは、制作会社・スタジオがランディングページで抱える課題を記録済みのブリーフ1本で解く。ページ自身の見出しは「Creative Studios Built Around Elevating Your Vision Into Striking Reality」で、構図はその言葉をそのまま中心に組まれている。カラースキームは白 #F3F3F3の下地、インディゴ #5E0ED7の文字で、ページはInterで組む。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。モーションの予算は0.1sのトランジション。制作会社のランディングページを発注するなら、この構成から始めて主題だけ差し替える。

対象

低速回線でもこのランディングページを成立させたいエンジニアは、640x462とタイプスケールを重さの予算に使う。
ランディングページをモデルに指示する人は、5,481文字のプロンプトを出発点に使う。
見出しをCreative Studioと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

背景を持たないナビゲーション. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInterで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに640x462の構図の上に載るため、その下のメディアは端から端まで届きます。
明記された余白の刻み. ここでは文字と余白を同じ1つのリストから取る（10px刻みの余白、0.1sのトランジション）。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
大きくなるほど詰まる字間. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。
順序を決めるグリッド. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。パネルの高さはコピーに従い、行が長くなっても列の揃いが崩れない。パネルの見出しはページのスケールに合わせる。

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

短く、明記された時間

仕様では状態変化ごとに時間が指定されている。トランジションは0.1s前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。イージングは再生時間と一緒に指定されている（0.1s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

邪魔をしないモーション

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

制作会社のブリーフが効く理由

1画面は読み手にとって1つの判断を意味し、それがこのレイアウトのコスト。残りはすべて折り返しの下へ移る。ブリーフが10px刻みの余白、0.1sのトランジションを明記しているので、下のセクションも同じリズムを保つ。 Creative Studioは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。