▶ 3日で初案件PR
この記事でわかること
LP模写で身につく5つのスキルと素材の選び方、情報設計からオリジナルLPを組み立てる手順、5か月でポートフォリオを完成させるロードマップと自己診断の方法を解説します。
LPデザインの練習は、模写で構成を読む力を養い、次に情報設計・レスポンシブ・ポートフォリオ化という5段階で進めると、フリーランス案件に直結するスキルが身につきます。本記事では練習素材の選び方から成果物の整理方法まで順番に解説します。本記事の情報は2026年09月時点のものです。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
LP練習は「模写で構造を読む → 情報設計を自分で考える → スマホ対応を組み込む → ポートフォリオに整理する → 実案件の構成を逆算する」という5段階で進めます。最初からオリジナルを作ろうとすると、再現できない部分の原因が分からなくなります。模写で骨格を理解することを最初の一歩に置いてください。ここで紹介する手順とハックは、フリーランスとして実案件に応募する際に提出できるポートフォリオを作ることを前提にしています。
最初に確認すること
手元にあるスマートフォンで、気になるLP（サービス申込みや購入に誘導する縦長の1ページサイト）を1件開き、ファーストビュー・CTA・フッターの3箇所がどう配置されているかを5分間観察してください。この「構造を読む目」を養うことが、すべての練習の出発点になります。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何から始めるか分からない | LP模写で身につく5つのスキルと選び方 | 5分 |
| 模写はできたがオリジナルが作れない | 情報設計から始める自分でLPを組み立てる練習 | 7分 |
| スマホ対応の練習方法が分からない | スマホファーストLPは崩れる3箇所を先に押さえる | 5分 |
| ポートフォリオとして整理する方法を知りたい | 練習LPをポートフォリオに変える4つの整理手順 | 6分 |
LP模写で身につく5つのスキルと選び方
Webデザインを始めたばかりの段階では、ツールを開いても何をどこから配置すればよいか分からなくなることがあります。模写から始めると、そのつまずきを一段階ずつ外せます。
LP模写が練習として有効な理由は構造の分解にある
LPを1ページ模写することで、ファーストビュー・ベネフィットセクション・CTA・社会的証明・フッターという構成の順番と、それぞれの役割が体感として理解できます。見た目を真似るだけでなく、「なぜここにCTAを置くのか」「なぜ余白がこの幅なのか」という設計の意図を読む練習になるため、オリジナル制作に進んだときに再利用できる判断軸が身につきます。書籍で読むより、実際に手を動かして寸法を合わせようとしたときに初めて気づく余白の役割があります。
模写を通じて身につくスキルは5つあります。レイアウトの分割比率を読む力、フォントサイズと行間のバランスを測る力、配色が統一されている理由を観察する力、CTAまでの視線の流れを追う力、そして画像とテキストの配置ルールを体感する力です。これらは5回以上の模写を通じて徐々に蓄積されるスキルであり、1回の模写ですべてを習得する必要はありません。
模写に適したLPの選び方は情報量と構成の明確さで判断する
模写対象を選ぶ際に陥りやすい失敗は、見た目が派手で完成度の高いLPを選ぶことです。セクション数が多く、アニメーションや動的要素が多いLPは再現難度が高く、何が再現できて何ができていないかの判別が難しくなります。
最初に選ぶLPの条件は3つあります。セクション数が5から7程度であること、アニメーションに頼らず静止状態で情報が完結していること、そして業種がシンプルで訴求内容が1つに絞られていること（例：単一サービスの申込LP、1商品の購入LP）です。noteのmakisuzu_designさんが公開しているLPデザイン課題では、ワイヤーフレーム付きの課題形式でこの条件を満たす素材が提供されています（LPのデザイン課題｜makisuzu_design）。
LP模写の進め方は4段階で構成を解体してから再現する
模写はいきなりデザインツールで全体を再現しようとするのではなく、まずLPをセクションごとに解体するところから始めます。対象のLPを開いたら、スクリーンショットを縦に並べ、各セクションの役割と高さ比率をメモします。次にHTMLだけで骨格を作り、内容が入っていない状態でセクションの順番と大きさが再現できているかを確認します（HTMLとCSSで学ぶ基礎のボックスデザイン｜codequest）。骨格が確認できたら、フォントと配色を加え、最後に画像の配置とCTAの形状を整えます。
この進め方でやらなくていいことは、最初からデザインの細部（シャドウの強さ・グラデーションの角度など）に時間をかけることです。細部の再現は構造が固まってから行う作業であり、最初に細部に入ると骨格の誤りに気づくのが遅くなります。
CHECK
▶ 今すぐやること: 近くにあるサービス系LP（スクール・フィットネス・転職など）を1件スクリーンショットし、セクションを5から7に分割して役割を書き出す（10分）
Q: 模写はFigmaとコーディングのどちらでやるべきですか？
A： 目的によって変わります。デザインの構成・配色・余白を学ぶ段階はFigmaで模写し、HTML/CSSへの実装も視野に入れる段階でコーディングに移るのが効率的です。両方を同時に始めると、デザインの判断なのか実装の問題なのかが切り分けられなくなります。
Q： 模写対象はどのくらいのペースで変えるべきですか？
A： 1つのLPを1から3回繰り返してから次に移るのが目安です。1回目は全体の構造、2回目はフォントと配色、3回目はCTAまでの視線誘導に絞って観察すると、同じLPでも得られる学習内容が変わります。
情報設計から始める自分でLPを組み立てる練習
模写がある程度できるようになったとき、「自分でLPを作ってみよう」と思ってツールを開いたら何も出てこなかった、という経験をした人は少なくありません。模写と自分での制作の間には「情報設計を考える力」のギャップがあります。
ワイヤーフレームを手書きで描く練習が情報設計の起点になる
情報設計とは、LPのどのセクションに何の情報を置くかを、見た目のデザインより先に決める作業です。これを省いて先にビジュアルを作り始めると、途中でCTAの配置が不自然になったり、伝えたい情報が埋もれたりします。
最初はA4の紙に手書きでワイヤーフレームを描くことを勧めます。デジタルツールで描くより、紙に書いた方がセクションの入れ替えや削除が気軽にできるため、複数案を出す練習になります。ワイヤーフレームでは、各セクションに「キャッチコピー」「主訴求」「社会的証明」「CTA」のラベルを付けながら、読者が上から読んだときの理解の流れを確認します。chico_worksさんのnoteでは、「20〜30代女性向けフィットネスジムのLP」という具体的なテーマで制作に取り組んだ体験が記載されており、テーマ設定の参考になります（STUDIO×Webデザインでフリーランスになる実践記｜chico_works）。
コンセプト設計はターゲット・課題・解決策の3点を先に決める
コンセプトなしでLPを作り始めると、デザインの方向性が迷子になります。実案件では必ずクライアントからターゲット像と訴求ポイントのヒアリングが入る工程があるため、練習のうちからこの思考を習慣化しておくと、案件対応のスピードが上がります。
練習での設定例として、「30代の会社員がオンラインで英語を学ぶサービスのLP」を自分で設定し、ターゲットの課題（通勤時間に学習時間を捻出できない）と解決策（隙間時間15分で完結するレッスン設計）を書き出してからデザインに入るという方法があります。このコンセプト設定に使う時間は20から30分が目安です。この段階で迷った内容をメモとして残しておくと、後でポートフォリオに掲載する際の制作意図の説明に使えます。なお、フリーランスのポートフォリオ作り方では、実績と意図の両方を伝える構成方法が詳しく解説されています。
同じLPを業種違いで再制作すると応用力が早く育つ
模写したLPのレイアウト構成はそのままに、業種だけをフィットネスジム → オンラインスクール → 美容サロンと変えて再制作する練習は、配色とビジュアルの選択基準を鍛えます。構成を変えずに業種を変えると、「このレイアウトがどの業種に合うか」という判断が繰り返しできるため、自分なりの設計ルールが早く積み上がります。
Q: 模写とオリジナル制作はどのくらいの割合で進めるべきですか？
A： 練習初期（1から2か月）は模写7割・情報設計からの自己制作3割を目安にするのが効率的です。模写で構成パターンのストックが5件以上できてからオリジナル制作の比率を上げると、デザインの選択肢が増えた状態で考えられます。
Q： コンセプトを自分で考えるのが難しい場合はどうすればよいですか？
A： 実在するサービスのLPを選び、「もし自分がこのサービスのLPを0から作るなら」という前提で、ターゲットと課題を自分で設定し直す練習が有効です。既存のサービスを使うと訴求内容の参考になりながら、設計の練習ができます。
LPデザインとコーディングの練習どちらを先にするか5つの条件で判断
「デザインツールで作ったLPをHTMLでも実装すべきか」「コーディングの練習をどのタイミングで入れるか」という判断に迷う人は多くいます。目指す仕事の形によって優先順位が変わります。
デザイン先行とコーディング先行の使い分けは案件の種類で決まる
フリーランスLPデザイナーとして受ける案件は、大きく2パターンに分かれます。デザインカンプのみを納品し、コーディングは別のコーダーが担当するパターンと、デザインから実装までをワンセットで担当するパターンです。前者に絞るなら、Figmaでのデザイン制作を中心に練習を組み立てます。後者を目指すなら、Figmaでデザインを作りながら、HTMLとCSSでの実装も並行して練習します。
どちらを選ぶかの判断基準は5つあります。クラウドソーシングでの案件単価（コーディングセットの案件は相場として高い傾向があります）、自分が今持っているHTMLとCSSの基礎知識の有無、1案件にかけられる制作時間の目安、デザインと実装のどちらが得意かという実感、そして目標とするポートフォリオに実装サンプルを入れたいかどうかです。kataokadesignさんのnoteでは、フリーランスLPデザイナーになるには勉強と実践の両立が必要だと述べられており、どちらかに偏りすぎない学習設計の参考になります（フリーランスLPデザイナー向けスタートアップ｜kataokadesign）。
コーディングを練習に組み込むタイミングの目安は模写3件後
Figmaでの模写が3件完成した後に、そのうち1件をHTMLとCSSで実装してみる方法が、デザインとコーディングを連動させた学習になります。この段階で「Figmaで作ったデザインがなぜそのままコーディングで再現できないのか」という実装しやすいレイアウトの条件が体感できます。デザインが実装を前提にしていないと発生しやすい問題（複雑なグリッド、フォント指定の方法、画像の扱い）を早期に知ることで、以降のデザイン制作で実装コストの低い設計を意識できるようになります。
CHECK
▶ 今すぐやること: 目指す案件タイプ（デザインのみ or デザイン+実装）を1つ決め、次の練習作品の制作方針をメモに書き出す（15分）
Q: Figma・Photoshop・Adobe XDのどれを使えばよいですか？
A： LP練習の場合、Figmaが現在の実務でよく使われるツールの1つです。無料プランで基本機能を使えること、共同編集やコメント機能が使いやすいことが実務環境と近い理由です。Photoshopは画像加工の精度が高く、既存の制作環境がPhotoshopベースのクライアントとの案件では使うことがあります。まずFigmaで始め、案件の状況に応じて他のツールに触れる順序が現実的です。
Q： HTMLとCSSの学習は独学でも並行できますか？
A： 並行できます。ただし、最初からデザインとコーディングを同時に練習すると、どちらの問題で詰まっているかが判別しにくくなります。MDN Web Docsなどを参照しながら、ボックスモデルとFlexboxの基礎を先に理解してからデザイン実装の練習に入ると、詰まる場所が絞られます。
スマホファーストLPは崩れる3箇所を先に押さえる
スマートフォンでのLP表示を先に設計するスマホファーストの考え方は、現在の実案件でも前提とされることが多く、練習段階から取り入れておくことで実務との距離が縮まります。
スマホLPで最初に崩れやすい3箇所はファーストビュー・2カラム・CTAボタン
スマホ表示でLPの見た目が崩れやすい箇所は、練習を繰り返すと共通のパターンが見えてきます。最初に気をつける3箇所は次のとおりです。
1箇所目はファーストビューの高さと文字サイズです。PCで作ったファーストビューをそのままスマホ幅に縮めると、背景画像の見せたい部分が切れ、テキストが小さくなりすぎることがあります。スマホファーストで設計する場合は、スマホ幅（375pxから390px程度）でファーストビューを先に確定させます。
2箇所目は2カラムのレイアウトです。PCでは左右2列に並べた画像とテキストのセクションは、スマホ幅では縦一列に積み重なります。縦積みになったときに情報の順番が意図通りかを確認し、必要であればスマホ時の表示順を調整します。
3箇所目はCTAボタンのタップ領域です。PCでクリックを想定したCTAボタンは、スマホ上で親指が届きにくい位置にある場合や、ボタンの高さが小さすぎてタップしにくい場合があります。スマホファーストのLP課題として公開されているmakisuzu_designさんのnoteでは、モバイル前提での設計練習が確認できます（スマホファーストのLPデザイン課題｜makisuzu_design）。
スマホファーストの練習はFigmaのフレームサイズをスマホから始める
Figmaでレスポンシブ対応を練習する場合、最初にスマホサイズのフレーム（iPhone 14: 390×844px）でデザインを完成させ、次にPC幅（1440px）でレイアウトを展開する順序で進めます。PCから先に作ると、スマホへの縮小で崩れる箇所の修正に時間がかかりやすくなります。
やらなくていいことは、最初からスマホとPCの両方を同時に作り込もうとすることです。スマホ版が固まっていない段階でPC版も並行して作ると、スマホ版を修正したときにPC版も全体を直し直す必要が生じ、練習時間が倍になります。
Q: レスポンシブ対応はどの段階で練習に組み込むべきですか？
A： 模写が3件完成したタイミングで、そのうち1件についてスマホ版を作り足す練習を入れるのが自然です。最初からレスポンシブを意識すると、Figmaの操作とデザインの判断の両方が同時に難しくなるため、デザインの基礎が固まってから追加する順序が現実的です。
Q： スマホ版とPC版のデザインを別々に作るのか、1つのFigmaファイルで管理するのかどちらがよいですか？
A： 1つのFigmaファイル内にスマホ用フレームとPC用フレームを並べて管理するのが一般的な方法です。ページを分けると比較しながらの修正がしにくくなります。フレームのラベルを「SP_firstview」「PC_firstview」のように対応させると管理しやすくなります。
PR提供: 日本デザインスクール（デザスク）
練習LPをポートフォリオに変える4つの整理手順
練習を続けてもポートフォリオとして使えるものが残らない、という状況は、練習と整理を別の作業として後回しにしていることが原因であることが多くあります。練習段階から成果物を整理する視点を持つと、案件応募の準備が早くなります。
ポートフォリオに入れるLP練習作品は制作意図を言語化したものに絞る
作った練習LPをそのまま並べてもポートフォリオとして機能しにくい理由は、「何を意図して作ったか」が伝わらないからです。クライアントや面接担当者が見たいのは、デザインのセンスと同時に、判断の根拠です。
整理する手順は4つあります。1つ目は、その練習LPで意識したことを1から2行で書くこと（例：「コンバージョン率を意識してCTAを3箇所配置した」）。2つ目は、制作前のワイヤーフレームまたはラフスケッチを添付すること。3つ目は、制作中に迷ったポイントと最終的にどう判断したかを短く記録すること。4つ目は、スマホとPCの両方の表示をセットで見せる形に整えることです。この4点が揃ったLPは、同じ完成度でも説明できる作品になります。tani_webdesignさんのnoteでは、LP制作の自主制作・広告運用テストを案件獲得の前段階として推奨する観点が紹介されており、ポートフォリオを実案件獲得に接続させる考え方として参考になります（LPデザイナーとして稼ぐロードマップ｜tani_webdesign）。
ポートフォリオの品質は数より説明できるかどうかで決まる
5件の練習LPを並べたポートフォリオより、3件でも制作意図と判断根拠を説明できるポートフォリオの方が、案件応募時に選ばれる確率が高くなります。これは、フリーランスの案件では「この人に頼んだらどんなデザイン判断をするか」をクライアントが事前に見極めようとしているためです。フリーランスが初営業で挫折しないための方法でも同様に、ポートフォリオの内容がクライアントの信頼獲得に直結することが指摘されています。
制作意図を書くのが苦手な場合は、練習を終えた直後に「今日これを練習して気づいたこと」を50文字程度でメモする習慣をつけるところから始めてください。そのメモが後でポートフォリオの説明文になります。
CHECK
▶ 今すぐやること: これまでに作った練習LPを1件選び、「何を意図して作ったか」「どこで迷ったか」を各50文字でメモする（10分）
Q: 練習LPをポートフォリオに掲載する際、実在するサービスを模写した作品は使えますか？
A： 実在するLPの模写作品を掲載する場合は、「○○のLPを参考に模写した練習作品」と明記し、商業利用ではなく学習目的であることを示す形で掲載するのが一般的な対応です。判断が難しい場合は、架空のサービス名を使ったオリジナルのコンセプト設定に置き換えた作品に差し替えた方が安全です。
Q： ポートフォリオをどこで公開するのがよいですか？
A： FigmaのリンクをNotionやSTUDIOなどのページに整理する形が、練習成果の公開としてよく使われています。GitHub Pagesも実装サンプルを公開する際に利用されています。URLを1つ共有すればポートフォリオ全体が確認できる状態にしておくと、案件応募時に送りやすくなります。
LP練習の5段階ロードマップ：5か月でポートフォリオ対応可能な構成を自己診断
「自分は今どの段階にいるか」が分からないまま練習を続けると、同じ課題を繰り返してしまうことがあります。以下の診断で現在地を確認し、次の課題を決めてください。
Q1: LP1件を模写し、セクション構成と配色を再現できましたか？
Yesの場合はQ2へ進みます。Noの場合は段階1（模写の基礎）が現在地です。情報量が少なく構成が明確なLPを1件選び、セクション分解から始めてください。
Q2: 自分で設定したテーマのLPをワイヤーフレームから作れましたか？
Yesの場合はQ3へ進みます。Noの場合は段階2（情報設計）が現在地です。架空サービスのターゲットとコンセプトを設定し、手書きのワイヤーフレームから制作する練習に進んでください。
Q3: スマホ版とPC版の両方を仕上げた練習LPが1件以上ありますか？
Yesの場合はQ4へ進みます。Noの場合は段階3（レスポンシブ対応）が現在地です。既存の練習LPにスマホ版を追加する作業から始めてください。
Q4: 制作意図を言語化したポートフォリオ用作品が1件以上ありますか？
Yesの場合は段階5（実案件応募の準備）が現在地です。クラウドソーシングでLP制作案件の要件を確認し、自分のポートフォリオで対応できる案件を探してください。Noの場合は段階4（ポートフォリオ整理）が現在地です。完成した練習LPから1件を選び、制作意図と判断メモを加えた形に整理してください。
Q： 5か月でポートフォリオが完成するスケジュールの目安を教えてください。
A: 1か月目は模写2件、2か月目は情報設計からの自己制作1件、3か月目はスマホ対応を加えた修正、4か月目は制作意図の言語化と整理、5か月目は応募用のポートフォリオとしてまとめる流れが1つの目安です。週に練習に使える時間が5から10時間の場合の目安になります。
Q： 練習を続けているのに成長を感じられない場合はどうすればよいですか？
A： 同じ種類のLP（たとえばフィットネス系）を繰り返して作っている場合は、業種を変えて別のデザイン言語を扱う練習に切り替えてください。練習開始から1か月後に最初に作ったLPを同じ条件で作り直すと、最初との差分が見えやすくなります。
LP練習でフリーランス案件対応力を上げる5つのハック
【対象】: 模写は1件できたが、オリジナルのデザイン案がいつも1案しか出ない人
【手順】:
同じLPのファーストビューを対象に、配色パターン・フォントの雰囲気・画像の位置を変えた3案を30分以内でラフ段階まで用意します。3案を並べ、各案で「誰に何を伝えているか」を20文字でラベルを書きます。3案の中から1案を選び、その理由をメモに残します（約5分）。この選択のメモがポートフォリオの制作意図の説明になります。
【コツと理由】:
3案並べて選ぶ練習をすることで、デザインの選択に根拠が生まれ、クライアントへの提案時に「この方向にした理由」を説明できる状態になります。3案出すうちにどうしても2案・3案の方が洗練されてくるため、単純に成果物の質も上がります。
【注意点】: ラフ段階の3案それぞれを完成品のクオリティに仕上げようとしないことがポイントです。3案出す目的はバリエーションを探ることであり、完成度を競うことではありません。ラフが3案ある状態から1案を選んで仕上げる、という順序を守ってください。
ハック2: 模写後に「CTAまでの視線誘導」だけを再設計して設計力を上げる
【対象】: LP全体の模写はできるが、「このLPの何が良いのか」を説明できない人
【手順】:
模写完成後、そのLPのCTAボタンを3色違いで置き換えて印象の変化を確認します（10分）。ページの上から読んで、CTAに至るまでの情報の順番を書き出します。「課題提示 → 解決策提示 → 実績 → CTA」のように流れを言語化します（15分）。その流れの順番を1つ入れ替えてLPを作り直し、説得力の変化を確認します（30分）。
【コツと理由】:
CTAまでの視線誘導を言語化する練習は、自分でLPを設計するときに「どのセクションで離脱されるか」を先読みする力に変わります。この判断力は、クライアントからLP修正の要望を受けたときに「どこを変えれば改善されるか」を提案できるかどうかに直結します。
【注意点】: CTAの色や形だけを変えて「改善した」と判断しないことがポイントです。CTAボタンの見た目の変更は表面的な修正であり、視線誘導の流れそのものを変えるセクション構成の見直しの方が設計力の練習になります。
ハック3: コンセプトシートを1枚作ってから制作を始めて完成率を上げる
【対象】: 制作を始めたものの途中で方向性が分からなくなり、未完成の練習LPが増えている人
【手順】:
A4の紙またはFigmaの1フレームに「ターゲット・課題・解決策・訴求ポイント・除外するデザイン方向」の5項目を書き出して埋めます（20分）。「除外するデザイン方向」の欄には「チカチカするアニメーション」「暗い背景色」など、やらないことを先に決めます（5分）。コンセプトシートを制作中に見える場所に置き、デザインの選択で迷ったときはシートに立ち返って判断します。
【コツと理由】:
コンセプトシートを先に作る習慣は、制作中の迷いを「シートに立ち返る」という行動に変換するため、途中で方向性が分からなくなる問題を減らせます。コンセプトシートはそのままポートフォリオに「制作意図の資料」として添付できます。
【注意点】: コンセプトシートに時間をかけすぎて制作に入れなくなることを避けてください。シートは20から30分で埋め切るという時間制限を設け、完璧な言語化より「おおよその方向性が決まっている状態」を目指します。実務でもコンセプト設計が長引くと制作スケジュールを圧迫するため、この時間感覚を練習から身につける意味があります。
ハック4: 練習後に「できたこと・できなかったこと」を記録して成長を見える化する
【対象】: 練習を続けているのに上達している実感が持てない人
【手順】:
練習を終えた直後に、「今日の練習でできたこと」を2項目、「再現できなかったこと」を2項目、メモアプリやノートに書きます（5分）。「再現できなかった」項目は、次の練習でその1点に絞って再現を試みます（次回練習の最初の15分を使う）。1か月後に最初のメモを読み返し、同じ「できなかったこと」が解消されているかを確認します。
【コツと理由】:
「練習量を増やせば上達する」ではなく、「できなかった理由を特定して繰り返す」というサイクルが上達を早めます。記録することで「先月はCTAの配置が分からなかったが今月は判断できる」という差分が見えるため、成長の実感を持ちながら練習を続けられます。記録のメモはそのままポートフォリオの成長記録として使えます。
【注意点】: 「できなかったこと」の記録を反省文にしないことがポイントです。「なぜできなかったか」を原因として書くのではなく、「次に試すこと」を行動レベルで書いてください。「CTAのボタン形状が迷った」ではなく「次はCTAのボタン高さを44px以上に設定して確認する」のように書く方が次の練習への接続になります。
ハック5: 実案件のLPを分解して「クライアントが求める要素」を先読みする練習をする
【対象】: 練習LPは作れるが、実案件の要件にどう対応するか分からない人
【手順】:
クラウドソーシング（ランサーズ・クラウドワークス）のLP制作案件の要件を3件読み、「求められているもの（スマホ対応・CTAの位置・業種）」を書き出します（20分）。その3件の要件に対し、自分の練習LPがどの要件に対応できているかを確認します（15分）。対応できていない要件を1つ選び、次の練習LPのテーマとして設定します（例：「スマホファーストで飲食店LP」）。
【コツと理由】:
クラウドソーシングの案件要件を読むことは無料でできる市場調査です。自分の練習と案件のギャップを把握してから練習を設計すると、ポートフォリオの方向性がずれにくくなります。フリーランスのクラウドソーシングとエージェントの使い分け方も参考にしながら、応募段階での活用イメージを先に持っておくと練習の目的意識が高まります。
【注意点】: 案件の要件を読んで「自分のスキルが足りない」と感じても、すべての要件に対応しようとして練習の範囲を広げすぎないことがポイントです。まず1件の案件要件に絞り、その要件に対応できる1作品を仕上げることを繰り返す方が、応募可能な作品数が早く増えます。
LP練習はロードマップより実案件の要件から逆算する
LP練習の効果を上げる鍵は、「何をどの順番で練習するか」という体系より、「実案件で求められる要素から今日練習するテーマを決める」という逆算の思考にあります。模写で構造を読む力を養い、情報設計で自分の判断軸を育て、レスポンシブ対応と制作意図の言語化を加えて整理する流れは、フリーランスとしてLPの案件に対応するために必要な要素を網羅しています。
練習は「なぜこの配置か」「なぜこの配色か」を自分で問い続ける場です。今日の練習で再現できなかった1箇所を、次の練習で1つ解消するという積み重ねが、案件で判断できる力に変わります。Webデザイナーとしてフリーランスで活動するための全体像も参考にしながら、LP制作スキルがどのキャリアパスに結びつくかを意識して練習を設計すると、モチベーションが持続しやすくなります。
| 状況 | 次の一歩 | 所要時間 |
| 何から始めるか分からない | セクション数が5から7のLPを1件選んで模写を開始する | 30分（初日の着手） |
| 模写が終わったが次が分からない | 模写したLPのCTAまでの視線誘導を言語化する | 15分 |
| 情報設計の練習を始めたい | 架空サービスのコンセプトシートを1枚埋めてからデザインを開始する | 20分 |
| スマホ対応を組み込みたい | 完成した練習LPにスマホ版フレームを追加する | 60分 |
| ポートフォリオを作りたい | 練習LPから1件選び、制作意図と判断メモを50文字で書く | 10分 |
Webデザイン練習LPに関するよくある質問
Q: LP模写とWebサイト全体の制作どちらを先に練習すべきですか？
A： フリーランスでLP案件を目指す場合は、LPの模写を先に進める方が案件との対応が早くなります。LPは縦に長い1ページで完結するため、複数ページのWebサイトより制作範囲が限定されており、構成の学習に集中できます。Webサイト全体の制作は、LPで構成と配色の基礎ができた後に展開する形が自然です。
Q： 練習LPをFigmaの共有リンクだけで提出するのは問題ありませんか？
A： Figmaの共有リンクはポートフォリオとして使えます。ただし、クライアントによってはFigmaを開けない環境や、実際のブラウザ表示を確認したいケースがあります。Figmaリンクと合わせて、スクリーンショットをNotionなどに整理したページも用意しておくと、どの環境からでも確認できる状態になります。
Q： フリーランスとしてLP案件の単価はどのくらいが目安ですか？
A： クラウドソーシングでのLP制作案件の単価は、デザインのみの場合と実装込みの場合、またスキルや実績の状況によって幅があります。まずは案件の要件と自分のポートフォリオを照らし合わせて、対応できる案件から応募することを優先してください。単価よりも「この案件の要件に自分のスキルで対応できるか」を判断軸にした方が、最初の案件獲得につながりやすい傾向があります。
【出典・参照元】
スマホファーストのLPデザイン課題｜makisuzu_design
STUDIO×Webデザインでフリーランスになる実践記｜chico_works
フリーランスLPデザイナー向けスタートアップ｜kataokadesign
LPデザイナーとして稼ぐロードマップ｜tani_webdesign