はてなブログをPCレイアウトからスマホ用レイアウトへ

やっと記事の更新などが一段落ついてきたので、今までパソコン用のレイアウトとスマホ用のレイアウトを区別していなかったのを分けてデザインするようにしました。

 

ちなみに、このブログの話ではなく、私が他に運営しているブログのお話です(一緒にこのブログもスマホ対応させてしまいましたが……)。

 

なぜスマホ用にレイアウトを直そうと思ったのか?

そのブログは立ち上げてから昨日で11日といった状態で、アクセス数はだいたい、累計で332人のユニークユーザーがいるようです。

 

f:id:nyarumeku:20140623011320p:plain

 

さて、ここで気になる数字が2つあります。

 

それは以下のようなものです。

 

①パソコンからのユニークユーザー数とモバイル&タブレットのユニークユーザー数がほぼ同数であること

 

②パソコンユーザーの直帰率に比べ、モバイル&タブレットユーザーの直帰率が高いこと(直帰率は左から二番目の%表示の値です)

 

つまり、もしも現状のPCレイアウトのまま放置していれば、モバイル&タブレットユーザーのアクセスを逃してしまうのではないか、実際10%程度の人は逃してしまっていたのではないかと考えたのです。

 

たかが10%、されど10%です。

 

単純にアクセス数が減るというのは、それだけGoogle Adsenseの収益が減ることを指しますし、それ以上にAdsense収益においてスマホ用レイアウトの影響力は馬鹿になりません。

 

そこで、はてなブログをスマホ用レイアウトへ変更してみました。

 

その手順はどうやるの?

はてなブログでスマホ用レイアウトにすることは難しくありません。

 

普通のPCデザインをいじるのと同様に、「デザイン」タブをクリックし、スマホマークのタブがあるので、それをクリック、「詳細設定」タブ ⇒ レスポンシブデザインのチェックを外すだけです。

 

後は、スマホ用にヘッダー、フッタ―、記事上、記事下をいじりましょう。

 

まぁ、自由度の低さ、レイアウトのシンプルさ(悪く言えば何もない)はご愛嬌ということで。

 

スマホ用レイアウトにおけるAdsense広告の注意点

なんとなーく、私は“1ページ辺りにAdsense広告は3つまでしか張ってはいけない”としか覚えていなかったのですが、スマホ用の規約を検索してみると衝撃の事実が……。

 

“1 つの表示可能なページ(1 ビュー)に表示できるモバイル コンテンツ向け AdSense の広告ユニットは 1 つのみ”

 

つまり、スマホをスクロールした時に1画面に2つの広告が並んでいてはいけないわけです。

 

このルールがあったせいで、やむなくスマホサイトでは広告を3つ張ることを断念しました。

 

まぁ、スマホ用にサイトの読み込みスピードに気を配った、ということにしておきましょう。

 

実際、スマホサイトで読み込みスピードの遅さは致命的ですしね。

 

また、いずれこのレイアウト変更によって何らかの進展や変化があったらご報告します。

 

ウェブデザイン&レイアウトの見本帳

ウェブデザイン&レイアウトの見本帳