このテンプレートについて
Max Reed Portfolioは、制作会社・スタジオが機能紹介セクションで抱える課題を記録済みのブリーフ1本で解く。ページ自身の見出しは「Let's Team Up Today」で、構図はその言葉をそのまま中心に組まれている。色は深いのティール #324444の下地に限り、Interで組んでいる。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。制作会社・スタジオの機能紹介セクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。
対象
- 参考がただの出発点なら、デザイナーは640x470のフレームを残し、機能紹介セクションの残りを組み直せる。
- 1回ごとの精算で進め、初回の前に13px〜88pxの可変型サイズ、240px刻みの余白を合意しておきたい制作会社のために作った。
- 制作会社・スタジオ機能紹介セクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- ブリーフに直書きされたサイズ. ここに目分量はありません。仕様が13px〜88pxの可変型サイズ、240px刻みの余白を固定し、残りのレイアウトはその値から導かれます。リストは短く、確認者は要素ごとに突き合わせられる。変えるのは題材で、刻みではない。
- パネル1枚につき1つの考え. 構造はグリッドそのものだ。同じ大きさのパネルをInterで組み、視線が下ではなく横へ動くように並べる。各パネルは1つの考えとアイコンを組み合わせるため、視線の流れは横方向に保たれます。読む順序とパネルの順序を一致させる。
- タイポグラフィとして扱う数値. この行は機能紹介セクションの高い位置に、装飾ではなく根拠として置く。この行は独立した帯ではなくファーストビューに属し、根拠が主張の近くに留まります。この参考は640x470で収録しました。
- スタイルを決めるタイポグラフィ. 大見出しはInterで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。サイズが大きくなるほど字間を詰めるため、13–88pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
マーキーがリズムを担う
マーキーが構図を横切って無限にループする。書体はInter。映像を除けば唯一の連続した動きで、だからページは落ち着かないものにならない。動く帯は多くても一つにする。
邪魔をしないモーション
これは640x470の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。仕様にアニメーションライブラリはなく、作り直しは小さく済む。スクロールのタイムラインは要らない。
Max Reed Portfolioで動くもの
モーションの移植は最後に回す。ブリーフがループするマーキーとして固定しているので、レイアウトが決まってからのほうが合わせやすい。この機能紹介セクションで、動くために動く要素はない。この参考は640x470で収録しました。
Max Reed Portfolioを仕様として読む
ここでの決定はほぼすべて、確認できる値である。13px〜88pxの可変型サイズ、240px刻みの余白。メディアは640x470の静止画だ。書体はInterのままなので、差し替える側も同じ比率を守る必要がある。この機能紹介セクションに、初期値任せの部分はない。
Max Reed Portfolioで最初に変えるもの
新しいコピーは、ブリーフが指定する見出しサイズ（13px〜88pxの可変型サイズ、240px刻みの余白）で組む。残りのスケールはデザインを変えずに追随する。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。
よくある質問（FAQ）
Max Reed Portfolioのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは5,397文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Max Reed Portfolioのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された5,397文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Max Reed PortfolioはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
