ランディングページのデザインをHTMLとCSSでコーディング：カンプのすべてのセクションを再現、スマホ対応

成果物の例

スタンダードパッケージの例すべて表示

デザインどおりに作った歯科医院のトップページ

ビフォー：クライアントから届いたデザイン

アフター：実際に動くページ

ファイル： index.html、スタイル、ページ用の画像2点を収めたZIPファイル。クライアントのサーバーにそのままアップロードできます。ここに掲載している画像はページのスクリーンショットです。

クライアント： 歯科医院のBright Smile Dental。 ご依頼： トップページのデザインを、同じレイアウト・配色・テキストのまま実際に動くHTMLページにし、医院に電話がかかる予約ボタンを付ける。

お客様とすべての情報は架空のものです。

このサービスについて

ランディングページはセクションの順番が命です。オファーを示すファーストビュー、理由、実績、料金、そしてわかりやすいボタン。ランディングページのカンプを画像としてアップロードしていただければ、HTMLとCSSでコーディングします。お客様の順番どおりのセクション、同じグリッドと色、検索エンジンが読める本物のテキスト、カンプにない場合はスマホ版も。各CTAボタンは電話、WhatsAppやメッセージアプリ、メール作成、または注文・予約リンクにつながります。デザインにフォームがあっても、サーバーがないため何も送信できないので、代わりにボタンをご提案します。アニメーション、決済、トラッカー、ホスティングはありません。

含まれる内容

• 納品内容ページ、スタイル、画像をまとめたZIPファイル（サーバーにすぐアップロード可能）と、注文ページでの全ページのプレビュー。
• お客様の順番どおりのセクションファーストビューからフッターまで、カンプどおりに
• アクションが明確なボタン電話、WhatsApp、メール、または指定リンク
• スマホ対応モバイル版がない場合はデスクトップのデザインから作成
• 検索エンジン対応本物の見出し、ページタイトル、ディスクリプション
• きれいなコードシンプルなHTMLとCSS。フレームワークなし、他のサイトから何も読み込みません

ご利用の流れ

1. 1
   アップロードランディングページのカンプをアップロードし、各ボタンのリンク先をお知らせいただきます
2. 2
   コーディングセクションをコーディングし、足りない画像を描きます
3. 3
   プレビューとアーカイブパソコンとスマホでページとデザインを見比べ、アーカイブをダウンロードして、プランの範囲内で修正を依頼できます

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：縦長の1画面または順番に分割したランディングページのカンプ、お持ちであればモバイル版、ご希望であればそのまま使うロゴと写真。カンプと異なる場合は最終的な文章、検索エンジン用のページタイトルとディスクリプション、各ボタンのリンク先（電話番号、WhatsApp、メール、注文リンク）。

お伺いする内容：

• どのファイルがランディングページのどの部分ですか？
• 最終的な文章
• 各ボタンのリンク先は？
• 検索用のページタイトルとディスクリプション
• デザインはお客様のものですか？

プランを比較

質問と回答

答えが見つかりませんか？ 質問する