CREAMサポートブログ | はじめてのメディアサイト運用に

モバイル表示の確認方法とメディアサイトの特性

モバイル表示の確認方法とメディアサイトの特性

メディアサイト構築CMSのCREAMにはモバイル表示(スマートフォン表示)のプレビュー機能があります。またメディアサイトならではの特性もあります。合わせて、Chromeブラウザを使ったモバイル表示方法もご案内します。


CREAMのモバイル表示の仕組み

メディアサイト構築CMSのCREAMは、いわゆる「レスポンシブウェブデザイン(RWD)」の仕組みではありません。しかし、モバイルサイト表示(スマートフォン表示)が適していないのではなく、むしろ最適化されています。

CREAMは、モバイルデバイスのUserAgent(ブラウザ情報)を識別して、サーバー側で適切なサイト表示を行う仕組みになっています。

そのため、ブラウザの横幅(スクリーンサイズ)に動的に合わせるRWDの仕組みでないものの、モバイル表示は最適化され、URLについてもPC表示とモバイル表示とで同一のものです。

さらに、Googleサーチコンソールの「モバイルユーザビリティ」も問題ありません。

CREAMのモバイル表示のメリット

RWDは、すべての表示データをネットワーク上から読み込んだあとでCSSで非表示としているため、実は軽量化に適していません。

CREAMのようにサーバー側でデバイスを識別する仕組みであれば、はじめから不要なデータを読み込まないため軽量化に貢献できます。

また、PC表示とモバイル表示とを明確に分けられるため、広告やバナーなどの出し分けが行いやすくなっています。

メディアサイトの特性

一般消費者を対象とした、BtoC向けWebメディアサイトの場合、多くのアクセスデバイスはスマートフォンです。とくにターゲットに女性をイメージしているサイトでは、モバイルの比率が98%となる例もありました。

また、アクセス流入経路がGoogleなどのキーワード自然検索の場合は、知りたい情報や困りごとを検索するために、検索結果の記事ページにアクセスします。さらにページ内で表示された関連する記事やランキング上位の記事をタップして、記事から記事へと遷移していくため、サイトのトップページのアクセスはほとんどありません。

流入状況によっては、サイト全体のうち、トップページのアクセスは0.1%以下になる事例も多いようです。

つまり、「スマートフォンで記事ページに直接アクセスされ、トップページは見られない」のが、ほとんどのWebメディアサイトの特性です。この理解がないまま、さまざまな集客施策やビジネスモデルを考えても、検討違いなことになりかねませんので注意しましょう。

CREAMの記事作成時のモバイルプレビュー

CREAMには標準で、記事作成時や編集時にモバイルを想定したプレビュー機能を用意しています。この機能を使えば、かんたんにモバイル表示が確認できます。

記事作成画面で「プレビュー」ボタンを押します。

プレビュー状態で「スマホモード横375」ボタンを押します。

モバイルサイト表示のプレビューが確認できます。

Chromeの検証モードを使っても確認できます

CREAMに限らない一般的なノウハウですが、Chromeブラウザの検証モード(デベロッパーツール)を使っても、モバイル表示を確認できます。

対象のページで右クリックして、表示されたメニューから「検証」を選びます。

右上にある「デバイスモード」ボタンを押します。

中央上部のプルダウンメニューが表示され、確認したいデバイスを選択します。

PCサイトが表示されたままですので、リロード(再読込)ボタンを押します。

リロードのあと、モバイルサイトが表示されました。

Chromeブラウザの検証モード(デベロッパーツール)は、他にもHTML調査などたくさんの便利な機能が用意されています。

ぜひお試しください。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

https://saruwakakun.com/html-css/basic/chrome-dev-tool

Googleクロームの便利な「要素の検証」機能の使い方を分かりやすく解説します。ウェブデザインをする人が特に知っておくべき機能を中心に紹介していきます。

 

 

 

関連する投稿


初期費用半額キャンペーン実施中!

初期費用半額キャンペーン実施中!

SODA株式会社では、withコロナ時代にデジタルマーケティングの活動を行う皆様を支援するため、初期費用を半額にするキャンペーンを実施します。


メディアサイト管理者は必見!ads.txt の設定方法

メディアサイト管理者は必見!ads.txt の設定方法

なりすまし広告詐欺を防ぐ仕組みの「ads.txt(アズテキスト)」を設定する方法を説明します。未対応の場合はGoogleアドセンスの管理画面に警告が出ることもあります。アドネットワーク広告を設定するサイト管理者であれば必ずご確認ください。


メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

広告収益型のメディアサイトで実績が多いCREAMには、アドネットワーク広告以外にもアフィリエイト活用の機能が標準で用意されています。今回はASPの管理画面を使って具体的な設定例を紹介します。


メディア構築CMSを使ったアフィリエイトの始め方(Amazon編)

メディア構築CMSを使ったアフィリエイトの始め方(Amazon編)

広告収益型のメディアサイトで実績が多いCREAMには、アドネットワーク広告以外にもアフィリエイト活用の機能が標準で用意されています。今回はAmazonアソシエイト向けの機能を紹介します。


企業ブログに最適なCMSの選び方

企業ブログに最適なCMSの選び方

企業がブランディングや採用活動の一環、あるいは自社商品の販促を目的に、CMSを活用して自社サイトの中に記事メディアを構築し、継続的な更新によるサイト運営を行うケースが増えています。 ここでは、個人ブログや広告収益型メディアと分けるため、上記のような用途のメディアサイトを『企業ブログ』と呼ぶことにします。では企業ブログにマッチするCMSツールを考えてみましょう。


最新の投稿


UXの新指標「コアウェブバイタル」対応

UXの新指標「コアウェブバイタル」対応

Google は、2021年6月からUXの新指標「コアウェブバイタル」を検索結果の表示順位に反映させると発表しました。 CREAMは、この「コアウェブバイタル」にもいち早く対応。 ページスピードインサイトで確認すると、高いスコアを出していることが分かります。


初期費用半額キャンペーン実施中!

初期費用半額キャンペーン実施中!

SODA株式会社では、withコロナ時代にデジタルマーケティングの活動を行う皆様を支援するため、初期費用を半額にするキャンペーンを実施します。


サイト内で使う画像をアップロードする「画像管理」の使い方

サイト内で使う画像をアップロードする「画像管理」の使い方

管理画面の「画像管理」メニューでは、サイト内で使う画像をアップロードすることができます。バナーやよく使う画像など、サイト全体で共有したい画像を登録しておきましょう。 また、ウィジェットやページ作成で画像を表示するときにも「画像管理」を使います。 「画像管理」での画像の登録の仕方と便利な使い方をご紹介します。


企業ブログの成功ポイントと事例

企業ブログの成功ポイントと事例

企業ブログは、オウンドメディアやメールマガジンなど様々なコンテンツマーケティング手法のひとつです。企業ブログの成功のポイントや事例、CMS活用についてまとめました。


CREAMサイトにおけるサブドメインとサブディレクトリの扱い

CREAMサイトにおけるサブドメインとサブディレクトリの扱い

オウンドメディアやWebメディアサイトに特化したCMS「CREAM」の導入時に、サブドメインやサブディレクトリを設定できるのか、といった質問をよく受けるため説明します。


CREAM 初期費用半額キャンペーン

ページTOPへ