サービスページを新しいデザインに：スクリーンショットからHTMLとCSSのわかりやすいページへ、スマホ版付き

成果物の例

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

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

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

アフター：新しいページ

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

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

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

このサービスについて

サービスページは、何をしているのか、誰のためか、どう進むのか、いくらかかるのか、どう連絡すればいいのかに答えるもの。古いページでは、それが長い段落に埋もれていることがよくあります。スクリーンショットをアップロードしていただければ、デザインを一新してコーディングします。サービス内容とお問い合わせボタンのあるわかりやすいファーストビュー、含まれる内容、作業の流れ、いただいたとおりの料金、現在のページにある事例とよくある質問、ロゴとブランドカラー、描き下ろしイラスト、スマホ版。事実はお客様のものです。料金、保証、レビュー、資格、実績を加えることはありません。お問い合わせボタンは、電話、WhatsAppなどのメッセージアプリ、メールにつながり、予約ボタンは既存の予約リンクにつながります。ページはフォームを送信しません。

含まれる内容

• 納品内容新しいページ、スタイル、画像をまとめたZIPファイル。そのままサーバーにアップロードでき、全ページのプレビューは注文ページでご確認いただけます。
• サービスがひと目でわかる何をしているか、誰のためかをファーストビューに。お問い合わせボタン付き
• 含まれる内容を順番に内容と工程を短く読みやすいブロックで
• 料金はいただいたとおりに固定料金、価格帯、「お見積もり」を、現在のページのとおりに
• ワンタップでお問い合わせ電話、メッセージアプリ、メール、予約リンクをページの各所に
• 新しいイラスト、きれいなコードサービスに合わせて描き下ろし。シンプルなHTMLとCSSで、外部サイトからは何も読み込みません

ご利用の流れ

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

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：サービスページのスクリーンショット（できれば1枚につき1ページ全体、文字が読める解像度で）と、ご希望であれば別ファイルのロゴ。どのスクリーンショットがどのサービスか、今見つけにくい情報、文言どおり残すべき点、変更があれば最新の料金、電話・メッセージアプリ・メール、予約リンク（あれば）、参考にしたいサイトがあればそのサイトをお知らせください。

お伺いする内容：

• どのスクリーンショットがどのページですか？
• 今のページで見つけにくい情報は？
• 残すべき点は？
• お客様からの連絡方法は？

プランを比較

質問と回答

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