Webアセット、最適化、そして公開 は何をしますか？
既存のサイトに対する仕上げ作業のためのショートルーティンです。futuristic-web-design スキルのビジュアルとリリース手順をカバーし、単独で実行できるようにパッケージ化されています。
../futuristic-web-design/ がこのスキルの隣にある場合、そのリファレンスファイルに詳細が含まれています。references/assets.md にはプロンプトと ffmpeg コマンド、references/ship.md には各種パス、フォーム、デプロイ、ドメイン、完全なリリースチェックリストが記載されています。
ユーザーが依頼した部分のみを行ってください。以下の各見出しは独立しています。
ファイルをWeb用に準備する
カメラやジェネレーターの出力は、そのまま配信するには重すぎます。モバイルデータ通信のユーザーはすべてのバイトを待つことになり、一方、ノートパソコンが自身のディスクから読み込む場合は問題が見えにくくなっています。
ffmpeg や sharp などのツールをインストールする前に、ユーザーの承認を得てください。一部の ffmpeg ビルドにはWebPエンコーダーが含まれていません。その場合、cwebp や sharp が代わりに同じ処理を行えます（どちらかが既にインストールされている場合）。
ファイルは、Next.js の場合は public/images/ の下に、説明的な名前を付けて保存します。プレーンなHTMLサイトの場合は、ページと同じ階層にある images/ フォルダに保存します。Vercel上では、フレームワークなしのサイトの場合、public/ フォルダが存在するとそのフォルダだけが提供され、ページ自体が非表示になる可能性があります。
| ファイル | 目標 |
|---|---|
| ヒーロー画像 | WebP、最大幅1920px、約300 KB |
| その他の画像 | WebP、最大幅約1000px、約150 KB |
ヒーロービデオ (hero.mp4) | H.264 MP4、最大1080p、音声削除、4 MB未満 |
ポスター画像 (hero-poster.webp) | ビデオの開始フレーム |
最後に、圧縮前後のサイズの比較表を示し、削減効果を主張ではなく可視化します。
画像と動画のプロンプトを作成する
これらのプロンプトは、Google Flow やその他のジェネレーターに適しています。直接生成できる場合は、クレジットを消費する前に承認を得てください。生成できない場合は、ユーザーにプロンプトを渡し、明確にマークされたプレースホルダーを使って続行します。
- まずはショットリストを作成。 生成する前に、アセットとそのアスペクト比を決定します。ワンページサイトの場合、約7つ（ヒーロービデオ、ヒーロー静止画、3つのオファーショット、ストーリー画像、シェア画像）。
- 画像のブリーフは、以下の6つのパートを順に指定： 被写体、設定、照明、カメラ（高さ、レンズ、被写界深度）、ムードとパレット、フォーマット（16:9のヒーロー、4:5の商品）。ラベルは空白を指定します。ジェネレーターは文字を歪めてしまうため、実際のテキストはHTMLに含めるべきです。
- スタイルライン。 最初に承認された画像から、照明、カメラ、ムードとパレットの文章を抽出し、以降のすべてのプロンプトでそのまま再利用します。これにより、一連の画像が同じ撮影で行われたように見えます。
- ヒーロービデオ。 承認された静止画をアニメーション化し、1つの小さな動きを記述し、それ以外は固定カメラで静止していることを明記します。
- 分解図クリップ。 開始静止画：組み立てられた製品、小さく中央に配置され、部品が配置されるスペースが空いています。終了静止画：開始静止画から構築（新規作成しない）、部品は1つの直線軸に沿って配置され、同じ視点、照明、背景を維持します。クリップは開始静止画から終了静止画まで、カメラを固定して再生されます。
生成アセットには実際の人物やサードパーティのロゴを含めず、実際のビジネスの実際の製品を表示します。
スマートフォンチェック、デザインパス、スピード
- 390pxでのスマートフォンチェック。 読みやすいテキスト、端に押し付けられていないもの、約44pxのタップターゲット、水平スクロールがない、動作するメニュートグル。項目別リストで修正し、その後再度スクロールして確認します。リサイズしたデスクトップブラウザはスマートフォンを近似するだけなので、実際のデバイスでの確認を依頼し、実施されなかった場合はその旨を伝えます。
- デザインパス。 セクション間の均一なギャップ、同じレベルの見出しの均等なサイズ、すべてのインタラクティブ要素へのホバーとフォーカスのスタイル、残存するプレビュールートがないこと。
- スピード。 モバイルプリセットでプロファイリングし、最も影響の大きい改善点を大きい順に3つ挙げます。改善の1つがユーザーが価値を置くものを削除することを意味する場合は、その判断をユーザーに委ねるためにフラグを立てます。
ユーザーが変更を依頼しなかったものについては、変更を加える前に、発見した内容をリストアップします。
キー
.env.localにキーを保持し、.gitignoreにリストされていることを確認します。- サイトコードは公開キーのみを使用します。シークレットキーやサービスキーがクライアントコードに届くことはありません。
- コードとGitの履歴をシークレットの漏洩について検索し、何をチェックしたかを報告します。
- ページコードで一度でも提供されたり、Gitにコミットされたシークレットは、たとえリポジトリがプッシュされていなくても、露出しています。訪問者はページを読むことができ、履歴はすべてのコピーと将来のプッシュとともに移動します。ファイルから削除してもその事実は変わりません。ユーザーに、プロバイダーのダッシュボードでキーをローテーションするように伝えます。値がどのように見えても関係ありません。
検索とシェア
- 最大60文字のタイトルと最大155文字の説明。何が販売され、どこで販売されているかを明記します。ブランド名だけでは見知らぬ人には意味がありません。
- 1200x630のシェア画像を
public/images/share.webpに配置し、Open GraphとTwitterの画像として設定します。 - ファビコン、サイトマップ、robotsファイル。
- 本番ドメインをベースURLとして設定し、シェア画像とサイトマップが解決されるようにします。不明な場合はユーザーに確認します。
デプロイ
ユーザーが依頼した場合のみデプロイします。
- リポジトリをVercelに接続します。メインブランチへの各プッシュは、その後本番環境を再デプロイします。
.env.localの値をホストのプロジェクト設定に入力します。ローカルで動作し本番で壊れるフォームは、ほとんどの場合これが欠けています。- ビルドが失敗した場合は、ログを読み、根本原因を修正します。
- 本番URLで、モバイルデータ通信のスマートフォンから動作確認を行います。ページを読み込み、フォームを送信し、保存された行を確認します。
- リンクをメッセージングアプリに貼り付けて、プレビューカードを確認します。
正直に報告してください。確認したこと、確認できなかったこと（実機のスマートフォン、本番ドメインなど）、そしてユーザーに残された作業内容を報告します。