ネットショップのトップページを新しいデザインに：スクリーンショットからHTMLとCSSのモダンなページへ、スマホ対応

成果物の例

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

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

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

アフター：新しいページ

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

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

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

このサービスについて

トップページはお店のショーウィンドウです。ごちゃごちゃして読みにくかったり、スマホで使いにくかったりすると、お客様は商品にたどり着く前に離れてしまいます。スクリーンショットをアップロードしていただければ、デザインを一新してコーディングします。わかりやすいファーストビュー、主なカテゴリー、おすすめ商品、配送と返品の情報、連絡先、ロゴとブランドカラー、スマホ版、バナーとセクション用の描き下ろしイラスト。商品を描くことはありません。商品写真は、十分に鮮明であればスクリーンショットから使うか、オリジナル画像用の場所として印を付けて残します。価格とオファーはいただいたとおりです。ページにカートや決済はなく、商品とカテゴリーのボタンは現在のショップのリンクにつながります。ショップはこれまでどおり動きます。

含まれる内容

• 納品内容新しいページ、スタイル、画像をまとめたZIPファイル。そのままサーバーにアップロードでき、全ページのプレビューは注文ページでご確認いただけます。
• わかりやすいショーウィンドウファーストビュー、カテゴリー、おすすめ商品をすっきりした順番で
• ショップへのリンクカテゴリーと商品の各ボタンは、現在のショップの該当ページへ
• 実際の商品のみ商品は写真のみで、描くことはありません。描き下ろしイラストはバナーとセクションに
• 配送と返品の情報お客様が探す条件を、いただいたとおりに短いブロックで
• スマホ対応、きれいなコード大きなカテゴリータイルとスマホ用メニュー。シンプルなHTMLとCSSで、外部サイトからは何も読み込みません

ご利用の流れ

1. 1
   スクリーンショットトップページのスクリーンショットをアップロードし、カテゴリーと商品をリンク付きでお知らせいただきます
2. 2
   リニューアルページのデザインを一新し、イラストを描いてコーディングします
3. 3
   プレビューとアーカイブパソコンとスマホで新旧のページを比べ、プランの範囲内で修正を依頼し、ファイルをダウンロード

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：ショップのトップページのスクリーンショット（文字が読める解像度で）と、ご希望であれば別ファイルのロゴ。主なカテゴリー、おすすめ商品3〜8点の価格とショップ内のリンク、配送・支払い・返品の条件、実施中のオファーとその期間（あれば）、連絡先、残すべき点、参考にしたいショップがあればそのショップをお知らせください。

お伺いする内容：

• どのスクリーンショットがどのページですか？
• カテゴリーとおすすめ商品
• 配送、支払い、返品
• 残すべき点は？
• 実施中のオファーは？

プランを比較

質問と回答

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