イナヅマTVログ

WordPressテーマ”Yoko”に学ぶスマートフォン対応CSS

| 0件のコメント

昨日(2011-06-09)当ブログのテーマをYokoに変更しました。
Elmastudio : Yoko
http://www.elmastudio.de/themes/yoko-wordpress-theme/
http://wordpress.org/extend/themes/yoko

ドイツ生まれのテーマです。
ご覧のようにPC, iPad ランドスケープでは3カラム、iPad ポートレイトでは2カラム、iPhoneでは1カラムスタイルのテーマです。
PCでもブラウザウインドウ幅を狭めると3->2->1とカラムが変化します。
グリッドのようなリキッドのようなデザインです。

HTML5
YokoはHTML5で作られています。
header, nav, footer, aside... などHTML5から登場したタグで構成されています。

CSS3
CSS3で新たに使用できるようになった :last-child 疑似クラスなどを使用しています。

スマートフォン対応
これが最大の特徴になると思います、Yokoはプラグイン無しの状態でスマートフォン、タブレットでの表示に対応しています。
しかも、ポートレイト表示・ランドスケープ表示にも対応しています。
JavaScriptに頼らずCSSだけで、です。

*IEのためにJavaScriptは使われています。

WordPressにはWPtouch, mobilepressなどの優れたスマートフォン対応プラグインがあります。
ただ、カスタマイズが難しくPCサイトともう1つ別のスマートフォンサイトを作る労力を強いられてしまいます。

もうひとつ、これらのプラグインを使用したサイトを利用した時に感じる違和感が常にありました。

どちらのプラグインも程度の差はありますがiPhoneアプリのようなデザインとインターフェースを実現・提供しようとしています。
良く出来ていますが所詮にせもの(Fake)です。

他にもスマートフォン用にSencha, jQuery Mobile, などのJavaScriptを用いWebアプリなのにネイティブアプリのようなインターフェースとデザインを採用するサイトも増えてきています。

OSレベルで実現しているUIを擬似的に作り出すのは似たものはできたとしても、どこかぎこちないものです。

それよりはスマートフォン・ブラウザで最良のデザインとUIを実現するために努力する方が良い気がしています。
iPhoneアプリと同じデザインと動きをWebにも求めるのは悪くはないかもしれませんが、少々短絡的に過ぎるのでは無いかと考えます。

うまい言葉が見つからないのですが、制作者として思考を停止しているように思えてしかたがありません。

Yokoのアプローチはとても新鮮です。
「できるじゃん」って話です。

スマートフォンといえどもブラウザで見ているのはWebコンテンツです。
重要なのはあの小さな画面でもストレスなく見ることが可能なことではないかと考えます。

アプリのようなデザインだけど使いにくいサイトを見たいわけではありません。

@media (max-width)で対応
Yokoはstyle.cssの中でモバイル端末の画面幅に合わせてCSSを切替えています。

style.cssの末尾に下記のようなmediaブロックの中でプロパティ値を変更しています。

/* --- iPad Landscape --- */
@media screen and (max-width: 1024px) {
}
/* --- iPad Portrait --- */
@media screen and (max-width: 880px) {
}
/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {
}

max-width : 620pxのブロックでiPhoneなどスマートフォンに対応するCSSを設定しています。
コンテナはpxではなく%で幅指定されているのでウインドウ幅に合わせてコンテナは伸び縮みします。

はでなエフェクトはありませんがブラウズするに困ることはありません、ただ単にPCサイトと同じ内容でレイアウトが違うだけです。
WPtouch, mobilepressなどでは一部情報が欠落してしまうこともありますが、Yokoではそれもありません。
これが本来のWebコンテンツのあり方のような気がします。

子テーマとしてはどうなの
で、どうなのYokoは最高なの?
と聞かれると答えにちょっと困ります。

少なくともYokoを親テーマにすることは可能ですが子テーマでのカスタマイズはたやすいようには思えませんでした。
style.cssでfont-familyの指定がなぜか多数記述されていてオーバーライドはめんどくさく思えました。
そんなにfont-familyの指定はいらなかったように思います。

制作者の趣味だと思いますがtext-transform:の多用は好きではありません。
font-style: italic;の多用も好きではありません。
私の好みの問題なのかもですが…

HTML5への対応もどうせならもっとガッツりしても良かったのでは無いかと思います。
HTML5への対応も不十分に感じられる部分もあります。

お勧めはしにくいのですがスマートフォンサイトを制作・企画する人に一度試して欲しいテーマです。

アプリのようにデザインし、アプリのようにエフェクトやトランジッシヨンを実装することだけが答えじゃないことが読み取れるのでは無いかと思います。

使いにくい扱いづらいと書きましたがテンプレートをダウンロードしてごちょごちょカスタマイズして公開するのに3時間ほどでした。
ブログレベルなら良い選択肢のひとつのように思います。

当然じっくり改造すれば企業サイトでも充分使用可能だと思います。

あるいはstyle.cssの中のヒントを使って新規にテンプレートを制作しても良いでしょう。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください