モバイルデザインをHTMLとCSSでコーディング：スマホ画面から作り、パソコンでもきれいに開くページ

成果物の例

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

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

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

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

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

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

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

このサービスについて

スマホ向けに描かれたデザインを、手に持ってしっくりくるページにしたい。モバイル画面を画像としてアップロードしていただければ、HTMLとCSSでコーディングします。同じセクションを同じ順番で、タップしやすい大きさのボタン、デザインどおりに開くメニュー、画面に収まる本物のテキスト。デスクトップ画面もあればそれに沿い、なければタブレットやパソコン向けにレイアウトを広げ、プレビューで確認していただきます。写真はアップロードがない限り新たに描き起こします。扱うのは画像で、デザインファイルではありません。アプリではなくウェブページで、アニメーション、バックエンド、ホスティングはありません。

含まれる内容

• 納品内容ページ、スタイル、画像をまとめたZIPファイル（サーバーにすぐアップロード可能）と、注文ページでの全ページのプレビュー。
• スマホ画面に忠実にセクション、余白、色、文字サイズをデザインどおりに
• 大きな画面にも対応デスクトップのデザイン、またはモバイル版から広げたレイアウトで
• タップしやすくボタン、リンク、メニューをタッチ操作に合わせたサイズで
• 本物のテキスト見出しや段落を検索エンジンが読めるHTMLで
• きれいなコードシンプルなHTMLとCSS。フレームワークなし、他のサイトから何も読み込みません

ご利用の流れ

1. 1
   アップロードスマホ画面をアップロードし、メニューの開き方をお知らせいただきます
2. 2
   コーディングスマホ向けにページを制作し、大きな画面向けに広げます
3. 3
   プレビューとアーカイブパソコンとスマホでページとデザインを見比べ、アーカイブをダウンロードして、プランの範囲内で修正を依頼できます

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：デザインツールから書き出したスマホ画面（1ファイルにつき1ページまたは縦長画面1つ）、お持ちであればデスクトップ画面、ご希望であればそのまま使うロゴと写真。どのファイルがどのページか、メニューの開き方、各ボタンのリンク先をお知らせください。スマホでは、ボタンで電話をかけたりWhatsAppを開いたりできます。

お伺いする内容：

• どのファイルがどのページですか？
• デスクトップ画面もありますか？
• メニューの開き方は？
• ボタンのリンク先は？
• デザインはお客様のものですか？

プランを比較

質問と回答

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