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

» 2012年10月22日 18時00分 公開
[渡辺忍，KSK フレックスファームビジネスユニット エバンジェリスト]
前のページへ 1|2 　　　　　　

スマホ向け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）。


前のページへ 1|2 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。