このテンプレートについて
Stories in Lightは書き下ろされたブリーフ1本から組んだ制作会社のヒーローセクションで、このページはそのブリーフを記録している。カラースキームは深いのブルー #2B3342の下地、白 #FFFFFFの文字で、ページはArchivoで組む。納品物は単一のコンポーネントで、2502x1730で記録しているため、コードを書く前に枠が決まっている。ブリーフはモーションの予算を0.4sのトランジション、ループする動画の下地に使う。書いている間は開いておく。4,462文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは2502x1730で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、2502x1730の枠から最小の余白ステップまで含む。
対象
- プロトタイプを作らずに560pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
- 自社の見出しを書き、そのうえで計測値を変えずに単一のコンポーネントでこのヒーローセクションを組み直せ。
- 競合の制作会社ヒーローセクションを作り直すチームが、フレームワークを決める前に単一のコンポーネントを明示したい。
含まれる内容
- 意図的に細いナビゲーション. 細いバーをヒーローセクションの上に重ね、左にワードマーク、リンクはArchivoで組みます。そのため構図はコンテンツが先、装飾は後に読めます。560px未満では、リンクが全画面オーバーレイに畳まれます。ラベルは560pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
- イラストではなくクリップ. ファーストビューは2502x1730のクリップ1本で、ほかの要素はすべてその上に配置されます。2502x1730以上で書き出せば、coverの切り抜きはそのまま機能する。
- 段階ではなくクランプで可変. 文字サイズは固定の段階ではなく55px〜40pxのクランプで指定するため、ディスプレイの行はブレイクポイント間で飛ばずに比例を保ちます。スケールがクランプされているため、ディスプレイの行がブレイクポイント間で跳ねることはありません。
- ブリーフに直書きされたサイズ. ブリーフの寸法はすべて、測り直せる数値だ（15pxで固定した表示サイズ、100vhのセクション、角丸999px、40px刻みの余白）。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。ブリーフが触れていない箇所は、意図的に触れていません。
モーションとインタラクション
意図を感じる速さ
モーションはミリ秒単位で測る。0.4s。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。イージングは再生時間と一緒に指定されている（0.4s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
反応はコントロールに返す
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。操作を確認しない状態は削る。この参考は2502x1730で収録しました。
Stories in Lightで最初に変えるもの
ヒーローセクションを自社のものにするのに作り直しは要らない。見出しとメディアを差し替え、スケール（15pxで固定した表示サイズ、100vhのセクション）を守れば、レイアウトは設計どおりに読める。変えるべきなのは主題の部分だ。
ヒーローセクションを支えるタイミング
テンプレートがすべてのセクションを登場時に動かすのに対し、これは0.4sのトランジション、13.3sのメディアループ、ホバー状態と押下状態だけを動かし、あとは止める。このヒーローセクションで、動くために動く要素はない。
ヒーローセクションの背後にある順序
最初の判断と競合するものはここにはない。補助情報は折り返しの下で待たせ、ページ上部はナビゲーション、見出し、お知らせのピル、数値の行だけで担う。視線を横へ散らす要素は置いていない。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は2502x1730で収録しました。
よくある質問（FAQ）
Stories in Lightを作り直すのに単一のコンポーネントは必要ですか？
Stories in Lightは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Stories in Lightの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは4,462文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Stories in Lightのデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は2502x1730で収録しました。
