Playful Ideaの制作会社・スタジオフッターデザインとプロンプト

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

Playful Ideaは、制作会社・スタジオがフッターで抱える課題を記録済みのブリーフ1本で解く。配色は#F0EEFAの下地、ほぼ黒 #080909の文字に絞り、書体はEpilogue。納品物は自己完結したHTMLファイル1つで、1564x1080で記録しているため、コードを書く前に枠が決まっている。モーションの予算は2.54167sのトランジション、ループする動画の下地。制作会社・スタジオのフッターを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。収録したプロンプトは1564x1080で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1564x1080の枠から最小の余白ステップまで含む。

対象

このフッターは、自己完結したHTMLファイル1つをすでに理解し、自己完結したHTMLファイル1つを文章にできれば足りるチームを対象にしている。
モデルに指示を出すなら、フッターから始めて700pxのブレイクポイントをプロンプトに保持させろ。
このページは、自己完結したHTMLファイル1つで制作会社・スタジオフッターを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。

含まれる内容

ページのグリッドに乗るバー. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてEpilogueで組んであり、バーは別系統ではなく下のページに属して見える。700px以下では、リンクは2行目に折り返さず折りたたむ。
最下層に置く動画. 動画は1564x1080の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。自動再生が使えないときは1564x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
必要な箇所だけ可変. 文字サイズは固定の段階ではなく14px〜17pxのクランプで指定するため、ディスプレイの行はブレイクポイント間で飛ばずに比例を保ちます。スケールがクランプされているため、ディスプレイの行がブレイクポイント間で跳ねることはありません。
明記された寸法. ここでは文字と余白を同じ1つのリストから取る（14px〜17pxの可変型サイズ、100vhのセクション、2カラムのグリッド、角丸100px）。リストの最小値と最大値が、構図の可動範囲を決める。変えるのは題材で、刻みではない。

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

モーションは切れる

モーション層はオフスイッチ付きで、prefers-reduced-motionでは入場とループを外す。低減モーションでも操作のフィードバックは働き、外れるのは入場だけだ。この参考は1564x1080で収録しました。

描くのではなく描画する

奥行きはイラストではなくレンダリングから生まれる。 WebGLのキャンバス。静止画ではなく描画なので、中心の要素はどのサイズでも成立する。この参考は1564x1080で収録しました。

Playful Ideaを仕様として読む

余白を好みと呼ぶテンプレートと比べる。ここでは同じ値に名前が付いている（14px〜17pxの可変型サイズ、100vhのセクション、2カラムのグリッド、角丸100px）ので、編集はそれを守るか、構成を目に見えて壊すかのどちらかになる。このフッターに、初期値任せの部分はない。

フッターを自社のものにする

自社のメディアを入れるときは、トリミングとレイヤーの順序を守る。メディアは1564x1080の6.9sループ映像だ。コピーの可読性を保っているのはその配置だ。触れずにおくのは枠とスケール。

Playful Ideaの最初の読みの順序

注意は散らばらず、導かれる。視線はまず表示サイズの一行に落ち、次に支えるコピー、最後に操作へ向かう。実績は、載る場合でもお客様の声の壁ではなく帯か1行に留まる。その順番が設計そのものである。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は1564x1080で収録しました。

よくある質問（FAQ）

Playful Ideaのフッターを別の技術スタックで作り直せますか？

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

このPlayful Ideaの項目はどういう構成になっていますか？

このページに引用している内容はすべて、収録された30,665文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。

Playful Ideaのブリーフをコピーすると何が手に入りますか？

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