SKCONSULのランディングページ案として、別のAIにHTML形式のデザイン案を作ってもらった。
内容としては、ファーストビュー、対象者、SKCONSULで扱う問題、既存サービスとの違い、3か月の流れ、成果物、料金、向いている人・向いていない人、申込前相談、FAQ、最後のCTAまで含まれている。構成としては、これまで整理してきたSKCONSULのLP構造をかなり反映している。HTMLファイル内でも、ページタイトルは「SKCONSUL – 教員のためのキャリア再構築プログラム」となっており、1枚完結型のLPとして作られている。
デザインの方向性も悪くない。
ベージュ系の背景、茶色のアクセント、明朝体を使った見出し、余白を広めに取った構成になっている。全体として、強い煽りのLPというより、静かで高額伴走サービスらしい見せ方になっている。特に、ファーストビューの「今のままでいいのか、迷う教員へ。」という入り方や、「続ける・離れる・ずらす」を視覚的に並べる構成は、SKCONSULの核に近い。
ただし、このHTML案をそのままWordPressに貼るのは避けた方がよい。
理由は、このファイルが <!DOCTYPE html>、<html>、<head>、<body>、<style>、<script> まで含んだ、1枚完結のHTMLファイルだからである。WordPressの固定ページには、すでにWordPress側のHTML構造、テーマのCSS、ヘッダー、フッター、メニューが存在している。そこにこのHTMLを丸ごと貼ると、テーマ側の表示やSWELLのブロック設計と干渉する可能性がある。
特に注意が必要なのは、CSSとJavaScriptである。
このHTML案には、ページ全体の色、余白、フォント、ボタン、カード、FAQ、アニメーションなどを制御するCSSが含まれている。また、選択肢表示の切り替えやスクロール時のフェードインを行うJavaScriptも入っている。これらをそのままWordPressに貼ると、他のページやテーマの表示に影響する可能性がある。
そのため、実装方法としては、HTMLをそのまま使うのではなく、デザインモックとして扱うのがよい。
つまり、このHTML案から使うべきなのは、コードそのものではなく、
- ページ全体の構成
- セクションの順番
- 配色の方向性
- 余白感
- ファーストビューの考え方
- 「続ける・離れる・ずらす」の見せ方
- 成果物や料金のカード表示
- FAQの折りたたみ構成
である。
実際にWordPressで作るときは、SWELLのブロックで再構成するのが安全である。
たとえば、ファーストビューはSWELLのグループブロックやカラムで作る。
対象者や成果物はカード型のブロックで作る。
既存サービスとの違いはテーブルで作る。
FAQはアコーディオンブロックで作る。
料金は3カラムのカードで作る。
このように、HTML案の見た目を参考にしながら、WordPressの中ではSWELLの機能に置き換える方が、後から修正しやすい。
研究メモとしては、このHTML案を「SKCONSUL LPデザイン第1案」として保存しておく価値がある。
ただし、コード全文を記事本文にそのまま貼る必要はない。長すぎるため、読みにくくなる。
研究メモには、まず要約と評価を書き、そのうえで必要ならHTMLファイルを添付、またはコードブロックとして別に保存する程度でよい。
今回のHTML案について、研究メモとして残すなら、以下の整理になる。
この案は、SKCONSULのLPデザイン第1案としては有効である。
ベージュ基調、茶色アクセント、明朝体、余白の広さにより、SK研究室らしい静かな印象がある。
構成も、対象者、扱う問題、既存サービスとの違い、3か月の流れ、成果物、料金、申込前相談まで入っており、LPの骨格としてはかなり使える。
一方で、現時点のSKCONSULの最新整理とはズレもある。
まず、価格が旧案のままである。HTML内では、初期検証プラン165,000円、通常プラン240,000円、6か月プラン420,000円となっている。これは現在考えているSKCONSULの支援負荷より低く、最新案である33万円、49.5万円、99万円に差し替える必要がある。
また、支援者であるスカ本人の信頼理由が入っていない。SKCONSULでは、元中学校教諭9年、進路指導、1000件以上の進路・キャリア相談、メンタル不調での離職経験、民間・塾・事業運営の経験が重要な信頼根拠になる。この部分がないと、「誰がこの支援を行うのか」が弱い。
さらに、成果物の説明は見た目としては整理されているが、内容はやや短い。
現状整理シート、教員経験スキル翻訳表、役割再設計シートなどが並んでいるものの、「それがあると何が判断しやすくなるのか」「終了後にどう使えるのか」まではまだ弱い。成果物説明は、Ver2で作成した詳細説明を戻す必要がある。
結論として、このHTML案は、そのままWordPressにコピペするものではなく、SKCONSUL LPのデザインモックとして扱うものである。
WordPressに実装する場合は、HTMLを分解し、SWELLのブロックで再構成する。
研究メモに残す場合は、コード全文ではなく、要約・評価・修正点・添付ファイルとして保存するのがよい。
一文でまとめると、こうなる。
今回のHTML案は、SKCONSUL LPの雰囲気と構成を確認するデザイン第1案としては使えるが、そのままWordPressに貼るのではなく、価格・支援者情報・成果物説明を更新したうえで、SWELLのブロック構成に置き換えて実装するのが安全である。
