このテンプレートについて
Rare Galleryは制作会社・スタジオ向けのポートフォリオページの作り方を一つ示し、それを生んだ手順も公開している。ページ自身の見出しは「A carefully curated collection beyond compare」で、構図はその言葉をそのまま中心に組まれている。配色は深いのライム #222518の下地で、書体はInstrument Serif。納品物はReactとTailwind CSSで、1920x1414で記録しているため、コードを書く前に枠が決まっている。結局、動きは400msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に尽きる。主題ではなく構造を借りる。ポートフォリオページとその数値は、そのまま自社ブランドに移せる。
対象
- このポートフォリオは、制作会社のコピーが6.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 制作会社・スタジオポートフォリオページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- ポートフォリオページをモデルに指示する人は、4,964文字のプロンプトを出発点に使う。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. バーはポートフォリオページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに1920x1414の構図の上に載るため、その下のメディアは端から端まで届きます。
- 実装まで持ち込む数値. レイアウトは比率ではなく絶対値で組む（64px刻みの余白、400msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。ブリーフが触れていない箇所は、意図的に触れていません。
- お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInstrument Serifの最小段階で置き、その位置を争う要素はほかにありません。ピルはブリーフ最小の段階に置くため、第二のタイトルではなくラベルとして読めます。見出しの上に置き、横には決して置かないでください。
- イラストではなくクリップ. メディアは6.9sのクリップ1本で、1920x1414の画幅にcoverで切り抜く。どの幅でも黒帯が出ない。自動再生が使えないときは1920x1414のポスター画像が構図を保つため、レイアウトが崩れることはありません。書き出しは1920x1414以上にして、トリミングを正確に保ってください。
モーションとインタラクション
スクロールライブラリなしの環境モーション
環境の動きはスクロール演出ではなく6.9秒の1920x1414ループから生まれる。だからページは落ち着き、文字は読める。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。
反応はコントロールに返す
ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。状態が単純なので、どんなコンポーネント体系にも移植できる。この参考は1920x1414で収録しました。
Rare Galleryで最初に変えるもの
色ではなくコピーから始める。「A carefully curated collection beyond compare」を自社製品についての1文に書き換え、ブリーフのサイズでInstrument Serifに組む。配色を変える前に、コピーとメディアを書き換える。
Rare Galleryで動くもの
アニメーションの予算はブリーフに明示されている。400msのトランジション、6.9sのメディアループ、ホバー状態と押下状態。このポートフォリオページで、値の付いていない動きは一つもない。このポートフォリオページで、動くために動く要素はない。
ポートフォリオページの背後にある順序
1本の読みの経路を選ぶことは、他の経路を閉じること。ブリーフはそれを受け入れ、ナビゲーション、見出し、お知らせのピル、フォーム、背景のクリップを固定し、64px刻みの余白、400msのトランジションを経路の明快さに使う。制作会社の読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Rare Galleryの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは4,964文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Rare Galleryのポートフォリオページを別の技術スタックで作り直せますか？
Rare GalleryはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Rare Galleryから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1920x1414で収録しました。
