商品ページのデザインをHTMLとCSSでコーディング：ギャラリー、詳細、注文ボタン、スマホ対応

成果物の例

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

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

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

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

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

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

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

このサービスについて

商品ページの役割は1つ。商品を魅力的に見せ、次のステップをわかりやすくすることです。商品ページのカンプを画像としてアップロードしていただければ、HTMLとCSSでコーディングします。写真ギャラリー、商品名、価格、オプション、特長、仕様、よくある質問をお客様のレイアウトで、スマホ版も。ページは商品を紹介しますが販売はしません。カート、在庫数、注文手続き、決済はありません。注文ボタンは、既存のショップやマーケットプレイスの商品ページ、メッセージアプリ、またはメールにつながります。描いた画像では実物を見せられないため、商品写真はご自身のものを別ファイルでアップロードしてください。バックエンド、CMS、ホスティングはありません。

含まれる内容

• 納品内容ページ、スタイル、画像をまとめたZIPファイル（サーバーにすぐアップロード可能）と、注文ページでの全ページのプレビュー。
• 写真ギャラリー商品写真を、カンプどおりのサムネイル付きで
• レイアウトどおりの詳細カンプまたは依頼内容に基づく特長、仕様表、よくある質問
• わかりやすい注文ボタンショップページ、メッセージアプリ、またはメールへ
• スマホ対応モバイル版がない場合はデスクトップのデザインから作成
• きれいなコードシンプルなHTMLとCSS。フレームワークなし、他のサイトから何も読み込みません

ご利用の流れ

1. 1
   アップロードカンプと商品写真をアップロードし、情報をお知らせいただきます
2. 2
   コーディングページをコーディングし、写真をギャラリーに配置します
3. 3
   プレビューとアーカイブパソコンとスマホでページとデザインを見比べ、アーカイブをダウンロードして、プランの範囲内で修正を依頼できます

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：商品ページのカンプ、お持ちであればモバイル版、別ファイルで実際の商品写真。掲載どおりの表記で商品名・価格・仕様、注文ボタンのリンクまたは連絡先、3ページのプランの場合は各商品の文章。レビューは実際のもので掲載できる場合のみ。

お伺いする内容：

• どのファイルが何ですか？
• 商品情報
• 注文ボタンのリンク先は？
• デザインはお客様のものですか？

プランを比較

質問と回答

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