さくらのレンタルサーバとVektorのVK FullSite InstallerでサクッとLP製作
はじめに
LPを作りたいな × 簡単に作りたいな × デザインはできないな × ドメインも何がいいか決まらないな を1年ほどくすぶっていたところから、Vektor さんの VK FullSite Installer を見かけて、これでやってみるか、と思ってえいやで作った記録です。
事前準備
LPを作ろうとする前に、提供するサービスや業務範囲、価値の定義をするために、 ChatGPT、Claude と壁打ちをすることでキャリアの棚卸をして、強みレポートとLPのPRDを作ってもらっていた。本当はちゃんと事業計画というやつを作るんだろうけどさ。
これを、V0 （Vercel Labs(Next.jsの開発元)提供）に渡して、LP を作成してもらう。
デザインもこぎれいに整っているし、イメージ画像も生成してくれるんだけど、文言も PRD から勝手に意訳して生成してるし、トップ画はなぜか漁港だし、このままでは使えなくて、手直し必要だなーという状態。コンテンツはこれをベースに作ります。
サービス選定
プラットフォーム
初めに考えたのが、V0 からそのまま Publish へ進むこと。
AIコーディングで Next.js × Vercel とか Amplify Gen2 を使って、体験は良かったんだけど、Vercel はビジネスユースだと Proプラン($20/mo) 以上が必要だし、一度自分用の WordPress を自由にこねくり回してみたいなと思っていたので、WordPress にする。
ホスティング環境
AWSにしようか、Kinsta にしようか、そもそも shifter にしようか。
使ったことないものを使ってみたい気持ちと、やはりここは国産のさくらインターネットを使いたい気持ちとがあり、安く簡単に済ませたいという判断で、さくらのレンタルサーバ スタンダードプランに決定。
デザインテーマ
X で流れてきた Vektor さんの VK FullSite Installer のデモサイトを見て、「これこれ、こういうのでいいんだよ」感がめっちゃあったので、あっさり決定。
構築
さくらインターネットでサーバを申込む
さくらのレンタルサーバで、スタンダードを申し込むことにする。
さくらインターネットの会員IDを持っていなかったので、誘導に従って さくらインターネットの会員登録 をする。
その後、さくらのレンタルサーバのスタンダードを申し込む。
仮登録完了のお知らせが届く。（無料お試し期間）
ドメイン取得、WordPressインストール
さくらのレンタルサーバのサーバーコントロールパネル にアクセスする。
ここで、Cloudflare で取得したドメインを設定しようとしたけど、Cloudflare の DNS でネームサーバを変更できなかったので、諦めた。このドメインは現時点では塩漬け（自動更新はオフった）。
あらためて、さくらインターネットでドメインを取得する。
同じものは使えないのでどうしようかなと考えながら、ちょっと追い込まれたテンションでちょっとダジャレを含むものにした。
サーバーコントロールパネルから「WordPressインストール」を選択。
先ほど取得したドメインで設定。
公式のコラム（さくらのレンタルサーバでWordPress を使う方法 インストールからバックアップまでわかりやすく解説）に従って操作するだけ。
無料SSL（Let’s Encrypt）を設定したい の通りに、ドメイン/SSL で、無料のSSL を設定する。
これで「HTTP」ではなく「HTTPS」でアクセスできるようになる。
ドメインを取得してから、SSL 導入できるようになるまでは、少し時間がかかる。
コントロールパネルで SSL の設定をしてから、HTTPS でアクセスできるようになるまでも、少し時間がかかる。
俗にいう、DNSの浸透待ちってやつ。
この時間は、ドメインのメール設定などをしながら待っていた。
テーマ、デモサイトをインストール
Vektor の VK FullSite Installerのサイト で、ご利用までのステップ を見て、その通りにする。
まずは VK FullSite Installer プラグインのダウンロードと、WordPressへのインストール。
すると、デモサイト一覧 でチェックしていたのと同じデモサイトが出てくるので、 X-T9 無料版ビジネス を選ぶ。デモサイトはこんな感じ → https://demo.dev3.biz/x-t9/ そうそう、こういうのがいいんだよ。
で、Wordpress にアクセスすると、デモサイトと同じサイトが完成～。
ここまでで、構築（導入部）は正味1時間くらいでできる。
大変なのはここから。
コンテンツを編集（手探りで）
X-T9 無料版ビジネス はブロックテーマで、フルサイト編集対応なので、すべて WordPress の管理画面からポチポチして編集する。
ホームページのテキストを変更して、ブロックを編集したり追加したり削除したりして。
固定ページ一覧で、不要なページを非公開に設定して。
ヘッダーメニューとフッターメニューから不要な表記を削除して。
このへんで、名刺デザインを依頼していた方からロゴデータをいただく。
ヘッダーのロゴを差し替え、CTA などのテーマカラーを赤に変更。これで一気に、自分のサイト感が出てくる。
正直、WordPress についてちゃんと勉強したり何かを読んだりしたことが無くて、過去も今も「これ編集するのどこの設定だー」と手探りの勘で編集しているので、カラー変更は迷いの森の中だった。
そしてここでした。
サイドメニューから 外観 > エディター > スタイル
デフォルトで入っている「ザ・素材」の写真はそのままにするか、どうしようか迷ったけど、Font Awesome のアイコンから探して差し替え。
そんな感じで、用意していた PRD と、V0 のサンプルを片手に、手探りで差し替えていった。
ここで躓いたのが、更新情報の詳細ページの下に SNS 共有用のリンクボタンが並ぶところ。デモサイトのここの部分。
これどこで設定してあるんだ、どこで消せるんだとかなり悩んだけどここでした。
投稿の編集ページ > VK All in One Expansion Unit > シェアボタンの非表示設定 > ソーシャルボタンを表示しない。
VK All in One Expansion Unit についての設定も、ヘッダーの ExUnit にあるのをこのタイミングで知った。
よし、これでいいかな、と思ってSNSにリンクを置いてみて、表示されるサムネイル画像がX-T9デフォルトのままで焦る。これ変更するのどこだよ！アゲイン。
ここでした。
ExUnit > デフォルトサムネイル画像
完成（仮）
という感じで、約2週間でLPを作ることができました。
めでたしめでたし。
まだ追加したいコンテンツはあるし、Wordpress のことを全然わかっていないので、これからもいろいろ触りながら勉強していきます。
Discussion