既存のサイトを携帯対応させる

2008.09.07 04:43:38 , Posted
2013.05.04 17:19:57 , Update by Gyokuei

日本人のPC所有台数は頭打ちになったといわれています。一方携帯は１人１台するのがあたりまえの時代になりました。私が某社で携帯ゲームの仕事をしていた頃は、公式メニューにないサイトは見れないなんて携帯もあったのですが、今や普通のサイトが見れるどころかフルブラウザという話も幅をきかせ......

などというグローバルな話はともかく、

私のサイトの携帯対応にあたり、
「PCで既にサイトを持っている人が携帯でも見れるようにしたい場合、何が必要なのか」について考えましたので、メモっておきます。

中身を書き換える必要ある？-htmlタグの問題

PC用のサイトは現在、だいたいhtml4とかXHTMLとかいう仕様のタグで作られています。
普段からメモ帳に手打ちで作っている人はおわかりでしょうが、blogや日記サイト、またはホームページビルダー等のソフトを使って作っている場合も、内部的にはそういうタグでページを組んでいます。

携帯の場合は、各社、仕様がばらばらです。
でも基本的にはHTMLと同じようなものだと思って大丈夫です。違うところは、使えるタグに制限がある、スタイルシートが使えない（使える機種もありますが）といった点になります。１から新しくページを作る場合や、厳密に端末ごとにページを作る場合には、各社の提供している拡張htmlの仕様書を確認してから書きましょう。
私が使っているのはDOCOMO i-modeなので、「iモード対応XHTML」に仕様があります。

でも個人レベルで厳密な対応を考え始めるとたいへんなことになるので、「かんたんなタグしか使えないんだな」ぐらいに考えておくのが無難だと思います。
使えないタグを書いたら、対応してない携帯では無視されます。
携帯で使えるタグについては、このへんによくまとまっています。

タグの仕様より、むしろ問題はデザインです。

●縦に2つ・3つ・(それ以上)に分割していたり、上にメニューがあったりしませんか？
→携帯の画面は狭いので、ページにアクセスしたとき、1画面以上がナビ部分で埋まってたり、1文字ごとに改行していたりとおかしな表示になる可能性があります。

●headタグ内にJavaScriptを埋め込んでいたりしませんか？
→ページをひらいてすぐ先頭に意味のない呪文が並んでいると、げんなりしますね。

●<body>タグで背景色を指定して、スタイルシートで文字色指定していたりしませんか？
→スタイルシートの使えない携帯では文字が見れないかもしれません。

これらの問題があるページでは、新しくhtml書き直すとか、でくくる、スクリプトで変換してから表示する、などの対策の必要があります。

文字コードの問題

あなたが今見ているページは、 UTF-8 で書かれています。
......あ、携帯版をphp経由で見ている人は Shift_jis です。
どっちでも見栄えはまったく変わりません。でもコンピュータの内部的には、違うデータになっています。
パソコンのブラウザだと、今一般人に使われているもので UTF-8、Shift_JIS、EUC-JPあたりは判別できないものは無いでしょう。でも、携帯では、機種ごとに表示できる文字コード、表示できない文字コードがあります。

一般的には、携帯用サイトには Shift_JIS を使うことになっているみたいです。
つまりUTF-8の私のサイトは、書き直すか変換する必要があるということです。

絵文字の問題

絵文字は一種の外字です。これも会社・機種によってばらばらです。同じような絵文字が表示できるからといって、同じコードに割り振られているとは限りません。内部的にはまったく別のコードだったりするので、他の機種では文字化けします。
私は、i-modeの絵文字を使って、他社機種のひとは仕方ない我慢して下さい、というスタンスです。人の携帯で確認した限りでは、i-modeの絵文字は・に化けるので、なくても意味は通じるようにして、アイコン代わりにしか使わなければ問題ないかなと......思うのですが、変な文字に化けた！という方はご指摘ください。

PC上で絵文字を確認したい場合、i-mode用なら公式で絵文字エディタソフトがダウンロードできます。
絵文字入力ソフト「i絵文字」

表示時に変換したい場合はこんなPHPスクリプトもあるみたいですが、私はまだ使ってません。
PHP 携帯絵文字自動変換スクリプト

画像の問題

画像の形式も悩ましい問題です。
私のi-mode携帯では、gif,jpgは見れますが、png画像を見ることができません。また、Vodafoneではgifが見れないとか、古いDoCoMo携帯ではjpgが見れない、ということもありました。すべての機種に対応する画像形式は存在しませんが、画像を作り直してupできるならとりあえずjpgにしておくのが無難だと思います。

画像サイズの問題もあります。
96×72ピクセル以内にしておけばすべての機種に対応できると思いますが、最近の普通の携帯で見るとたいへんしょぼいことになります。
イラストなどの画像は240×320ピクセルぐらいにしておくといいと思います。

SEOの問題

ここは私も知りたいです！（笑）
Google、Yahoo!などでは、PCサイトと携帯用サイトを区別しています。
Yahoo!のほうはまだ調べてないのですが、

携帯からGoogle検索すると、まず携帯用サイト、次にPC用サイトが表示されます。PC用サイトと認識されたサイトは、それだけで掲載位置が極端に不利になるうえに、Google経由でアクセスすると、Googleはそのページを表示するとき、勝手に変換して表示します。

Googleのロボットに携帯用サイトとして認識してもらうためには、
ページをShift_JISで書き、カタカナを全部半角ｶﾅにして（←ここはサイトでの噂なんで、本当に必要かは検証してませんが）

「モバイル用のGoogleサイトマップ」を作成し、「Googleウェブマスターツール」から登録します。

「Googleサイトマップ」とは、あなたのサイトにどんなページがあるかGoogleに伝えるためのxmlファイルです。ファイルのurl、更新日時などを書いてGoogleに送信すると、Googleの検索結果でサイトが表示されやすくなります。
そのGoogleサイトマップのモバイル版てのがあります。こんなのです。
Googleウェブマスターツールから登録するとき「モバイルサイトマップを追加」を選んで送信すればOKです。

......自分が、mixiと、PCで見るblog等を通勤中に読むのにしか携帯を使ってないので、いまいち携帯空間での空気がわかってないので、PCのネットから得られる情報をもとに、いろいろやってみました。リンク集に登録するという伝統的な方法も、まだまだ有効だといわれていますが、大手はどんどん有料化していくし、どこに登録すればいいのかよくわからない。あとは実地で調べてみないと、いけないですかね。

→既存のサイトを携帯用に変換するpc2mにつづく