メキメキLP 構成意図
架空サービス「メキメキ」のサービス紹介LP。応募用に制作したサンプルです。サービス名・数値・料金・実績はすべて架空のものです。
1. 先に調べたこと
構成を決める前に、デザイン学習サービスのLPを6件、実際にブラウザで開いてFVを撮りました。記事や「LPの作り方」の解説ではなく、実物です。
| 撮った | 6件（デイトラ / Cocoda / デザスク / TechAcademy / SHElikes / デジハリONLINE） |
|---|---|
| 目で見た | 4件 |
| 見られなかった | SHElikes（JS描画が間に合わず白画面）／ デジハリONLINE（撮影のみ、未目視） |
| 見た範囲 | ファーストビューのみ。ページ全体は見ていません |
| 見た幅 | スマホ390pxのみ。PC幅は見ていません |
配色・角丸・影・グラデーションの数は、印象ではなく computed style から数値で取っています。
取得の前に全6サイトの robots.txt を確認しました（確認日 2026-09-03）。1件ずつ、6秒あけて取得しています。並列アクセスはしていません。1件（famm.us）は robots.txt に AI エージェントが名指しで列挙されていたため取得を見送りました。
2. 分かったこと — この分野のLPは2つの型に割れている
混ざっていません。はっきり別の型です。
A型「広告LP型」— デイトラ / デザスク
| 実測 | |
|---|---|
| グラデーション | デイトラ 41個 / デザスク 6個 |
| 影 | デイトラ 30個 / デザスク 2個 |
| 角丸 | 10px が25箇所 / 30px・50px の丸ボタン |
| 主コピー | 画像（デイトラは完全に画像。デザスクは画像とHTML文字の混在） |
<h1> | 両社とも空（実測） |
人物写真が主役。実績数字を丸バッジで3つ並べる。背景にぼかし玉とドット。「45日でプロ」「※無料期間終了まであと3日」。
B型「プロダクト型」— Cocoda
| 実測 | |
|---|---|
| グラデーション | 0個 |
| 影 | 0個 |
| 角丸 | 6px の一種類のみ |
| 面の色 | 2色だけ（rgb(248,248,248) と rgb(15,118,110)） |
FVは「大きい見出し＋3行の説明＋ボタン1つ＋イラスト1枚」。それだけ。余白が主役。コピーは事実のみ（「500以上の事例が公開されています」）。煽りゼロ。
3. ご要望の5つの言葉は、実物では両立していません
| ご要望 | A型 | B型 |
|---|---|---|
| 親しみやすい | ◎ | △ |
| 堅すぎない | ◎ | ○ |
| シンプルで今っぽい | ✗ | ◎ |
| 初めて見て分かりやすい | ○（情報過多で散る） | ◎ |
| 自分もやってみたいと感じる | ◎ | △ |
「シンプルで今っぽい」と「自分もやってみたい」が、実物では別の型に属しています。黙って片方に寄せると、ご要望の半分を落とすことになります。ここが今回の設計上の急所だと考えました。
採った立ち位置
B型を土台にして、A型からは「数字を3つ並べる」型だけを借りる。
理由:
- 今回の対象はスクールではなく「ツール」です。 調べた6件のうち同カテゴリはCocodaだけで、そのCocodaがスクール3社と明確に別の型を採っていました。カテゴリの型に合わせるべきだと判断しました。
- 「シンプルで今っぽい」はA型では原理的に満たせません。 装飾を足すほど遠ざかります。
- 「自分もやってみたい」は装飾ではなく、利用イメージで出せます。ご指定の構成に「利用イメージ」が入っていたので、ここを実際の画面と講評文で厚くしました。
具体的に採った / 採らなかった
| 採った | 採らなかった |
|---|---|
| 角丸を1種類に統一（10px） | 袋文字・縁取り・斜体 |
| 面の色を絞る | 背景のぼかし玉・キラキラ・ドット |
| 余白を大きく取る | グラデーションの多用 |
| 実績数字を3つ並べる | 「※あと3日」のような煽り |
| 利用イメージに実際の画面を出す | 主コピーを画像で焼くこと |
| 金色の丸バッジ（古く見えます） |
主コピーを画像にしなかったのは、見た目の好みではありません。実測に基づく判断です。
- デイトラ: FVの主コピーは
text_fv-sp.png（353×69,alt="未経験からプロへ デイトラ"）。FV内にある20px以上の文字要素は1つだけで、主コピーは完全に画像でした - デザスク:
sp_fv.png（390×651）とHTMLの文字（26px）の混在。全部が画像ではありません - 両社とも
<h1>が空でした
文字を画像にすると WCAG 1.4.5（文字画像の回避）に反し、選択・拡大・読み上げができなくなります。<h1> が空だと、検索エンジンにも読み上げにもページの主題が伝わりません。今回は主コピーも本文もHTMLの文字で出し、<h1> に主コピーを入れています。
ただし、FVの漫画のセリフだけは画像に焼いています
いま書いたことと矛盾して見えるところなので、こちらから先に出しておきます。
ファーストビューに置いた4コマ漫画の中のセリフ（「作らないまま、半年たった。」など5つ）は、画像の一部として焼き込んでいます。 HTMLの文字ではありません。
WCAG 1.4.5 には「その提示が本質的な場合を除く」という但し書きがあります。漫画は、どのコマのどこに文字が置かれているかがそのまま意味になります。セリフを絵から切り離してHTMLの文字にすると、「どの場面で誰が言ったのか」が消えます。ここはその但し書きに当たると判断しました。
デイトラが画像にしていたのは主コピーです。そこは今回も画像にしていません。 <h1> の「毎朝7時に、お題が1つ。」は、いまもHTMLの文字です。
引き換えに失っているものも書いておきます。
- 漫画のセリフは、このページの検査（描画後のコントラスト実測）の対象外です。DOMの文字ではないので、測る手段がありません
- 選択・コピー・ブラウザ翻訳ができません
代わりにやっていること: alt に4コマの情景とセリフを全部入れました。絵が見えない環境でも、読み上げだけで話の流れが分かります。
4. 情報の順番をどう決めたか
ご指定の構成をそのまま使い、各セクションが「読み手の何を解消するか」を1つずつ割り当てました。
| # | セクション | ここで解消するもの | 具体策 |
|---|---|---|---|
| 1 | ファーストビュー | これは何か | 「毎朝7時に、お題が1つ。」の12字。仕組みを1文で言い切る。説明を足さない |
| 2 | サービスについて | なぜ自分に必要か | 「上手くならないのは知識不足ではなく、作る回数が足りないから」と原因を言い当てる |
| 3 | こんな方におすすめ | 自分のことか | 状況を4つ。最後に「向いていない人」を明記 |
| 4 | サービスの特徴 | 本当に続くのか | 機能ではなく「選ぶ手間をなくす」「締切を作る」と、続かない原因への対応で書く |
| 5 | 利用イメージ | やってみたい | ここが山場。実際のお題と講評文をそのまま見せる |
| 6 | 学習の流れ | 面倒ではないか | 4ステップ。「メールアドレスだけ」「カード登録は7日目まで不要」を最初に置く |
| 7 | よくある質問 | 申し込む前の不安 | 課金・権利・毎日出す義務。買わない理由を先に潰す |
| 8 | 申込みへの導線 | 今やる理由 | 「明日の朝、最初のお題が届きます」。煽らず、次に起きることを言う |
特に意図した3点
① 「向いていない人」を書いた「体系立てて基礎から学びたい方には向いていません。教材を持っていないからです。」断ることで、残りの全部が信用されます。学習系サービスは誇大な訴求が多い分野なので、ここが最も効く差別化だと判断しました。
② 数字に必ず出所を付けた「平均継続日数 127日」だけでは信用されません。「2026年1月〜6月の登録者のうち、7日目以降も提出があった方の平均」まで書いています。またキリの良い数字を避けています（127日・38件・18時間）。丸めた数字は作り物に見えます。
③ 利用イメージを最も重くしたこのサービスは「体験してみないと価値が分からない」型です。だから講評文を実物として出しました。「良いですね」ではなく「視線が右下のロゴで止まっています。ロゴを左上に移すか、右下の余白を今の倍に」まで書いています。ここが「自分もやってみたい」を作る場所だと考えました。
5. 検査した項目
見た目の判断だけで終わらせず、ブラウザで実際に描画して数値で確認しています。 SP 390px と PC 1280px の両方で測っています。
| 検査 | 内容 |
|---|---|
| コントラスト | 描画後の全テキスト要素について、実際の描画色と実効背景色から比を算出。WCAG 1.4.3（4.5:1 / 大きい文字3:1） |
| 文字間隔 | WCAG 1.4.12。letter-spacing: 0.12em を当てても横スクロールが出ず内容が欠けないこと |
| 文字サイズ | WCAG 1.4.4。ブラウザの文字サイズ200%で破綻しないこと |
| 見出し階層 | h1→h2→h3 が飛んでいないこと。h1が1つだけであること |
| 画像 | 全画像に alt と width/height（レイアウトのずれ＝CLSを防ぐ） |
| フォーム | 全入力欄に <label>。必須/任意を色ではなく日本語で明示。入力欄は16px以上（iOSの自動ズーム対策） |
| 速度 | LCP / CLS / 総転送量 |
| SEO | title・description の字数、canonical、OGP、構造化データの妥当性 |
結果は 品質検査結果.txt に、そのまま貼ってあります。
6. 制作方法
HTML / CSS で直接組んでいます。デザインカンプではなく、そのまま公開できる状態のものです。
- レイアウトはCSSの変数で組んであり、配色を4色変えるだけで別案件に転用できます
- 配色のコントラストは自動計算していて、基準（4.5:1）を割った色は自動で補正されます
- 同じ原稿から WordPress の固定ページ用HTMLも出力できます
WordPress への実装が必要な場合、この状態からそのまま持っていけます。
7. まだ確認できていないこと
- 競合の「ページ全体の構成順序」は見ていません。 FVのみです。今回は構成をご指定いただく前提のため優先度を下げましたが、実案件では見るべきだと考えています
- 競合のPC幅を見ていません
- SHElikes は白画面しか撮れておらず、実質未調査です
- 「デザイナー育成ツール」と名乗る直接の競合を1件も見つけられませんでした。 Cocodaが最も近いですが、事例集であって育成ツールではありません。カテゴリの型がまだ確立していない可能性があります。実案件では、貴社が想定している競合を共有いただけると精度が上がります