初めてのスマートフォンサイト制作で押さえておきたい12のポイント|集客・売上UPのWebマーケティング情報-シンクブログ

初めてのスマートフォンサイト制作で押さえておきたい12のポイント

iphoneだけでなくandroid携帯も、各キャリアからどんどん登場し、2011年はまさにスマホ元年という年になりました。

大手企業を中心にスマートフォン向けサイトもかなり普及してきましたが、全体としてはまだまだこれからという感じです。

スマートフォン専用でないWebサイトは、PCの表示レイアウトのままスマートフォンの画面サイズに縮小されます。

その場合、文字を読むのはなんとか読めたとしても、リンクをタップしたり、フォームを記入したりするときに不自由を感じてしまいます。

そうすると、離脱率が高くなり、PPCなどを多用している場合はコンバージョン率が大きく下がることがあります。
※アドワーズは、アクセス数減になりますがスマホの場合に広告を表示しない設定が可能です。
オーバーチェアは今のところできません。

これから初めてスマートフォンサイトを作成するという方のために、弊社がスマートフォンサイトを作成する際に気を付けている基本的なポイントをまとめました。

フレームやページ内スクロールは使用しない

フレームやCSSでのページ内スクロールは、スクロールバーが表示されないため、使わないようにしましょう。

1画面は横サイズ320px、縦サイズ416pxを基本に

解像度が高い機種がどんどんできていますが、基本的には1画面を320px×416pxとして構成しましょう。

ファーストビューでは、上部にURLのフィールドが表示されるため、320px×356pxになります。

タグ内に下記の記載を入れると、自動的に表示をなくすことができ、ファーストビューも320px×416pxで表示できます。

<script charset="utf-8" type="text/javascript">// <![CDATA[
	window.onload = function(){
		setTimeout(function(){window.scrollTo(0,1);},100);
	}
// ]]></script>

全体的にフォントサイズを大きく。メインフォントは14px、16pxぐらいが目安

PCサイトでは基本のフォントサイズが12pxぐらいのサイトが多いですが、スマートフォンサイトは14pxから16pxぐらいをおすすめします。

メニューやバナーの縦幅は40pxがのぞましい

iphoneアプリのコーディング推奨では、縦44pxになっています。
指でタップすることを考えて、メインのメニューやバナーの縦幅は40px以上は確保しましょう。

場合によってaタグには、CSSで display: block; を入れて、タップ範囲を大きくしましょう。
参考サイト:http://www.htmq.com/style/display.shtml

リンク部分が一目でわかるように

PCサイトの場合は、マウスを画像やテキストにのせたとき、ロールオーバーや色の反転でリンク部分がわかりますが、スマホサイトは押してみるまでリンク部分がわかりません。

そのため、ボタンはボタンらしく、リンクはアンダーライン等を入れ、すぐにリンクとわかる配色にしましょう。

罫線をうまく使って、リンク範囲をわかりやすく

スマホではロールオーバーができないため、項目の一覧やリンクメニューは罫線を使って、リンクの範囲をわかりやすくしましょう。

アプリのようにアイコンかするのも効果的ですが、作成する手間を考えると、企業サイトでは罫線で十分です。

PC感覚で表示できても、通信速度は携帯と同じ

表現力はPCでの表示におとらないため、画像やJAVAスクリプトを多少してしまいがちです。

しかし実際の通信速度は、光やADSL、Wifiなどで使用する環境より格段に遅くなります。

そのため、できる限り1ページの容量を少なくするように気を付けましょう。

画像は元画像から横320px以下にする、JAVAスクリプトの呼び出しも圧縮ライブラリを使い、使用するJSファイルも最低限にすることでかなり削減できます。

ヘッダーに記入すべき要素

スマートフォンのブラウザを制御する上で、最低限入れておいた方がよいタグです。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

各要素はこちらを参考に。
http://www.minimo.jp/?p=308

iphoneでは、電話番号らしき数字をみつけると勝手にリンクをつけるので、metaタグでOFFにします。

<meta name="format-detection" content="telephone=no">

丸角やグラデーションはHTML5とCSS3を使用して表示

iphoneやandroidは、次のHTML規格であるHTML5、CSS3が使用できます。

特にデザイン部分では、CSS3で追加された角丸や要素の並び順等での属性変更、グラデーションなど、ページの容量を少なくしながら、表現力や分かりやすいリンクボタンなどを作ることができるため、必ず理解しておきたい部分です。
CSS3での角丸とグラデーション

リンクでの遷移よりも1ページ内のスクロールで

このポイントは賛否両論あると思いますが、個人的には、携帯環境での遷移による待ち時間は非常にストレスがたまります。

スマートフォンは、1画面に表示できる内容が少ない代わりに、指でのスクロールは、PCほど面倒ではありません。

できる限り容量を抑えられれば、1ページに多くの情報を掲載して、通信が弱いところや圏外でもある程度内容を見れるようにするのがよいです。

アップルが開発者向けに提供しているガイドラインを参考に

米アップルからiPhone向けアプリケーションのデザインをする上で様々なガイドラインが公開されています。

上記の内容でもそのガイドラインを一部参考にしているのですが、より詳しく調べたい場合は、Apple Developerに様々な情報があります。

特にUI(ユーザーインターフェース)については、アプリ向けのガイドラインですが、下記のドキュメントが参考になります。
iOS Human Interface Guidelines

フレームワークなどを使う

少しハードルが上がりますが、javaScriptのフレームワークなどを使うことで、アプリに近い動作をHTML5ベースで実装することが可能になります。

・jQueryMobile
http://jquerymobile.com/
jQueryUIに近い形で、HTMLにライブラリを組み込んで、CSS+JQueryで記述するタイプです。

スマホフレームワーク系では最もわかりやすく、ドキュメント等も最も多いので、比較的導入ハードルは低いと思います。

デモページも非常に見やすくなりました。
http://jquerymobile.com/demos/1.0rc2/

・sencha touch
http://www.extjs.co.jp/products/touch/
http://www.sencha.com/products/touch/

ほぼJSで書いていくため、ライブラリ以外の要素をHTMLでカスタマイズする場合に面倒です。

アプリのようなサイトを作るには最適です。

特にグラフ系のライブラリは圧巻です。

http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Combo/
http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Bar/
http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Area/

・winktoolkit
http://www.winktoolkit.org/

こちらもほぼJSで書いていくのですが、UIのエフェクトサンプルがかなりたくさんあるので組み合わせのみでそこそこ使えるかもしれません。

個人的にはゲームやツール系以外のコンテンツ系のネイティブアプリは、Webベースになると思っているので、今後もっと充実していくでしょう。

いろいろなサイトのスクリーンコピーをストック

iphoneだと、電源ボタン+ホームボタンで簡単にスクリーンコピーが取れます。

自分の好みのサイトを見つけたら、どんどんストックしましょう。

<< | HOME | >>
▲page top