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

 

 

 

この記事のライター

関連する投稿


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

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

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


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

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

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


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

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

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


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

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

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


広告収益アップ!メディア記事内広告「コンテンツウィジェット」の使い方

広告収益アップ!メディア記事内広告「コンテンツウィジェット」の使い方

広告収益型のメディアサイトで実績が多いCREAMには、広告掲載場所を設定する「ウィジェット」という機能が3種類あります。その中で、使い方次第で広告収益改善が期待できる記事内広告「コンテンツウィジェット」機能を紹介します。


最新の投稿


2021年 ゴールデンウィーク休業のお知らせ

2021年 ゴールデンウィーク休業のお知らせ

2021年のゴールデンウィークの弊社休業期間をお知らせします。


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

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

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


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

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

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


2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始の弊社休業期間をお知らせします。


RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSは登録したWebサイトの新規記事や更新情報などを配信する仕組みです。メディア構築CMSのCREAMには標準で用意されています。情報収集にも、記事の外部サイト表示もできる活用方法を案内します。


 

ページTOPへ