HTMLとCSSでランディングページ
一つのファイルで作る、シンプルで軽いランディングページ。モバイル優先、アクセシブル、重いフレームワークなし。
- 種類
- プロンプト
- レベル
- 初級
- 所要時間
- 約10分
結果はツール、モデル、入力内容によって変わります。
入力する
入力した内容はこのブラウザ画面の中だけにとどまります。当サイトが保存・送信することはありません。
何のためのページ
- ワークショップの申し込み
- 小さなアプリの紹介
- フリーランスの名刺代わり
- サークルのパーティーの案内
- 新商品の順番待ちリスト
どんな構成
- ヘッダー、三つの利点、使い方、申し込みフォーム、連絡先
- ヘッダー、機能、料金、よくある質問
- ヘッダー、自己紹介、サービス、連絡先
- ヘッダー、プログラム、アクセス、申し込み
- ヘッダー、課題、解決策、順番待ちリスト
配色
- 紺と白にオレンジのアクセント
- 緑とクリーム色
- 白黒に赤を一色
- パステルブルーとグレー
- 砂色に深緑のアクセント
あなたのプロンプト
埋め込みCSSつきの単一HTMLファイルでランディングページを作ってください。JavaScriptフレームワークは使いません。 目的：[目的]。セクション：[セクション]。 色：[色]。モバイル優先、読みやすい文字サイズ、十分なコントラスト、論理的な見出しの順番、代替テキストの例。外部フォント、トラッキング用スクリプト、実在の人物の画像は使わないでください。
相性のよいツール
このプロンプトと相性のよい、当サイトのカタログに載っているツールです。
使い方
- 項目を入力するか、候補をタップします。氏名、住所などの個人情報は入れません。
- 完成したプロンプトを好きなツールに貼り付けます。
- ブラウザでファイルを開き、スマホでも表示して、ブラウザのアクセシビリティチェックを実行しましょう。
使えるツール
プロンプトは多くのチャットツールや生成ツールで使えます。ここでの選択は当サイトのカタログに基づき、料金は各ツールページの表示に準じます。
なぜうまくいくのか
フレームワークなしの単一ファイルは理解しやすく、公開も簡単です。コントラストや見出しの指定で、最初からアクセシビリティを組み込めます。
ヒント
- フォームにはデータの受け取り先が必要です。公開前に、プライバシーの扱いと合わせて決めましょう。