初心者でも分かるアダルトアフィリエイト

サイトレイアウトについて

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

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

ブログやWordPressで作成した場合は、最初からレスポンシブデザインでテンプレートが作成されている場合もありますので確認してください。

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

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

自動振り分け

<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コードを作成しよう

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

スマートフォン対応の注意点

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

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

• リンク幅は44px以上

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

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

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

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

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

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

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

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

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