SITE CODE - Webサイトを作るならコード進行で

THE BIG IDEAWebサイトは「4本の柱」でできている

申し込みが来る LP も、見てもらえるポートフォリオも、結局は4つの役割の積み重ね。順番が大事。

[ HERO ]

第一印象 — つかむ

最初の3秒で「自分に関係ある」と思わせる。大きなキャッチコピー・サブ・1枚絵。ここがダメだとスクロールされない。

{ VALUE }

価値 — 何ができるか

3つに絞って見せる(7つはダメ)。「○○で△△になる」のメリット型。アイコンとセットで一目で伝える。

★ TRUST

信頼 — 不安を消す

レビュー・実績・利用者の声。「他の人も買ってる」と分かると、買う前の不安が消える。最後の一歩を押す役。

▶ CTA

行動 — 背中を押す

「今すぐ申込み」「無料体験」など、次の一歩を1つに絞る。大きな1個のボタン。ここでやっと、申込みが来る。

LIVE BUILD4本の柱で、目の前で LP が完成する

4つのボタンを順にタップ。HERO → VALUE → TRUST → CTA と重ねると、何もない画面が申込みが来る1ページLPに育っていく。これがLPの王道進行。

「▶ BUILD START」を押す
光ってるボタンをタップ(HERO→VALUE→TRUST→CTA の順)
下のプレビューに、押すたびにLPのセクションが積み上がっていく

START

「▶ BUILD START」を押して始めよう

// ここに、押した柱のコードが表示されます

▼ PREVIEW (実際のLP)

ここに完成したLPが組み上がります

完成! 申込みが来る LP の基本形 — 4本の柱が揃った

THE PROGRESSIONLPの王道進行 = HERO → VALUE → TRUST → CTA

アプリの王道進行が CRUD、ゲームがゲームループなら、LP の王道進行はこの4セクションの流れ。プロが作る LP は、ほぼこの順番で並んでる。順番を間違えると、まず読まれない。

[ ]

つかむ

HERO
第一印象

{ }

伝える

VALUE
3つの価値

★

納得

TRUST
レビュー

▶

動く

CTA
申込ボタン

例: 商品LP = キャッチでつかむ(H)→ 3つの特徴を伝える(V)→ お客様の声で納得(T)→ 申込みボタンで動かす(C)。これが申込みが来るLPのカノン進行。

WHY NOW令和は「AIと弾く」エンジニア

昔は全部暗記して、ゼロから何百行も書いた。今は違う。仕組みを掴んだ人がAIに正しく指示して、出てきたコードを読んで・直して・繋げる。これが一番速くて、一番モノになる。

昔のやり方

構文・関数を全部暗記
ゼロから手で書く
エラーで何時間も詰まる
動くまで何ヶ月もかかる

令和のやり方 (SITE CODE)

仕組み・全体像を理解する
「こう作って」とAIに頼む
出たコードを読めて・直せる
エラーはAIに見せて即解決
今日のうちに動いて、世に出せる

※ AI に丸投げで「動けばいい」ではなく、中で何が起きてるか分かった上で使うのが SITE CODE。だから壊れても直せるし、応用が効く。

LEVEL ROAD6つのサイトで「作れる人」になる

曲を1曲ずつ弾けるようにするのと同じ。サイトを6本作るうちに、自然と4本柱とLP王道進行が体に入る。

名刺ページ

名前・肩書き・連絡先の1枚もの。HTMLとCSSで見せられるサイトの最小単位。

HERO のみ

ポートフォリオ

作ったもの・実績を3つに絞って見せる。VALUEセクションの実践。

+ VALUE

サービスLP

商品/サービスを売るための1ページ。HERO→VALUE→TRUST→CTAの全部入り。

王道進行フル

複数ページのコーポレートサイト

トップ・サービス・会社概要・問い合わせ。サイトの「導線設計」を学ぶ。

+ ナビゲーション

ブログ風サイト

記事一覧+詳細ページ。SEOの基本(タイトル・メタ・OG画像)も体験。

+ SEO

独自ドメインで世界公開

作ったサイトに独自URLを付けて世界中に公開。Vercel等のデプロイ実践。

独自ドメイン

「作れる人」になる第一歩を、今日。

SITE CODE は CodePlay の新コース(準備中)。
音楽・英語と同じ「コードで弾く」発想で、Webエンジニアの入口を。

プランを見る

※ SITE CODE は現在プロトタイプです。正式リリースまでお待ちください。