携帯アフィリエイト > 現在地

HP作成編[スマホ対応]

最終更新:2013年04月04日
対応させる訳
スマホでよく目にする光景と言えば『指で画面を横スクロール』『拡大縮小』させてる光景。あれ、PCサイトを観覧している状況なんです。『スマホに慣れた』又は『スマートフォン対応サイトを経験済み』ユーザーなら多分面倒な動作と思います(断言できませんが)。活字を読む時は重宝すると思いますが。
スマホ対応サイトであれば、横スクロールは勿論、拡大縮小などの動作も必要無いのです。
スマートフォン対応とは、上記の無駄な動作などを必要としないサイトを指します。
対応サイトに比べ未対応サイトの直帰率は比べものにならないと言う調査結果があります。成果を上げる為には、スマホ対応のHPを作成する必要があると言えるのです

HP作成基礎知識
  1. 縦長
    モバイルと一緒で縦長な作り
  2. HTML5
    上級者はHTML5と呼ばれるもので作成するのが理想。それ以外の方はHTMLやXHTMLで問題ありません。
  3. CSS3
    これマスターできれば、かなりスマホサイトに近づくんじゃないでしょうか。従来、画像を使用してデザインしていた事が、画像無しで構築できてしまうスグレモノ。勿論従来の CSSでも問題なし。
  4. 画面幅
    本体を横に倒せば横幅が320px→480pxとかに変化するウェブ職人泣かせなとんでもない奴。スマホの横幅が320pxだからと言って幅を320pxに設定した所で意味がありませんので。取り合えず下↓のタグをヘッド内に設置する事を推奨。

    このタグは画面幅を最適化してくれます。PCのブラウザは読み込まないので振り分けも不要。
  5. リンク
    スマホはタッチパネルに似たイメージなので、block要素でリンクを構築するのが理想かと。画像でボタン風でもいいんではないでしょうか。普通のアンカーリンクとある一定の範囲でリンクとでは使い易さが全然違うと思います。ましてや指でタッチですからリンク範囲は広いのに越した事はないでしょう。
    リンクをボタン風に見せるスタイルシートはこちら

激!お勧めHowTo書籍
iPhone Android スマートフォンサイト制作入門 iPhone Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
新品価格¥2,499
激!お勧めHowToサイト
■ASCII.jp
実践!iPhone・androidサイト作成マニュアル
■Allabout
ホームページ作成
驛Xマートフォン
スマホアフィリが熱い!
スマホ対応HP作成
┃┗CSS・リンクをボタン風…
スマートフォンSEO対策

Copyright © 2011-2017 HP作成編〜スマートフォン[スマホ]対応HP作成の基礎知識 All right Reserved.

TOPmono space