スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（1）（2/2 ページ）

» 2012年10月22日 18時00分公開

[渡辺忍，KSK フレックスファームビジネスユニットエバンジェリスト]

スマホ向けWebサイト制作、3つの有名なハマリどころ

　ここからは、前ページで紹介した3つの手法にかかわらず、スマートフォン向けにWebサイトを見せていくうえで考慮しておいた方がいいハマリどころを紹介します。

【1】Androidの日本語フォントで太字が表現できない

　Androidでは有名な事象の1つです。Androidの日本語標準フォント「Droid Sans Japanese」は、Android上で太字のフォントが利用できません。そのため、フォント追加のカスタマイズがされた端末（国内メーカー製の一部端末など）を除いて、Android標準ブラウザでの日本語表示では、CSSで太字が指定されていても太字として表示できません。

サンプルソース（こちらからブラウザで実際に表示できます）

<!DOCTYPE html>
<html lang="ja-JP">
<head>
  <meta charset="UTF-8">
  <title>フォント</title>
  <style type="text/css">
    .bold{
         font-weight: bold;
    }
  </style>
</head>
<body>
  <p>あいうえお</p>
  <p class="bold">あいうえお</p>
  <p>abcde</p>
  <p class="bold">abcde</p>
  <p>１２３４５</p>
  <p class="bold">１２３４５</p>
  <p>12345</p>
  <p class="bold">12345</p>
</body>
</html>

上記コードの表示結果（全角文字（日本語フォント）のみ、太字が反映されていない）

　そのため、コンテンツの中で、強調したい部分を太字にしたうえで、「太字で示した通り……」のような記述をすると、太字が表現できないAndroid端末で見ているユーザーには、いったい何のことか分からなくなってしまいます。スマートフォン向けのWebサイトでは、文章表現でも機種依存を考慮した表現をする必要があります。

【2】iPhoneでは、明朝体に対する扱いがiOSバージョンで異なる

　これもiOSでは有名な事象です。最近リリースされたiOS6で、さらに扱いが変わって大きな話題になりました。iOSにおける明朝体の扱いは以下のようになっています。

サンプルソース（こちらからブラウザで実際に表示できます）

<!DOCTYPE html>
<html lang="ja-JP">
<head>
  <meta charset="UTF-8">
  <title>フォント書体</title>
  <style type="text/css">
    .m{
        font-family:  'Hiragino Mincho ProN', serif;
    }
    .g{
        font-family: "Lucida Grande", sans-serif; 
    }
  </style>
</head>
<body>
  <p>何も指定しない例</p>
  <p><span class = "m">明朝体を指定</span></p>
  <p><span class = "g">ゴシック体を指定</span></p>
</body>
</html>

iOS4以前

　iPhoneには、日本語フォントにゴシック体のフォントしか搭載されていないため、明朝体を表示できません。

iOS4以前での表示結果

iOS5の場合

　iPhoneに、明朝体フォントが搭載されるようになりました。Safariの標準フォントはゴシック体のままなので、CSSでフォント指定することで明朝体を表示できるようになりました。

iOS5での表示結果

iOS6の場合

　Safariの標準フォントが、ゴシックから明朝体に変更されました。そのため、これまでCSSでフォント指定をしていなかった場合、ゴシック体で見えていたサイトが、突然明朝体で見えるようになる現象が確認されています。ゴシック体で表示されるようにしたい場合は、CSSで明示的に指定する必要があります。

iOS6での表示結果

【3】端末の縦横を判断するのが難しい

　スマートフォンは、端末を縦持ち・横持ちしてWebサイトを表示できます（それぞれの画面の状態を、「portrait」「landscape」と呼びます）。

　Webサイトの中には、縦横の状態に合わせてデザインを変えて表示する場合もあります。端末の状態がportraitか、landscapeかを判断するとき、JavaScriptの「window.orientationchange」イベントや、「window.resize」イベント、「window.orientation」プロパティを使っているサイトを見掛けますが、OSのバージョンや端末によって挙動が違うため、「window.orientation」プロパティだけを使って判断するのは危険です。

　詳細は、ブログ「Webサイトでスマホ・タブレットの傾きの判断をwindow.orientationだけに頼るのは危険 | x-fit - クロスフィット」で解説しているので参考にしてみてください。

「Webサイトでスマホ・タブレットの傾きの判断をwindow.orientationだけに頼るのは危険 | x-fit - クロスフィット」

次回以降、HTML5・JavaScript・CSS別でハマリどころを紹介

　今回は、割と有名な事象を取り上げましたが、次回以降、HTML5・JavaScript・CSSなどでのハマリどころを紹介していきます。お楽しみに。

「スマホ向けサイト制作で泣かないための秘伝ノウハウ」バックナンバー

著者プロフィール

渡辺忍（わたなべしのぶ）

株式会社KSKの自社製品サービス部門「フレックスファームビジネスユニット」所属、スマホサイト開発支援のProxy製品『x-fit』エバンジェリスト。

スマートフォンの機種依存事象やその回避策が、スマホサイトに取り組む皆さまのお役に立てば幸いです。感想やコメントはTwitterにどうぞ（@xfit_jp）。

HTML5アプリのタッチUX（1）：タッチUXを実現する7つのポイント
思ったより指はじっとしていない。タッチUIの特徴と癖を分析して、タッチUXを実現する7つのポイントを紹介する
スマホアプリ開発はWebとネイティブどっちがいいの？
HTML5／jQuery Mobileで本当に楽になる？ Webとネイティブの「ハイブリッド」は？手間の掛かる“インストール”だからこその利点？
WebアプリをiPhoneっぽくするための5つのポイント
業務用iPhoneアプリは、なぜネイティブではなくWebが良いのか？ iPhoneっぽい見た目の重要性とともに解説します
iPhone向けWebアプリを作ろう
iPhone／iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します
あなたのサイトはiPhoneで見られますか？
携帯電話と違い、PC用のサイトも見られる小さな画面の端末が普及してきている。そんな時代のWebページはどうあるべきかを解説しよう
ある日、「アプリをスマホに対応しろ」と言われたら
「自社アプリをスマートフォン対応させたい」という要望がある？！基本的な考え方から、.NETでの開発方法までを説明する
.NETでスマホ向けWeb開発を始める前の基礎知識
「Windowsアプリ」「Webアプリ」の次は「スマートフォン」。スマホ向けWebアプリの特徴やUIデザイン、開発技術を紹介