Modern Agencyの制作会社・スタジオランディングページデザインとプロンプト

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

制作会社・スタジオ向けにランディングページを作り直す前にModern Agencyを読むと、構成とそれを支える仕様がここに揃っていることが分かる。「We craft digital experiences for brands ready to dominate their category online」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。ページ全体は白 #FFFFFFの下地、明るいのオレンジ #F26522のアクセントでできている。納品物はReactとTailwind CSSで、364x640で記録しているため、コードを書く前に枠が決まっている。ブリーフはモーションの予算をcubic-bezier(0.25,0.1,0.25,1)に使う。最初の画面で意図が伝わる必要がある制作会社・スタジオのランディングページには、この参考が適している。

対象

制作会社・スタジオランディングページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
ランディングページをモデルに指示する人は、10,347文字のプロンプトを出発点に使う。
見出しをModern Agencyと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

操作より前に置くリンク. リンクは同じ文字サイズで1行に並び、#F26522の操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。リンクはワードマークより小さいサイズで組み、#F26522の操作だけがバーの中で重みを持つ要素です。行は1行に保つ。
ビューポート基準の計測. 値そのものが仕様です。13px刻みの余白、cubic-bezier(0.25,0.1,0.25,1)のイージングは364x640での収録値で、スクリーンショットから推測したものではありません。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
明記された寸法. 値そのものが仕様です。13px刻みの余白、cubic-bezier(0.25,0.1,0.25,1)のイージングは364x640での収録値で、スクリーンショットから推測したものではありません。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。ブリーフが触れていない箇所は、意図的に触れていません。
お知らせのピル. お知らせは見出しの上の#F26522のピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#F26522を持ち、見出しは文字色に留まります。バッジは1つ、メッセージも1つ。

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

時間も仕様に書く

1つの時間がすべてのインタラクションを覆う（0、cubic-bezier(0.25,0.1,0.25,1)を使い）。ホバーと押下が同じ体系に読めるのはそのため。フォーカス状態もホバーと同じ値で時間を指定するので、キーボードとポインターの反応が一致する。

描くのではなく描画する

奥行きはイラストではなくレンダリングから生まれる。 WebGLのキャンバス。レンダリングは最後に整う要素なので、読み込まれる前の状態でもページが成立している必要がある。この参考は364x640で収録しました。

ランディングページを自社のものにする

自社の配色が重いなら、決める前に枠に当てて検証する。ページを支えるのは白 #FFFFFFなので、暗いアクセントには参考例より強いコントラストが要る。新しい要素が提供内容や次の操作の説明に寄与しないなら、ファーストビューの下に置くのが正解です。

ランディングページを支えるタイミング

欲張ったモーションは、たいていファーストビューの可読性を奪う。このブリーフはホバー状態と押下状態、ライブキャンバスを短く抑え、文字を待たせない。このランディングページで、動くために動く要素はない。この参考は364x640で収録しました。

Modern Agencyの最初の読みの順序

こうしたページは普通、機能グリッドの下にアクションを埋める。これはナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを固定の順序に置き、アクションを3画面分スクロールした先ではなくファーストビューの中に置く。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は364x640で収録しました。