携帯サイト制作って何が大変なの？

はじめまして。1月にシンメトリックに入社をしたYOUです。プログラムもHTMLもCSSも何もわからない私が入社をしてまず学んだことは「携帯サイト制作」でした。

「携帯サイトはキャリアによってつくり方違うから。」

（わたし） ・・・一体どういうこと？

DoCoMoの仕様に沿って携帯サイトを作成しそれをau、Softbank携帯で見る。DoCoMo機種と比べて見え方に異なる部分があれば、それをau、Softbank携帯でも綺麗に見えるようにそれぞれ直す。

どんな過程があり、どんな苦労があるのか。そのことについて書きたいと思います。

目次

DoCoMoの仕様を生かした携帯サイト作成。

テーマ ： アパレルショップのトップページ

下図構造のトップページをDoCoMoの仕様に沿ってXHTMLで作成します。
h1、h3タイトル、境界線、フッターは画像で作成し、ユーザが使いやすく見やすいデザインということを意識して作ります。

Docomo-xhtml1     Docomo-xhtml2

完成しました。

全部の写真を掲載すると煩雑になるので、一番最初の画面と”おすすめ”部分の2画面を掲載します。

DoCoMo N905i

D-D1     D-D2

 

DoCoMo仕様に沿ってXHTML1.0を使い、CSSはstyle属性で指定しています。テロップや点滅でデコレーションをし、タイトルロゴなども画像作成ソフト（GIMP)で作成してかなりWebサイトらしくなったかと思います。N905iは画像領域が幅240pxなので、タイトルロゴも幅240pxで作りました。

  • 文字にマーキー設定をし、テロップをつくる 
<div style="display:-wap-marquee;"> テロップ部分 </div>
  • 検索BOXをつくる 
<form action="URL;">
<input type="text" size="9" maxlength="50" style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;" />
<span style="font-size:x-small;"><input type="submit" value="検索" /></span></form>

検索BOXのサイズを指定しないと検索BOXと検索ボタンが別の行になってしまうのですが、size="9" （半角で9文字分のサイズという意味）と指定することで検索BOXのサイズを小さくして真横に並べています。 検索BOXのボタンの中の文字の大きさは変更できるので小さくします。

入力文字の設定は一見よくわからない文字のようですが、よく見ると特殊文字が使われているだけで<ja:en>とシンプルな表記になります。ここでは英字指定をしていますが、他の入力文字は下に記します。

<ja:h> 全角カナ
<ja:hk> 半角ｶﾅ
<ja:n> 数字
<ja:en> 英字
  • メール送信画面が立ち上がるようにする 
<a href="mailto:address@docomo.co.jp?subject=問合せ&body=メール本文" >

件名 ：問合せ 本文 ： メール本文 としてメールを送信する画面を立ち上げます。

  • ボタンひとつでトップに戻れるようにページ内リンクをつくる 
<a name=”id”>

↑↑戻りたい場所に記載

<a href="ファイル名.html#id" mce_href="ファイル名.html#id">▲TOP</a>

↑↑リンクをつくる場所に記載

au,Softbank携帯で見て、違いを観察。

異なるキャリアの携帯でみると表示はどのように変わるのか、DoCoMo仕様に沿って作成したサイトをau、Softbank機種でみてみます。

au K002

D-a1     D-a2

 

DoCoMoとauで異なる点を記載します。

  • テロップの両脇に白い線があります。
  • テロップは一回動くと止まってしまいます。
  • コメントとして書いたはずの<!-バナー–>が表示されています。
  • 画像とテキストを左右に並べる配置が出来ていません。

Softbank 920P

D-S1     D-S2

 

DoCoMoとSoftbankで異なる点を記載します。

  • 画像がとても小さく表示されています。
  • 意図していない絵文字が現れています。

なぜ違う？解決してみましょう。

DoCoMo仕様で作成した携帯サイトと異なる箇所をなおします。

au

  • テロップの両脇に白い線がある。

解決>>> タグの脇に隙間が出来てしまうバグがあるようです。 解決方法はいくつかあるみたいですが、わたしは社内の先輩の技を盗んで<table>タグで括ってセルスペースとセルパディングを0pxにして表として解決しました。

table

※テロップ部分では、一番親の要素に背景色を指定するのがポイント。

  • テロップは一回動くと止まってしまいます。

解決>>> 一回で停止してしまう仕様のようです。-wap-marquee-loop:infinite;を指定しましょう。

  • <!-バナー–>の表記がauだけ出てきている。

解決>>> コメントアウトの記述ミスですが、auはブラウザが厳しいようです。1キャリアのブラウザだけを基準にしていると、間違いに気づかないこともあるので気をつけないといけないと感じました。

  • 画像とテキストを左右に並べる配置が出来ていません。

解決>>> auではfloat指定に対応していないようです。imgにalign="left"を追加して回避しましょう。しかしこの時、絵文字の横に変な改行が出来るという問題が発生します。(下図参照）これに関しては別の機会に対策します。

Softbank

  • 画像がとても小さく表示されています。

解決>>>画像領域（ブラウザが表示できる範囲）が原因のようです。DoCoMoサイト作成時は横240pxで作成していましたが、Softbankの920P機種を調べると横480pxとなっていました。width480pxと指定します。

  • 意図していない絵文字が現れています。

解決>>>どうやらSoftbankの絵文字は関連性のないものに置き換わり、auは多少関連のあるものに置き換わるようです。 関連のあるものに置き換わるといっても解釈の違いがあるので、全て変えるのが無難です。

au、Softbank機種で上記相違点を直したのがこちらです。

au K002

D-aa     D-ab

Softbank 920P

D-Sa     D-Sb

 

所感

DoCoMoの仕様を生かした携帯サイトを作成し、au,Softbank携帯で違いを比較し見た目を合わせる為に手直しをしました。結果的に3種類の携帯サイトを作成しました。

全く知識がない私でも何とかつくれましたが、キャリアによって携帯サイト作りがこんなに違うなんて想像もしていませんでした。(トップページだけで2～3週間･･･。）使えないタグがあったり、画像の表示が違ったり、絵文字がずれたり、さらに新機種が発売したらもう大変！こんな苦労してまで携帯サイトに力をいれるのはハイリスクだと感じてしまう制作者は多いのでは・・・と思いました。

初めは「ソフトウェアの会社なのになんで携帯のHTMLから始めるのだろう。」と思いましたが、今は携帯コンテンツ変換エンジンに携わろうとしている一員として、実際に携帯サイトを作る苦労を知ることは大切であると感じています。

シンメトリックでは「ラウンドアバウト」という、とても便利な携帯コンテンツ変換エンジン製品を持っています。キャリアや機種にとらわれずに携帯サイトを機種にあった状態に自動で変換してくれるサービスです。「ラウンドアバウト」を使ったらこんな苦労をせずに簡単に携帯サイトが作れるんだろうと思います。

Page Top