●スマホサイト制作のキモ

うちも、スマホ専用のHPを作んなきゃダメかな〜、
と思っている会社や自営業のHP担当者、沢山いらっしゃると思います。
 
★★スマホの普及率
 
でも待てよ〜、スマホの普及率って、今どの位なの？
 
この普及率。発表する団体によってマチマチなんですね〜。
 
まずは、大御所グーグルが公開した普及率は、25％。2013年2月時点
http://news.ameba.jp/20131008-408/
日本はまだまだガラケーが主流！だそうです。
電車の中とかは、ほとんどの人がスマホなんですけどね〜。首都圏だけかな。
 
IDC Japanの調査だと、普及率は、49.8％。2013年6月時点
http://www.itmedia.co.jp/news/articles/1310/04/news128.html
ぜんぜんグーグルと数字が違う。こっちの方が近いように感じますが。
調査方法が何か違うのかな〜。
 
 
★★モバイル人の傾向
 
僕の周りのモバ人達は、だいたい以下の４つの派に分かれるみたいです。
 
※スマホ１台で充分でしょ派
※タブレットとガラケーの２台持ち派
※超薄型PCとガラケーの２台持ち派
 
そして、マニアックなモバイラーは
※タブレットと、スマホと、超薄型PCの３台持ち派
 
Kindle のアプリ入れて、Amazon からマンガや小説をダウンロードしたり
UULA や HULU とかで映画を観るには、スマホだとちょっと眼が辛い。
やっぱり最低、タブレットの画面が欲しくなる。
 
事務所でも家でもスタバでも仕事がしたい派だったら、
MacBook Air や ASUS TAICHI や
Microsoft Surface(Pro2)と、ガラケーかな。
 
CPUも今やみんな Core i5 以上だから、少し前のAdobeCSだったら
多少グラフィック系が弱くても、PhotoShopだって動くし。
 
 
★★スマホサイト制作で気を付けるキモ
 
よく誤解している人がいますが、普通のPCサイトもスマホサイトも
同じHTMLとCSSで制作することができます。サーバーも同環境が使えます。
 
また、WordPress とか Movable Type 等のCMSを使いこなせば、
プラグインを使用する事で、PCサイトもスマホサイトも、
一緒に自動的に制作する事も可能です。
（CMSの使い方を覚えるのがちょっと大変だけど）
 
HTMLとCSSで作る場合、PCサイト制作と違うところ、
気を付けるところがいくつかあります。
 
★まずは、左右の幅
 
PCサイトだと、最近は左右1000pixel（以下px）位で制作しますよね。
YahooのTOPの左右幅が、その時代のモニター解像度を反映してると思います。
スマホの場合は、左右320px〜640pxってところです。
 
スマホの解像度も年々高くなって来ました。
iPhone 5 ですと、4.0インチで、640×1136pxの解像度があります。
Galaxy Nexus ですと、なんと4.7インチで、720×1280pxの解像度。
解像度だけ見てると、これってもうパソコンのモニター並みですよね。
 
2013年10月現在では、左右640pxで制作していいと思います。
 
ただし、スマホの場合は、機種によってモニターの解像度はバラバラですし、
しかも、横にして左右幅を大きく表示する事が出来るので、
左右幅はPCサイトのように、固定にしないほうがいいでしょう。
具体的には、左右を指定しなかったり、widthを100％にするとかです。
 
そして、とりあえず、おまじないのような
以下のMETA一行をヘッダー内に記述しましょう。
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no">
 
META文の中の「content="width=device-width」がキモで、
これは、アクセス者のスマホの横幅で表示せよ、との命令です。
 
これにより、どんなスマホでアクセスしてきても、適切な横幅で
表示する事が出来るようになります。（何故かうまくいかない場合もある）
 
ちなみに、最後の「user-scalable=no"」は、
ピンチ（指での拡大や縮小）を禁止する命令です。
今の人気スマホサイトの大半には、
このMETAの1行がソースのヘッダーに入っています。
 
★ボタンの大きさ
 
PCの場合は基本、マウス操作なので小さなリンクボタンでも問題無いのですが、
スマホは基本、指でのタップですので、リンクボタンは極端に大きく作ります。
 
よく言われるのは、最低44px×44px以上にせよ！ ですが、
もっと大きなリンクボタンでもいいと思います。
 
よくあるのは、天地が50px位で、左右は画面目一杯の長さ、
のボタンが上下に並んでいるようなものです。
 
★Flashの扱い
 
◎アクセス側の解決策
 
Android系スマホはFlashが見れますが、iPhoneでは基本Flashが見れません。
（将来は見れるようになる？ 技術的というよりアプリの利権の問題ですし）
 
アクセス側の解決策としては、ブラウザに Puffin の使用をお勧めします。
このブラウザだと、iPhone上でもFlashが動いてしまいます。
 
以前は動きがカクカクしてましたが最近はスムーズに見れるようになってます。
App Storeから無料でダウンロード出来ます。
 
◎制作者側の解決策
 
・代替の静止画像
スマホサイトの制作者側の解決策としては、
代替の静止画像を用意しておくのがいいと思います。
 
Flashに準拠してないクライアント用に静止画像を見せる方法は簡単です。
Flashを表示させるコードに以下を追加記述するだけです。
 
Flashのファイルが「top.swf」、代替画像が「top.jpg」だとすると・・・
 
<object data="top.swf" type="application/x-shockwave-flash"
style="width:800px; height:300px;">
<param name="movie" value="top.swf">
<img src="top.jpg" width="800" height="300">
</object>
 
・jQueryでのスライドショー
どうしても動画の雰囲気を出したい場合は、jQuery（Jクエリ）という
JavaScriptのライブラリを使って、
何枚かの画像を連続表示させてもいいかも知れません。
 
jQueryの使用は、Flashに準拠にしないiPhoneにも有効です。
jQueryでの画像のスライドには「bxSlider」というプラグインが有名です。
無料でダウンロード出来ます。
 
jQueryで「bxSlider」を使うには、以下のページの解説が分かり易いです。
http://wp-and.me/bxslider/
 
 
★ロールオーバー
 
PC用のHPですと、リンクボタンやテキスリンク上にカーソルを置くと、
ビクっと動いたり、色が変わったりする機能があります。
これを、ロールオーバーとかマウスオーバーとか呼びます。
 
当然ですが、スマホでは、リンク上にカーソルを乗せる事と、
リンクをクリックする事が同時に行われます。
ですので、スマホサイトにおいてはロールオーバーは使えません。
 
★PCサイトからの誘導
 
PCサイトにスマホからのアクセスがあった場合、強制的にスマホページに 飛ばす事もできますが、スマホでPCサイトを見たい人もいるので、 アクセス者に選択させる方がいいと思います。  
具体策としては、PCサイトのTOPのindex.htmlのヘッダーに、
以下のJavaスクリプトの記述を追加すれば、スマホでのアクセスに対して
ブラウザ上に、スマホサイトへの導線の小窓が開きます。
 
「http://www.abcd.com/sp/」がスマホサイトのURLとすると・・・
 
<script type="text/javascript">
if (document.referrer.indexOf('abcd.com') == -1 &&
((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0)) {
if(confirm('「当サイトにはスマートフォン用のTOPページがあります。
\n表示しますか？')) {
location.href = 'http://www.abcd.com/sp/';
}
}
</script>
 
 
★★最後に
 
以上が、スマホサイト制作で気をつけるキモでした。
この他にも、色々なスマホに特化した仕様はあるのですが。
 
とりあえず上記に気をつければ、PCサイトのHPを作った経験のある人だったら
そんなに苦労なく、スマホ専用のサイトも制作出来ると思います。
 
あとですね、僕が思うには・・・・
 
この先もどんどん、スマホの解像度は上がっていくだろうし。
スマホ・タブレット・PCノートの格差は、逆に縮まるだろうと思っています。
もしかしたら、スマホよりもタブレットの方が普及するかもしれない。
 
そうなると、わざわざスマホに合わせた専用サイトを焦って制作しても
そんなに意味がないかもしれません。外注すれば、制作費もかかりますし。
 
そんな環境の変化の中で、
僕は「Apple」の制作ポリシーに、ある種、斬新性を感じたりしています。
 
実は、Appleには、スマホ専用サイトって無いんですよね〜。
 
「考察：Appleはスマホサイトを作らない。」
http://www.pxt.jp/ja/diary/article/257/index.html
 
 
▼▼▼▼
スマートフォンサイト作成テンプレート「スマテン」デザイナーズプラン
スマホサイトを作成する為の高機能テンプレート
スマートフォンサイトを作成するための高機能テンプレートと
プロのデザイナーによる画像制作サービス付き!
 
 
 
(2013/10/30記)
 
 

facebookへ twitterへ

 
 
FX比較ランキング  

動画パソコン教室
SEOマニュアル

 
TOPに戻る
オススメの教材

▼最近の記事です。

TOPに戻る

▼このＨＰに連動した、メルマガも発行させてもらっています。もし気分が乗ったら、登録してもらえれば嬉しいです。

メルマガ購読・解除
【超初心者】からのインターネット講座
   
バックナンバー
powered by まぐまぐトップページへ

田中の初心者向けアフィリエイト講座へ

レスポンシブ・デザインに対応したHTMLデザインテンプレート

☆リンク集