以前作っていたスマートフォン用壁紙配布サイトの「Wallpaper Collection(作ったときに書いた記事はこちら)」をリニューアルして、Android用待ち受け配布サイト「Android Wallpaper」を作りました!
って作ったのだいぶ前なんですけどなんだかんだで全然ブログ書けてなくて今になりました…。
Future SyncのこととUX勉強会のこととあとずっとあたためてる好きなフォントの記事も書かないと!というわけでちゃっちゃといきます!
2年前にWordPress + jQuery Mobileで作っていたものを作り直しました。
Wallpaper Collection(作ったときの記事はこちら)は、jQuery Mobileを使ってみたくて、自分ではまだスマホを持っていないにもかかわらず実験的に作ったサイトでした。
当時AndroidとiPhoneの待ち受けの仕様の差を知らずに作ってました
いろんな端末に対応できるようにと、それぞれの端末用にサーバー側でリサイズして画像を出力するような仕組みにしていたのですが、前述の通り作っていたときは実はまだガラケーだったのでAndroidの壁紙の仕様を全く知らず…。
当時はiPhoneでもAndroidでも、画面の解像度と同じサイズの壁紙を用意すればいいと思っていたのですが、実はそうではなくて。
Androidは横が待ち受けの倍サイズの壁紙がいるんですよね。
(機種によっては画面サイズの壁紙を固定で表示させられる機種もあるのですが)
それを知らずに縦長の元画像を用意していたためにAndroidでは正方形に切り取る際に上下をばっさり切り取ることになってしまっておかしなことになり…。
気付いて直そうにも、iPhoneは縦長、Androidは(正方形に近い)横長で
「どっちで切り取ってもおかしくない元画像の選定」というのが大変だということがわかったのです。
で、今回もうAndroid専用にしました
その後、Androidデビューしまして(携帯docomoなんです)
結果Android優先のサイトになっていたので、iPhone用の待ち受けサイトはよく見るし、差別化のを計るためにAndroid専用にしてリニューアルしました!
WordPressのis_mobile関数で表示を切り分け
今改めて基本はモバイル専用サイト、でもPCでもある程度同じように見せたい…というときどうするのが一番いいかいろいろ考えた末、とりあえず今回のリニューアルでjQuery Mobileはやめることにしました。
かわりに、基本は携帯で見ることを前提にコーディングして、
WordPressのis_mobile関数を使ってPCでの表示のときだけ、サイドバー等を出していろんなご案内を出すような作りにしてみました。
PCでみたらこんな感じ
スマホで見たら真ん中のコンテンツ部分だけ
この関数ひとつで基本モバイルに最適化させつつ、PCでは追加のご案内も出せるように作れました。
超簡単…。
相変わらず便利ですねWordPress。
端末別壁紙サイズ一覧を作ったらアクセス数が増えました
余談なのですが、アンドロイドの端末別壁紙サイズの一覧というページを用意したらなぜかアクセス数が増えました。
調べてみたら結構「機種名+待ち受け」で検索している人も多いみたいで、このページのおかげでそういう方たちにきてもらえているようです。
ちなみにこの一覧は3社の公式サイトの情報全部調べて作りました。
統一されてなくて見るの大変でした…。
ちなみにauのサイトが一番スペック情報調べやすかったです。
スマホのコーディングなどはこちらの本で勉強させていただきました!
スマホサイトのルール的なもの(画面解像度やらいろいろふくめて…)全然追いかけられていなかったのですが、まぼろしの松田さんが書かれた「現場のプロが教えるスマートフォンサイト 制作ガイドブック」を読みながらいろいろと調べてつくることができました!
最近いろんな情報を追えていなかったのでとても勉強になりました!
松田さんはイベント等で何度かご一緒させていただいたことがあるのですが、Webデザインはもちろんのこと発表時のスライドのデザインなどもホントにすべて美しくてものすごく尊敬している方です。
松田さん、素敵な本をありがとうございました!!
[tmkm-amazon]4798129216[/tmkm-amazon]
紹介していただきました
鮮やかな色のスマホ用壁紙が無料でダウンロードできるサイト!! | キノめも
こちらのエントリーですごーく丁寧に紹介していただきました!本当にありがとうございます><
というわけでリニューアルのご紹介でした☆
まだまだすごーく少ないのですが、更新頑張りますのでよかったらみてみてくださいね♪
Android Wallpaper -無料のAndroid用壁紙-
ではまた☆