FigmaのデザインをHTMLとCSSでコーディング：書き出したフレームからページを制作、スマホ対応

成果物の例

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

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

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

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

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

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

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

このサービスについて

Figmaでデザインが完成し、動くページにしたい。フレームを1xまたは2xのPNGで書き出してアップロードしていただければ、HTMLとCSSでコーディングします。同じセクション、グリッド、余白、色、ボタンで、文字の画像ではなく本物のテキストで。モバイル用のフレームがあればそれに沿い、なければデスクトップ用フレームからスマホ版を作ります。.figファイルやFigmaのリンクは開けないため、レイヤー、コンポーネント、バリアント、プロトタイプのリンクは読み取れません。ホバー時の色など、書き出しで見えないものは依頼内容にご記入ください。写真はアップロードがない限り新たに描き起こします。アニメーション、バックエンド、CMS、ホスティングはありません。

含まれる内容

• 納品内容ページ、スタイル、画像をまとめたZIPファイル（サーバーにすぐアップロード可能）と、注文ページでの全ページのプレビュー。
• フレームに忠実にセクション、グリッド、余白、色、文字サイズを書き出しどおりに
• スマホ対応モバイル用フレームから、またはデスクトップ用から作成
• 本物のテキスト見出しや段落を検索エンジンが読めるHTMLで
• お送りいただいた画像を使用別途書き出した写真やアイコンはそのまま使用し、それ以外は新たに描き起こします
• きれいなコードシンプルなHTMLとCSS。フレームワークなし、他のサイトから何も読み込みません

ご利用の流れ

1. 1
   書き出しフレームをPNGで書き出してアップロードし、見えない部分をメモしていただきます
2. 2
   コーディングページをコーディングし、足りない画像を描きます
3. 3
   プレビューとアーカイブパソコンとスマホでページとデザインを見比べ、アーカイブをダウンロードして、プランの範囲内で修正を依頼できます

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：Figmaから1xまたは2xで書き出したフレーム（1ファイルにつき1ページ）、ご希望であればそのまま使う写真、イラスト、ロゴを別途書き出したもの。どのフレームがどのページか、使用したフォント名、書き出しに表示されていないホバーや展開時の状態、各ボタンのリンク先をお知らせください。.figファイルやFigmaのリンクは不可です。

お伺いする内容：

• どのフレームがどのページですか？
• デザインで使用しているフォント
• 書き出しに表示されていない状態
• 各ボタンのリンク先は？
• デザインはお客様のものですか？

プランを比較

質問と回答

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