コーディングメソドロジー

第31回 携帯サイトのデザイン注意点

PCサイトのデザインを主に行っているデザイナーにとって、携帯サイトでは考慮すべき点がPCサイトと異なるため、ハードルが高いと感じられることもあると思います。たしかに携帯サイトでは、PCサイトではよくある見慣れた表現であっても実現できないことがあるため、対応キャリアや古い機種への対応、コーディング言語(HTMLなのかXHTMLなのか)、機種特有の挙動、docomoのiモードブラウザバージョン(2.0が2009年夏以降発売機種に採用)、サーバー環境や運用条件などを考慮して、実現可能なデザインをする必要があります。今回は、PCサイトのデザインでは一般的に使われているけれども、携帯サイトで崩れやすいため注意したほうがよいデザインのいくつかをご紹介します。

複数のリンク色の使用について

複数のリンク色の使用

HTMLで組む場合は、リンクテキストの色はbodyに指定します。link、alink、vlinkのうち、alinkは指定してもauやsoftbankで制御できないため、3キャリア対応の場合は、linkとvlinkのみを指定するようにします(linkはリンクテキストの基本色で、vlinkは訪問済みのリンクテキスト色)。HTMLで組む場合は、箇所ごとのa要素の中に<font color="">を設定することで、1ページ内に複数のリンクテキスト色を指定することができます。
一方、XHTMLの場合は、リンク色の指定はHTMLと同じようにbodyに指定するか、headerに擬似クラスを 指定します。擬似クラスには、a:link、a:focus、a:visitedがあり、それぞれalink=a:link、vlink=a:visitedと同じ意味となります。 a:linkで指定した色がa要素内のリンクテキスト全ての基本色として適用されます。 HTMLの場合と同じ理由で、a:focusは指定できません。
ページ内で複数のリンク色を指定したい場合は、a要素にspan要素を組み合わせ、インラインでスタイル指定をします。ただし、docomo2.0、softbank、auでは、リンクテキストの下線も同様に色が変わりますが、docomo1.0は、リンクテキストの下線は基本リンク色となってしまうため、docomo1.0まで含めて同じ表現にしたい場合は、ページ内のリンク色は一つだけにする必要があります。

body以外の背景画像の使用について

body以外の背景画像の使用

HTMLの場合は、背景に画像を使うことができません。背景色は使うことが出来ますが、ページ内に複数の背景色を使う場合は、tableを組んでその背景色として使用することになるため、table要素が使えないdocomo1.0のHTML6.0以下(2006年秋冬以前発売機種)には適用できません。
XHTMLで組む場合は、bodyに背景画像を敷くことができますが、div要素やtable要素には敷くことができません。リピートの方向(background-repeat)については、auとsoftbankのみでしか効きません。そのためリピートをするとつなぎ目が不自然になるデザインは不向きといえます。
3キャリアを1ソースで表示させる場合は、背景画像をさけるか、リピート方向を気にしなくてもつなぎ目が不自然でないパターンの画像にする必要があります。

太字テキストの使用について

太字テキストの使用

HTMLで組む場合、強調のb要素、strong要素を指定しても太字になりません。XHTMLで組む場合でも、機種によっては太字表示ができるものもありますが、太字表示ができない機種も存在します。
強調されていないと意味がわからない情報になる場合は、他の表現を採用したほうが無難と言えます。

このように、携帯サイトでは条件によって異なる表示になってしまったり、実現が不可能になったりするデザインがあるのが実情です。そのため、これらの崩れやすい表現を厳密に実現しようとすると、機種ごとの振り分けコーディングやテストに多大な工数を要してしまいます。
予算や納期に制限がある場合、条件によって表示が意図通りにならない可能性がある表現については、コーディング上で振り分け設定をして厳密に当初想定のデザインを実現する方向だけではなく、シェアを検討して古い機種を推奨環境から外したり、崩れにくいデザインへ修正することで、費用面を抑えたり、制作時間の短縮を図るという選択肢もあります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム