「ホームページ作成」カテゴリーアーカイブ

ホームページ作成全般に関するカテゴリ

サイトの表示速度が遅い原因はこれ!画像の最適化で劇的改善

ブログなどの「サイトが重い」「表示に時間がかかる」と感じていませんか?
実は、その原因の1つに 画像の最適化不足 にあります。
どんなに優れたデザインや記事内容でも、ページの読み込みが遅いと離脱率が上がり、SEO評価も下がります。

この記事では、画像の最適化でブログの表示速度を劇的に改善する方法を、初心者でもできる手順で解説します。


🚨 表示速度が遅くなる主な原因

原因内容
画像サイズが大きい高解像度の画像をそのままアップロードしている
フォーマットが古いJPEGやPNGを多用し、WebPなどの軽量形式を使っていない
遅延読み込みが未設定ページ内の全画像を一度に読み込んでいる
キャッシュ未設定同じ画像を毎回サーバーから再取得している
CDN未使用地理的に離れたユーザーへの配信が遅れている

これらの要因を1つずつ対策すれば、PageSpeed Insightsのスコアが90点以上も狙えます。


💡 改善策①:画像を最適なサイズに圧縮する(WordPress対応)

ブログの表示速度改善において最も効果的なのが画像圧縮とリサイズです。
特にスマホ撮影画像やAI生成画像は数MBになることもあるため、1枚100KB以下を目指しましょう。


🔧 方法①:外部ツールで手動圧縮

ツール名特徴URL
TinyPNGPNG・JPEG対応。画質を保ちながら最大80%圧縮https://tinypng.com
Squoosh(Google製)WebP変換や画質比較ができるhttps://squoosh.app
ImageOptim(Mac)複数画像をドラッグ&ドロップでまとめて圧縮https://imageoptim.com

コツ:

  • 不要に大きい画像は横幅1200px程度にリサイズ

  • JPEGは写真向き、PNGは透過画像向き

  • 画質80%前後に設定すると肉眼ではほぼ違いなし


⚙️ 方法②:WordPressプラグインで自動圧縮

WordPressで作成されているサイトなら画像のアップロード時に自動圧縮してくれるプラグインを使えば、毎回手動で調整する必要がありません。
更新頻度の高いブログや、複数人で運営しているサイトに最適です。

プラグイン名主な機能無料範囲備考
EWWW Image Optimizer自動圧縮・WebP変換・既存画像一括最適化無制限(ローカル圧縮)高機能で安定
Imagify3段階圧縮(Normal/Aggressive/Ultra)+WebP対応月25MBまで無料操作が簡単
ShortPixelWebP+AVIF変換対応。画質維持率が高い月100枚まで無料自然な仕上がり
Smush一括最適化・遅延読み込み・CDN対応無料で5MB/画像定番&安心

🔹 EWWW Image Optimizer の設定例

  1. プラグインをインストールして有効化

  2. 「設定」→「EWWW Image Optimizer」を開く

  3. 「画像の自動最適化」を有効にする

  4. 「WebP変換」をONに

  5. 「既存画像を一括最適化」でライブラリ全体を処理

💡 ポイント: 初回は時間がかかりますが、次回以降は差分のみ圧縮されます。


💡 改善策②:WebP形式に変換する

WebPはGoogleが開発した次世代画像フォーマットで、JPEGより最大50%軽量化できます。
見た目の劣化もほとんどなく、主要ブラウザはすべて対応済みです。

プラグイン名主な機能
EWWW Image Optimizer自動WebP変換+フォールバック機能
Imagifyアップロード時に自動変換+圧縮
ShortPixelWebPとAVIFを両方生成

導入のメリット:

  • 軽量化によりLCP(Largest Contentful Paint)が改善

  • モバイルでの読み込み体感速度が向上

  • SEOスコアにも良い影響


💡 改善策③:遅延読み込み(Lazy Load)を有効化

ページを開いた瞬間に全画像を読み込む必要はありません。
**Lazy Load(レイジーロード)**を有効化すれば、
「ユーザーの画面に表示されたタイミングで読み込む」ようになります。

設定方法

  • WordPress 5.5以降:標準で loading="lazy" が自動付与

  • プラグイン利用例:

    • a3 Lazy Load

    • WP Rocket(有料)

    • Smush(画像圧縮+遅延読み込み対応)

💬 Lazy Loadを導入するだけで、初期ロード時間を30〜40%短縮できる場合があります。


💡 改善策④:CDNを活用する

CDN(Content Delivery Network)は、
世界中のサーバーに画像をキャッシュして、
ユーザーの位置に近いサーバーから配信します。

サービス名特徴
Cloudflare無料プランでも画像CDNが利用可能
Jetpack BoostWordPress専用CDN(Photon)対応
AWS CloudFront高速&安定。企業向けに最適

💡 改善策⑤:キャッシュプラグインを活用

画像最適化とあわせて、HTMLやCSSもキャッシュ化するとさらに高速化します。

プラグイン名特徴
LiteSpeed Cache画像圧縮・WebP・CDN・Lazy Load全部入りで高性能
WP Fastest Cacheシンプル操作で安定した効果を発揮
W3 Total Cache細かなチューニングが可能で上級者向け

🧠 Tip: LiteSpeedサーバー環境なら、LiteSpeed Cache一択でOKです。


🧪 改善効果の実例

項目最適化前最適化後改善率
トップページ画像10枚約6.2MB約1.8MB約70%削減
PageSpeed Insightsスコア63点91点+28ポイント改善
読み込み速度(3G環境)5.8秒2.1秒約3.7秒短縮

🧭 まとめ:画像最適化は“SEOとUX”の両方に効く!

  • 📉 無駄なデータ転送を削減 → 表示速度アップ

  • 📈 Core Web Vitals改善 → SEO評価向上

  • 😍 ユーザー離脱率を下げて滞在時間を増加

画像最適化=ブログの信頼性向上です。
一度設定しておけば、自動で軽量化される仕組みが完成します。
今日からあなたのブログも、「速くて軽い」理想のサイトへ変わります!

小規模サイトでもできる!WordPressにChatGPTチャットボットを導入する手順

AI技術の進化により、Webサイトに「AIチャットボット」を設置するのは特別なことではなくなりました。特に WordPress × ChatGPT API を使えば、初心者でも比較的簡単に導入できます。

この記事では 小規模なブログや企業サイトでも実践可能な導入手順 を解説し、実装方法の比較・よくある質問(FAQ)もまとめます。


なぜWordPressにChatGPTチャットボットを導入するのか?

  • 24時間自動対応
    ユーザーの質問に即時回答でき、問い合わせ対応を効率化。

  • 運営者の負担軽減
    小規模サイトでも人的リソースを削減可能。

  • UX向上
    FAQページよりも自然な会話で理解しやすい。


導入手順(全体の流れ)

  1. OpenAI APIキーを取得

  2. WordPressに環境を準備(プラグイン or カスタムコード)

  3. APIと連携してチャット画面を設置

  4. デザインや回答をカスタマイズ


ステップ① OpenAI APIキーを取得

  1. OpenAI公式サイト にアクセス

  2. アカウント作成・ログイン

    • Googleアカウント / Microsoftアカウント / メールアドレス で登録可能

    • 既にChatGPT(chat.openai.com)を利用している場合は、そのアカウントでログイン可能です

     

  3. 「View API keys」から新しいキーを発行

👉 このキーが WordPressとChatGPTをつなぐ認証情報 になります。


ステップ② WordPressに環境を準備

WordPressでChatGPTを動かす方法は大きく分けて 「プラグイン導入」「カスタムコード実装」 の2種類があります。

プラグイン導入 vs カスタムコード 比較表

項目プラグイン導入カスタムコード実装備考
難易度★☆☆(初心者向け)★★★(中級者以上)まず動かすだけならプラグインが楽。細かな要件はコード向き。
メリットコード不要/設定が簡単/導入が早い自由度が高い/デザインを自由にカスタム/セキュリティ制御しやすい要件が固まっていない初期段階はプラグイン、後からコードに移行も可。
デメリットデザイン自由度が低い/更新依存PHP/JS知識が必要/実装工数がかかる保守コストはサイト規模と運営体制で変動。
コスト(初期/運用)無料〜有料プラグインあり/設定時間は短め開発時間がコストに直結/保守の手間ありいずれもAPI利用料は別途(従量課金)。
向いている人/用途まず試したい/技術に自信がない/短期で導入したいUI/挙動を細かく作り込みたい/拡張前提の中長期運用小規模はプラグインで検証→ニーズ確定後にコード化が無難。

ステップ③ APIと連携してチャット画面を設置

シンプルな例(JavaScript + Fetch API):


ステップ④ デザインや回答をカスタマイズ

  • CSSでUI調整(吹き出しデザインにすると親しみやすい)

  • 初期メッセージ設定(例:「こんにちは!ご質問があればどうぞ」)

  • 免責文を表示(不正確な回答の可能性に備える)


よくある質問(FAQ)

質問 回答
Q1. 無料で使えますか? 基本は有料です。APIは従量課金制ですが、小規模サイトなら月数百円〜で利用可能。
Q2. ChatGPT Plusを契約している場合も有料? はい、別料金です。 ChatGPT Plus(Web版の有料プラン)とAPI利用料は完全に分かれています。
Q3. プログラミング知識は必要? 必須ではありません。プラグイン導入で簡単に設置可能。カスタムコードなら自由度が増します。
Q4. セキュリティは大丈夫? APIキーを公開コードに直接書かないように注意。環境変数やPHP経由での呼び出し推奨。
Q5. スマホでも使える? 可能です。レスポンシブ対応のCSSを整えれば快適に利用できます。
Q6. どんな用途に向いてる? お問い合わせ対応、商品説明、FAQ代替、雑談的なやり取りなど。小規模サイトでも効果的です。

注意点と運用ポイント

  • API利用は従量課金 → 想定アクセス数を確認

  • トークン数制限 → 長文回答はコスト増に注意

  • 回答ログの定期確認 → 想定外の回答を調整


まとめ

小規模なブログや企業サイトでも、WordPress × ChatGPT API を使えば 低コストかつ短期間でAIチャットボットを導入可能 です。

  • OpenAI APIキーを取得

  • WordPressに環境を準備(プラグイン or カスタムコード)

  • チャットUIを設置

  • デザイン&回答を調整

ユーザー体験を高めつつ、運営負担を減らせる強力な仕組みです。今後のWebサイト運営にぜひ取り入れてみてください。

Googleから「過去 28 日間でクリック数が 2.5K クリックに到達しました。」というメッセージが届きました。

先月から久しぶりにサイトの更新作業を再開して、WordPress、各種プラグイン、MySQL、PHPなどの最新化やPageSpeed Insightsの対応などをコツコツ進めてたらGoogleから以下のようなメッセージが届いてました。最近更新サボってたし、何故今?と思ってたら

「このメールは、Google Search Console にサイトが登録されている方を対象に送信されています。」

とのことでしたw。

更新作業でGoogle Search Consoleにも登録してたのが原因かあとか思いつつもメッセージ自体は結構嬉しかったです(*^^*)

jbossとtomcatの違い

Web開発では必ずアプリケーションサーバ(APサーバ)とかWebサーバなどという言葉が出てきます。
ここでは「アプリケーションサーバ」とは何者なのか、またこの「アプリケーションサーバー」として使用されている「JBoss」と「Tomcat」の機能や違いについて整理しておきます。
その前に「アプリケーションサーバ」って何?という方もいると思いますので、簡単にまとめておきます。

アプリケーションサーバとは

  • Webシステム開発する上で構成される「プレゼンテーション層」「アプリケーション層」、「データ層」の3階層モデルにおいて、「アプリケーション層」のプログラムを実行するサーバーのこと。
  • アプリケーションサーバで提供するのは基本的に以下の3つとなります。
    • Javaなどのプログラム実行環境やデータベースへの接続機能の提供。
    • 複数の処理(スレッド)を連結するトランザクション管理機能。
    • 業務処理の流れを制御するビジネスロジックの実装。

Jbossとは

  • EJB(Enterprise JavaBeans)のオープンソース実装であるJavaによるオープンソースソフトウェア開発コミュニティのこと。
  • JBossはEJB(J2EE対応アプリケーション)を動作させるためのサーバソフトウェアとして利用されています。本来JSPやサーブレットは動作しませんが、これらを動作させるためにWebコンテナとしてTomcatを採用しています。
  • Jbossで提供される機能は「JTAトランザクションマネージャ」、「EJB」、「MDB」、「JPA」、「JMS」、「JCA」、「JAX-WS」、「JMX」、「log4jを用いたログ基盤」、「分散キャッシュなどの各種クラスタリングサービス」などがあります。

Tomcatとは

  • Apache Tomcat Project内で開発されているオープンソースのソフトウェア。
  • JavaサーブレットやJSPを処理するアプリケーションサーバ(APサーバ)/サーブレットコンテナの一つ。
  • 単独でWebサーバとして動作することも可能。
  • 実際にはプラグインとしての利用が主流となっています。
  • Tomcatで提供される機能は基本的にServlet, JSP, JDBC接続プールのみ。

とつらつら書いてみましたが、要はJbossもTomcatも「JavaをWeb(ブラウザ)上で動かすためのプログラム」という感じで理解しておけば最初の内はいいのかなあと思います。ただTomcatでは使用出来る機能が限られる為、Tomcatの機能も包含しているJBossを使用しているケースが最近は多いようです。

JSPコメントとHTMLコメントの違い

JSPのコメント文とHTMLのコメント文の違いについてまとめておきます。

JSPのコメント

HTMLのコメント

さて、両者の違いとは何でしょうか。

見た目大して変わらないしどっちでもいいんじゃない。というのは大きな間違いで、HTMLのコメント文はサーブレット変換時にコメントも「out.println()」によってクライアントに対して出力されてしまいます。要はそのページを表示して右クリックなどから「ソースコードを表示」などを選択するとそのコメント文もクライアント側から確認可能となります。
対してJSPのコメント文はソースコードを表示してもクライアント側から確認する事は出来ません。

使い分けとしては、そのページの開発者サイドにのみ伝えておきたい内容などは「JSPのコメント文」、そのページを閲覧するクライアント側がソースコードを確認した時に伝えたい内容は「HTMLのコメント文」というように使い分けましょう。

さくらレンタルサーバの転送量

ホームページを運営していると次第にアクセス数が集まってきて楽しくなってきます。
より多くの人達に閲覧して頂くのはうれしいのですが、そのアクセス数が増えすぎるとある問題が生じてきます。そう転送量の問題です。

ホームページを運営する際、各レンタルサーバー会社と契約する方も多いと思いますが、共有サーバーの場合1つのサイトがものすごいアクセス数がある場合だと、そのサーバーを利用している他サイトの表示が遅くなってしてしまうため、アクセス制限を掛けられます。その結果、閲覧者がそのサイトを表示しようとしても503エラーが表示されてサイトが表示されなくなってしまいます。
この制限を掛ける目安となるのが転送量となります。

当サイトのサーバーはさくらレンタルサーバーを利用しているので、「プラン別の転送量」と「転送量の確認方法」をまとめておきます。

さくらレンタルサーバー:プラン別転送量の目安

    プラン転送量(目安:1日当たり)
    ライト40GB
    スタンダード80GB
    プレミアム120GB
    ビジネス160GB
    ビジネスプロ200GB

さくらレンタルサーバー:転送量の確認方法

  1. サーバーコントロールパネルにログインし、サイドメニューの「リソース情報」を選択します。
  2. 過去2日分の転送量が確認出来ます。

レンタルサーバー会社選びは転送量も非常に重要なポイントとなります。
自分がそのサイトをどの位の人に閲覧してほしいのかしっかりと想定して選択するようにしましょう。

apacheとIISの違い

インターネットを構成する上で、webサーバを理解することは非常に重要です。
ホームページなどのwebサイトを構築する場合、webサーバーを何にするのかというのは非常に重要になります。
webサーバーとしては、UNIXやLINUXで使われているapacheと、windowsで使われるIISの2種類が一般的に広く使用されています。
これらは機能にも違いがあるため、サーバー移行などをする場合によく理解していないとトラブルになることもあります。
apacheはレンタルサーバーなどを借りると使われていることが多く、ノウハウなどもwebサイトから収集もしやすいというメリットがあります。apacheに精通した技術者も多く、世界中で使われているといった特徴があります。
一方、IISはwindowsサーバーで使われていて、apacheに比べると需要は少なくなります。
基本的にどちらもできることは似ていますが、両者の特徴やメリット・デメリット、記述方法などをしっかりと理解して環境に最適なWebサーバを選択することが重要となります。

apacheの特徴

  • 設定しだいで幅広い環境に対応出来る。
  • 技術的スキルが必要となる。
  • 精通した技術者も多く、世界中で使われているといった特徴があるため、トラブルが発生してもノウハウを探しやすい。

IISの特徴

  • ASP(.NET Framework)を使って簡単に動的なWebページを作成出来る。
  • ASP(.NET Framework)以外の言語(PHPやJava)で開発された物を動かすには、ほとんど利点がない。

<b>太字タグと<strong>論理強調タグの違い

HTMLを作成する時に悩む、<b>太字タグと<strong>論理強調タグの違いについてメモしておきます。
この二つは表面上はよく似ていて、どちらも太字になります。
ですが<b>タグは単に太く見えるだけで単なる一般的な太字ですが、<strong>タグは検索エンジンなどにおいて、特別な意味を持ったタグとなります。
検索エンジンなどで注視させたい場合などは<strong>タグを用いると良いでしょう。
逆に<b>タグは単なる太く見えるだけのタグなので、文章の中で読者に対して注視させたい場合に用います。
私の場合は以前よくSEOの観点から<strong>タグを活用していました。
メタタグなどよりは多少の効果はあるようで、特定の検索ワードで上位になることも多かったです。
今は時間的に余裕がなく面倒なので、あまり文章内の特別な編集は殆どしていませんが、多少の効果があるという事は確かなようです。
他にもメタタグなど色々なタグがHTMLにはありますが、<b>タグや<strong>タグは初心者でも簡単に用いる事が出来ると思うので、うまく活用すると良いかもしれません。

URLとURIの違い

ホームページのアドレス部分「http://www.~」を指す場合、「URL」と言ったり「URI」と言ったりしてるのを聞いた事がないでしょうか?一体どちらを使用するのが正しいのか疑問に思う方もいらっしゃると思うので整理しておこうかと思います。

URLとは

  • URLは「Uniform Resource Locator」の略称。
  • URLはURIの部分集合。

URIとは

  • URIは「Uniform Resource Identifier」の略称。
  • RFC3986で規定されている。
  • URIはURLとリソース名を示すURN「Uniform Resource Name」を含む言葉。

正式名称を見てみると「URI」、「URL」、「URN」どれもリソースを表していますが、リソースを識別する意味で使用するのなら「URI」を使用すべきです。

HTTP:GETとPOSTの違い

Web関連の開発をしていると必ずと言っていい程「GET」と「POST」という言葉が出てくるかと思います。
今回はHTTPの「GET」と「POST」の違いについてまとめてみます。

基本事項として

「GET」も「POST」もクライアントPCなどからサーバーに送信するデータ「リクエストパラメーター」を送信する方式となります。

Web開発初心者の方だと「GET」という言葉からサーバーからデータを取得するのかなあと勘違い(私だけ?)してしまうかもしれませんが、どちらも入力フォームのデータをサーバへリクエスト送信する際に使用します。基本的に以下の特徴を踏まえて、用途別に応じて適切に使い分ける必要があります。

GET送信の特徴

  • HTMLの<form>タグの属性に「<form method=”get”>」のように指定して送信します。
  • 「https://write-remember.com?id=abc&data1=123」のようにHTTPリクエストヘッダへリクエストパラメータが付与されます。
    URLの後の「?」がgetパラメータ開始という意味となり、パラメータが複数ある場合は「&」で区切って指定されます。
  • データをリクエストURLの末尾に付与して送信する方式となるため、Webサーバやプロキシサーバのアクセスログなどに残ることになります。
  • 他の人がURLを見ると、入力したデータが丸見えになってしまうリスクがあるので、ログイン画面などではIDやパスワードが他者から丸見えになるのでGET送信は使用するべきではありません。
  • URLの後に付与するのでデータ量(文字数)に制限が掛かる。(Internet Explorer のURLに使用できる最大文字数は最大2,048 文字)
  • GETはHTTPヘッダ情報に含まれるため、簡単に取得することが可能。
  • テキストデータのみ送信可能。

POST送信の特徴

  • HTMLの<form>タグの属性に「<form method=”post”>」のように指定して送信します。
  • HTTPのBODY部にリクエストパラメータが格納されます。
  • GETのようにURLの末尾にパラメータは付与されません。
  • 個人情報などの重要な情報や、データ量が多い場合はPOST送信を使用します。
  • POSTはBODY部分(form)に含まれるため、取得がちょっと面倒。
  • テキスト、バイナリどちらでも送信可能。
  • POST送信後にブラウザの戻るボタン押下で有効期間切れが発生する場合がある。
  • GETのように容易に他者からパラメータはわかりませんが、安全に個人情報を送信する際はPOSTに加えて暗号化などの処置を施す必要があります。