ブログデザインを考えるとき、PCからの見た目だけではなくスマホ表示にも気を遣わなければなりません。
先日公開した「記事下に配置するCTA（コールトゥアクション）サンプル集」はPCデザインをご紹介しましたが、思いのほか好評だったので今回はスマホ版のデザインを集めてみました。
各ブログがPCとスマホでどのようにデザインを変えているのか、見比べながら参考にしましょー！
Headline
スマホデザインで気をつけるべき点
PCと違ってスマホは表示領域が狭いので、一画面の情報量も限られてきます。あれもこれも記事下に配置すると、ごちゃごちゃした印象になりがち。
アドセンスの場合、一画面を広告で占領する配置は禁じられているので、当然これも考慮に入れなければなりません。
また、スマホは指でタップするのでその領域を確保する必要があります。テキストにするのか、CSSでボックスにしてしまうか、画像に差し替えるか、というのを考えなきゃなりませんね。
アップルのiOSヒューマンインターフェイスガイドラインでは、人間の指で快適にタップするためには、44ピクセル×44ピクセルのタップ領域を割り当てることを推奨しています。
さらに言うなら、スマホをどのように持ち、どの指で操作するのかまで考えた設計が必要になります。
僕は右手でスマホを持ち、右手の親指で操作することがほとんど。5インチなので左上・左下は無理しないと届きません。右上・右下も親指でタップしようとするとスマホを落としそうになります。操作しやすいのは画面中央から下の部分。
スマホ自体の大きさと手の大きさ、持ち方でも変わりますが、画面中央から下にCTAを配置するとほぼどのユーザーにも共通する優しい設計と言えるかもしれません。
上記イメージは右手持ち、あるいは左手持ちで親指が届く範囲を表しており、緑色の部分がもっとも無理なく届きやすい領域であることがわかります。
これからのWebサイト制作では、「対応させる」だけではなく、デザイン性を損なわず、かつどのデバイスでも「使いやすい」Webサイトを作るため、制作フローの段階から考え直す必要があります。
かと言って、何でもかんでも画面中央に配置すれば良いというわけじゃありません。読者に何をしてほしいのかを考え、最適な場所にCTAを設置すべきです。
こうやってあれこれ考えると深みにハマってしまいそうですが、これからじっくり勉強して少しずつ改善していきましょう。
記事下のスマホデザインサンプル集
それでは参考にしたいブログのデザインをご紹介していきます。PC版とスマホ版でどのように変えているのか、わかりやすく並べてみました。
ちょっと見づらい部分があるかもしれませんが、なんとなくイメージがつかめると思います。
hamako9999.net
PC版ではレクタングル広告を2つ並べて表示していますが、スマホ版は1つになっています。
その他配置パーツや順番は同じで、横並びになっているボックスはフロートが解除されて縦並びになっています。特にテーマをいじらずCSSの調整で済むオーソドックスな形ですね。
男子ハック
こちらもオーソドックスな形。
スマホ版ではコメントボックス幅が最大化されて各要素を区切っています。シンプルな配置を見習いたいところ。
Naifix
当ブログも特に大きな変更箇所はありません。
ちなみにPC版ではアドセンスとその他広告（A8.netなど）を横並びに、スマホ版ではアドセンスのみ表示しています。レスポンシブデザイン用のアドセンスを使うと、CSSの指定に基づいた大きさの広告が配信されるので便利。
次にご紹介していくブログからちょっとずつデザインが変わっていきますよー。
わかったブログ
スマホ版はシェアボタンの大きさが変わり、フォロー系ボタンを排除してスッキリした配置になっています。
「LINE」ボタンもさりげなく登場していますが、これからは必須になるんでしょうか。
和洋風KAI
「Pocket」と「Feedly」ボタンが外され、4つのシェアボタンが綺麗に並ぶようデザインされています。
数打ちゃ当たる、ではなく本当に必要なボタンのみ厳選するほうが良いのかもしれません。公式ボタンは読み込み速度が遅いので、これも気をつけたいところです。
gori.me
PC版ではオリジナルのシェアボタンがスマホでは公式ボタンになり、数が増えています。大きなGoogle+フォローボタンも目を引きますね。
「シェア→広告→関連記事」から「広告→シェア→関連記事」という並び順になっている点も注目。
WEBクリエイターボックス
関連記事とシェアボタンの位置が入れ替わっており、その代わりにカテゴリー・タグが広告の上に登場しています。
大きめのアイキャッチ画像を削除して表示数を増やすと共に、読み込みスピードを上げるなど工夫がされています。
miMemo
こちらもスマホ版ではタグが表示されるようになっていますね。
シェアボタンの高さが統一され、余白の設定など各ブロックのまとまり感がすごく参考になります。
あかめ女子のwebメモ
女性ブロガー3連発になりますが、スマホ版にカテゴリー・ジャンル（タグ）が追加されている点が共通していますね。
配色が変更されメッセージもつけ加えられていて、スマホユーザーの目線で設計されているのが伺えます。
room9
スマホ版はGoogle+ボタンがなくなり、管理人自己紹介欄とFeedlyボタンが追加されています。
ちなみにPC版だとこの自己紹介欄＆Feedlyボタンがサイドバー追尾型になっているため、記事を読んだ後は必ず目に止まるよう設計されているんですねー。
WordPressでPCとスマホの出力を変える方法
さあ、いかがだったでしょうか。どのブログもすばらしいデザインと設計で、参考になる点がたくさんありましたね。
PCとスマホで表示内容を変える方法はいくつかありますが、単に要素を消すだけならCSSだけで処理できます。
たとえばスマホもPCも同一のURL（同一のHTML/PHPファイル）を使いCSSでデザインを変更しているなら、スマホ用のCSSに下記のような指定をしてあげれば、その要素は表示されなくなります。
※スパムでも使われることが多いので、使いすぎに注意しましょう。
.smartphone {
display: none;
}
WordPressなら分岐コードを書くことでPC用の出力とスマホ用の出力を切り替えることができます。
まず「functions.php」に下記を追記（Gushは設定済み）。
//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
切り替えたい部分を下記コードで分岐します。
<?php if(is_mobile()) { ?>
スマホで表示したい内容
<?php } else { ?>
PCで表示したい内容
<?php } ?>
「スマホで表示したい内容」部分を空白にしておけば、スマホで見たときは何も表示されません。CTAの広告やメッセージなど、CSSだけでは対応しきれないところで使ってみてください。
is_homeとis_mobileを使ってWordPressカスタマイズの幅を広げよう！
まとめ
記事下部分に着目してご紹介してきましたが、ぜひ実際に各ブログをスマホで閲覧してファーストビューや全体のデザインなどもご覧ください。
ただ記事を読むだけでなく、こうして別の視点からブログを見て回るのも面白いですよ。横並びになっているシェアボタンの順番だったり、ほかの記事を読みたくなってしまう導線だったり。
こいつはすげーぞ！というブログがありましたらぜひ教えてください。もちろん自薦OKです！
それでは、また。