アダルトサイト作成

アダルトサーバ

アダルトASP

よくある質問

お役立ちテクニック

相互リンク

スマートフォン対応

概要概要

PCサイトの作成が完了したら、次はスマートフォン向けのサイトを作成すると効果的です。管理人のサイトでもスマートフォンユーザが全ユーザの22%を占めており、スマートフォン対応は、収入の底上げには必須項目となっています。

なぜスマートフォン向けのサイトを作成すると効果的かというと、スマートフォンは、画面解像度や通信回線の速度等の制限が存在し、またタッチパネル操作等の特性から、PC向けのサイトが必ずしも快適に閲覧できるとは限らないからです。文字が小さい、操作し難いサイトを訪問者が気に入って見てくれるはずがないと思いませんか?

「サイトを快適に閲覧できるようにすること」=「訪問者があなたに収入をもたらす確率を上げること」に繋がるのは容易に想像できると思います。


スマートフォン対応スマートフォン対応

実際にどうやってスマートフォン対応するかといいますと、もう1つサイトを作成する必要があります。CSSで表示方式を変える方法もありますが、PCサイト、スマートフォンサイトで同じ内容を表示させることは避けたほうが良いです。なぜなら、上記で述べたように画面解像度や通信回線の速度等の制限上求められてくるためです。PCサイトと同じ量のコンテンツを詰め込むことはせず、自サイトのコンテンツをピックアップして作成しましょう。

PCサイトを作成できた方なら、スマートフォンサイトの作成も容易に作成することが可能です。作成の要領は、PCサイトとほとんど変わらないため、ここでは記載必須タグ、注意点を中心に説明していきたいと思います。


viewportによる画面全体のサイズ指定viewportによる画面全体のサイズ指定

viewportとは、表示領域のことです。HTMLにMETA要素としてviewportを指定することにより、Webページの幅、高さ、拡大倍率等を訪問者にどのように表示するかを指定することが可能になります。

META要素に下記を追加します。

<meta name="viewport" content="XXX,XXX">

viewportには下記の値が設定できます。

指定要素 意味 デフォルト値 選択値
width 横幅 980px 200px~10000px
height 縦幅 自動 233px~10000px
initial-scale 初期状態の拡大率 1.0 minimum-scale~maximum-scaleの範囲内
user-scalable ユーザー操作による拡縮の許可 yes yes,no
minimum-scale 最小縮小比率 0.25 0~10.0
maximum-scale 最小拡大比率 1.6 0~10.0

例を挙げると「横幅はデバイスに準拠、ズームはさせない」設定は下記になります。

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


数字の電話番号置換機能停止数字の電話番号置換機能停止

Apple系統のデバイスは、数字の羅列が存在すると電話番号に置き換えてしまう機能が存在します。その機能を停止させるために、下記をMETA要素に追加する必要があります。

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


レイアウトレイアウト幅

スマートフォンサイトのレイアウト幅は、端末毎に画面サイズが様々であるため、リキッド(可変幅)で作成しましょう。サイト作成時の標準レイアウトは、横320px、縦480pxで作成します。スマートフォンをお持ちの方は、横画面にした際にどのように表示されるかも合わせて確認しながら作成すると良いです。


サブドメイン、サブディレクトリどちらで作成するのが良いかサブドメイン、サブディレクトリどちらで作成するのが良いか

現在、検索エンジンはPC用、スマートフォン用で分かれていません。スマートフォンで検索をした場合も、PCサイトと混在して結果表示されます。基本的にPCサイトのほうが情報量、SEO的にも勝っていることが多く、上位表示され易い傾向にあります。検索結果は、PCサイトを利用して、そこからスマートフォンサイトに誘導するのが効果的です。

そこで、サブドメイン、サブディレクトリのどちらのスマートフォンサイトに誘導するのが良いのかというと、基本的にサブディレクトリで作成することをお勧めします。

サブドメインで作成した場合は、PCサイトで築き上げたもの(情報、SEO等)を無視して、ほぼ1から作り上げることと同じになります。PCサイトとまったく異なる内容を表示する(PCサイトの情報資源を利用しない)、対外的にドメインを取得する必要がある(企業等のドメイン知名度向上)等の理由がない限りは、サブディレクトリで作成しましょう。


PCサイトから誘導方法PCサイトから誘導方法

PCサイトからの誘導方法ですが、大きく2パターン存在します。ユーザエージェントを判定して指定アドレスに飛ばす方法になります。「iPhone」、「iPod」、「Andoroid」、「BlackBerry」に対応しています。

javascriptのサンプルを下記に示します。

  • 自動振り分け
  • PCサイトにアクセスしてきたスマートフォンユーザを自動的に指定サイトに振り分ける方法です。

    <script type=”text/javascript”>
    if(navigator.userAgent.indexOf('iPhone') > 0
      || navigator.userAgent.indexOf('iPod') > 0
      || navigator.userAgent.indexOf('Android') > 0
      || navigator.userAgent.indexOf('BlackBerry') > 0)
    {
    location.href = 'スマートフォンサイトアドレス指定 ※変更';
    }
    </script>
    

  • 任意振り分け
  • PCサイトにアクセスしてきたスマートフォンユーザに指定サイトへの移動可否を確認してから振り分ける方法です。記述HTMLが呼び出されるたびに表示されるのを防ぐために、リファラー(記述HTMLに訪れる前のアドレス)を判定して「自サイトドメイン」だった場合、表示しない仕様となってます。スマートフォンユーザの中には、PCサイトのレイアウトで見たい方がいらっしゃるのでこちらをお勧めします。

    <script type="text/javascript">
    if (document.referrer.indexOf('自サイトドメイン ※変更')== -1 &&
      ((navigator.userAgent.indexOf('iPhone') > 0
      || navigator.userAgent.indexOf('iPod') > 0
      || navigator.userAgent.indexOf('Android') > 0
      || navigator.userAgent.indexOf('BlackBerry') > 0
      )))
    {
    if(confirm('スマートフォン用のサイト表示しますか?\n(キャンセルの場合はPCサイトを表示します。)')) {
    location.href = 'スマートフォンサイトアドレス指定 ※変更';
    }}
    </script>
    

QRコードを作成しようQRコードを作成しよう

PCで閲覧している人にもスマートフォンサイトを作成した事を告知するためQRコードを作成し、サイトで宣伝しましょう。管理人は、こちらのQRコード作成【無料】を利用させて頂きました。QRコードって何?って方は、よくある質問をご覧ください。


やってはいけないSEO対策スマートフォン対応の注意点

フォントサイズは12px以上フォントサイズは12px以上

iPhoneのバグも報告されているのもありますが、只でさえ画面がPCと比べ小さいため、文字サイズはPCの120%ほどを保つサイズにするようにしましょう。読みにくいサイトは、訪問者に好かれにくいです。管理人は、12px以上を推奨します。


リンク幅は44px以上リンク幅は44px以上

Appleでは「アプリケーション内のタップ可能要素には、44px*44pxの領域を割り当てる」というガイドラインを設けていることもありますが、スマートフォンは指で操作するため、ある程度幅がないと誤クリックが増加し、操作がし難くなります。リンクボタンは、44px以上で大きめのサイズを心がけましょう。


リンクだと分かり易くするリンクだと分かり易くする

PCサイトと違い、マウスポインタが表示されないスマートフォンでは、リンクかどうかタップするまで分からないため、ユーザインタフェースの観点からリンクだと明示的に分かるようにリンク領域を作成してください。例えば、リンク領域を枠で囲む、リンク領域横にマーク(矢印のような)を付与する等が挙げられます。


横スクロールは発生させない横スクロールは発生させない

スマートフォンでネットサーフィンをしたことがある方は、すぐ分かると思いますが、スマートフォンは基本縦にスクロールさせてページを閲覧します。その際、横スクロールがあると縦スクロール操作がし難いページになるため気をつけましょう。


情報を詰め込みすぎない情報を詰め込みすぎない

冒頭でも述べましたが、PCと比べ、情報処理、通信速度、画面領域でスマートフォンは劣るため、同じ情報量をスマートフォンサイトで表示させると閲覧が困難になり、せっかく作成したページが見てもらえないという事態が起こらないとも限りません。情報量はPCサイトからピックアップして作成しましょう。


広告もスマートフォン対応させる広告もスマートフォン対応させる

スマートフォンで閲覧しているのにも関わらず、広告がPC向けだと収益率が大きく下がります。使用する広告が、スマートフォン対応しているかどうか確認してから使用するようにしてください。


以上で、アダルトサイト作成についての説明を終わります。ここまで長々と稚拙な文章をお読みくださった方に感謝の意を表します。ありがとうございました。


<< 「ランキングを設置」に戻る

▲ページトップに戻る