WordPressの子テーマの仕組みを使ってウェブサイトをスマホ対応させてみた

iPhone5
最近ではスマホ対応ウェブサイトが多くなってきている。

基本的に、飲食店などのようにお客さんが来店する形態のお店のウェブサイトの場合、お客さんは来店する途中などにスマートフォンから定休日や地図を確認することが多いため、ウェブサイトをスマホ対応にさせることには大いに意味がある。

要するに、パソコンからのアクセスの場合とスマホからのアクセスの場合とで訪問者の目的が違う場合には、スマホ対応させて各目的ページへの導線を最適化させることに意味があったりする。

WordPressの子テーマの仕組みを使ってスマホ対応化

上記のような理由から言えば、本来は私のウェブサイト(http://www.1-firststep.com/)をスマホ対応にさせる意味はあまりないのだが、練習の一環として対応させてみた。

スマホ対応のやり方はいろいろあるが、今回はWordPressの子テーマを使うやり方での対応である。

スマートフォン対応前 (iPhoneのSafariから)
スマートフォン対応前のウェブサイト
スマートフォン対応後 (iPhoneのSafariから)
スマートフォン対応後のウェブサイト

上記のようにスマートフォンからのアクセスの場合は画像を一切使用しないことにした。
理由は簡単だ。
外出先でのスマートフォンからのアクセスでは通信速度の関係でページの表示に時間がかかることが予想されるからである。(特に3G回線の場合)

また、ユーザービリティ向上のためにJavaScriptもちょこちょこ使用していたが、どうもスマホのような性能の低い端末からだと処理が遅れることが見受けられたので、スマホからのアクセスの場合は必要のないJavaScriptは使わないことにした。
スマホからはページ内に書かれている内容さえ読めればいい。というスタンスである。

メニューボタンなどはもう少しきちんと作り直したいと思っているが、今日は疲れたのでこれでいったん終了である。
また気が向いたら直します。
とりあえずコンテンツは見れるからいいでしょう。
さらに気が向けばこのブログもスマホ対応させるかもしれません。(2014年7月20日にレスポンシブでスマホ対応させました)

2013年11月1日追記:Android端末からの動作確認の際スライドメニューの不具合が確認されたので、現在は一時的にスマートフォン対応を解除しています。
不具合を修正したらまたスマートフォン対応を再開します。