eye-catch-150129
前置き

2014年4~6月期には、Yahoo! JAPANへのスマートフォンからの流入と、PCなどスマートフォン以外からの流入が逆転した。
宮坂社長が語る“ヤフーの役割”–「スマホファースト」2年半が経って – Marketers – CNET Japanより抜粋

業界的には話題になったので知っている方もいるかもしれませんが、媒体によってはスマートフォンなどからの流入数がPCより多くなってきた。今日は、その次代の中、他の方が作ったサイトをチェックしている時に知った目から鱗の話。

モバイルファーストではなくて、「スマフォファースト」のviewportの設定

Amitenでは「効率性よりも将来性がある技術を使う」という(わたくしが勝手に決めた)鉄の掟があります。理由は簡単で、そのほうが長く儲かるからです。(もちろん、使い倒していたものが突如開発終了してしまったり、また1年勉学をサボると過去のものとなったりで、まだまだ一喜一憂しているところで修行がたりないところですが。)

その中で有名だけど切り捨ててる考え方として「モバイルファースト」や「スマフォファースト」があります。えっ、と思う方もいるかもしれませんが、PCのみしか対応しないよ!ということではありません。なんせ、現在の弊社の売りはレスポンシブサイトをアタリマエとしてサイトを構築することです。

長くなるので割愛しますが、早くIoTとM2Mの時代来い!というわけ。まだまだ勉強不足ですが、コンテンツの情報設計デザインについて学ぶことは今後欠かせません。

しかしながら、(モバイルファーストは定義がアヤフヤすぎて好きになれませんが)実は「スマフォファースト」はとてもよい考え方だと思います。なんせ、スマフォからユーザーいっぱいきてるからスマフォに特化したサイト作ろうぜ!ということなので、とてもユーザーフレンドリーでシンプルな考え方です。

シンプルなの好きです。

今回ご紹介するviewportの設定方法は、調べてみると2010年ごろから使われていた方法です。想像以上に古かったが、スマフォファーストにマッチする可能性があるのでメモとして残すことにしました。

横幅640pxサイズで制作して横幅320pxに合わせてしまおうというviewport

簡単に説明すると、大きめに作ってスマフォサイズに変更しようという考え方です。

はい、このviewportで半分サイズが表示されます。後はjsのユーザーエージェント切り替えで、iphone(ipod)/Android以外は、スケール1のサイトを表示。なるほど〜です。ほぼスマートフォンでの表示のみに注力をすることで、制作効率が格段によくなり、コンテンツや情報設計やその他の重要事項に集中。結果優良なサイトが仕上がる。そして640pxというサイズは(デザインによっては)PCで見て問題ないサイズ。

欠点は…ざっと考えついたものは解決できそうですし、5年も前からある方法なので調べればでてくるでしょう。

スマートフォン対応へ集中すべき制作があれば、方法のひとつとして検討に入れてもいいなと、久し振りにワクワクした出来事でした。

page
1 / 1