多くの企業では、ホームページは集客を期待して制作されることでしょう。
そして、多くの企業では、決まって「格安でホームページを制作してもらいた」と「きれいなデザインのホームページを制作してもらいたい」と2つの条件で依頼しています。
その場合、ほぼ100％集客はできません。
なぜなら、ネット検索で上位ヒットしないからです。しかも、SEO対策を導入しても成果が出にくいのです。
なぜ、格安ホームページやデザイン性の高いホームページは、SEO対策を導入しても成果が出にくいのか。その答えは、CSSフレームワークです。
このコラムでは、CSSフレームワークの魅力やSEO対策で不利なこと、そのデメリットの解消方法などを、分かりやすい言葉でご説明いたします。
- 既存ホームページをSEO対策したと考えている
- これから新規で集客のためのホームページを制作したいと考えている
- スキルアップをしたいと思っているホームページデザイナー
このどれかに該当する方は、とても参考になる内容かと思いますので、ぜひ最後までお付き合いください。
便利なCSSフレームワーク
まず、CSSフレームワークのことを知らない方に、簡単に解説いたします。CSSフレームワークについてよくご存じの方は、読み飛ばしてください。
CSSとは？
CSSとは、カスケーディング・スタイル・シートの略です。
ホームページを制作する場合、デザインされた通りにホームページをコーディングします。そのときに、ホームページの基本構造をHTMLで、ホームページの見栄えをCSSで記述します。
コーディングとは、プログラミングのようなものです。HTMLはプログラミング言語ではないので、「コーディング」と言っています。
CSSのコーディングは、例えば「背景色は白色にする」とか、「見出しの文字のサイズは16pxにする」、「画像と文字の隙間を10px空ける」という具合に、細かなデザインの設定を行っていきます。そして、デザインされた通りにホームページが表示されるように調整します。HTMLとCSSの記述を1つずつ書き込んで、表示チェックして、微妙なズレを調整していくわけです。
この作業は、中小企業向けの小規模なホームページでも、1週間以上かかる作業になります。
CSSフレームワークとは？
CSSフレームワークとは、よく使用されるデザインをあらかじめ作り置きされたCSSです。ホームページ制作時にCSSフレームワークを導入することで、非常に短時間でコーディングができます。
例えば、お問い合わせボタンをゼロからCSSコーディングするとなると、ボタンの色や形、寸法などを、デザインに似せて1つずつ設定する必要があります。CSSフレームワークを利用すると、そこに登録されているデザインを利用するので、デザインやコーディングの手間を軽減できます。
また、最近のCSSフレームワークは、レスポンシブWebデザイン（スマートフォン対応デザイン）にも対応しているので、スマートフォンでの表示チェックや修正の時間が短縮できます。
複数人で1つのホームページを制作する場合には、共通のCSSフレームワークを利用するので、全員で統一されたクオリティで素早くコーディングができることや、コードの重複を防ぐことができ、制作時間のさらなる短縮につながります。
CSSフレームワークの種類
CSSフレームワークの種類は、たくさんあります。私がよく目にするものは、次のものです。
- WordPressの市販テーマに使用されているCSSフレームワーク
- 当時Twitter社（現X社）が開発したBootstrap
1つ目は、WordPressの市販テーマを導入したときに組み込まれるCSSフレームワークです。JavaScriptフレームワークと組み合わさって、かなり複雑なコーディングがなされていますが、使い慣れたらCSSコーディングをほとんど行わなくても、ホームページを制作することができます。
また、WordPressの場合には、初期状態で「wp-block-library-css」というブロックエディタ用のCSSも自動的に組み込まれます。ブロックエディタを利用することで、HTMLやCSSの知識がない人でも、容易にホームページのレイアウトを調整でいます。
2つ目のBootstrapは、当時Twitter社（現X社）が開発したCSSフレームワークです。格安ホームページ制作でよく見かけます。BootstrapをWordPressに導入されていたケースもありました。
他にも、簡素なものから複雑なプログラムが組み込まれたものまで、たくさんの種類のCSSフレームワークがあります。
「どのCSSフレームワークを利用すると良いのか？」ということが疑問になりますが、結論から先に申しますと、ホームページで集客を考えている人はCSSフレームワークを使用しない方が良いということです。
その理由を述べたいと思います。
CSSフレームワークがホームページの表示速度を遅くする
去年、とあるホームページ制作会社に依頼して制作してもらった、WordPressで構築された美しいデザインのホームページを「SEO改善してもらいたい」とご依頼いただきました。
SEO対策を行う場合、まずホームページが上位ヒットしていない原因を探すことから始めます。調査した結果、そのホームページは、明らかに表示速度が遅かったのです。
そして、ホームページの表示速度が遅い原因を調べたところ、いろいろな原因がありましたが、その中の一つにCSSとそれに付随したJapaScritpが重すぎることとが分かりました。
ホームページに使用されていたテーマには、独自のCSSフレームワークが使用されており、その合計サイズを確認したところ、900kBほどもありました。ちなみに、今ご覧になられているこのホームページは、すべてのCSSを合わせてもサイズが200kB未満ですので、このホームページの4.5倍もあったのです。
表示速度が遅いとなぜいけないのか？
なぜ、ホームページの表示速度が遅いといけないのでしょうか。今日では、インターネットの回線速度が速くなったため、ホームページが多少重たくても、表示に問題ないと思われたことでしょう。
しかし、検索エンジンの代表格であるGoogleはそれを許してくれません。
Googleが検索順位を決める条件
Googleは、「重たいホームページは上位ヒットさせない」と考えているようです。その理由は、こうです。
ホームページの閲覧は、今ではパソコンよりもスマートフォンが圧倒的に多くなりました。スマートフォンは、パソコンよりもインターネットネット回線の速度が遅いので、ホームページの表示に時間がかかります。
すると、こだわりの動作をしたり、重たい画像が入っていたりするホームページは、現在でも表示に時間がかかります。ユーザは、表示に時間がかかると、ホームページの閲覧を止めてしまいます。
Googleは、検索者にとって良いホームページを上位ヒットさせようとしています。閲覧しようと思っても、なかなか表示されないホームページは、検索者にとって良いとは言い難いということです。
どれぐらいの速度で表示されたら良いのか？
では、Googleはどれぐらいの表示速度だったら良いと考えているのでしょうか？
Googleが無料で提供するツールに「サーチコンソール」というものがあります。そのツールは、ホームページのさまざまな状態をチェックできる機能があります。その中に、「ウェブに関する主な指標」という項目があり、そこを拓くとLCPという、ホームページを表示する時間の指標もチェックすることができます。
LCPとは、簡単に述べると「ホームページを開いたときに、表示されるもっとも大きなコンテンツの要素が表示されるまでに要する時間」です。
この時間が、2.5秒未満が「良好」、2.5秒以上だと「改善が必要」、4秒を超えると「低速」と判断されます。モバイルでホームページを見る人は、遅くても3秒以内でホームページが見られることを望んでいるという調査結果もあります。
このような背景もあって、GoogleはLCPの速さを、モバイル検索での順位を決める指標の1つにしています。
制作中のホームページの表示速度チェックや、詳細な動作時間のチェックでは、Googleが提供する「PageSpeed Insights」でチェックすると良いでしょう。
なぜCSSフレームワークはサイズが重いのか？
去年、SEO対策のご依頼いただいたホームページでは、CSSの合計サイズが900kBほどありました。当社の複雑なホームページでも200kBほどなのに、なぜ、CSSフレームワークを利用すると、これほどサイズが大きくなるのか、理由は簡単です。
それは、CSSフレームワークには、使用していないデザインのCSSも含まれているからです。
CSSフレームワークのファイルサイズが大きくなる理由の例え
例えば、CSSフレームワークを利用して、青色のボタンをホームページ上に表示させたとしましょう。すると、CSSフレームワークのライブラリの中から、青色のボタンのCSSコードをHTMLのClassに記述します。
ところが、CSSフレームワークには、青色のボタン以外にも、赤色や緑色、紫色、茶色、灰色、黒色、白色などのさまざまな色のボタンのCSSコードが書き込まれているのです。色だけではありません。サイズも同様です。そのようにして、CSSフレームワークの中には、使用しないCSSコードが膨大に書き込まれているのです。
ホームページには使用されない余計なCSSがゴミのように含まれているので、それらによって大幅なサイズ増加や表示速度の低下につながっています。
ちなみにBootstrapのCSSのサイズは800kBほどあり、これも重たいです。
CSSフレームワークを利用しなければならない理由
「それならば、CSSフレームワークを使用しなければ良いのではないか？」とお考えのことでしょう。しかし、CSSフレームワークが使用されるのには、理由があります。
それは、冒頭でもお伝えした、「お客様のご要望である“格安”を実現するために、少しでも制作時間を短縮しなければならない」とか「デザイン性の高いホームページを効率よく制作しなければならない」という理由からです。
CSSフレームワークを使用しないで、ゼロからCSSをコーディングすると、制作時間が何倍もかかるのです。すると、お客様のご要望を叶えることができないのです。
今後のCSSフレームワークは、使用するデザインを限定してファイルサイズをシェイプアップできるものが主流になっていくものと思われます。そうなるとCSSフレームワークは、もっと普及することでしょう。
CSSフレームワークが利用されるホームページの傾向
まとめますと、CSSフレームワークがよく利用されるホームページには、次の2つの傾向性があります。
- 格安ホームページ
- デザイン性の高いホームページ
格安ホームページでは、ホームページ制作時間を短縮するために、CSSフレームワークが導入されて当然かと思われます。
デザイン性の高いホームページは、制作をデザイナーが手掛けていることが多いことでしょう。ホームページのデザインにこだわると、ホームページの費用の中に占めるデザイン代が高くなります。また、デザイナーはデザインの専門家であり、コーダー（コーディングの専門家）ではありませんので、HTMLやCSSのコーディングを苦手とする人が多いことでしょう。
そのようなことがあり、HTML・CSSコーディングの費用を安く抑えたり、苦手なコーディングスキルの穴埋めをしたりするために、CSSフレームワークが利用される傾向があるようです。
CSSフレームワークを使用したホームページの表示速度を早くする方法
CSSフレームワークが使用されたホームページの表示速度を早くする方法は、次の2種類です。
- 使用されていないCSSコードを削除してシェイプアップする
- デザインを踏襲して、HTML・CSSをゼロからコーディングし直す
SEO対策のご依頼のあったお客様のホームページでは、使用されていないCSSコードを削除していったところ、CSSのファイルサイズが90kB程度と、元のサイズと比較して実に1/10にもシェイプアップできました。
ついでに余計なJavaScriptも削除して、ホームページの表示速度をチェックしたところ、CSSの表示処理が2.7秒かかっていたものが1.0秒と。表示の時間を1/3ほどに短縮できました。
CSSフレームワークをシェイプアップする場合、CSSフレームワークの内容を解析して、使用されていないCSSコードを削除していくのですが、CSSフレームワークが複雑なものであるほど時間のかかる作業になります。お客様のホームページでは、1週間ほどの作業時間を要しました。
SEO対策するならCSSフレームワークの使用は避けるべし
CSSの改善に1週間ぐらいかかるようであれば、もっと完璧にSEO対策をするために、ゼロからHTML・CSSコーディングをした方が良かったとさえ思います。
ホームページを制作した後にSEO対策を導入したい場合は、ホームページを最初から設計し直した方が圧倒的に良い場合もあります。その場合には、当然ながらCSSフレームワークを使用して制作されたホームページの代金は、勉強代となります。
ホームページ制作費を勉強代にしないで、費用対効果の高いホームページを制作してもらいたいなら、多少費用がかかっても最初から集客力に信頼のあるホームページ制作会社に依頼した方が良いと思います。
また、ホームページの新規制作を制作会社で行い、その後は自社でちょこちょこ修正していく場合もあるはずです。そういった場合には、CSSはオリジナルで制作されたものが、使い勝手が良い場合もあります。
WordPressを導入した場合の注意点
WordPressは、初期状態で「wp-block-library-css」というブロックエディタ用のCSSも自動的に組み込まれることを、CSSフレームワークの種類の説明で述べました。
もし、WordPressの固定ページや投稿ページなどで、ブロックエディタの機能を使用していないのであれば、「wp-block-library-css」が自動的に表示されないように、設定しておいた方が良いです。
設定方法は簡単です。WordPressテーマにある「function.php」ファイルに、次のコードを記入するだけです。このコードはPHPのプログラムなので、もちろんfunction.phpの1行目の「<?php」と最終行の「?>」の間に書き込みます。これだけで、WordPressで制作されたホームページの表示速度が改善されます。
function dequeue_plugins_style() {
wp_dequeue_style('wp-block-library');
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 9999);
ちなみにこのコードは、こちらのページ（HACK NOTEさん）を参考にさせていただきました。
もし、ブロックエディタの機能を一部使用しているホームページであれば、その一部分のCSSを別途抽出して「style.css」などに記載しておき、「wp-block-library-css」を削除したら良いでしょう。
当社のサービスご案内
当社では、「ホームページの表示速度アップの改善」はもちろんのこと、次のようなSEO対策のサービスを提供しています。
- 別業者で制作中のホームページのCSSチェック
- 既存ホームページのHTMLのSEO改善
- コンテンツマーケティングによるロングテールSEO
- コンテンツページ用の文章作成支援
- SEO対策込みのランディングページ制作
- アクセス解析・SEO改善レポート
既存ホームページをSEO改善したい企業様、集客ホームページを新規制作した企業様のどちらにも対応いたします。お客様のご事情に合わせて、最適なSEOサービスをご提案させていただきますので、ホームページを改修工事して集客力の高いホームページに仕上げていきたい企業様は、ぜひお問い合わせください。
この記事の著者
経営・集客コンサルタント
平野 亮庵 (Hirano Ryoan)
国内でまだSEO対策やGoogleの認知度が低い時代から、検索エンジンマーケティング（SEM）に取り組む。SEO対策の実績はホームページ数が数百、SEOキーワード数なら万を超える。オリジナル理論として、2010年に「SEOコンテンツマーケティング」、2012年に「理念SEO」を発案。その後、マーケティングや営業・販売、経営コンサルティングなどの理論を取り入れ、Web集客のみならず、競合他社に負けない「集客の流れ」や「営業の仕組み」をつくる独自の戦略系コンサルティングを開発する。