携帯サイトの作り方｜無料SEO対策情報

携帯Mobileサイトの作り方を無料でご説明します。
このページを作るきっかけに成ったのは、携帯サイトを制作するにあたって、携帯ホームページの
「無料テンプレート配布サイト」で幾つかダウンロードしてみて満足できるものが無かった事から、
世の中のニーズに応えていないと感じ、自分で最初から作成する必要にかられた経験に基づきます。
そこで、このページでは、以下の点に注意を払い作成方法をご説明します。
サクサク軽い携帯サイトの作り方
Mobile Robots Crawler に最適化されたMobile Search Engine に Index されやすい携帯サイト
Google, Yahoo!, Bing, 携帯検索エンジン最適化(Mobile SEO対策)を意識した内部構造
NTT DoCoMo, Yahoo!モバイル, AU by KDDI EZweb, の3キャリアIndexに対応した構造
機種ターゲットは、一般に普及している小窓タイプの携帯(右画像タイプのユーザーが最も多い)
W3C Markup Validation Toolsをクリアーする事。

合わせて読むと参考に成る -> 携帯Mobileホームページの無料SEO対策検索エンジン最適化情報
携帯Mobile-Sitemaps.xml - 携帯サイト用sitemap.xmlの作り方の説明とテンプレートダウンロード
携帯Mobile Doctype宣言 - キャリア別Doctype宣言の違いと共通Doctype宣言
robots.txt for crawler - 携帯用robots.txtの作り方とテンプレートダウンロード
携帯検索エンジン登録方法 - 携帯ホームページを３キャリアの検索エンジンに登録する方法
携帯モバイルサイトの無料SEO対策情報 - 携帯モバイルサイトの上手な無料SEO対策方法

Point1 -> 画像点数を極力減らして軽くする(画像点数５点以内を目指してみた)
Point2 -> 多くのWebmasterが使い慣れていて携帯サイトでも使用可能なXHTML Mobile 1.0を用いた編集簡便性。
Point3 -> 一般に多く普及しているタイプの液晶画像のWidth230px～250pxを意識してwidth:240pxとした
Point4 -> Mobile Robots Crawlerが読まないテーブルやフレームを一切使わずSEOに配慮した内部構成
Point5 -> 画像点数を極力減らして、読み込み速度（サクサク軽い）を重視し機種性能依存度を減らした。
Point6 -> Mobile SEO対策に有利なUTF-8Nにて作成しています。FTP Clientの詳細設定を「UTF-8N」に！

注意事項
私自身がHPBやDWと言ったホームページ作成ソフトを一切使用せず、TeraPadにタグの直打ちで作成しているため、ホームページビルダーやドリームウィーバーなどでExampleを編集すると、正しいHTMLコードで作成した各種タグが自動修正され勝手に書き換わったりする恐れが有りますので、ご注意下さい。

デフォルト状態でのimageフォルダー内画像点数です。
ExampleのMobileサイトは、このたった3点の画像で構成されています。
(1)サイトのロゴマーク ( width=50px height=50px 1.32kb)
(2)ナビゲーション用の矢印 ( width=10px height=9px 62b)
(3)タイトルなどの背景用画像 ( width=4px height=200px 1006b)
少しみにくいですが、右端のtitle_back.gifは、薄いブルーで
上から徐々に濃く成るように意図して部位を使い分ける目的で作成して有ります。

雑記一口メモ
W3Cの Mobile web に関しての定義の中に、1ページあたりの容量が10kilobytes以下に定められている事については、
実は余り知られていない事実です。また、これを忠実に守って作成されている携帯ホームページも見かけません。
このルールが作成された頃の携帯電話の性能と現在市販されている携帯電話の性能では雲泥の差が有り、特にメモリーの容量や処理能力が飛躍的に向上している為、現在では10KB以下で作成する必要性を余り感じません･･･が、
軽いに越した事は有りません。電波の強弱状況にも関係しますが、重くてなかなか開かない携帯サイトは、リセットされ
さっさと次のサイトに移動されてしまうので、特にトップページは軽く作る必要が有ります。

画像点数はたったの3点でも、薄いブルーをメインに何となくMobileサイトとして体裁が保てた様に思えますが、皆さんは如何でしょうか？
上部ヘッダーと最下部フッターと各見出し背景画像が横幅4pxのたった１つの画像ファイルで作られているとは、解らないかも？たった4pxの画像をrepeatコードを使って繰り返し表示にして、使う部位(色が薄い部分～濃い部分)を指定(background-position:top;やcenterやbottom)する事で何となく背景色が違って見えます。

<h1>は、最後尾のフッター部分から、ページトップに画面を一気にスクロールさせる為に<h1 id="top">携帯サイトのタイトル</h1>としてidを付けて「ページトップに戻る」に対処した。最後尾から画面を上部にスクロールする為に何度もボタンを押す手間を省き、ユーザーの利便性に配慮した。実際に携帯サイトを閲覧する方は実体験として、この機能が有った方が良いと感じているはずです。

ヘッダー部分への電話番号やEmailの掲載については、商用携帯サイトを意識したので表示してみた。お問合せや予約で電話番号が必要な職種(例えばビジネスホテル)などは、下層域も含めて一番目立つところに表示するのがセオリーだからです。ただ、気をつけないといけないのはメールアドレスをさらす事で、SPAMメールが一日に数十件も届く様になるので、メールアドレスのHTMLコード・エンティティ化(メールアドレスの自動収集ソフト対策)などでSPAMメール対応を行う必要があります。また、P段落による簡単な説明文は、SEO対策上必要で削除できません。

各タイトルへのナビゲーション例えば、Exampleでは「H5へのナビ」と成っているが、<h5>のナビゲーション用の見出しを「料金費用に付いて」とタイトルを書き換えた場合には、一気に<h5>「料金費用に付いてのご案内」見出しに画面が移動する様にユーザビリティーに配慮した。つまり、携帯スクリーン画面を開いて、カーソルを<h5>にポイントして選択すると<h5>のタイトル見出しに画面がスクロールして簡単な説明文を読んだ後、タイトル見出しから下層域のページへ移動できます。説明がちょっとわかりにくい場合は、実際に携帯でいじってみて下さい。

SEO対策としては、<h1>～<h6>までの見出しタイトルから下層域ページへのリンクを張る様にして、タイトル見出しとナビゲーションが一体と成るようにしました。

携帯電話のScreen Widthは平均的な240pxで作成冒頭の説明でも少し触れましたが、市販されている携帯のスクリーン幅で圧倒的シェアーを占めるのがwidth230px～width250pxのワイシャツポケット収納サイズの携帯です。
この携帯サイトのExampleを作成するにあたっては、以下の点を工夫しました。
(1)ユーザーの携帯Screen幅が220pxでも問題なく表示できるようにする。
(2)ポジションをセンターに配置する事により、やや大きめの携帯画面幅250pxでも違和感無く表示できるように。
(3)左右のMarginを5px取り(灰色部分)、内部Padding(余白)を左右5px取ってあるので、実際には220pxの中にテキストが納まっていてやや画面が小さめの220px幅の携帯画面でも問題なく閲覧することができます。

携帯サイトの読み込み速度を早くする工夫GoogleやYahoo!が検索結果の順位を決める際に「アルゴリズム」と言うのを設定して検索順位を決めますが、沢山ある順位決めの条件項目(アルゴリズム)の中に、サイトの読み込み速度と言う条件が有ります。つまり、重くて遅い携帯サイトは検索結果の上位表示が難しいのです。
これに対処する目的で、style-sheet.cssとhtmlファイルの2つのファイルを2度読みする時間を節約する為に、htmlファイルそのものにstyle属性を直接指示入力しています。何故？かと申しますと･･･サーバーのレスポンス性能により、読み込み速度が重く遅かったりするので、スタイルシートとhtmlファイルの2度読みに時間が掛かるのを1度の読み込みでサクサク表示できるように工夫しました。これにより、Yahoo!とGoogleの検索エンジンのアルゴリズム"サイトの読み込み速度"に少しでも対処出来ます。

この携帯mobileテンプレートを試してみたいと思われる方は、
Mobile-Examples ZIPファイルをダウンロードしてご利用頂く事ができます。
背景用色画像とロゴマークを入れ替えてカスタマイズしてご利用下さい。