模擬LP制作プラン|デザイン1回+完成後1回の合計2回の添削付き!優秀作品はCodeQuestに掲載


「ただの模写」では得られない、“実力試しの場”をつくりました

ポートフォリオのLPを作っているけど、
「この方向性で合ってるのかな……?」
「ちゃんと実務でも通用するレベルだろうか?」

そんな不安を抱えていませんか?

この「模擬LP制作プラン」は、実案件に近い形での要件定義からスタートし、デザイン+完成後の2回の添削を通して、自分の力を試せる実践型の学習機会です。

しかも、優秀作品はWeb制作学習メディア「CodeQuest.work」にて掲載!

ただ作るだけで終わらせない、挑戦型ポートフォリオ制作。
このプランの詳細を、この記事でご紹介します。


このプランでできること

✅ 1. 実案件を意識した要件定義をもとにLPを制作

毎月出題される模擬案件は、実際のディレクション業務で作られてきた要件定義をベースにしています。
キーワード・目的・構成の制約を読み取りながら、自らデザインと実装を行うことで、「考えて作る」練習ができます。

✔️ 提供形式:NotionまたはPDFで共有
✔️ 内容:クライアント概要、目的、訴求ポイント、構成のヒントなど


✅ 2. デザイン段階で1回、完成後にもう1回の添削フィードバック!

このプラン最大の特徴は、2回のフィードバックタイミングです。

🖌 1回目:デザイン案へのフィードバック

デザインツール(Photoshop、Illustrator、XD、Figmaなど)で提出されたデザイン案に対して、現役ディレクターの視点から改善アドバイスを行います。

「構成は目的に沿っているか?」
「余白・配色・強調が適切か?」
「見出しと訴求が噛み合っているか?」など


💻 2回目:完成後(コーディング後)の総合添削

最終成果物を提出していただいた後、HTML/CSSの実装や構成の完成度をレビューします。
「デザイン通りに再現できているか」「レスポンシブ対応」「アクセシビリティ」なども含めて、実務目線でフィードバックします。


優秀作品はCodeQuestに掲載!

このプランで制作されたLPの中で、特に完成度の高い作品はWebメディア「CodeQuest.work」内の特設ページにて紹介いたします。

掲載例(予定):

  • 🧑‍💻 制作者名(ニックネーム可)
  • 🌐 ポートフォリオサイト・SNSリンク
  • 🖼 LPサムネイル+公開URL
  • 💡 デザインの工夫ポイントや講評

これは「自分の作品を外部に出す初めての機会」としても機能し、ポートフォリオ掲載実績として信頼感ある1本になります。


対象者とおすすめする人

このプランは、以下のような方におすすめです。

  • ✅ 独学でポートフォリオを作っているが、客観的なフィードバックを受けたことがない方
  • 実務レベルに通用するか確認したい初〜中級者
  • ただの模写ではない、自分で設計から構築する練習がしたい方
  • ✅ Web制作会社やフリーランスとして案件を取る前に、スキルを磨きたい方

制作・提出の流れ

STEP 1|お申し込み(MENTAプランから)
STEP 2|模擬案件の要件定義を共有(PDFまたはNotion)
STEP 3|デザイン制作(Figmaなど)→ 1回目の添削
STEP 4|実装(HTML/CSS)→ 2回目の添削
STEP 5|優秀作品はCodeQuestに掲載(希望者のみ)
※サイドバーカテゴリー一覧の1番目に「模擬案件優秀作品」カテゴリー作成し掲載予定。
  • 制作期限は21日以内を目安に
  • 添削はチャットで対応

よくある質問(FAQ)

Q. Figmaを使えなくても大丈夫ですか?

A. 実案件の沿って行うのでデザインツールでご提出ください。ご自身の使いやすいツールで構いません。(Photoshop、Illustrator、XD、Figmaなど)

Q. ノーコードでもいいですか?

A. 基本的にはコーディングを推奨していますが、ノーコードでもテンプレート不使用であればOKです。

Q. 添削はどれくらい具体的にしてもらえますか?

A. チャットベースで、「何をどう改善すればよいか」を明確にお伝えします。必要に応じて参考画像・リンクもご提供します。


申し込み方法

このプランはMENTAで提供中です。
料金は3,500円(税込・買い切り)

添削は2回(デザイン案+完成後)含まれており、コスパの高い実力試しプランとしてご好評いただいています。

▶️ お申し込みはこちらから
※MENTAは会員登録後にプランを確認できます。
※要件は毎月変わります。
「模擬LP制作×添削|現役ディレクターがフィードバック!」で検索


おわりに|あなたの“本気”を、作品として残してみませんか?

ポートフォリオは、「なんとなく作る」から「考えて作る」へとレベルを上げてこそ、評価されるアウトプットになります。

この模擬LP制作プランは、短期間でスキルチェック・添削・実績化までを一気に経験できる“実力試しの場”です。

迷っている方も、無料相談から気軽にお問い合わせください。
あなたの作品がCodeQuestに掲載される日を、楽しみにしています。

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ(Go full page等)した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。