monograph

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

0
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

60

share!

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

Monograph goods in bag23 teaparty

  関連記事

NewImage.png
【アップデートには要注意!】WordPress3.4でプラグイン「Auto Post Thumbnails」を使う方法!

こんにちはー!PITEです! 色々データベースのバックアップ関連が片付いたのでや …

【Blog】やったー!!「覚醒する @CDiP」で記事が紹介されたよー( ;∀;)!しかも2つも!

あのiPhoneブログ界のおまとめ役とも言えるサイト「覚醒する @CDiP」でN …

Number333 2012-06-12 15.56.00-1.jpg
Googleのカスタム検索バーを自分のサイトに合わせてカスタマイズする方法解説します!

前回の記事、WordPressにGoogleカスタム検索バーを導入してみたのでそ …

feedburner.png
簡単な設定で定期購読者を増やそう!フィードバーナー(Feedburner)の登録とRSS登録ボタンの設置方法。

実はこのNumber333、最近までWordPressの不具合でRSSフィードが …

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

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

IMG_6140 (mini).png
Number333用ブロガー名刺を作りましたー!前川企画印刷さんありがとうございます!

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

Number333 2012-10-04 1.40.28-1.png
【サイト表示高速化】PNGを透過を残したまま大幅に圧縮してくれる無料Macアプリ「ImageAlpha」がメチャクチャ使えて泣きそう。

はいー…!PITE.です! 現在このブログ、Number333の高速化に取り組ん …

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

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

why-bother-blogging-fastblink (mini).png
1年と3ヶ月で月間100万PVを達成した僕の”超”具体的なブログ運営方法。

今日も今日とてこんにちは!PITE.です! 先月ありがたいことにNumber33 …

IMG_6011-1-1_2 (mini).png
【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを縮小・拡大できます。

オハヨーゴザイマス!PITE.です! 今月の頭にWP touchを卒業し、オ …