オンラインストアの商品ページの新しいデザイン：スクリーンショットから、HTMLとCSSの見やすい商品ページへ

成果物の例

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

スクリーンショットから作ったベーカリーのトップページの新デザイン

ビフォー：クライアントから届いたスクリーンショット

アフター：新しいページ

ファイル： index.html、スタイル、ページ用に描き下ろした画像2点を収めたZIPファイル。クライアントのサーバーで古いページとそのまま差し替えられます。ここに掲載している画像は各ページのスクリーンショットです。

クライアント： 家族経営のベーカリー、Miller Street Bakery。 ご依頼： 店名、温かみのあるブラウン、営業時間、焼いている商品の一覧はそのままに、古いトップページを新鮮でモダンな印象に。パンの大きな画像と分かりやすい注文ボタンを入れる。

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

このサービスについて

商品ページは、小さなスマートフォンの画面で売れなければなりません。写真、価格、オプション、購入ボタンが一度に見え、疑問への答えがスクロール1回の範囲にあることが大切です。今の商品ページのスクリーンショットをアップロードしていただければ、新しくデザインして作ります。見やすいギャラリーの領域、名前、価格、オプション、短いブロックのメリット、読みやすい仕様表、配送と返品の情報、すでにページにある口コミ、FAQを、お客様の色とロゴで。商品写真は決して描きません。スクリーンショットから十分に鮮明なものを使うか、元の写真を置く場所として残します。新しい画像はアイコン、バナー、背景のみです。価格、在庫、仕様は、お知らせいただいたとおりのままです。ページにはカートも決済もなく、購入ボタンはお客様のストアのリンクにつなぎます。

含まれる内容

• お届け内容新しいページのHTMLとCSS、スタイルと画像を収めたZIPアーカイブで、ホスティングにそのままアップロードできます。パソコンとスマートフォンでのプレビューを注文ページで確認できます。プレミアムでは、1つのスタイルの3ページです。
• 購入エリアが見える位置に写真、価格、オプション、ボタンが一度に
• 読みやすい仕様スマートフォンに収まる表
• 実際の商品だけお客様の写真を使い、描いた商品は使いません
• 配送と返品お客様の条件を分かりやすい位置に
• スマートフォン対応のすっきりしたコードシンプルなHTMLとCSS

ご利用の流れ

1. 1
   スクリーンショット商品ページのスクリーンショットをアップロードし、変えたい点をお知らせください
2. 2
   リデザインページを新しくデザインし、画像を描き、組み上げます
3. 3
   プレビュー新しいページを古いページと、パソコンとスマートフォンで見比べます
4. 4
   アーカイブアーカイブをダウンロードし、プランの範囲内で修正をご依頼いただけます

ご用意いただくもの

PNG、JPEG、WebPの画像を最大5枚：商品ページのスクリーンショット（上から下まで）と、お好みでロゴを別のファイルで。購入者に最初に見せたいもの、商品のオプションと仕様、配送と返品の条件、掲載してよい口コミ、購入ボタンの行き先、今のページで気になる点、スタイルの参考になるお好みのストアをお知らせください。

お伺いする内容：

• どの商品ページですか？
• 購入者に最初に何を見せたいですか？
• オプションと仕様
• 今のページで気になる点は？
• 購入ボタンの行き先は？

プランを比較

質問と回答

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