FigmaでLPのデザインを完成させても、そのままではWebページとして公開できません。ブラウザで表示できるようにHTMLやCSSを作り、スマートフォン表示やボタンの動き、問い合わせフォームなどを設定する作業が必要です。
デザインは完成しているものの、自分ではコードを書けない場合や、社内に実装を担当できる人がいない場合は、コーディング部分だけを外注できます。
ただし、Figmaの共有URLを送るだけでは、見積もりや作業がスムーズに進まないことがあります。スマートフォン版の有無、アニメーションの内容、納品方法などによって、必要な作業が変わるためです。
FigmaのLPはコーディングだけ外注できる
デザインが完成していれば、LP全体を作り直さず、コーディングだけを依頼できます。
この場合、外注先が担当するのは、主に次の作業です。
- FigmaのデザインをもとにHTMLとCSSを作る
- パソコンとスマートフォンの表示を整える
- メニューやボタンに動きを付ける
- 問い合わせフォームを設置する
- ファイル一式を納品する
- 指定されたサーバーへアップロードする
依頼先によって担当範囲は異なります。特に、WordPressへの組み込み、フォームの送信設定、サーバーへの公開作業は、基本料金に含まれないことがあります。
見積もりを取るときは、「LPのコーディングをお願いします」だけでなく、どこまで作業してほしいのかを伝える必要があります。
外注しやすい状態と、まだ早い状態
Figmaのデザインがあるだけで、必ずすぐにコーディングへ進めるわけではありません。
| 状態 | コーディングの進めやすさ |
|---|---|
| パソコン版とスマートフォン版が完成している | 進めやすい |
| 文章と画像が確定している | 進めやすい |
| ボタンの移動先が決まっている | 進めやすい |
| フォームの入力項目が決まっている | 進めやすい |
| パソコン版しか作っていない | スマホ表示の相談が必要 |
| 仮の文章や画像が多い | 後から修正が増えやすい |
| 動きの指示が決まっていない | 見積もりが変わりやすい |
| 公開先が決まっていない | 納品方法を決めにくい |
文章や画像が途中でも見積もりを取ることはできます。ただし、作業開始後にページの長さや配置が大きく変わると、追加作業になることがあります。
デザインを完全に完成させてから依頼するのか、コーダーと相談しながら仕上げるのかを最初に決めておくと、認識のずれを減らせます。
依頼前にFigmaで整理しておくもの
パソコン版とスマートフォン版を分ける
パソコン版のデザインだけでは、スマートフォンで各要素をどの順番に並べるのか判断できないことがあります。
たとえば、パソコンでは画像と文章が横並びでも、スマートフォンでは次のような選択肢があります。
- 画像を上、文章を下にする
- 文章を上、画像を下にする
- 一部の画像を非表示にする
- ボタンを画面下に固定する
- 表を横にスクロールできるようにする
スマートフォン版を作っていない場合は、外注先にレイアウトを任せるのか、作業前に提案を出してもらうのかを伝えます。
レイヤー名を分かりやすくする
Figma内のレイヤーが「グループ1」「長方形38」「フレーム125」のような名前ばかりだと、どの要素を指しているのか分かりにくくなります。
すべてを細かく変更する必要はありませんが、主な部分だけでも名前を付けておくと伝達が楽になります。
- ヘッダー
- ファーストビュー
- 商品説明
- お客様の声
- 料金表
- よくある質問
- 申し込みボタン
- フッター
修正を頼む際も、「フレーム125の下」ではなく「料金表の下」と伝えられます。
使う画像をまとめる
Figma上に画像が表示されていても、元の画像ファイルが必要になる場合があります。
次の素材を一つのフォルダにまとめておくと、受け渡しがスムーズです。
- 商品写真
- 人物写真
- ロゴ
- アイコン
- 背景画像
- イラスト
- スマートフォン用に差し替える画像
画像のファイル名も、「IMG_0001」より「product-main」「customer-voice01」など、内容が分かる名前にしておくと混乱を防げます。
フォントを確認する
Figmaで指定しているフォントが、Webサイト上でも無料で使えるとは限りません。
有料フォントや社内専用フォントを使っている場合は、次のどれにするか決めます。
- Webフォントとして利用する
- ライセンスを用意する
- 似た無料フォントへ変更する
- 文字を画像として書き出す
フォントが変わると文字幅も変わるため、改行位置やボタンの大きさがデザインとずれることがあります。見積もり前に、使えるフォントかどうかを確認しておく方が安全です。
動きの指示は画像だけでは伝わらない
静止したFigmaデザインだけでは、スクロール時やクリック時の動きまでは分かりません。
動きを付けたい場所は、コメントや別の指示書にまとめます。
- ボタンにマウスを乗せたときの変化
- 画像を順番に切り替えるスライダー
- 質問を押すと回答が開くFAQ
- スクロールすると表示される申し込みボタン
- 下から浮き上がる文章や画像
- 数字が増えていく演出
- ページ内の指定場所へ移動するリンク
「適度に動きを付けてください」だけでは、完成後に好みと合わないことがあります。
参考にしたいWebページがある場合は、そのURLと対象部分を伝えます。「このサイトのように」だけでなく、「スマートフォンで画面下に固定されるボタンの動き」など、どこを参考にしたいのかも書きます。
見積もり金額が変わりやすい項目
LPのコーディング費用は、ページ数だけでは決まりません。同じ1ページでも、長さや機能によって作業量が変わります。
| 項目 | 見積もりが変わる主な理由 |
|---|---|
| ページの長さ | セクションが多いほど作業が増える |
| スマホ版の有無 | レイアウトを考える作業が必要になる |
| アニメーション | 動きの種類や数によって工数が変わる |
| 問い合わせフォーム | 入力確認や自動返信などの設定が必要になる |
| WordPress | 管理画面から更新できる仕組みが必要になる |
| サーバーへの公開 | 接続情報の確認や既存データの扱いが加わる |
| 急ぎの納期 | 通常の作業予定を調整する必要がある |
| 修正回数 | 変更できる範囲や回数が依頼先ごとに異なる |
最初の相談時に、必要な機能をまとめて伝えた方が、後から追加料金が出る可能性を減らせます。
フォームがある場合に決めておくこと
申し込みフォームや問い合わせフォームを付ける場合は、見た目だけでなく送信後の動きも決めます。
最低限、次の内容を整理します。
- 入力してもらう項目
- 必須項目
- 送信先のメールアドレス
- 自動返信メールの有無
- 送信後に表示するページ
- 個人情報保護方針への同意欄
- 迷惑メール対策
- 入力内容の確認画面が必要か
既存のフォームサービスを埋め込むのか、LP内に新しくフォームを作るのかでも作業内容が変わります。
申し込み後に広告の効果を測りたい場合は、完了ページや計測タグについても先に伝えます。
納品方法は作業開始前に決める
コーディング後の納品方法には、主に次の形があります。
ファイル一式を受け取る
HTML、CSS、JavaScript、画像などをZIPファイルで受け取る方法です。
受け取ったあと、自分または別の担当者がサーバーへアップロードします。社内にWeb担当者がいる場合や、公開作業を別会社へ任せる場合に向いています。
サーバーへアップロードしてもらう
外注先にサーバー情報を渡し、公開作業まで頼む方法です。
既存サイトと同じサーバーへ追加する場合は、上書き事故を防ぐため、次の情報も共有します。
- 公開するフォルダ
- 現在使っているURL
- 既存サイトのバックアップ状況
- 公開予定日時
- 公開後に確認する担当者
- 問題が起きた場合の戻し方
FTP情報やサーバーのログイン情報は、必要な相手にだけ渡します。取引が終わったあとに、パスワードを変更する方法もあります。
WordPressへ組み込んでもらう
WordPressで更新できるLPにする場合は、どの部分を管理画面から変更したいのかを決めます。
すべてを編集できるようにすると、管理画面の作り込みが増えます。反対に、文章や画像をほとんど変更しないLPであれば、必要な部分だけ更新できる形にした方が簡単です。
依頼文に入れる内容
最初の連絡には、次の情報をまとめます。
- Figmaの共有URL
- LPの用途
- パソコン版とスマートフォン版の有無
- ページのおおよその長さ
- 必要なアニメーション
- フォームの有無
- WordPressへ組み込むか
- 希望する納品方法
- 希望納期
- 公開予定日
- 参考サイト
- 見積もりに含めてほしい作業
依頼文は、次のように具体的に書けます。
「Figmaで作成した商品販売用LPのコーディングをお願いします。パソコン版とスマートフォン版のデザインは完成済みです。申し込みボタンのページ内リンク、FAQの開閉、問い合わせフォームの設置を希望します。納品はサーバーへのアップロードまでお願いします。公開予定日は○月○日です。」
決まっていない項目は、隠さずに「相談して決めたい」と書きます。その方が、見積もりに必要な確認を早く進められます。
納品前に確認する場所
完成したLPは、パソコンだけでなくスマートフォンでも確認します。
特に見落としやすいのは次の部分です。
- 文章の改行位置
- 画像の切れやぼやけ
- ボタンの押しやすさ
- リンク先の間違い
- 電話番号を押したときの発信先
- フォームの送信先
- 自動返信メール
- 画面下に固定されたボタン
- FAQやスライダーの動き
- 横向きにしたときの表示
- 長い文字を入れたときのフォーム表示
問い合わせフォームは、実際にテスト送信します。送信完了の表示だけでなく、管理者側にメールが届くか、自動返信が届くかまで確認します。
コーディングを依頼する前に整理すること
見積もりを頼む前に、次の四つを一枚のメモにまとめておくと、依頼先とのやり取りを減らせます。
どこまで完成しているか
Figmaのデザイン、文章、画像、スマートフォン版のうち、完成しているものを書き出します。
未完成の部分がある場合は、いつまでに用意できるかも伝えます。
どこまで頼むか
コーディングだけなのか、フォーム設定、WordPressへの組み込み、サーバーへの公開まで含めるのかを決めます。
作業範囲が曖昧なままでは、同じ依頼でも見積もり内容がそろいません。
いつ確認できるか
コーディング中に質問や確認が届くことがあります。返信できる曜日や時間帯を伝えておくと、作業が止まりにくくなります。
公開日が決まっている場合は、完成希望日ではなく、公開後の確認や修正に使う日数も含めて予定を組みます。
何をもって完成とするか
Figmaと見た目が合っていれば完成なのか、フォーム送信やサーバー公開まで終わった時点を完成とするのかを決めます。
対応するブラウザ、スマートフォンの確認範囲、修正できる期間についても、作業開始前にそろえておきます。
まとめ
FigmaでLPのデザインが完成していれば、コーディング部分だけを外注できます。
依頼前に整理したいのは、デザインデータだけではありません。スマートフォン表示、アニメーション、フォーム、WordPressへの組み込み、納品方法まで決めておく必要があります。
特に見積もりへ影響しやすいのは、ページの長さ、動きの数、フォームの機能、公開作業の有無です。分かる範囲で最初に伝えておけば、作業開始後の追加費用や修正を減らせます。
Figmaの共有URLと一緒に、作業範囲、希望納期、公開方法をまとめて送り、見積もりに含まれる内容を確認してから進めましょう。
