【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介

このブログはスマホ表示時には、便利なWordPressプラグイン「WPtouch」を利用していました。しかしついにスマホ専用テーマを制作しました。そこで気をつけた点や役立つツールなどを紹介します。

ゆめぴょんです。こんちはっ(^^)/

2014年ですね。あけましておめでとうございます。今年の初投稿としては遅くなりましたが、ブログの裏側は年末年始もずっと触っていました。

そしてスマホ専用テーマがほぼ完成したので、1月3日から稼働させています。表示速度、配色や行間、Retina対応など微妙な部分も残ってるので、少しづつ改善していきます。

試しにGoogleのPageSpeedを実行してみました。するといきなり高得点の「81点」。ちなみに改善が必要な点はソーシャルボタンなど自力では難しい部分ばかりです。実質の最高点かも。

WPtouchをやめて、スマホ専用テーマにした理由

主な理由は次のとおりです。

1. WPtouchカスタマイズに限界を感じたから
2. WPtouchデザインは同じで特徴がないから
3. デザイン・SEO・操作性を好みにしたかったから
4. スマホテーマ制作を実践で学びたかったから

「WPtouch」は誰でもすぐにスマホ対応できる超便利なWordPressプラグインです。スマホ専用テーマを作る人も、レスポンシブにする人も、対応できるまではWPtouchを利用することをおすすめします。

しかしWPtouchにも欠点はあります。テーマのカスタマイズが面倒です。バージョンアップのたびに対応する必要があります。それにデザインが画一的で個性が全くありません。

ブログを書いているからには、PV（アクセス数）も増やしたいけど、それ以上に「個性」も主張したいです。今のところ記事内容では「世界旅行術」だけが個性的と思ってますが、デザインにもこだわりたいです。

私がスマホ専用テーマ作成で気をつけた点

設計思想・デザイン・使うパーツなどは人によっていろいろ好みが分かれると思います。次に挙げる点は、私が今回考慮した内容です。

1. 記事を最優先。余計なパーツは隠す
2. リンクはわかりやすく大きく
3. 画面遷移を少なく
4. デザインもコードもシンプルに！
5. カスタマイズしやすいように設計
6. どのページでも同じ操作仕様に
7. HTML,CSS,JavaScriptのコード量を減らして高速化
8. なるべくプラグインに頼らない

実は最初はレスポンシブも考えテストしてました。しかしコードが肥大化したり、非表示にした部分も読み込まれるのが気になりました。専門知識がないのなら軽量化・高速化にはスマホ専用テーマを制作するのが一番だと思いました。

スマホ専用テーマ制作の工程と役立ったツール類

それでは今回のテーマ制作の簡単な工程と、利用したツール・サービスなどを紹介します。設計思想・デザイン方法・機能の詳細などについては次回以降の記事で書いていくつもりです。

1. ローカルでHTMLでデザイン

今回は元にしたテーマもなく、ゼロの状態から作り始めました。大まかなデザインはローカル環境でHTMLで仕上げました。私はHTMLもCSSもJavaScriptもPHPも「Sublime Text 2」というエディタで制作しています。

このエディタで気に入っているのは「動作が軽い」「カスタマイズが柔軟」「コード補完・配色」「コードエラーの検出」「保存→圧縮→サーバへ転送の自動化」「ゆるいプロジェクト管理」など。いずれ記事で紹介します。

2. WordPressテーマファイルに分離してテスト

HTMLでイメージが完成後は「header」「footer」などを分離しました。そして動的生成の部分（サイト名、カテゴリー、URL、タイトルなど）をPHPに書きなおしました。

テーマファイルは「funtcions.php」「style.css」「index.php」「single.php」「header.php」「footer.php」があれば最初は充分です。これらを「/wp-content/theme/」の新フォルダへコピーします。

ここからのテストは、WordPressプラグイン「Theme Test Drive」を利用しました。最初はローカルやテスト環境での試行でもいいけど、このプラグインを使えば実機と同じ環境でテストできて重宝しました。

特にカスタマイズ済の他のプラグインや記事データなどを多用するようなテーマ作成には、とても便利です。メリットや使い方は上の記事を参考にしてみてください。

3. バグ・エラーなどを除去

修正と確認を繰り返しながら、可もなく不可もないような形にまで仕上げていきます。そしてある程度完成してきたら、バグ・エラーを早期発見してつぶしていきます。

まずタグ閉じ忘れなど簡単なエラーは上の「Sublime Text 2」で充分です。次に生成されたHTMLソースを「HTML Lint」と呼ばれるチェックサービスで確認しました。

⇒Another HTML-lint 5

このサービスで基本的なHTML5のエラーやルール違反などはチェックできます。HTMLのエラーはグーグルも採点してるそうなので、1度は確認しておいた方がいいでしょう。

ちなみに現段階でもこのソースは落第点です（涙）。しかし致命的なエラーは修正済みです。あとの箇所はOGPやソーシャルボタンなどはずせない部分や、画像タグに関する部分が残っています。少しずづ改善していきます。

CSS（スタイルシート）に関しても次のツールでチェック済みです。

⇒CSS Lint

WordPressテーマについてのチェックプラグイン「Theme Check」も利用しました。詳細は別記事で書きますが、非推奨の関数などがチェックできます。正式テーマにする前にはこれでのチェックが必須だそうです。

4. いざ公開！いろんな端末で確認

致命的なバグ取りなどが終わったら公開です。私の場合はまず「WPtouch」の有効化を解除しました。解除の前に「PageSpeed」など計測を済ませておくと良いかも。

念のため「Theme Test Drive」も解除します。そして「Multi Device Switcher」でスマホテーマに今回の新テーマを設定しました。標準ではAndroid タブレットはスマホ扱いされますが、下記事のとおり設定すれば問題ありません。

これで無事に公開できました。iOS、Android搭載の実機で確認してみると、フォントの大きさや行間、配色などがイメージとは違う場合もあるので、気のついた部分から修正していけばいいでしょう。

特にAndroid端末は機種によって見え方が全然違うので、家族友人のスマホなど多くの機種でチェックした方がいいかも。

チェック＆トライを繰り返す時には、PC/Macからの方が効率がいいです。その時のチェックにはChrome拡張機能「User Agent Switcher」が便利でおすすめです。iPhone、Android以外のOS・ブラウザでの表示も見れます。

まとめ：今日のゆめぴょんの知恵

スマホの新テーマ、気に入って頂ければうれしいです。あっと驚く仕掛けや、それほど個性的ではないけど、速く読みやすくなっていれば、とりあえずは成功です。しばらくは改良を続けます。そして次はPCテーマ制作です！

今回はスマホテーマ制作の流れを簡単に紹介しました。次回からは実装した機能・SEO対策やコードなどについて説明していきたいと思っています。SEOについてすぐ読みたい方はこちらの記事を参考にしてください。