miMemo(ミメモ)

Web制作

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

20130919110209

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

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

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

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

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

20130919103147

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

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

20130919103207

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

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

20130919103322

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

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

20130919103149.png

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

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

20130919103148

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

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

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

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

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

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

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

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

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

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

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

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

5:【デバッグ】iPhoneとAndroidで実機確認

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

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

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

さいごに・・・

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

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

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP