料金ページを新しいデザインに：スクリーンショットからHTMLとCSSのわかりやすいプランと料金へ、スマホ対応

成果物の例

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

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

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

アフター：新しいページ

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

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

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

このサービスについて

プランが似たように見え、違いが小さな文字に埋もれ、表がスマホで崩れる料金ページは、購入を考える人を逃してしまいます。料金ページのスクリーンショットをアップロードしていただければ、デザインを一新してコーディングします。比べやすいプランカードや料金表、ご指定があればおすすめプラン、スマホでも読みやすい比較表、オプション、支払い条件、よくある質問を、ブランドカラーとロゴで。料金、プラン名、上限、条件はすべてスクリーンショットや依頼内容のとおりで、料金を変えたり割引を加えたりすることはありません。ボタンは既存の登録、注文、お問い合わせのリンクにつながり、ページで決済は行いません。月額・年額の切り替えは、両方の料金をいただいた場合のみ機能します。

含まれる内容

• 納品内容新しいページ、スタイル、画像をまとめたZIPファイル。そのままサーバーにアップロードでき、全ページのプレビューは注文ページでご確認いただけます。
• 比べやすいプラン違いがひと目でわかるカードや表
• 料金はそのまま料金、上限、条件をすべて現在のページや依頼内容の文言どおりに
• スマホに収まる比較表長い表を、狭い画面でも読めるように組み直し
• 購入前の疑問に答える支払い、解約、返金に関するよくある質問を、わかりやすいブロックで
• 新しいイラスト、きれいなコードページ用に描き下ろし。シンプルなHTMLとCSSで、外部サイトからは何も読み込みません

ご利用の流れ

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

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：料金ページのスクリーンショット（できれば1枚につき1ページ全体、すべての料金が読める解像度で）と、ご希望であれば別ファイルのロゴ。料金が最新かどうかの確認または新しい料金、おすすめするプラン（あれば）、月額と年額の両方があるか、よくある購入前の質問、各プランのボタンのリンク先、参考にしたいサイトがあればそのサイトをお知らせください。

お伺いする内容：

• どのスクリーンショットがどのページですか？
• スクリーンショットの料金は最新ですか？
• おすすめするプランは？
• 購入前によくある質問は？
• 各ボタンのリンク先は？

プランを比較

質問と回答

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