WordPressとTailwind CSSを活用した会社HPの制作記

こんにちは。 zoetaka38 です。

成果のご紹介

最近、サービス開発を進めまして、この度α版のリリースに向けてプレスリリースも出しました！
https://prtimes.jp/main/html/rd/p/000000001.000137480.html

PR TIMES さんに出稿いたしましたが、様々な媒体にも転載等いただき、早速無償トライアルのお申し込みも頂いて、嬉しい限りです😊

さて、そのようなPRの話もまたどこかで記事を書きたいと思いますが、今回はその前にサービスのLPを作成した話をしようかと思います。
PRを出すにも、広告を出すにも、まずはサービスのHPがなければ話になりませんので。

今回作成したサービスページは、以下のようなページです。

サービスページを作成する方法としては、色んな方法があると思います。
人気のペライチなどのLPをノーコードで簡単に作成できるサービスや、WordPressでテンプレートを作成する方法、NextJSなどでガッツリコード管理する方法など、色んなやり方が考えられると思いますが、今回は「WordPress上にTailwind CSSを用いたページをのせる」という方法を取りましたので、そのご紹介です。

WordPress + Tailwind CSSの選定理由

まず、なぜこの方法を取ったかですが、簡単に理由をあげると以下のとおりです。

• 自分で自由にカスタマイズしたかった

• コンテンツマーケティングを今後する予定で、記事を載せれる仕組みが欲しかった

• ページ数は自由に増やしたくそれに応じての課金は避けたかった

• ある程度WordPressやTailwindには知見があった

• すでにWordPressのインスタンスは持っていた

• 自由にカスタマイズはしたいが、DBの仕組みなどは既存に乗っかりたかった

まず、1つ目の理由と2つ目の理由から、ペライチなどのサービスは除外しました。
やり方はきっとあるのだろうとは思いますが、そのたびに費用をかけるのも避けたかったし、今後コンテンツマーケティングとして記事を書くのにもノーコードツールのようなもので作っていくのはしんどそうと感じたからです。

そして、自分自身がエンジニアスキルが有り、WordPressやTailwindの知見がある程度あったのもこの方法を採用した理由です。
特に、Tailwindについては、ネットで検索すれば色んなコンポーネントが出てきますので、そのコンポーネントを参考にしてつなぎ合わせれば自分としてはノーコードツールとほぼ同じような感触でページを作り上げれるのが採用ポイントに大きく加点されています。

Tailwindという点だけで言えば、NextJSやGatsby.jsという選択肢もあったかと思いますが、インフラ構築したり、DBの仕組み作ったりのコストをかけるのは避けようと思いました。
それこそ記事を増やしていったり、ページを増やしていくのに、ある程度のコーディングはいいとしてもそのブログやLP自体にコストはかけたくなかったです。
（若い頃に自分でブログをDjangoとかで作ってたときもそれのメンテがめんどくさくてやめたという経験もありますｗ）

ですので、結果WordPressとTailwind CSSという選択肢を使うことにしました。
以下、どのようにしたかを簡単にですが記載しますので、ご参考にいただければと思います。

オリジナルトップページの作成の仕方

ここからは、他の記事でも良く載っている方法になりますので、Web上でその他ご紹介されている方法も参考にしつつ見ていただければと思います。

まず、WordPressにはテンプレートという仕組みがあり、Tailwindを組み込んだテンプレートを使って記事制作をするという方法もあります。
が、今回はそういったテンプレートも使わず（何かのテンプレートを読み込んでおく必要はありますが）に独自のHTMLページを書いたのを載せたいと思いました。

テンプレートに左右されずにページを作成する方法は非常に簡単で、 `front-page.php` というページを作ってテンプレートのフォルダの直下に置くだけです。
本当にこれだけで、勝手にWordPressのトップページが自分の好きにコーディングしたページに書き換わってくれます。
（既存のテンプレートのフォルダにアップロードでもいけますが、独自のテンプレートを作っておくのをおすすめします。なくてもこの記事の範囲だと問題ないですが。）

Tailwindの読み込み方については、丁寧にやるならCSSを最小化したりしてやると良いかと思いますが、めんどくさいのでCDNで配布されているものをページのヘッダーで読み込むようにしました。
最初は、Vercelとかでページ作ってたのですが、いちいちデプロイしないといけないのと、デプロイする前のCSSだと新たに使用し始めたクラスは入ってなくてデプロイするたびにCSSをアップロードし続けないといけず、消すのもめんどくさくなったのでやめました。

また、Tailwindのコンポーネントの参考は、主に以下の2つを使いました。

• https://tailwindcomponents.com/

• https://tailwindflex.com/

めちゃくちゃなんとなくですが、UIライブラリーを使いたくなかったので、動きは全部Javascriptを `script` タグで書いています。
適当にChatGPTに作ってってお願いしたらいい感じに作ってくれましたｗ

こうして、できたのが冒頭にも載せた以下のトップページです。

前回の記事で作った動画も載せていますｗ

固定ページの作成の仕方

ここまででトップページを作成したのですが、規約ページだったり、ディレクトリ（パス）を変えたページも作成したくなると思います。
その場合は、同じようにHTMLページを作成するのですが、それを固定ページで読み込ませると可能です。

まず、 `page-hogehoge.php` みたいなファイルを作成します。
これも先程のトップページと同様に、WordPressの利用しているテンプレートファイルの直下にUploadしてください。
ファイルは基本的に通常のHTMLページで大丈夫ですが、以下をファイルの先頭に追加してください。

<?php

/**
 * Template Name: page-hogehoge.php?ver=1.0.0
 */; ?>

これで、ページがテンプレートで読み込めるファイルだと、WordPress側が検知してくれるようになります。

あとは、WordPress側で固定ページを作成して、このテンプレートを読み込むだけです！
正しくできていれば、下記の画像の部分で作成したページが選択できるようになっていると思います。

また、テンプレートの下にあるURLの部分で、このページを表示したいディレクトリを指定します。
画像の例だと、利用規約のページを表示したいので、 /terms に設定しています。

これで、規約のページ、価格のページ、事例紹介ページなど、様々なページを作成できると思います！

終わりに

いかがでしたでしょうか？
ローコストかつ、ある程度のカスタマイズ性を担保したやり方として、WordPress + Tailwind CSSという組み合わせでのLP作成を紹介させていただきました。
是非とも、皆様の参考になればと思います。

また、今開発しているOpsGuideも無償トライアルの申込を受付中で、私の想定より反響も多く沢山のお申し込みを頂いております！
是非ともこの機会に以下よりお申し込みください！
https://www.opsguide.cloud/pre-registration