[M]スマートフォンサイト制作！ミメモのスマホテーマ制作工程を一挙公開しちゃいます！

こんにちは！みう(@miu0512)です。日本がiPhone一色に染まろうとしている今日このごろ。もう「スマホ最適化」をしないわけにはいかないですよね！私も先日、スマホ用にテーマを１個つくりました。その制作工程を公開してみたいと思います。

スマホテーマを作るうえで私が意識したこと５つ

他の人のブログを見る時「ちょっとここ使いづらいなー」といった部分や「ココは真似してみたいな」という部分、ありませんか？　制作のコツはそこ！私はいくつかのサイトを見てみて、真似したいところを今回徹底的に取り入れてみました。

※順番が逆になりましたが、以下全部これから細かく記事にしてみようと思います！

１：いつも使っているRSSリーダーのようにシンプルでサッと読めるデザイン

私が使っているアプリは、以前ご紹介した「Reeder」。このアプリ、シンプルで読みやすい！文字だらけでも疲れないのでスキです。そんなRSSリーダーのように、文字を並べてもしっかり読めるようなスッキリしたデザインを心がけました。

２：ローディングを極力減らし、電波の悪い所でも問題のないページ送り

「次の記事を表示」ボタンを押すと下にひょこっと記事が表示される仕組みになっています。１表示５件でページ遷移なしなので、おまたせしません。ただあまりやり過ぎると上に戻るのが辛くなりますｗそんな時はフッターの「ページトップへ」をお使いください♪

３：CSS3をうまく活用して本当に必要な部分だけを常に見せるテク

サイト内にはいくつもの仕掛けを設置しています。ヘッダー部分の虫眼鏡をクリックすると上からするするっと検索バーが降りてきたり、右のカテゴリマークはもちろん、カテゴリが表示されます。

４：シェアのしやすさと「あとで読む」への遷移をカンタンに

記事にはバルーンのソーシャルアイコンを設置。ボタンよりも実はこっちのほうが好きです。特にスマホの場合、押す部分の高さは44px以上が推奨なので、それも考えるとバルーンの方がスマホに向いているのかも？

５：フォロー・いいね・RSS登録も常にフッター部分に設置してみました

ふわっと表示させることでローディングの手間を省きつつ、フォローしてもらいやすくできるよう頑張ってみました。

WP-touchではなく「テーマの切り替え」によってデザインを変える方法

スマホデザインを作る方法はいくつかあります。レスポンシブにするか、WP-touchをカスタマイズするか、テーマをデバイス別に切り替えるか。せっかくなので、私は「Multi Device Switcher」というプラグインを使い、テーマを切り替えることにしました♪

いざ！ミメモのスマートフォン制作工程を公開

１：【デザイン】トップ・カテゴリ・詳細デザインのラフを決める

スマホの場合横と縦を意識しなければならないので、とりあえず幅640pxでデザイン。ここで満足してしまったため、コーディングに移るのに時間がかかりましたｗ

２：【コーディング】デザインが決まったらHTMLでコーディング

まずはHTMLで全部組み上げてみます。プラグインを入れる前なので動作確認は未検証。

３：【WPテーマ化】WPの仕様に合わせて分割・タグ埋め込み

コーディングしたHTMLをWP仕様に仕上げます。あらかじめEvernoteにタグを入れておいて、どんどん置き換えていくのでそんなに手間はかかりません。

４：【テーマインストール】作ったテーマをWPに入れてプラグインで設定

ひと通りテーマが完成したら、いよいよWPに突っ込みます！通常通りのテーマインストールでOK。FTPであげるか、管理画面上でアップロードします。

５：【デバッグ】iPhoneとAndroidで実機確認

最低限自分の持っている実機できちんと見れるようにデバッグ。

テーマを切り替えるのに使用したプラグインはこちら

参考にさせていただいたサイト

さいごに・・・

実は、あとあと試したいこともあるため、色々とちょっぴり雑に仕上げています。近日中に、PCも独自テーマに切り替えようと思っています！これからも色んな動作を検証しつつ、記事を見に来てくれる方が読みやすいサイトを作っていきたいと思いますー。

最後までお付き合いいだだきありがとうございます！これからも、みう(@miu0512)を応援していただけたら嬉しいです！