monograph

僕がブログにレスポンシブデザインを採用しようと思わない理由。スマホ専用テーマ作成のススメ。

   

レスポンシブ (mini).png
一日に3時間以上は電車に乗っています。PITE.です。
いい加減一人暮らしでもしようかなと思っている今日このごろ。六本木にオフィスがある会社に来年就職予定なのでアクセスしやすいオススメの地域とかあったら教えて下さい。

あ、またどうでもいい話してる…!さっさと本題に入りましょう。

最近ブロガーさんと話す機会が増えブログデザインに関する話をすることが多くなってきました。その中で特に話題に上がるのがスマホ用テーマについて。選択肢としてはスマホ専用テーマを作って振り分けるか、レスポンシブデザインを使って一つのテーマで対応するという2つが代表的なものだと思います。WordPressを使っている方はWptouchを使っている方も多いですね。

僕は現在、レスポンシブデザインを避け専用テーマを作って対応しています。
なぜ僕がレスポンシブデザインを避けるのか、思うところがあったので少しだけ記事として書いてみようと思います。

モバイル用ページが重くなる


まず一つ目の理由は「モバイル用ページが重くなる」こと。

画面サイズが大きなPC用ページでは表示する要素も多く、使用する画像のサイズも大きくなります。
これを画面の小さなスマホで表示させるのは効果的ではありません。各種ボタンの大きさなども一々変更しなければなりません。たとえ画像を縮小したとしてもデータのサイズは同じなので通信の速度が遅いスマホではかなりの負担がかかります。

そして、アクセスが増えてくるとサーバーの負担の問題もあります。スマホにはスマホに必要なだけのデータを送ったほうが全体としてデータ通信の量が減り、重さを軽減できるので僕はテーマを分けて配信した方がいいと思うわけです。

ソースが煩雑になる


レスポンシブデザインでは一つのテーマをデバイスごとに振り分けてCSSで表示の方式を変えるというものなのでどうしても一つのソースが煩雑なものになります。慣れの問題もあると思いますが、僕はやはりわかりやすいソースの方がいいのでいまいちレスポンシブに触肢が動きません。

危険性


複数のデバイスの表示を一つのテーマで管理するというのは便利に思える反面、それに伴う危険や手間も発生してきます。一つのテーマで済ませるということはそのテーマに手を加える際にはPC・タブレット・スマホの全ての表示において気を配る必要があるからです。つまり、PC用のページをいじっている時にも同時にスマホ用の表示についても考えないといけないわけです。もしかしたらPCではちゃんと表示されていてもスマホだと大きくレイアウトが崩れているということがあるかも。一つのテーマに全ての責任を負わせるということはそれだけ危険性も増していきます。

その点、専用テーマを作ってファイルを分ける方法を取れば例え一つのテーマで失敗してしまっても他の表示には影響を与えません。集中してデバイスにあったテーマを作ることができます。

広告サイズ


そして一番面倒なのが広告サイズの問題です。たまにスマホだと広告がはみ出てしまっているサイトありますよね。
Google Adsenseなどの広告配信サービスを使用している方も多いと思いますが、これらの広告は300✕250、728✕90などの決まったサイズがあります。このサイズをデバイスごとに変更するにはやや高度な振り分けスキルが必要になってくるので、それであればもうテーマごと切り替えてしまったほうが楽というわけです。

ユーザーの事を本当に考えたら?


レスポンシブデザイン、というのは一つのテーマで色々なデバイスに対応できる「便利」なデザインです。

でもそれって誰にとって「便利」なのでしょうか。

テーマを作る側、サイトを運営する側に取って「便利」なだけですよね?つまり配信者の都合です。
読者にとってはレスポンシブだろうが専用テーマだろうが読みやすければそれで良いと思います。

ではその「読みやすさ」を追求した時によりユーザーに貢献できるのはどちらでしょうか。

僕は専用テーマだと思います。

デバイスごとに動線や使いやすさ、ページの軽さなどを考えたWeb設計ができるからです。
本当にユーザーのことを考えれば専用テーマを作るのが最善策なのではないでしょうか。

おわりに


最近身の回りでスマホ用テーマを作成する人が増え、相談も受ける機会も多くなって来ました。その時に「レスポンシブデザイン」と「専用テーマ」のどちらがいいかという質問をよくされるので今回このようなエントリーを書いてみようと思った次第です。もちろん異論反論は受けつけますし、自身の糧にしようと思うので色々な意見を下さると嬉しいです。

最後に僕がスマホ用テーマを作る際に参考にしたサイトや書籍を紹介して終わりたいと思います。

基本的なWordPressのテーマ作成方法はこちらで。
おそらく最もわかりやすいWordPressテーマ制作チュートリアル | Stocker.jp / diary

スマホ専用テーマに関する部分はこの本で学びました。

デザインの話をするのは楽しいですね。

PITE.

 - BLOG, WordPress

teaparty

  関連記事

ae46b1f460ee46f789c27b264a6cb421.jpg
【2012年4月】Number333月間アクセス解析!

当サイト「Number333」の4月のアクセス解析です。 さあ、果たしてどのくら …

IMG_0993.JPG
【Cafe】自由な雰囲気でゆったりノマド作業!吉祥寺の『ハンモックカフェ』

僕、ことPITEは実は自宅よりもカフェでNumber333の記事を書いたり、プロ …

Dpub7026 (mini).png
【憧れの聖地】Dpub7に参加して本当に良かったって話。

2月2日、土曜日に全国のブロガーが集まる「お祭り」Dpubに参加して来ました! …

Number333 2012-05-13 23.59.47.jpg
ブロガー本に感化されてとりあえずFacebookページを作ってみました!

とりあえず作っちゃいました! 作ってみた! 最強のブロガー本を読んで、Faceb …

Number333レッドバナー.png
【祝】Number333が1周年を迎えました!みなさんありがとう!

ついにこの日が…( ;∀;)。PITE.です。 先日の9月24日を持ちまして、当 …

6e9e2f3d665ccc61d174e3a7a15a9143.png
【2013年4月】Number333アクセス解析&4月のおすすめ記事。今月は82万PV、やっと安定して来ました。

最近は暖かいので積極的に活動してます。お前は爬虫類か。PITE.(@infoNu …

Number333 2012-06-12 15.56.00.jpg
WordPressにGoogleカスタム検索バーを導入してみたのでその方法を解説します!

WWDCの興奮も冷めやらぬ中、サイトのカスタマイズに勤しんでおります、PITEで …

eb50698bfde81d02629bbd02850abecc1-1 (mini).png
【ブロガーの聖地】Dpub7に参加してきます!あばばばばわくわくが止まらない!!

ついに!念願だったあのDpubに参加してきます!PITE.です! Dpubって? …

server (mini).png
試行錯誤の上Sixcoreへサーバーを移転!そして新しいPC用ブログテーマを作成しました!!

ご無沙汰!PITE.です。 久しぶりの記事更新!(照 なぜこの一週間まともに記事 …

onpiece100kan (mini).png
ONE PIECEは何巻で完結する?100巻説と120巻説2つの予想。

ふぇぇ…暖かいよう… 春の訪れに誰よりも敏感。PITE.です。 実は僕、このブロ …