Mind AIのヘルスケアランディングページデザインとプロンプト

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

Mind AIはヘルスケア・ウェルビーイングプロダクト向けのランディングページの作り方を一つ示し、それを生んだ手順も公開している。配色は#F6EAF2の下地、#000000の文字、インディゴ #A069C9のアクセントに絞り、書体はQuestrial。納品物は自己完結したHTMLファイル1つで、1920x1414で記録しているため、コードを書く前に枠が決まっている。モーションは4.042sのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地に限っている。初見用ではなく、作り直しに耐えるヘルスケア・ウェルビーイングプロダクトのランディングページのブリーフとして扱う。収録したプロンプトは1920x1414で記録したので、このページで引用する値はすべてそこにたどれる。

対象

ヘルスケア・ウェルビーイングプロダクトランディングページを制作するチームが、見積もりを出す前にcubic-bezier(.16,1.3,1)のイージングを記録に残したい。
ヘルスケアの案件を提案し、クライアントへの初回返信に自己完結したHTMLファイル1つを載せる必要がある制作会社のためのものだ。
モデルに指示を出すなら、ランディングページから始めて520pxのブレイクポイントをプロンプトに保持させろ。

含まれる内容

一行に収めたナビゲーション. この行はコントラストを#A069C9の操作1か所だけに使い、ワードマークとリンクは文字色に退く。520px未満では、リンクが全画面オーバーレイに畳まれます。ラベルは520pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
効いてくるポスターフレーム. 構図は1920x1414のクリップの上に組み立て、横には並べない。メディアにパネルも枠も付かない。ループは5sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは1920x1414以上にして、トリミングを正確に保ってください。
段階ではなくクランプで可変. スケールの上端だけが可変（14px〜28pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。
明記された寸法. レイアウトに勘で決める部分はない。ブリーフが14px〜28pxの可変型サイズ、100vhのセクション、角丸16.0rem、75px刻みの余白を明記し、実装はその値に合わせる。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。

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

タイムラインではなくループ

環境の動きは5秒の映像1本を1920x1414で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。映像が短いので切れ目なくループでき、解像度よりもその点が効く。

画像ではなくキャンバス

最初の画面は画像として送らず、ブラウザに組み立てさせる。 WebGLのキャンバス。シーンがリアルタイムなので、レイアウトのサイズを変えても別の素材を用意しなくて済む。この参考は1920x1414で収録しました。

ランディングページの再配置

セクションを隠して済ませるモバイル用レイアウトと比べる。これは隠さず、形を変える。文字サイズは14px〜28pxで可変、レイアウトは520pxで切り替わる、セクションは100vhに固定。中身は減らさない。操作部はタップできる大きさを保ち、コピーはどの幅でも読む順番を維持します。

このランディングページが正しい理由

既製のヒーローとこのランディングページは同じ部品を使う。違うのは、ナビゲーション、見出し、お知らせのピル、数値の行、機能リストで順序づけ、14px〜28pxの可変型サイズ、100vhのセクション、角丸16.0rem、75px刻みの余白で測っている点。だから画面は入れ物ではなく順序として読める。 Mind AIは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。