通常3〜4週間→10日でLP制作｜大手商社SaaS案件で実現した制作工程とは

先日、大手商社様のSaaS LP制作を担当させていただきました。

本案件は公開日が決まっており、
打ち合わせから納品まで約10日間という非常にタイトなスケジュールでした。

通常、この規模のSaaS LP制作では3〜4週間程度かかるケースが一般的です。
それに対して今回は、10日間という通常の半分以下のスケジュールです。

では、この短期間でどのように進めたのか？

この記事では、実際のスケジュールとともに、短納期でも制作を成立させた進め方を詳しくご紹介します。

10日でSaaS LPを制作！？ 可能にした進め方とスケジュールを紹介します

📆 実際の制作スケジュール

今回の制作は、以下のような流れで進行しました。

初日：要件整理

• 初日夕方に制作打ち合わせを実施

ヒアリングの段階で、

👉 「どこまで作るか」ではなく「いつ公開するか」から逆算して設計を開始

この時点で、

• 必要なセクション構成
• 実装方法
• 工数の目安

まで大枠を決めています。

---

2日目〜5日目：デザイン設計

• 2〜4日目デザインカンプ作成
• 5日目 8:00 デザインカンプ提出

デザインは見た目だけでなく、
「その後どう実装するか」まで含めて設計する必要があります。

例えば、

• スマートフォンではどこで改行・折り返しをするか
• セクションごとに崩れないレイアウトになっているか
• 共通パーツとして使い回せる構造になっているか

といった点を、デザイン段階であらかじめ考えています。

👉 ここを曖昧にしたまま進めると、コーディングで必ず行き詰まります。

逆に言えば、
この段階で実装まで見据えて設計しておくことで、後工程を大幅にスムーズに進めることができます👍️

6日目：デザイン修正＋コーディング開始

• 6日目 修正対応／コーディング開始 　header / footer / FAQ / CONTACT 実装完了

👉 クライアントチェック待ちの間に共通パーツからコーディングを開始

具体的には、

• header
• footer
• FAQ
• CONTACT

といった全体で共通して使用するパーツを先に実装しています。

通常はデザイン確定後にコーディングへ進むケースが多いですが、
今回は短納期のため工程を分断せず、並行して進行。

👉 先に共通パーツを固めることで、後工程のスピードを大幅に向上させています。

---

7日目：主要セクション実装

• 7日目 　Hero / Problem / Feature / About / Function / Flow 完成

Heroデザインの工夫（背景設計）

今回のLPでは、Heroセクションの背景についても短納期を前提に設計を行っています。

一般的に背景を画像で作成する場合、

• PC用
• スマートフォン用

と、複数サイズの画像を用意する必要があり、制作・調整ともに工数がかかります。

そこで今回は、

👉 背景は画像ではなく、CSSで調整可能な図形で構成しました。

これにより、

• 画像作成の工数削減
• レスポンシブ対応の簡略化
• 軽量化による表示速度の向上

といったメリットがあり、短期間でもクオリティを保ったまま制作することが可能になります。

👉 デザイン段階で「どう実装するか」を考えておくことが、結果的にスピードに直結します。

---

8日目：レスポンシブ対応／アニメーション

• 8日目 　レスポンシブ対応／SP背景／アニメーション完成 　17:30 データ提出

👉 SPはPCデザインを前提に設計していたため、調整ベースで対応

今回のデザインは、PCとSPを完全に分けるのではなく、
最初から縦積みをベースにしたレイアウトで設計しています。

そのため、

• レイアウトの大きな組み替えが不要
• 余白・フォントサイズの調整のみで対応可能
• 崩れにくく、検証工数も削減

といった形で、短時間でのレスポンシブ対応を実現しています。

また、背景についても画像ではなくCSSベースで構成しているため、デバイスごとの調整がしやすく、スムーズに仕上げることができました。

👉 SPを後から作るのではなく、最初から前提に設計しておくことが重要です。

---

9日目：追加データ反映・公開前設定

• 9日目 クライアント待ちだったデータを追加 　iframe埋め込み／文言調整／メタ情報／ GTM設定

具体的には、

• 外部フォームのiframe埋め込み
• 文言の最終調整
• タイトル・ディスクリプションなどのメタ情報設定
• GTM head内設置

を対応しています。

👉 外部フォーム（iframe）の埋め込みも事前に想定して設計していたため、スムーズに対応が可能

短納期の案件では、こうした外部要素の対応で手が止まるケースも多いですが、
今回はレイアウト設計の段階で組み込みを前提にしていたため、
大きな修正なく対応することができました。

👉 「後から追加される要素」を見越して設計しておくことも、スピードを落とさないための重要なポイントです

---

最終日：全体最終チェック・納品

• 9日目 全体最終チェック後提出

最終日は、全体の最終チェックを行い、納品となりました。

👉 リンク確認だけでなく、デザインの細部まで含めて最終調整を実施

具体的には、

• 各リンクの動作確認
• 余白やフォントの統一
• 可読性（文字サイズ・行間）のチェック
• PC／タブレット／スマートフォンそれぞれでの表示確認

を行い、細部まで品質を整えています。

👉 短納期でも最後のチェック工程を省かないことが、品質を担保する上で重要です。

---

🟧 短納期でも対応できた理由

今回のスケジュールを成立させたポイントは、主に3つです。

① 最初に「実装」を前提に設計する

一般的な制作フローでは、

• デザインを作る
• その後コーディング方法を考える

という流れになりがちです。

しかし今回は逆に、

👉 「どう実装するか」を前提にデザイン設計を行いました。

これにより、

• コーディングで詰まるポイントを事前に回避
• 無駄な装飾や複雑な構造を排除
• 再利用できるパーツ設計

が可能になり、結果としてスピードが大きく向上しました。

---

② デザイン段階で工数をコントロール

短期制作を実現するためには、

デザインの自由度を上げすぎないことも重要です。

今回は以下を意識しました。

• PC/SPで共通化できるレイアウト構造 (ex.ファーストビュー背景をCSSで調整できる図形にする)
• 縦積みベースで崩れにくい設計
• 汎用コンポーネント化（カード・CTAなど）
• 画像点数を最小限に

つまり、

👉 「作りやすいデザイン」(コーディングしやすい)を最初から設計しているということです。

---

③ 日数を逆算したスケジュール設計

今回の制作では、最初に以下のように日数を分解しました。

このように工程ごとに時間を割り振ることで、

途中での遅延を防ぎ、スムーズに進行することができました。

短納期案件ほど、

👉 「なんとなく進める」のではなく、最初の設計が重要になります。

---

🔧 まとめ｜短納期でも品質を落とさないために

今回のLP制作では、

• 設計段階で実装を考える
• デザインで工数をコントロールする
• 全体スケジュールを逆算する

この3点を徹底することで、短期間でも品質を担保した制作が可能となりました。

LP制作は「デザインの見た目」だけでなく、設計次第でスピードも成果も大きく変わります。

特に今回のように時間が限られている案件では、後戻りを減らし、実装まで見据えたデザイン設計を行うことが一番重要です。

---

ニコウェブでは、構造設計からデザイン、コーディングまでを一貫して対応しているため、
短納期でのLP制作や公開スケジュールが決まっている案件にも柔軟に対応可能です。

「急ぎでLPを公開したい」
「設計からまとめて任せたい」

といったご相談も、ぜひお気軽にご連絡ください。