長らく作っていたLPですが、実は完成してました😅
いろいろと改善点もありますが、まずはお披露目したいと思います。
▽LP（このブログについて）
https://relearnstep.com/about/
※このブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
ページ全体の構成
DevToolsでページ全体のスクリーンショットを撮れるということで、さっそく撮影してみました。
▽DevToolsでページ全体のスクリーンショットを取る方法
１：LPページで右クリック→「検証」でDevToolsを開く
２：Cmd + Shift + P（Macの場合）でコマンドメニューを開く
３：「screenshot」と入力
４：「Capture full size screenshot」を選択
メニュー部分
サイトロゴと主要ページのリンクを配置。
スマホ用ページ（横幅が狭くなる）では、メニューが
に格納される「ハンバーガーメニュー」というものを入れてみました（というか入れてもらいました）。
●スマホ版の表示（三本線をクリックするとメニューが開きます）
⬇️
イメージビジュアル
ブログの世界観（山×学び直し）を一枚で伝えるイラスト画像とキャッチコピーで構成。
イラストは複数枚あり、JavaScriptで自動的に切り替わるようになっています。
このブログについて／ブログの特徴
コンセプトと特徴を簡潔に説明しています。
見出しがWordpressテーマの影響を受けて、当初と違うものになってしまいましたが、
いじると全体がおかしくなりそうなので、これは仕方がないと諦めました🤔
最新記事
ブログ最新記事を3つ紹介。
各ボックス全体に記事へのリンクが付与されています。
おお〜、シンプルだけど最初にイメージビジュアルがあっていい感じだね！
おいおい、完成って言い張るのは勝手だけど、山で言ったらまだ一合目だぞ。
そうだね。今回は勉強しながら作り方の例を学んだって感じかな。
ではどう作っていったのかを順番に見ていこか。
どのように作ったか？
初めに告白しますが、一から自分で作ったわけではありません😅
Claude Code（AIエージェント）に土台を作ってもらい、それを写経して仕組みを理解する流れです。
できたコード（HTMLとCSS）は、Wordpressの「カスタムHTML」に突っ込んでいるため、
WordPressテーマ「Cocoon Child」の影響を受けている箇所があります。
Claude Codeにサンプル（お手本）となるHTMLとCSSを作ってもらう
LPを作るにあたって、以下のような感じでフォルダを作り、指示を出していきます。
ちなみにClaudeチャットやChatGPTでも、サンプル作りはできると思います。
VS Codeに作ってもらったサンプル（お手本）を読み込ませ、本番写経用ファイルを右に並べる
サンプル（お手本）を左に置き、右に新規ファイルを置いてお手本を写経していきます🖌️
書いたものは少しづつブラウザで確認し、
コードの意味がわからなければ、
その都度Claudeに聞いていきます。
サンプル同様のものができたらWordpressに移植
WordPressのテーマが影響して、貼ったコードが正しく反映されるとは限らないので、
都度確認しながら修正していきます🧐
よく使われる代表的なクラス名（container）が、
WordPressテーマのクラス名と重複して、
CSSが正しく働かないこともあったので、
その辺は注意が必要です。
作ってみての感想
まとまった1ページを作れたのはいい経験になりました。
JavaScriptで作ったスライドショーなど、ちょっと難しい内容もありましたが、
完成に近いお手本があるので、変な方向に行かずに作成できたと思います😃
やっぱり最初にお手本があると、安心感が違うなぁ。
ゼロから作るのも大変だもんね。
基礎を身につけるには反復や。山も1回登ったぐらいでは、体力はつかん。
同じ山でも2回目は全然違うぞ。1回目は必死で景色なんか見てないからな。
そのとおりです。2回目は『なぜこうするか』が見えてきます。
次のページを作るときが、本当の学びのスタートですよ。
今回はブログの紹介ページでしたが、
既存のホームページを真似して作ってみたり、
新たに新規コンテンツを作成する場合にも、
こういう流れがいいかなと思います。
山頂はまだまだ先ですが、
これからもがんばっていきましょう😊
ではでは👋
