トップページのデザインをHTMLとCSSでコーディング：ヘッダー、セクション、フッター、スマホ対応

成果物の例

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

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

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

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

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

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

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

このサービスについて

トップページは、サイト全体が従うデザインを決めます。ロゴとメニューのあるヘッダー、ファーストビュー、主要なセクション、フッター。トップページのカンプを画像としてアップロードしていただければ、同じグリッド、色、順番、本物のテキスト、スマホではボタンに収まるメニューで、HTMLとCSSでコーディングします。3ページのプランでは、2つの下層ページが同じヘッダー、フッター、スタイルを共有するため、そこからサイトの残りを広げていけます。ご注文のないページのメニュー項目は、セクションや連絡先など、ご指定の場所へリンクします。写真はアップロードがない限り新たに描き起こします。CMS、バックエンド、ホスティングはありません。

含まれる内容

• 納品内容ページ、スタイル、画像をまとめたZIPファイル（サーバーにすぐアップロード可能）と、注文ページでの全ページのプレビュー。
• ヘッダーとメニューロゴ、メニュー、連絡先をカンプどおりに。小さな画面ではスマホ用メニュー
• 順番どおりのセクションレイアウト、色、フォントをカンプどおりに
• サイト全体の土台全ページで共有するヘッダー、フッター、スタイル
• 本物のテキスト見出しや段落を検索エンジンが読めるHTMLで
• きれいなコードシンプルなHTMLとCSS。フレームワークなし、他のサイトから何も読み込みません

ご利用の流れ

1. 1
   アップロードトップページのカンプをアップロードし、メニュー項目のリンク先をお知らせいただきます
2. 2
   コーディングページをコーディングし、足りない画像を描きます
3. 3
   プレビューとアーカイブパソコンとスマホでページとデザインを見比べ、アーカイブをダウンロードして、プランの範囲内で修正を依頼できます

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：縦長の1画面または順番に分割したトップページのカンプ、3ページのプランの場合は下層ページのカンプ、お持ちであればモバイル版、ご希望であればそのまま使うロゴと写真。各メニュー項目とボタンのリンク先、ヘッダーとフッター用の連絡先、カンプと異なる文章をお知らせください。

お伺いする内容：

• どのファイルがどのページですか？
• メニュー項目のリンク先は？
• ヘッダーとフッター用の連絡先
• 文章はデザインどおりにしますか？
• デザインはお客様のものですか？

プランを比較

質問と回答

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