ブログのスマートフォン対応の際に考えたこと

遅ればせながら、2014年8月にこのブログのスマートフォン対応を行いました。
iPhone, iPod touch, Android, Windows Phone, BlackBerry などの各種スマートフォンのほか、 Kindle, Sony Tablet, Nexus 7 などのタブレットではスマートフォン用のテーマで表示されるはずです。

iPad は、PC 用のテーマのほうが見やすいと感じたのでそのままにしています。

なぜ今までスマートフォン用のテーマを作っていなかったのか

一番大きな理由は「見づらいというご意見をいただかなかったから」です。
また、昨年まではスマートフォンからのアクセスは 10% ちょっとしかなかったため、それほど必要性を感じていませんでした。

とはいえ全く何の対応もしていなかったわけではなく、iPhone や Android の場合は、本文のフォントサイズが少し大きめ（18px）になるようにしていました。

なぜスマートフォン用のテーマを作ることにしたのか

今年に入ってから、Windows と Mac とスマートフォン（iOS + Android）のアクセス比率がほぼ 1:1:1 になりました。

そして、自分自身も電車で乗っているときなどに Twitter クライアントアプリで URL をクリックして、ブログやニュースサイトを見ることが増えてきました。

その際、やっぱりスマートフォン用に最適化されたサイトのほうが見やすいなと感じるようになったので、このブログも対応させることにしました。

レスポンシブか、スマートフォン専用テーマか

Web制作者向けのブログだと、たとえば Webクリエイターボックスや WebデザインレシピはレスポンシブWebデザインで、ウェビメモはスマートフォン専用テーマを使用しているようです。

私の場合、2011年に渋谷の JELLY JELLY CAFE というコワーキングスペースのオープニングイベントでレスポンシブWebデザインの話を聞いてから、だいぶ長い間このブログをレスポンシブにするか悩んでいました。

レスポンシブWebデザインは「1ソースでPCからスマートフォンまで対応」できるのは魅力的ですが、スマートフォンからの閲覧の際にデータ量が大きくなり、CSS も複雑になってしまうことが気になっていました。

また、すでに PC 向けに制作したテーマをレスポンシブ対応させるのは大変だろうと予想していました。

そこで、今回のスマートフォン対応の目的をはっきりさせることにしました。

今回のスマートフォン対応の目的

比較的小さなスマートフォンから大画面スマートフォン、ミニタブレット（Nexus 7など）まで快適に見れるようにしたい
3Gなど、低速な回線でも快適に見れるようにしたい
2本指ピンチアウトで拡大表示はできるようにしたい

やはり、素早く表示されることを重視するならレスポンシブより専用テーマのほうがよさそうです。

軽量化重視のため、PC版で使用している機能のうち「これはやらない」というものもリストアップしておきました。

「これはやらない」と決めたこと

Webフォント（記事一覧で各記事右上の「100 users」などの部分）
各記事末尾のコメント欄（PC版では DISQUS プラグインを使用）
フッターの重なり表現（z-index を使用すると、Androidで表示がおかしくなることがあるため）
アドセンス広告（将来的に付けるかもしれないが、今のところは無し）

どうしても必要とはいえないもの、Android で表示がおかしくなりそうなものはやめることにしました。

さらに、スマートフォン用テーマを作るにあたり、以下のものも使用しないことにしました。

上下に固定（position: fixed;）する要素は使わない

スマートフォンでこのブログを見る場合、Safari などのWebブラウザーではなく、Twitter クライアントや Facebook アプリ、RSS リーダーなどのアプリ内ブラウザーでご覧になることも多いかと思います。

その場合、タイトルバーやツールバーなど、上下に固定されている要素があるため、さらにWebページ内にも固定されている要素があるとコンテンツがほとんど見えなくなってしまいます。

たとえば、ハフィントン・ポストというニュースサイトの記事ページを iPhone の Facebook アプリから見ると、このように Facebook のヘッダーとフッター、ハフィントン・ポストのヘッダー、広告、大きな画像、シェアボタンなどのせいで、iPhone 5 では記事タイトルすらファーストビューには入りきれていません。

今回、シェアボタンを固定表示しようか正直迷ったのですが、ユーザー視点で考えればない方がよいと思い、固定表示は一切しないことにしました。

PCとスマートフォンで別のテーマを利用する

従って、今回はレスポンシブではなく「Multi Device Switcher」という WordPress プラグインを使用して、スマートフォンやゲーム機などではスマートフォン用のテーマが表示されるようにしました。

プラグインによって出力される、余計なCSSを読み込ませない

WordPress プラグインを導入すると、wp_head() や wp_footer() 部分にプラグインの動作に必要な JavaScript や CSS が読み込まれることがあります。

しかし、たとえば「Windows XP ユーザーに警告を表示するプラグイン」など、どう考えてもスマートフォンでは必要がないものがあります。

そこで、不必要な CSS を読み込ませないように、スマートフォン用のテーマの functions.php に「指定した CSS を読み込ませない」PHP スクリプトを書きます。

まずは、WordPress をインストールしたフォルダー内の［wp-content/plugins/プラグイン名］フォルダー内の PHP ファイルを開きます。
今回は、deadorxp プラグイン（Windows XP ユーザーに警告を表示するプラグイン）内の「wp-deadorxp.php」をエディタで開きました。

すると、以下の様なコードを見つけることができました。

// CSSをブログのheadタグ内で呼び出す
function wp_deadorxp_register_plugin_styles() {
	wp_register_style( 'deadorxp-white', plugins_url( 'wp-deadorxp/wp-deadorxp-white.css' ) );
	wp_register_style( 'deadorxp-black', plugins_url( 'wp-deadorxp/wp-deadorxp-black.css' ) );
	// 表示方法が「白いダイアログ」であれば wp-deadorxp-white.css
	if( get_option( 'wp_deadorxp_design' ) == 'white' ) {
		wp_enqueue_style( 'deadorxp-white' );
	} else {
		wp_enqueue_style( 'deadorxp-black' );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_deadorxp_register_plugin_styles' );

この中で重要なのは68行目・70行目の「wp_enqueue_style( ‘deadorxp-white’ );」と「wp_enqueue_style( ‘deadorxp-black’ );」という部分です。

「wp_enqueue_style()」は WordPress の独自関数で、「指定した CSS を読み込ませる」ためのものです。
これを無効にしたいので、今は「deadorxp-white」と「deadorxp-black」という名前を覚えておきます。

そして、スマートフォン用テーマの functions.php を開き、以下のように追記します。

// 不要な CSS をキューから外す（スマフォでは不必要なもの）
function dequeue_style() {
	wp_dequeue_style( 'deadorxp-white' );
	wp_dequeue_style( 'deadorxp-black' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_style' );

「wp_dequeue_style()」関数は、「wp_enqueue_style()」関数で読み込まれた CSS を読み込まないようにするためのものです。

「wp_dequeue_style()」関数は、菱川さん @HissyNC に教えていただきました。
菱川さんは、以下の記事でこの関数について書かれています。

参考: WordPressでテーマからJavascriptやCSSを読み込む書き方まとめ | notnil creation weblog

さらなる軽量化のために

公式のソーシャルボタンを使用しない

Twitter、Facebook などの公式のソーシャルボタンは案外重いです。
たとえば、Chrome の開発者ツールで計測したところ、

Facebook Likebox: 4リクエスト/435ms/69.7KB（顔写真1つの場合）
Twitter ツイートボタン: 5リクエスト/481ms/27.1KB
はてブボタン: 6リクエスト/547ms/2.5KB
Pocket: 5リクエスト/718ms/9.6KB

でした。
合計サイズはそんなに大きくはないのですがリクエスト数が無駄に多いので、すべて公式のボタンを導入するとわりとページの読み込みが遅くなりそうです。

また、PC用のソーシャルボタンは小さくて、スマートフォンではタップしづらい場合もあります。

そこで、公式のボタンは使わず、CSS で角丸のボタンを作りリンクを貼るだけにしました。

※青い［Twitter］［Facebook］や、茶色の［Portfolio］などが該当部分です。

ソースは以下のような感じです。

.btn_ul {
	clear: both;
	list-style: none;
	width: 100%;
}
.btn_ul li {
	margin-left: 0;
}
.btn_ul li a {
	display: block;
	float: left;
	margin-bottom: 0.5em;
	padding: 3% 0;
	width: 33.33%;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	font-family: "AvenirNext-Bold", Sans-serif;
	font-weight: bold;
	font-size: 18px;
	color: #fff;
}
.share_ul li a {
	background: #2c6ebd;
}
.about_ul li a {
	background: #604416;
}

リストの先頭のチェックマークに画像を使用しない

このブログでは、記事本文のリスト要素（ul > li）の先頭にチェックマークを付けています。

PC版は、PNG画像を使用していますが、スマートフォン・タブレットは年々解像度が高くなっていますし、普通に考えれば SVG などのベクター画像を表示するのがよさそうですが、より軽量化するため ✓ の記号文字を使用することにしました。

ソースは以下のような感じです。

.entry-content ul {
	list-style: none;
}
.entry-content ul li {
	margin-left: 1.3em;
	text-indent: -1em;
}
.entry-content ul li:before {
	content: "✔";
}

その他の工夫

画像が間延びしないようにする

これはスマートフォン対応では一般的にされている方が多いと思いますが、タブレットや大画面スマートフォンで記事内の画像がページサイズからあふれないように、画像のスタイルに「max-width: 100%」と「height: auto」と書きます。

.entry-content img {
	display: block;
	margin: 1em auto;
	border: solid 1px #fff;
	max-width: 100%;
	background: #fff;
	height: auto;
}

タイトルとURLをコピーするためのテキストエリア

スマートフォンでこのブログをご覧になっている方の場合、Safari などのブラウザアプリではなく、Twitter や Facebook、RSSリーダーなどのアプリ内ブラウザからご覧になっている方も多いと思います。

その場合、例えばツイートボタンを押すと、ログインしていない Twitter の投稿ページが表示されますが、「この Twitter クライアントからツイートしたい」という場合もあると思います。

そういう方のために、タイトルと URL をコピーするためのテキストエリアをシェアボタンの下に設置しました。
タップすると、JavaScript を使用してテキストエリア内の全てのテキストが自動的に選択されるため、iOS 7 では素早くコピーできる…のですが、iOS 8 ではこれができなくなってしまったようです…

※テキストエリアの下には、誤タップ防止のためのマージンを設けています。

背景画像の継ぎ目について

以前、一度だけ「このブログの背景画像の継ぎ目は何ですか？」と質問が来たことがあるのですが、実はPC版は MacBook Air などの縦 900px 程度のディスプレイで表示した際に、ページの先頭から最初の継ぎ目部分までがファーストビューになるように調整しています。

ファーストビューというのは和製英語で、英語では Above the fold（折り目の上）といいます。
例えば、紙の新聞を駅のスタンドなどで販売する際、折り目の上の部分は目立つのでとても重要です。

それが転じて、Webページでスクロールしなくても表示される領域のことを指すようになったようです。

デスクトップPCや外付けディスプレイなどの大画面で作業していると、「ノートPCだとどのあたりまで表示されるんだっけ？」と気になることがありますが、その場合はこのブログを表示し、ブラウザウインドウの長さを最初の折り目くらいまでにして頂ければノートPCでのファーストビューが分かるようになっています。

それと同様に、スマートフォン版では最初の折り目が iPhone 5/5s でのファーストビューになるように調整しています。

以下のように、「background-size」プロパティで背景画像のサイズを調整しました。

#wrapper {
	background: #f1ddbd url(images/bg1.jpg);
	background-size: 600px;
	padding: 10px 3%;
}

PC版を見たい時は

PC版とスマートフォン版の切り替えボタンを付けるかどうかは少し迷いましたが、このブログはスマートフォン版もPC版とほぼ同じ機能がありますし、Android版 Chrome や iOS 8 の Safari では「デスクトップ用サイトを表示」機能があるので、サイト内に切り替えボタンは付けませんでした。

iOS 8 の Safari でPC版を見たい場合は、アドレスバーをタップし、お気に入りを下にスワイプして「デスクトップ用サイトを表示」をタップしてください。