monograph

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

21
30
7
23

   

レスポンシブ (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

total

81

share!

シェアしてくれるとめっちゃよろこびます。

teaparty

  関連記事

WP高速化.jpg
たった数分でWordPressのサイト表示を劇的に高速化してくれるWPプラグイン4つを紹介。WP使いなら必ずチェック!

ども!PITE.です! 昨日いつものように何気なくGoogle Adsenseの …

pocket (mini).png
「pocket」のWordPressブログへのボタン設置方法。そしてわかった衝撃の事実。これは無視できない。
IMG_6140 (mini).png
Number333用ブロガー名刺を作りましたー!前川企画印刷さんありがとうございます!

ふええ…電車あったかいよぅ…PITE.です… 今週の土曜に開催される「Dpub7 …

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

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

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

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

IMG_5709-mini.png
【2013年】 Number333新年のご挨拶

あけまして、おめでとうございまーす! 2013年は元旦から38度越えの熱を出して …

images.jpeg
【Google adsense】CTC・CPC・RPMとは?解説します!

アクセス数も伸びてきたので@するぷさんの和洋風を参考にGoogle Adsens …

これはマジでブロガー必読!!ブログの極意を詰め込んだ「必ず結果が出るブログ運営テクニック100」!!【プロブロガーへの道】

『こんなに大事なことがここまで具体的に書かれているとは・・・。』 僕がブログを始 …

NewImage.png
Google AnalyticsとGoogleカスタム検索を関連付ける(リンクさせる)方法を解説いたします!

以前書いた、「WordPressにGoogleカスタム検索バーを導入してみたので …

早稲田大学ビジネスコンテスト003.png
第15回早稲田大学ビジネスプランコンテストで優勝してきました。

何時でもおはようございます!PITE.です! 以前書いた『第4回「試す」appl …