Tasklyの制作会社・スタジオヒーローセクションデザインとプロンプト

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

Tasklyは判断の履歴を残しており、このヒーローセクションを生んだブリーフは2,465文字。見出しは「Work smarter, achieve faster」で、ヒーローセクションの残りはその周りに配置されている。配色はブルー #60B1FFの下地、深いのブルー #041320の文字、明るいのオレンジ #FF801Eのアクセントで、書体はInter。この参考例は単一のコンポーネントで組んであり、レイアウトの判断はそれとは独立に書かれている。初見用ではなく、作り直しに耐える制作会社・スタジオのヒーローセクションのブリーフとして扱う。収録したプロンプトは800x592で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x592の枠から最小の余白ステップまで含む。

対象

単一のコンポーネントで運用中のプロジェクトに途中参加し、コピーの差し替えだけを担うデザイナーのために作った。
単一のコンポーネントでこのページを作り直すフロントエンド開発者で、トランジションを推測ではなく指定として受け取りたい。
単一のコンポーネントから組み始めるなら、先に16px刻みの余白を取り出せ。グリッドが固まるまでは配色に触るな。

含まれる内容

操作1つだけの上段. ワードマーク、リンク、#FF801Eの操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#FF801Eの操作だけがバーの中で重みを持つ要素です。
実装まで持ち込む数値. ブリーフは数値を名指ししています（16px刻みの余白）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。ページを持ち込むときも、名指しされた値はそのまま使ってください。
1書体、2つの役割. 最上位の文字はInterで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。
役割を明記した色. アクセントはボタンとリンクの面積にだけ現れ、ブルー #60B1FFは全体を通して平らなままだ。ほかはすべてブルー #60B1FFの上にあり、彩度の高い配色でも読めるのはそのためです。

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

動かすほどページが組み上がる

構図を進めるのはタイマーではなくスクロール位置だ（固定された要素が位置を保ち、その下を内容が流れる）。スクロールライブラリではなく数行のコードで済むので、作り直しが軽い。この参考は800x592で収録しました。

ポインター状態以外は何もしない

フィードバックはすべてのカードではなくボタンとリンクのホバー状態、固定された要素が位置を保ち、その下を内容が流れるに限る。密度の高い最初の画面が煩くならないのはそのためだ。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。この参考は800x592で収録しました。

Tasklyを仕様として読む

スクリーンショットはページがどう見えるかを伝え、ブリーフはなぜそうなのかを伝える。16px刻みの余白がその間を埋める。このヒーローセクションに、初期値任せの部分はない。

ヒーローセクションを支えるタイミング

モーションは仕組みではなく短い一覧にすぎない。ブリーフは固定要素、ホバー状態と押下状態だけを挙げ、残りのページは静止したままにする。このヒーローセクションで、動くために動く要素はない。この参考は800x592で収録しました。

Tasklyの最初の読みの順序

機能訴求型のレイアウトは製品の機能を並べる。これは読み手を1つの判断へ導く。その経路はナビゲーション、見出し、お知らせのピル、数値の行、クライアントの行と、16px刻みの余白の取り方に表れる。制作会社の読み手は、選択肢より先に訴求を受け取る。

よくある質問（FAQ）

Tasklyのヒーローセクションを別の技術スタックで作り直せますか？

Tasklyは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Tasklyの背後のブリーフには、実際に何が入っていますか？

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

Tasklyから作り直したページを、クレジット表記なしで公開してもよいですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x592で収録しました。