携帯サイトを作る!

ＸＨＴＭＬ

で

携帯サイト構築を目指すブログ。

サイト制作のプロではなく

アマチュアなので、

携帯サイト作りの

体験記のようなブログになります。

サイト作りで感じた疑問、直面した問題

、役に立った手段

、ツールなどがあれば、このブログで報告していきたいと思います。

使用

携帯は「P905ｉTV 」で、この

携帯と「iモード HTML シミュレーターⅡ」、そしてau確認用に「Openwave SDK6.2」というシミュレーター(現在は配布されていない)を、3キャリア確認用にケータイサイト制作王3のシミュレーターで制作サイトの確認をしていきます。

携帯サイト制作テクニック集

文字の背景色を指定するテクニック

ページの中の特定の場所に移動させるテクニック

スタイルシートで流れる文字を作るテクニック

携帯電話の数字や記号のボタンを押して、リンク先に移動させるテクニック

透明画像を使って色つきの横線（罫線）を引くテクニック

リンクを設定する方法

ホームページ全体の文字色や背景色を設定する

文字を点滅させるテクニック

画像を回り込ませるテクニック

メールを起動させて送る、送ってもらうテクニック

常に新しいホームページを表示するキャッシュコントロールのテクニック

画像を表示させるテクニック

携帯サイトに外部CSSのデザインを適用するテクニック

ブログ画像一覧を見る

このブログをフォローする

1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

FC2ホームページで携帯サイトを作る

FC２ は非常に有名だから、すでに知っている人も多いかと思いますが、一応説明しておくと、無料ブログや無料ホームページを提供しているほか、アクセス解析やブログランキングなども運営、さらにはドメインやレンタルサーバを提供している会社です。

特にFC2ブログは有名でしょう。

FC２では無料でホームページを作れますが、PCサイトだけでなく携帯サイトのホームページも作れます。

携帯サイトの作成サービスを提供している会社はいろいろありますが、そのほとんどがHTMLでしか作れないものばかりです。

しかし、このFC2ホームページの優れているところは、HTML作成だけでなく、XHTML作成のものまで作れてしまうところです。

HTMLのサイトでは作れないような、特に見栄えのいいXHTMLサイトがFC2ホームページでは作れてしまうのです。

携帯サイトを作りたいが、お金をかけてまではいいかなという人は、まずこの無料のFC2ホームページを利用してみるのもいいかも知れません。

CGIやPHPの利用は不可ですが、容量も広告なしにもかかわらず、一ギガまで使えますし、さらにサブドメインやFTPにも対応していて、アフィリエイトもでき、かなり使えます。

FC2はFC2IDを登録するとサービスを使えるようになります。

FC2ホームページでXHTMLの携帯サイトを作る際の注意点があります。

FC2のIDを取って管理画面に行くと、携帯変換設定という項目があります。
そこでは、「携帯変換URLの有効・無効」と「自動転送の有効・無効」の項目は『無効』を選択しておいて下さい。（下図参照）

有効にしてしまうと、FC2側で勝手にサイトを携帯サイト用に変換してしまい、これはPCサイトを前提に作っている人はいいのですが、最初から携帯サイトオンリーで作っている人にとっては余計なサービスになってしまい、XHTMLで作った携帯サイトのデザインが崩れてしまいます。

関連記事
なぜxhtmlなのか

携帯サイトのURLは短いほうがいい

携帯サイトのURLは短いほうがいい。

それはなぜなのか──

自分の作った携帯サイトにユーザーを誘導したい場合、その方法として主に三つのやり方が挙げられます。

以下、それを記述すると、

QRコードを利用してもらうこと。

googleなどの検索ボックスにキーワードやサイト名を打ち込んで検索してもらうこと。

直接、携帯サイトのURLを携帯電話に打ち込んでアクセスしてもらうこと。

この三つがあります。

携帯サイトを作って思ったのが、最初に自分の作ったサイトを携帯電話に表示する時、直接URLを携帯電話に打ち込んで、アクセスすることが多いなということ。

携帯サイトを作ったら、当然携帯電話に表示してみるという確認作業に入りますが、まず、グーグルから自分のサイトへ行くのは、随分と時間がかかることになります。

それも当たり前で、サイトは作ったらかといってすぐにグーグルにインデックスされるということはないからです。

数日、数週間経ってからようやく自分の携帯サイトがグーグルに登録されることになります。(他力本願ならいつまで経っても登録されないということすらあります。)

QRコードの場合、第三者のサイトや他サイト、または紙面に自分の携帯サイトのQRコードを掲載し、そこから作ったサイトへ誘導するわけですから、それらのサイトや紙面が存在しなければ、QRコードから自分の作ったサイトへ誘導することは不可能なわけです。

となると、直接携帯電話にURLを打ち込んでアクセスすることになります。
そこで、凄くわずらわしく感じてしまうのが、携帯サイトのURLの長さです。

例えば、mobilesiteurllongoutnagai.comというモバイルサイトを作ったとすると、直接そのURLを打ち込む場合、非常に時間がかかり、手間もかかるという具合です。

これは私だけでなく、モバイルサイトを作っている人、作った人は、もしかしてその手間のかかり具合やわずらわしさを理解しているかも知れません。

携帯サイト作りでは「URLは短めに」や「打ち込みやすいURLに」などと言われることがあります。

それは直接携帯サイトにアクセスしてもらう人に少しでも手間やわずらわしさを感じさせないためにというのがあるからです。

http://1153848.comなんていう数字を多用したURLを見かけたことはありませんか。おそらくこれは、URLが携帯電話に打ち込みやすいからという理由があるので、数字ばかりにしているのかも知れませんね。

http://adg.comなんていう短いURLもやはり打ち込みやすいからという同じような理由でそのようなものになっている可能性が携帯サイトの場合高いですね。

サイトのURLにはhttp://www.のようにwwwをつける場合もありますが、携帯サイトの場合では、面倒なのでwwwのないURLのほうがいいと思います。

これからモバイルサイトを制作し、独自ドメインを取得したいとお考えなら、とにかく直接アクセスしやすいURLにすることをおすすめします。

※ ちなみに上記三つのアクセスしてもらう方法のほかに、他サイトにリンクしてもらうというのもあります。
まあ、サイトへアクセスする方法はいろいろありますので、いろいろ考えてみて下さい。

以上でした。

関連記事
QRコードとは
Google Chart API を利用して、QRコードを表示させるテクニック

SEO対策─電話・でんわ・デンワ・ﾃﾞﾝﾜをモバイルグーグルで検索すると

モバイルでアクセスアップしようと思えば、以前ではランキングに参加するということが挙げられましたが、現在ではモバイルグーグル検索でいかに上位に表示されるかになりつつあるようですね。

ランキングサイトは最近では衰退しつつあり、モバイルユーザーも検索により目的のサイトを見つけるという傾向に変わりつつあるように思えます。

さて、モバイルグーグルで検索するとき、携帯電話で検索入力欄に検索語を入力しますが、例えば『電話』というキーワードを入れた場合と、『でんわ』とひらがなで入れた場合、同じ検索結果になるのかどうか興味ありませんか。

携帯電話って文字を入力して変換するときに必ずしも『電話』という漢字で入力するとは限らないように思うんですよね。

面倒くさいから最初に候補に出てきた変換文字、もしくは何も変換せずひらがなで入力するというようなことは個人的には多々あります。

そこで同じ意味だけれども、違う変換文字でモバイルグーグル検索にかけてみた場合、検索結果に違いが生じるのかどうかを調べてみました。

今回は実際に所有する携帯電話からモバイルグーグルにアクセスし、『電話』というキーワードを検索してみることにしました。

以下それぞれモバイルグーグル検索にかけたときに上位表示されるサイトの一覧です。

まずは漢字で

電話

ｉタウンページ

NTT東日本

NTT西日本

Yahoo!電話帳

電話─Wikipedia

電話とは─はてなキーワード

無料電話案内 104.com

電話番号・郵便のリンク

日本いのちの電話連盟(携帯サイト)

次はひらがな

でんわ

Yahoo!電話帳

転送でんわサービス｜サービス・機能｜NTTドコモ

でんわ1

でんわ館　携帯電話　あなたの街の専門店

Amazon.co.jp:きつねの　でんわボックス(新・ともだちぶんこ):戸田...

リカちゃん　でんわ

-ねこでんわ-　制作blog

いとでんわ　トップページ

でんわ　・　ニコニコ動画(原宿)

CoDen安心でんわ｜電話｜NTTコミュニケーションズ個人のお客さま向け...

全角と半角のカタカナ

デンワもしくはﾃﾞﾝﾜ

Amazon.co.jp:デンワしてダーリン:石井ゆき，森若香織，キハラ...

ｺﾞｰｽﾄﾄﾘｯｸ｜<<死者のﾁｶﾗ>>移動方法は『ﾃﾞﾝﾜ』!!

デンワでキッス

デンワ

電話で抱きしめて(メインサビVER.)(ﾃﾞﾝﾜﾃﾞﾀﾞｷｼﾒﾃ)着うた無料

デンワ～｜ゆーよ

超時空デンワ

ケイタイデンワ

[音楽?ABC]　石井ゆき　-　デンワしてダーリン　歌詞

ドコモの電話の絵文字で

に一致するデータはありません。

サイト名の横に携帯電話の絵文字があるのは、そのサイト先がモバイルサイトであるという意味です。
なければ、ＰＣサイトです。

モバイルグーグルでは、検索結果にPCサイトと携帯サイトの両方の検索結果が出るようです。

それぞれ検索してみた結果、同じ意味でも変換文字が違えば、表示されるサイトの結果は変わるということです。

ただし、全角カタカナと半角カタカナは一緒の検索結果になります。

ドコモの絵文字は上記の結果になり、検索対象にならない？ようなので、絵文字を使う場合は、あくまで本文の補助目的で使うといいかも知れません。
特にブログを書いている人は絵文字を多く使って、文字をその代わり省く人も多いかも知れませんが、もしかしてそれはSEO上よろしくない行為のような気がします。

以上でした。

※モバイル検索した日は2011/4/19

関連記事
携帯サイトランキングの衰退と「モバイルグーグル」の躍進

携帯サイトに外部CSSのデザインを適用するテクニック

携帯サイトをデザインする一般的な手段として、CSSを使うということが挙げられます。

CSSを使わなくても携帯サイトを作ることは可能ですが、できるだけ使用してサイトの見栄えをよくしたいものです。

CSSをホームページに適用する方法には、①ホームページに直接スタイルを記述する方法と②外部ファイルにスタイルを記述してそれをホームページに読み込む方法とがあります。

ソフトバンクとauでは、②の外部ファイルからCSSを読み込んでスタイルを適用する方法をサポートしています。

ドコモの場合も、比較的新しい最近の携帯電話に付属しているiモードブラウザ2.0なら使用可能ですが、iモードブラウザ1.0ではサポートされていません。
よって、外部CSSは、主にauとソフトバンクに対して利用するようにします。

外部CSSを利用する一番の大きなメリットは、ホームページのデザインが管理しやすいというところだと思います。
外部に置いたCSSの内容を変更するだけで、その内容を適用している複数ページのデザインを一括に変更することも可能です。
これが内部に書いたものだと、ページごとに一つずつデザインを変更していかなくてはいけないので、大変手間ひまがかかります。

もし、auやソフトバンク専用の携帯サイトを作るならば、デザインのカスタマイズは断然外部CSSを使うことを推奨します。

そこで、外部CSSをホームページに適用させる方法を記述します。

まず、パソコンのメモ帳やテキストエディタ、またはDreamweaverなどのホームページ作成ソフトを使ってスタイルを記述します。

例えばこんな感じに。

p{color:#F00;}

記述したら、それを拡張子「.css」で保存する。ファイル名は何でもよい。例えば「keitai.css」というふうに保存し、そしてそれをサーバーにアップロードします。

例の「keitai.css」のスタイルを適用したいホームページの<head>と</head>のあいだに

<link rel="stylesheet" href="keitai.css" type="text/css" />

と記述します。

すると、外部CSSの内容が反映されます。

ソフトバンク携帯電話向けのXHTMLの場合、type="text/css"を省いてもOKのようです。

参考になるサイト
XHTMLとCSSによる携帯サイト制作
 スタイルシート基礎講座　～スタイルの定義方法～

関連記事
ガーン、ドコモで外部CSSは使えない
 ドコモのために内部CSSを使う

作ったサイトを採点してくれるサイト

サイト作りはユーザビリティやアクセシビリティを考慮しながら作成していく必要があります。

ユーザビリティとは簡単に言うと「サイトの使いやすさ」であり、アクセシビリティはこちらも簡単に言うと、「サイトへのアクセスのしやすさ」になります。

それらを実現するためにも正しい文法で記述してサイトを作っていくことが望ましいと言えます。

もちろんユーザビリティやアクセシビリティなど持ち出さなくてもただ単純により良いサイトを作るために、正しく文法を書くことは必要です。

そこで、作ったサイトを評価し、なおかつ採点してくれるサイトを紹介します。

そのサイトを利用することにより、どこが文法上間違っているのか、どこを改善すればいいのかを解説つきで評価してくれるので、サイト作成の助けなります。

サイトを採点してくれるそのサイトは「Another HTML-lint gateway 」になります。

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

リンク先にアクセスすると、URLを入力するところがあるので、そこに自分の作成したサイトのURLを入れ、「チェック」ボタンをクリックすると、評価、採点してくれます。

携帯サイトもチェックしてくれるようです。
ただ、どちらかと言うとPCサイトを評価してくれるサイトという印象です。

例えば携帯サイトではalt属性が必要かどうか意見が分かれたりしますが、Another HTML-lint gatewayではalt属性がなければ減点対象になったりするようなので、そのあたりは利用する人が問題をふるい分けて必要な情報を取捨選択していく必要があるようです。

文法を正しく書くことはSEOの面でもメリットがあります。

なので、サイトを作ったあとにサイトチェックをしてみてはいかがでしょうか。

ちなみに「携帯サイトを作る！」(http://ameblo.jp/mobile-advance/)を採点してみた結果、６点でした・・・。

ほとんど手入れもしないブログのうえ、チェックサイトではマイナス点とかも普通に出るので、６点もあって実は少しホッとしてます。マイナスと思ってました。

と言ってもアメブロはあまりテンプレートとかカスタマイズできる系統のブログではないんですけどね。

関連記事
有名サイトがどのようにしてalt属性を設定しているか調べてみた

span 要素に align 属性は使えないのか？

align 属性とは、例えば文字を右寄せにしたり、中央寄せにしたりすることに使う属性のことなのですが、これを span 要素で使えるのか調べてみました。

例えば文字の位置を中央寄せしようと以下のように記述してみても、どうもこれでは文字は中央寄せされないようです。

<span style="text-align:center;">中央寄せ</span>

文字を中央寄せにする場合、

<div style="text-align:center;">中央寄せ</div>

というふうに、span のところを div にしないと中央寄せされません。

携帯サイト作りでは、div や span はよく使うタグなので慣れていないと混同しやすいですが、もし文字の配置を設定したにもかかわらず、それが反映されないというときには、div と span を間違えていないかチェックしてみて下さい。

ちなみに div のところを p として記述してもいいようです。

例： <p style="text-align:center;">中央寄せ</p>

※ もしかして携帯電話の機種により span でも文字の配置ができるかも知れません。
しかし、文字の配置を設定する場合は、div や p を使うのが無難です。

picoがバグったら

CMSのXOOPS関連の話です。

これは経験したことなのですが、picoの記事を何度も何度も更新していると、タグが反映されない、もしくは改行されないバグに遭遇します。

こうなったときは、バグってしまったページの内容をコピーして、新しいページを作り、そこに貼り付け投稿しなおします。

つまり、さっさとバグってしまったページを削除し、新しくページを作り直すということです。

バグの原因はパソコンにあるのかXOOPSにあるのか原因はよく分かりませんが、とにかくそうなったら上記のようにしてとりあえず対処しています。

新たしくページを作ると、ページのURLが変わるので、旧URLにリンクしているページがある場合、そのページの内容も手直しして更新しておきます。

関連記事
XOOPSをインストールすると大量の警告文

User Agent Switcher0.7.2のユーザーエージェント一覧を取り込む

PCのブラウザで携帯サイトの表示をシミュレートしてくれるUser Agent Switcherというアドオンをインストールしていたのですが、わけあって削除し、もう一度ダウンロードしてインストールしてみました。

User Agent Switcherのダウンロードサイト

すると、以前は確か画像１のようにユーザーエージェント一覧もインストールされていた ? と思うのですが、(どのように一覧が追加されていたのかもしくは追加したのかちょっと覚えていない・。

)新たにインストールしたUser Agent Switcherバージョン0.7.2では、画像２のように一覧がシンプルになっています。

画像１

画像２

以前にインストールしていたもののバージョンがいくつであったかまったく覚えてないのですが、とりあえず、今現在の最新の0.7.2のバージョンでは、ユーザーエージェントが登録されていないようです。

そこで、どこかにこの問題を解決する簡単な方法がないか調べてみたところ、我流天性がらくた屋│User Agent Switcher の携帯用のXML で、ユーザーエージェント一覧を一括で取り込んでくれるXMLファイルが公開されているのを知りました。

このサイトでXMLファイルをダウンロードしたあとは、ツール＞Default User Agent＞Edit User Agen...を選択し、Inport...をクリック、ダウンロードしたXMLファイルを開けば、複数のユーザーエージェントが登録されます。

携帯サイトを作る!-User Agent Switcher0.7.2一覧の取り込み

User Agent Switcher0.7.2にユーザーエージェント一覧を取り込んだところ

関連記事
Firefoxのアドオン、携帯シミュレーター、User Agent Switcher
FireMobileSimulatorというアドオンをFirefoxブラウザに追加する

docomo div タグにborder属性を使って枠線をつけることができるのか

PCサイトでは見栄えよくデザイン、レイアウトするために枠線がよく使われています。

枠線は下図のように上下左右、もしくは一部の辺に対して引き、それぞれの領域を区切るなどしてデザインしていきます。

携帯サイトでもこの border 属性を使用して線を引ければサイト作りの大きな武器になりそうです。

ボーダーは、

<div style="border:solid 1px;">周りに枠線</div>

と記述すると、一本線の枠線が
「周りに枠線」
という文章の上下左右に描かれます。参考図参照
※実際は外部CSSを用いて枠線をつけるのが一般的です。

参考図

ただ、残念ながらdocomoのiモードブラウザ1.0では、上記のように記述してもボーダーは表示されません。

所有のP905iTV (iモードブラウザ1.0)で確認してみても表示されませんでした。

この枠線はiモードブラウザ2.0では表示可能なようです。

i-CSS2対応属性一覧

au や softbank でも表示できるようなのですが、ただiモードブラウザ1.0が表示されないとなると、３キャリア共通のサイトを作っている場合、結局ボーダーを使うのは控えざるを得ませんね。

ボーダーが引ければ、 hr (水平線)の代わりになって携帯サイト作りに便利なんですけどね。

docomoの場合で横線を引くなら透明画像を利用する方法が今のところ最良でしょうね。

関連記事
透明画像を使って色つきの横線（罫線）を引くテクニック

参考になるサイト
XHTMLとCSSによる携帯サイト制作

有名サイトがどのようにしてalt属性を設定しているか調べてみた

まず、alt属性には画像の説明文が入ります。

画像をサイトに表示するには、

<img src=".../images/○○.jpg" />

と記述しますが、

さらに画像が表示されなかった場合などに備え、

<img src=".../images/○○.jpg" alt="画像の説明" />

とalt属性を指定しておきます。

このalt属性、PCサイトでは当たり前のように指定されていますが、では携帯サイトではどのように扱われているのか調べてみました。

その前になぜそんなことを調べたのか。

携帯電話の画面はPCとは違って大変小さく、表示される画像も小さい。

alt属性で指定した画像の説明文は、画像が表示されるはずの範囲内に収まります。

なので、例えば、幅15pxの大きさの画像の場合、15pxの範囲内で画像の説明文が収まることになります。

そこで直面するのは、小さな画像では、画像の長い説明文が収まりきらないという問題です。

画像の説明文を入れても、読めないじゃないか、意味あるのか・・ということになります。

で、携帯サイトに表示する画像に果たしてalt属性は必要なのか疑問に思い、有名なサイトではどのようにalt属性が設定されているのか調べてみたわけです。

調べ方は、まず所有の携帯電話「 P905ｉTV 」のサイトの画像表示設定を「表示しない」にして有名サイトのトップページにアクセスしてみるという方法を取りました。

当然サイトにアクセスしても画像は表示されません。