koikenote-loading
広告あり

Cocoon管理者画面から表示速度やモバイル表示を手軽に確認する方法(非表示も簡単)

ブログ運営
記事内に広告が含まれています

Cocoonを使用していると、WordPressにログインした状態で自分のサイトを見たとき、画面下の方に「管理者パネル」というものが表示されます。

その中の「チェックツールエリア」や「レスポンシブツールエリア」は、ページごとの表示スピードや各デバイスからの見え方を手軽にチェックできる、サイト管理者向けの便利なツール(リンク)を集めたものです。

誰もが快適に閲覧できるページを作るために役立ちますが、もし「邪魔だなー」と思う場合は簡単に消すこともできますし、自分が使用するツールだけを残すことも可能です。

私がブログを始めたばかりの頃は「なんかよくわからないからクリックしないでおこう」と思っていたのですが、運営に慣れてくると「ブックマークとか使わなくてもココから直行できるの便利!」となっているのでご紹介します。

まだ一度も使ったことがない初心者さんにも試してほしいです

スポンサーリンク

Cocoon設定「管理者画面」で不要なモノを非表示にする方法

「管理者パネル」「チェックツールエリア」「レスポンシブツールエリア」の設定はとても簡単!

\ ほーら簡単 /
「Cocoon設定」のタブから「管理者画面」と進んで
表示したくないモノのチェックを外すだけ

Cocoon設定の「用語がわからない……」という場合、黄色の三角マークがついているものはマークにカーソルをあわせるだけで解説が現れます

「管理者パネル」自体を消すこともできますが、チェックツールなどは便利なので自分が使わないものだけ非表示にするのがおすすめです。

管理者画面のチェックツールエリアとレスポンシブツールエリアについて

Cocoonで手軽に使うことができ管理者画面で表示設定可能なツールについて、初心者目線でざっくりまとめておきます。

\ ほんとにざっくりまとめ /
Cocoonで手軽に使えるチェックツール
  • ページスピード
    Googleが無料で提供している「PageSpeed Insights」で、サイトの読み込み速度を診断してくれるツール。
    テストしたいページを表示した状態で「ページスピード」をクリックするだけ!
    「ウェブに関する主な指標の評価:合格」と出ればひとまず安心。
    あとパフォーマンススコアはできるだけ高い数値(緑色)を目指します。
  • GTmetrix
    サイトの読み込み速度を解析できるツールですが、英語です。
  • モバイルフレンドリー
    モバイル機器でのページの使い勝手に問題がないか診断できます。
    テストしたいページを表示した状態で「モバイルフレンドリー」をクリックするだけ!
    「このページは、モバイルデバイスでの使い勝手に優れています。」と出れば安心。
  • 構造化データ、HTML5、アウトライン
    この3つはよくわからなかったので表示チェックを外しています。
    (ちょっと高度な運営者向き?)
  • SEOチェキ
    サイト情報、キーワードごとの検索順位などSEO関連のデータを確認できるツールです。
    解説記事がたくさんあるので、詳細は検索してみてください。
  • ツイート検索
    表示ページのURLがTwitterでシェアされた場合、そのツイートを見つけることができます。
  • レスポンシブテスト
    iPhoneやAndroid、iPadの各画面サイズでどのように表示されるか手軽に確認できます。
    テストしたいページを表示した状態で「レスポンシブテスト」をクリックするだけ!
  • Sizzy
    こちらもモバイル機器それぞれの表示を確認できるサービスですが、英語でよくわからないため表示チェックを外しています
  • Resolution Test
    こちらもモバイル機器それぞれの表示を確認できるツールで、英語ですが直感操作が可能です。
    確認したい画面サイズを数値で指定することもできます。

英語のツールもあるので「よくわからないから怖くて使えない」場合には非表示にしておけば良いかと思います。
Googleの提供ツールや直感で操作可能なものは便利なので使ってみましょう。

ほとんどがツール名をクリックするだけで簡単にテストできます!

基本的に私はCocoon(わいひらさん)を信頼しているので、公式に装備(リンク)されている機能は安心して使って良いと判断しています

GTmetrix、試してみました

表示速度の診断はいつも「PageSpeed Insights」を使用していたのですが「GTmetrixって何?」と気になったので試していました。

「サイトの読み込み速度を解析できるツール」らしいですが、英語でした……。
でも最低限のテストは無料みたいなのでやってみます。

「チェックツールエリア」から「GTmetrix」をクリックし、URLが入った状態で『Analyze』という青いボタンをクリックすると診断が始まりました。
(15秒くらい待ちました)

\ 結果はっぴょーう/

おおお!?大きく「A」と出ました。
「なんとなく良い結果ぽい!?」と勝手に安心します。

恥ずかしながら英語ぜんぜんできないので、正直詳しくはわかりません(笑)
(詳細が理解できたらここに追記します)

サイトの読み込み速度に関する診断ツールなので、もしテストして「なんだか悪そうな感じ」の結果が出た場合には「サイト読み込みスピードの改善」について調べ、Cocoon設定の高速化やプラグインを使用して対応しましょう。「高速化」などで検索すると良いかも?

ちなみに当サイトはConoHa WING(レンタルサーバー)とCocoon(WordPressテーマ)の組み合わせで開設しており、Cocoon設定の「高速化」のほかに画像を軽くするプラグインや蓄積した不要データを削除するプラグインを使用しています。

無料のCocoonですが快適な表示速度が証明できました

記事を書いたらモバイル表示の確認を!

ブログの記事を投稿した時、モバイル表示の確認はしていますか?

パソコンの画面で何度も確認しながら仕上げても、スマホで見ると「なんじゃこりゃぁああ」となること、時々あります。

あとGoogle Search Consoleで「公開URLをテスト」した際に

このページはモバイルフレンドリーではありません

なんて結果が表示されることも。

「モバイルフレンドリー」とは「モバイル端末でサイトを快適に閲覧できること」を指し、これを意識できていないと「読みづらいブログだな」という印象になり離脱されやすくなります。

それを防ぐため、新しいページを公開した時には「モバイルフレンドリー」と「レスポンシブテスト」を行いましょう。

私がCSSを編集する際にはデベロッパーツールを使ってモバイル表示の確認(レスポンシブテスト)をしているのですが、カスタマイズをしていない場合(スキンをそのまま使っている場合など)はこの「チェックツールエリア」「レスポンシブツールエリア」から行うのが一番簡単だと思います。

デベロッパーツールに比べると簡易的なのでモバイル端末のサイズ設定が小さめ(古い機種サイズ)だったりしますが、あきらかな崩れがないかを手軽に確認できるのでとても便利です。

読者ごとに見ている端末が違うことを意識して整えることが重要なので「まだ一度も試したことがない」というユーザーさんは、ぜひ習慣づけてください。

主にこんなところをチェック
  • 文字が小さすぎたり、クリック可能な要素が近すぎないか
  • 画面幅が狭くなった時のタブやボタンの表示
  • 意図していたレイアウトや装飾になっているか
    (装飾ブロックの見え方は画面サイズによって異なる場合があります)

自分のスマホだけでなく他の方のスマホからどのように見えているのかもチェックして、より良いサイトに育てましょう!

\ この記事へのコメント /

スポンサーリンク