WordPressブログとHTMLサイトを分けて運用してみた。使い分けの考え方とは？

前回は、AIで作ったサイトのスマホ改行を整えた話をしました。

前回の記事はこちらです。

AIで作ったサイトのスマホ改行を整えてみた。日本語表示の調整方法とは？

WordPressブログとHTMLサイトを分けて運用してみた

今回、このは屋では、ブログとコーポレートサイトを分けました。

具体的には、次のような形です。

ブログ、オウンドメディア：WordPress
コーポレートサイト：静的HTMLサイト

この使い分けは、かなり自然だと感じています。

WordPressには、WordPressの良さがあります。
HTMLサイトには、HTMLサイトの良さがあります。

どちらか一方が正解、という話ではありません。

目的に合わせて、使い分けることが大切です。

なぜ、全部WordPressにしなかったのか？

まず、全部WordPressにしなかった理由からお話しします。

WordPressは、とても便利です。

記事を書きやすく、カテゴリー管理もしやすく、検索流入にも向いています。

このサイトも、WordPressで運営しています。

ただ、今回のコーポレートサイトでは、別の目的がありました。

今回のコーポレートサイトで重視したこと

デザイン性を、高めること
余白や文字を、細かく整えること
WordPressテーマの制約を、受けにくくすること
表示を、軽くすること
AI時代のDIYを、実物で示すこと
会社の考え方を、静かに伝えること

こう考えると、今回は静的HTMLサイトの方が合っていました。

ブログのように、頻繁に記事を追加する場所ではないからです。

WordPressブログの役割とは？

WordPressブログの役割は、記事を積み上げることです。

このは屋では、ブログをオウンドメディアとして運営しています。

オウンドメディアとは、自社で持つ情報発信の場所です。

WordPressブログで行うこと

ノウハウ記事を、公開する
実践記を、更新する
検索流入を、受ける
カテゴリーごとに、記事を整理する
過去記事を、リライトする
読者との接点を、増やす

今回の実践記も、WordPressブログで公開しています。

第1回の記事はこちらです。

AIでコーポレートサイトを自作リニューアルしてみた。WordPressからHTMLサイトへ

HTMLコーポレートサイトの役割とは？

一方で、HTMLコーポレートサイトの役割は、会社の土台を見せることです。

ブログのように、頻繁に更新する場所ではありません。

会社の考え方
サービスの方向性
信頼感

を伝える場所です。

HTMLコーポレートサイトで伝えること

このは屋が、何を大切にしているか？
どんな人に、向けたサービスなのか？
他のサービスと、何が違うのか？
どんな理念で、活動しているのか？
問い合わせ先や、会社情報は何か？

この役割は、コーポレートサイトが担います。

例えば、次のページです。

ブログは、日々の発信です。

コーポレートサイトは、会社の看板です。

このように分けると、それぞれの役割が分かりやすくなります。

ブログと会社サイトを分けるメリット

ブログと会社サイトを分けると、いくつかメリットがあります。

メリット1：役割が分かりやすくなる

ブログと会社サイトを同じ場所に置くと、役割が混ざることがあります。

もちろん、それが悪いわけではありません。

ただ、今回のように会社サイトをきちんと見せたい場合は、分けた方が整理しやすいでしょう。

ブログは、記事を読む場所
会社サイトは、会社を知る場所
テンプレートページは、申し込みをする場所

読者にとっても、目的が分かりやすくなります。

メリット2：デザインを作り込みやすい

コーポレートサイトをHTMLで作ると、デザインを細かく作り込みやすくなります。

今回も、次のような部分を調整しました。

余白
文字サイズ
行間
スマホでの改行
フッターの見え方
フォームの見た目
OGP画像
favicon

WordPressテーマに合わせるのではなく、サイトの目的に合わせて作れます。

ここは、HTMLサイトにした大きな理由でした。

メリット3：ブログ更新に集中できる

ブログは、WordPressで更新し続けます。

記事を書く
カテゴリーを管理する
過去記事を直す

こうした作業は、WordPressが得意です。

一方で、会社サイトは、頻繁に記事を追加する場所ではありません。

そのため、HTMLサイトとして分けることで、ブログ更新と会社サイト管理を分離できます。

メリット4：内部リンクを設計しやすい

ブログとコーポレートサイトを分けても、リンクでつなげば問題ありません。

むしろ、役割を意識したリンクが作れます。

ブログ記事から、コーポレートサイトへリンクする
コーポレートサイトから、WordPressのオウンドメディアへリンクする
実践記から、該当する実物ページへリンクする
必要に応じて、テンプレート申込ページへリンクする

今回の実践記でも、随所にコーポレートサイトへのリンクを入れています。

読者に実物を見てもらえるうえ、サイト同士のつながりも作れます。

ブログと会社サイトを分ける注意点

一方で、分ける場合には注意点もあります。

注意点1：管理場所が増える

ブログとHTMLサイトを分けると、管理する場所が増えます。

WordPress管理画面
HTMLサイトのファイル
サーバー上の公開ディレクトリ
画像やフォントのフォルダ
sitemap.xmlや.htaccess

どこを更新すれば良いのか、分かるようにしておく必要があります。

注意点2：デザインの統一感を考える

ブログとコーポレートサイトを分けると、デザインが別々になります。

そのため、違和感が出ないように考える必要があります。

サイト名の見せ方
色の印象
言葉のトーン
リンクのつなぎ方
読者が迷わない導線

完全に同じデザインにする必要はありません。

ただ、同じ運営元のサイトだと分かる空気感は大切です。

注意点3：URLやサイト名を整理する

今回、少し考えたのがサイト名です。

WordPress側も「このは屋」です。
コーポレートサイト側も「このは屋」です。

そのため、検索結果では「このは屋合同会社」と表示されるようにしました。

本文中やヘッダーでは、このは屋のままです。

こうすることで、既存サイトと会社サイトの区別を少しつけています。

注意点4：サイトマップやSearch Consoleを確認する

HTMLサイトを別で公開する場合、検索エンジン向けの設定も確認します。

sitemap.xmlを、用意する
robots.txtを、確認する
Search Consoleで、サイトマップを送信する
URL検査で、公開状態を確認する
構造化データを、テストする

WordPressのプラグイン任せではないため、自分で確認する必要があります。

ただ、AIに相談しながら進めれば、以前より取り組みやすくなります。

このは屋では、どう使い分けたか？

今回の、このは屋では、かなり役割を分けました。

WordPressサイトの役割

ブログ記事を、公開する
ノウハウを、届ける
検索流入を、受ける
実践記を、連載する
読者との接点を、作る

HTMLコーポレートサイトの役割

会社の考え方を、伝える
サービス全体の方向性を、見せる
このは屋らしいデザインを、表現する
問い合わせ先を、用意する
無料テンプレートへの導線を、作る
AI時代のDIYを、実物で示す

この使い分けにしたことで、かなり整理されました。

ブログは、発信の場所です。
コーポレートサイトは、思想と信頼感を伝える場所です。

リンクで、2つのサイトをつなげる

ブログとコーポレートサイトを分ける場合、リンク設計が大切です。

別々に存在しているだけでは、読者が行き来しづらいからです。

ブログからコーポレートサイトへ

今回の実践記では、ブログ記事からコーポレートサイトへリンクしています。

例えば、次のようなページです。

記事を読んだ人が、実物を確認できるようにしています。

コーポレートサイトからWordPressへ

反対に、コーポレートサイトからWordPress側へリンクすることもできます。

例えば、より詳しいノウハウやブログ記事を読みたい人を、WordPressサイトへ案内できます。

このように、役割の違うサイト同士をリンクでつなぐと、全体の導線が作れます。

SEOの面では、どう考えたか？

ブログとコーポレートサイトを分けると、SEOが気になるかもしれません。

今回の考え方は、シンプルです。

ブログは、検索流入を広く受ける場所です。

コーポレートサイトは、会社やサービスの信頼感を補う場所です。

ブログ側のSEO

検索されるテーマで、記事を書く
カテゴリーで、記事を整理する
過去記事を、リライトする
関連記事へ、内部リンクする
コーポレートサイトへ、必要に応じてリンクする

コーポレートサイト側のSEO

会社名やサービス名で、正しく表示されるようにする
titleタグやdescriptionを、設定する
canonicalタグを、設定する
sitemap.xmlを、用意する
構造化データを、確認する
スマホ表示を、整える

両方で同じ役割を持たせようとしないことが、大切です。

ブログには、ブログのSEOがあります。
コーポレートサイトには、コーポレートサイトのSEOがあります。

運用面で、決めておくと良いこと

ブログとHTMLサイトを分ける場合、運用ルールを決めておくと安心です。

決めておきたいこと

ブログ記事は、どこで更新するか？
会社情報は、どこで更新するか？
サービス内容が変わったら、どのページを直すか？
HTMLサイトのファイルは、誰が管理するか？
画像やフォントは、どこに置くか？
更新後に、どのページを確認するか？
サイトマップは、いつ更新するか？

ここを決めておくと、あとから迷いにくくなります。

静的HTMLサイトは、管理画面がありません。

その分、ファイル管理と確認手順が大切になります。

この使い分けは、スモールビジネスにも合う

今回の使い分けは、スモールビジネスにも合いやすいと感じています。

すべてをWordPressにする必要はありません。
すべてをHTMLサイトにする必要もありません。

AIがあると、使い分けもしやすくなる

以前は、HTMLサイトを自分で管理するのは少し大変でした。

HTMLやCSSの知識が必要だからです。

でも、今はAIに相談できます。

AIに相談できること

HTMLの修正方法
CSSの調整方法
スマホ表示の確認点
サイトマップの作り方
.htaccessの考え方
OGPタグの設定
構造化データの確認

AIがあることで、HTMLサイトの運用ハードルは下がっています。

もちろん、最終確認は必要です。

でも、分からないところで、手が止まりにくくなりました。

まとめ

今回は、WordPressブログとHTMLコーポレートサイトを分けて運用する話をしました。

要点をまとめます。

WordPressブログは、記事更新や検索流入に向いている
HTMLコーポレートサイトは、デザイン性や会社紹介に向いている
このは屋では、ブログと会社サイトの役割を分けた
ブログは、発信の場所として使う
コーポレートサイトは、思想と信頼感を伝える場所として使う
リンクでつなげることで、読者が行き来しやすくなる
SEOも、ブログ側と会社サイト側で役割を分けて考える
AIがあると、HTMLサイトの運用も以前より取り組みやすい

今回のリニューアルでは、ブログをWordPressに残し、コーポレートサイトをHTMLで作りました。

この使い分けは、かなりしっくりきています。

実際のコーポレートサイトはこちらです。

このは屋のコーポレートサイトを見る

このは屋

このは屋｜自分の商売を、自分で育てる。 AIとテンプレートを味方に、外注業者へ依存せず、商売の仕組みを自分の手でつくるための学び舎。

あなたがサイトを運用しているなら、今一度、役割を見直してみてください。

ブログで、発信する内容は何か？
会社サイトで、伝えるべきことは何か？
WordPressで、更新した方が良いページはどれか？
HTMLで、作り込んだ方が良いページはあるか？

道具を先に決めるのではなく、目的から考えることをおすすめします。

次回は、AIで作ったサイトのSEO設定についてお話しします。

titleタグ、description、canonical、構造化データ、サイトマップなど、公開前後に確認したことを整理します。