制作を仕事にしている以上、自分のサイトは「言っていることの見本」でなければいけません。なので今回は、デザインも中身も、普段お客様にお渡ししているものと同じ考え方で作っています。
その中でいちばん聞かれるのが、これです。
「ホームページって、WordPressで作るんじゃないんですか?」
はい。うちのサイトにWordPressは入っていません。使えないのではなく、あえて使っていません。
今回はその理由と、代わりに何を選んだのか、そして作っていて楽しかった部分の話をします。
1. 構成はシンプルに、たった3つ
役割 使っているもの
住所(ドメイン) お名前.com
配信(サーバー) Cloudflare Pages
中身 手書きの静的HTML/CSS/JavaScript(+自作のビルドスクリプト)
お名前.comでドメインを取り、DNSはCloudflare側で管理。ソースはGitで管理していて、GitHubに push した瞬間に世界中へ配信されます。
管理画面はありません。データベースもありません。PHPも動いていません。訪問者に届いているのは、あらかじめ完成しているHTMLファイルそのものです。
2. WordPressを使わない5つの理由
① とにかく速い
WordPressは、誰かがページを開くたびにサーバーの中で「PHPが動く → データベースに問い合わせる → HTMLを組み立てる → 返す」という工程を毎回こなしています。速くするために、そこへキャッシュのプラグインを足す——というのがよくある構成です。
静的HTMLは、その工程が最初から存在しません。完成品を置いてあるだけだからです。
しかもCloudflareは世界中にサーバーを持っていて、訪問者にいちばん近い場所からファイルが届きます。スマホの電波が弱い場所で開いたときほど、この差ははっきり出ます。
そしてホームページは、表示が1秒遅れるだけで離脱されます。 デザインを1時間かけて磨くより、表示を1秒速くするほうが集客に効く場面は、正直たくさんあります。
② 壊れる部品が、最初から入っていない
WordPressで起きるトラブルの多くは、こういう形をしています。
プラグインを更新したら、表示が崩れた
プラグイン同士がぶつかって、フォームが送れなくなった
サーバー側のPHPのバージョンが上がって、テーマが動かなくなった
更新をサボっていたら、管理画面に入れなくなった
これは誰かが手を抜いたから起きるのではなく、「たくさんの部品が組み合わさって動いている」という仕組み自体の性質です。
うちのサイトの部品は、HTMLとCSSとJavaScriptだけ。自動で勝手に更新されるものが1つもないので、昨日まで正しく映っていたページは、明日も同じように映ります。
③ 「乗っ取られる入口」がそもそもない
WordPressサイトが狙われるとき、まず来るのはログイン画面への総当たりと、古いプラグインの穴です。世界中で使われている仕組みなので、穴が1つ見つかると、その日のうちに世界中のサイトが自動で総当たりされます。
静的サイトには、そのログイン画面がありません。データベースもないので、抜かれる中身もありません。「更新を忘れたせいで乗っ取られ、身に覚えのない広告ページが差し込まれる」という、いちばん怖い事故が構造的に起きにくい構成です。
もちろん、ドメインの管理アカウントとソースの置き場所は守る必要があります。守る対象が2つに減る、というのが正確な言い方です。ここは正直に書いておきます。
④ 修正の原因が、いつも1か所に絞れる
不具合が出たとき、WordPressだと「テーマなのか、プラグインなのか、サーバーなのか、本体なのか」を切り分けるところから始まります。
うちの構成では、原因は自分が書いたコードだけです。しかもGitで管理しているので、「いつ、どこを、なぜ変えたか」がすべて残っていて、まずければ元に戻すのも一瞬です。
お客様から「ここ直して」と言われてから直るまでが速いのは、この身軽さのおかげです。
⑤ デザインがテーマの都合に縛られない
テーマを買って組み立てると、どうしても「テーマができること」の範囲でデザインを考えることになります。似たようなサイトが世の中に増えるのは、これが理由です。
うちのサイトは、スクロールに合わせて背景の空が夜から朝へ変わったり、イメージキャラクターのフクロウが画面の中を移動したりします。やりたい表現から先に決めて、それに合わせてコードを書ける。 これはゼロから書いているからできることです。
3. 正直に書きます。WordPressが向いている場合もあります
公平のために書いておくと、次のような場合はWordPressのほうが合っています。
社内の複数人が、毎日のように記事を書く(ブログが主役のメディアサイト)
本格的なネットショップをやりたい(在庫・決済・会員管理)
会員限定ページや予約システムなど、サイトの中で複雑な処理を回したい
つまりWordPressは「中で何かを動かす」のが得意な仕組みです。
一方で、街のお店や地域の会社のホームページに求められるのは、たいてい
どんなお店で、何ができて、どこにあって、どう連絡すればいいのか
を速く・確実に・きれいに伝えることです。
この目的に対して、記事投稿システムを一式積むのは、軽自動車で足りる用事に大型トラックを持ってくるようなものだと考えています。荷台は広いけれど、車検も燃料も維持の手間も、ぜんぶ付いてきます。
4. 「じゃあ、更新はどうするの?」
いちばん現実的な質問がこれだと思います。答えは3つに分かれます。
お知らせ・新着情報
Googleスプレッドシートとつないであります。お客様は使い慣れた表計算ソフトに1行足すだけ。サイト側は自動で反映されるので、こちらの作業も、管理画面のログインも要りません。「WordPressの管理画面の使い方を覚える」より、ずっと現実的です。
お問い合わせフォーム
専用のフォームサービスを使っています。フォームまわりはWordPressでも事故が多い部分なので、ここは専門のサービスに任せるのがいちばん安全です。
それ以外の文章・写真・ページ追加
すべてこちらで対応します。LINEで「ここをこう直して」と送っていただければ直します。修正・更新は何度でも無料にしているのは、この構成だと作業が軽いからです。「管理画面をお渡しするので、あとはご自分で」と言わずに済むのは、実はこの選択と地続きの話です。
5. 作っていて楽しかったところ(デザインの推し)
イメージキャラクターのフクロウ
このサイトには、フクロウのキャラクターが必ずどこかに1羽います。
そして——ここが個人的な推しなのですが——サイトの色は全部このフクロウから採っています。 紺のパーカー、白い羽、水色の瞳、金色のくちばし。この4色だけでサイト全体を組み立てました。色をキャラクターから採ると、ページが増えても絶対に散らからないんです。
さらにこのフクロウ、スクロールに合わせてポーズと言うことが変わります。 料金の欄では本を開いて説明し、お問い合わせの欄では親指を立てて背中を押してくれる。ページの中に描かれたフクロウが画面に入ってくると、常駐しているほうは引っ込むようにしてあるので、画面上のフクロウは常に1羽です。この「1羽だけ」を守る処理を書いているときがいちばん楽しかったです。
ページ全体が「1枚の空」
このサイトは、上から下まで通しで1枚の空になっています。
いちばん上は星の見える夜空。スクロールして読み進めるほど、空はゆっくり朝に変わっていき、いちばん下、フッターの直前で街並みに着地します。雲や月は、スクロール速度をずらして少しゆっくり動きます。
フクロウは夜の鳥です。だから夜から始めて、読み終える頃には朝になっている。「読み進める」という行為そのものに、時間の流れを重ねたかったという趣味丸出しの演出です。
6. 作り手として気に入っている環境(技術の推し)
ここは少し技術寄りの話です。興味のない方は読み飛ばしてください。
原稿と共通部品を分けている
ヘッダー・フッター・問い合わせ欄などの共通部分は1か所にまとめてあり、各ページには本文だけを書きます。node build.js と打つと、完成したHTMLが全ページ分きれいに書き出されます。共通部分を直したいときに、十数ページを人力で直して回る必要がありません。
ビルドスクリプトは自作。外部パッケージはゼロ
流行りのフレームワークは使っていません。理由は単純で、依存パッケージは数年後に必ず腐るからです。外から持ってきたものが1つも無ければ、3年後にこのフォルダを開いても、何も壊れずにそのままビルドできます。長くお預かりするサイトほど、この「将来の自分に優しい」という観点は効いてきます。
Cloudflare側の設定はほぼ空っぽ
完成済みのHTMLをそのまま置く方式なので、ホスティング側にビルド設定が要りません。push すれば公開、以上。SSL証明書も自動です。「サーバーの設定」で悩む時間が丸ごと消えます。
取りこぼしを機械に見張らせる
node build.js --check を叩くと、原稿と公開ファイルにズレがあれば教えてくれます。「直したのに反映し忘れて公開されていなかった」という、いちばん間抜けな事故を機械側で防いでいます。
書きかけのページは寝かせておける
原稿に「下書き」と書いておくと、そのページは公開されません。制作実績とお客様の声のページは書きかけのまま置いてあります。実際にご紹介できる事例が集まってから公開するつもりです。持っていない実績を並べるつもりはありません。
旧URLは全部引き継いである
ページ構成を大きく変えたとき、古いURLから新しいURLへ自動で転送する設定を入れました。名刺やチラシに載っているURL、検索結果に残っているURLを切らないための処理です。地味ですが、ここを飛ばすと検索順位が落ちます。
まとめ
WordPressが悪いわけではありません。 目的に対して大きすぎるだけです。
街のお店・地域の会社のホームページに本当に必要なのは、
速く開くこと
勝手に壊れないこと
乗っ取られないこと
言えばすぐ直ること
この4つだと考えています。そのために選んだのが、お名前.com × Cloudflare × 静的HTMLという構成でした。
そして、その上にフクロウと、夜から朝へ変わる空を載せています。仕組みが軽いぶん、楽しい部分に力を使えるというのが、この選択のいちばん良いところかもしれません。
ホームページのことでお困りでしたら、お気軽にご相談ください。「今のサイトがWordPressで、更新が止まってしまっている」というご相談も歓迎です。