前回は、AIと一緒にコーポレートサイトのデザインを作り込んだ話をしました。
前回の記事は、こちらです。
AIでコーポレートサイトのデザイン制作をしてみた。余白・色・文字の整え方とは？
今回は、その続きです。
テーマは、WordPressとHTMLサイトです。
今回、このは屋のコーポレートサイトは、WordPressではなく、HTMLサイトとして作りました。
実際のサイトは、こちらです。
ただ、最初にお伝えしておきたいことがあります。
WordPressがダメという話では、ありません。
むしろ、WordPressは、今でもかなり便利です。
このは屋のオウンドメディアである、このサイトも、WordPressで運営しています。
今回の話は、WordPressを否定する話ではありません。
コーポレートサイトとして考えたときに、今回はHTMLサイトの方が合っていた、という話です。
WordPressからHTMLサイトへ移行した理由とは？
今回、WordPressではなく、HTMLサイトにした理由は、主に次の通りです。
- デザインの自由度を高めたかった
- 表示を軽くしたかった
- コーポレートサイトの更新頻度が高くなかった
- ブログと会社サイトの役割を分けたかった
- AIと一緒に、細部まで作り込みたかった
- 「AI時代のDIY」を実物で示したかった
ひとつずつ、お話しします。
理由1：デザインの自由度を高めたかった
一番大きな理由は、デザインの自由度です。
WordPressでも、きれいなサイトは作れます。
- テーマを使えば、かなり整った見た目になります。
- プラグインも豊富です。
- ページビルダーを使えば、コードを書かずにレイアウトを作ることもできます。
ただし、細部まで作り込もうとすると、制約も出てきます。
WordPressで気になりやすい部分
- テーマのデザインに引っ張られる
- 余白を細かく調整しづらい
- 不要な装飾が残りやすい
- ページごとの自由度に差が出る
- スマホ表示の細部まで整えにくい
- プラグイン同士の影響を受けることがある
今回のコーポレートサイトでは、かなり細かい部分まで整えました。
- 余白
- 文字サイズ
- 行間
- 色
- スマホでの改行
- スクロール時の見え方
- フォームの表示
- フッターの見え方
こうした細部を作り込むには、HTMLとCSSで直接調整した方が進めやすいと判断しました。
特に今回のサイトでは、デザイン性を重視しています。
そのため、WordPressテーマの上で調整するより、最初からHTMLサイトとして作る方が合っていました。
理由2：表示を軽くしたかった
HTMLサイトにした理由のひとつは、表示の軽さです。
WordPressは便利ですが、仕組みとしては動的です。
- ページを表示するときに、サーバー側で処理が走ります。
- テーマやプラグインも関係します。
一方、静的HTMLサイトは、基本的に完成したHTMLファイルをそのまま表示します。
そのため、構成がシンプルです。
静的HTMLサイトで軽くしやすい部分
- 不要なプラグインがない
- テーマ由来の余計なコードが少ない
- 読み込むファイルを管理しやすい
- 画像形式を選びやすい
- フォントの読み込みを調整しやすい
- キャッシュの設計がしやすい
今回のサイトでは、画像形式も調整しました。
例えば、トップページのヒーロー画像では、JPEG、WebP、AVIFなどを用意しました。
より軽い形式を優先して読み込めるようにしています。
また、フォントも自社配信にしました。
これにより、読み込みの管理がしやすくなりました。
サイト速度だけを追いかけたわけではありません。
今回の目的は、モダンで美しいサイトを作ることでした。
ただ、結果として、軽さもかなり意識することになりました。
理由3：コーポレートサイトの更新頻度が高くなかった
WordPressが向いているサイトもあります。
特に、更新頻度が高いサイトです。
WordPressが向いているケース
- ブログ記事を頻繁に書く
- お知らせをよく更新する
- 複数人で投稿を管理する
- 記事カテゴリを使いたい
- 検索やタグを活用したい
- 管理画面から簡単に編集したい
こうした場合は、WordPressがかなり便利です。
一方、コーポレートサイトは、ブログほど頻繁に更新するわけではありません。
主に伝えるのは、次のような内容です。
- 会社の考え方
- サービスの全体像
- 選ばれる理由
- 会社概要
- 問い合わせ導線
- 規約や法的表記
もちろん、定期的な見直しは必要でしょう。
ただ、毎日のように更新する種類のサイトではありません。
そのため、今回はHTMLサイトでも問題ないと判断しました。
理由4：ブログと会社サイトの役割を分けたかった
今回、かなり大切だったのが、役割分担です。
このは屋には、すでにWordPressのオウンドメディアがあります。
そこでは、ブログ記事やコンテンツを更新していきます。
一方で、新しいコーポレートサイトは、会社の考え方や全体像を伝える場所にしました。
WordPressサイトの役割
- ブログ記事を公開する
- ノウハウを届ける
- 検索流入を受ける
- 読者との接点を作る
- 具体的なテーマを掘り下げる
HTMLコーポレートサイトの役割
- 会社の考え方を伝える
- 全体像を整理する
- 信頼感を補う
- サービスの方向性を伝える
- 問い合わせやテンプレートへの導線を作る
このように分けると、役割がはっきりします。
- ブログは、記事を育てる場所。
- コーポレートサイトは、会社の土台を見せる場所。
今回は、この分け方がしっくりきました。
理由5：AIと一緒に細部まで作り込みたかった
今回のリニューアルでは、AIとかなり細かく対話しました。
大きな方向性だけでなく、細部も調整しています。
実際に調整したこと
- トップページの見出し
- 各ページの構成
- スマホ表示の改行
- フッターの余白
- メニューの表示
- フォームのデザイン
- OGP画像
- favicon
- apple-touch-icon
- reCAPTCHA表示
- URLから「.html」を外す設定
- サイトマップ
- 構造化データ
こうした細部を、AIと相談しながら進めました。
HTMLサイトにしたことで、AIが出した修正を反映しやすくなりました。
ファイルを、直接修正できるからです。
もちろん、WordPressでもカスタマイズはできます。
ただ、今回はHTMLファイルとCSSファイルを直接扱う方が、作り込みやすい場面が多くありました。
WordPressとHTMLサイトの違いとは？
ここで、WordPressとHTMLサイトの違いを整理します。
WordPressの特徴
- 管理画面から更新できる
- ブログ運営に向いている
- テーマやプラグインが使える
- 複数人で管理しやすい
- 記事数が多いサイトに向いている
- 機能追加がしやすい
WordPressの注意点
- テーマやプラグインに依存しやすい
- 表示が重くなることがある
- アップデート管理が必要
- セキュリティ対策が必要
- 細かいデザイン調整に手間がかかることがある
HTMLサイトの特徴
- 構成がシンプル
- 表示を軽くしやすい
- デザインを細かく作り込みやすい
- サーバー負荷が少ない
- セキュリティ面でシンプル
- 静的なコーポレートサイトに向いている
HTMLサイトの注意点
- 管理画面から簡単に更新できない
- HTMLやCSSの知識がある程度必要
- ブログ運営には向いていない
- ページ追加や修正にはファイル編集が必要
- 更新作業のルールを決めておく必要がある
どちらが絶対に良い、という話ではありません。
目的によって選ぶことが、大切です。
コーポレートサイトはWordPressとHTMLのどちらが良い？
では、コーポレートサイトは、WordPressとHTMLのどちらが良いのでしょうか？
答えは、目的によります。
WordPressが向いている場合
- お知らせを頻繁に更新したい
- ブログも同じサイト内で運営したい
- 管理画面から手軽に編集したい
- 複数人で更新したい
- 専門知識なしで投稿を増やしたい
- プラグインで機能追加したい
HTMLサイトが向いている場合
- 更新頻度がそこまで高くない
- デザインを細かく作り込みたい
- 表示を軽くしたい
- シンプルな構成にしたい
- ブログとは別に会社サイトを持ちたい
- AIと一緒にファイル単位で作り込みたい
このは屋の場合は、後者でした。
ブログはすでに、WordPressで運営しています。
だから、コーポレートサイトまで、WordPressにする必要はありませんでした。
むしろ、HTMLサイトにすることで、デザインの自由度と軽さを優先できました。
URLは「.html」を出さない形にした
HTMLサイトにすると、通常はURLがこのようになります。
- https://conohaya.com/guide.html
- https://conohaya.com/company.html
- https://conohaya.com/inquiry.html
ただ、今回は「.html」を出さない形にしました。
この方が、URLとして自然に見えます。
また、WordPressサイトから移行した印象も弱くなります。
サーバー側の設定で、HTMLファイルを表示しながら、URL上は「.html」を見せないようにしています。
HTMLサイトでもSEO対策はできる
HTMLサイトにすると、SEOに弱くなるのではないか？
そう感じる人もいるかもしれません。
ですが、HTMLサイトでも、基本的なSEO対策はできます。
今回設定したこと
- ページごとのtitleタグ
- meta description
- canonicalタグ
- OGPタグ
- 構造化データ
- サイトマップ
- robots.txt
- 内部リンク
- 表示速度の調整
- スマホ表示の調整
SEOは、WordPressだから自動で安心というものでは、ありません。
HTMLサイトだから不利というものでも、ありません。
大切なのは、必要な設定をきちんと行うことです。
今回のサイトでも、サイトマップ送信や構造化データの確認を行いました。
HTMLサイトにして感じたメリット
実際にHTMLサイトとして作ってみて、良いと感じた点があります。
1. デザインの自由度が高い
細かい余白や文字サイズを、調整しやすいです。
ページごとの見せ方も、作り込みやすくなります。
2. 表示が軽い
不要なプラグインやテーマがないため、構成がシンプルです。
読み込むファイルも、管理しやすくなります。
3. サイト全体を把握しやすい
ファイル構成が見えるため、どのページがどこにあるか把握しやすいです。
4. AIと相性が良い
HTMLやCSSの修正を、AIに相談しながら進めやすいです。
修正箇所も、明確になります。
5. コーポレートサイトに集中できる
ブログ機能や投稿管理を考えず、会社サイトとしての見え方に集中できます。
HTMLサイトにして感じた注意点
一方で、注意点もあります。
1. 管理画面はない
WordPressのように、管理画面から簡単に編集する仕組みはありません。
文章を直す場合も、ファイルを修正する必要があります。
2. 更新ルールが必要
ファイルを直接編集するため、どのファイルを更新するのかを把握しておく必要があります。
アップロード漏れにも、注意が必要です。
3. 専門的な設定もある
URL設定、キャッシュ、フォント、構造化データなど、専門的な部分もあります。
ただ、AIに相談しながら進めれば、以前より、かなり取り組みやすくなっています。
4. ブログには向いていない
記事を頻繁に投稿するサイトなら、WordPressの方が向いています。
今回も、ブログはWordPressのままです。
HTMLサイトにしたのは、あくまでコーポレートサイトです。
スモールビジネスでは、使い分けが現実的
スモールビジネスの場合、WordPressかHTMLかを一つに決める必要はありません。
使い分ければ良いでしょう。
このは屋の使い分け
- ブログ・オウンドメディア：WordPress
- コーポレートサイト：HTMLサイト
この分け方は、かなり自然だと感じています。
- ブログは、更新しやすさが大切です。
- コーポレートサイトは、見え方や信頼感が大切です。
それぞれの目的に合わせて、道具を選べば良いのです。
まとめ
今回は、WordPressではなく、HTMLサイトにした理由についてお話ししました。
要点をまとめます。
- WordPressがダメという話ではない
- ブログや頻繁な更新には、WordPressが向いている
- 静的なコーポレートサイトには、HTMLサイトも向いている
- HTMLサイトは、デザインの自由度を高めやすい
- 表示を軽くしやすい
- AIと一緒に細部を作り込みやすい
- 管理画面がないため、更新ルールは必要
- スモールビジネスでは、WordPressとHTMLサイトの使い分けが現実的
今回のこのは屋では、WordPressブログとHTMLコーポレートサイトを分ける形にしました。
実際のコーポレートサイトはこちらです。
- WordPressが良いか？
- HTMLサイトが良いか？
大切なのは、どちらが上かではありません。
目的に合っているかどうかです。
- 自分のサイトは、何のためにあるのか？
- どれくらい更新するのか？
- どこまでデザインを作り込みたいのか？
まずは、そこから考えてみることをおすすめします。
次回は、スマホ表示、フォント、余白、改行など、サイトの細部調整についてお話しします。
AIで作ったサイトを、最後にどう磨いていったのか？
かなり地味ですが、完成度に大きく関わる部分です。
