スマホサイト制作者は最低限知っておきたい!iPhoneとAndroidの仕様の違い

Pocket

iphone

つい先日、初めてスマートフォンアプリのデザインを手がけたこともあり、スマートフォンサイトの制作について少々調べていました。

そこで今回はiPnoneとAndroidの仕様の違いについて、「最低限知っておきたい基礎的な仕様」ということで簡単にまとめてみました。

1.解像度の違い

iPhone3G・3GS:320×480px(3.5インチ)
iPhone4:640×960px(3.5インチ)
Android:端末ごとに異なる

2.ブラウザの仕様の違い

・iPhone

標準ブラウザは「Safari」
基本的な表示能力はiPhone版もPC版もほぼ同じ。
「Mobile Safari」と呼ばれている。

オープンソースのレンダリングエンジン「WebKit」を採用して、HTML5やCSS3などの最新技術を取り入れている前衛的なWebブラウザ。

WebKitとは
WebKitは「HTMLレンダリングエンジン」と呼ばれるプログラムの一種で、Webブラウザーの内部でHTMLやCSSを解釈して、画面に描画する役割を担っている。
もともとはアップルがMac OS用のSafari向けに開発したものであるが、同時にオープンソースとして公開したことで、「Google Chrome」などのPC向けのブラウザ、「Dreamweaver」などのWebオーサリングツール、スマートフォン向けのブラウザなど、多くのソ フトウェアで利用されている。

派生ブラウザについて
「App Store」で無料または数百円で購入したブラウザは、Safariのエンジンを使用しているので、デザイン上の見え方に関しては一緒。
オペラ ソフトウェアの「Opera mini」は例外。

プラグインに非対応
ブラウザーの機能を拡張するプラグインが追加できない。
Flashに非対応。

設定項目が少ない
PC向けのWebブラウザーのような「文字サイズの変更」や「エンコーディングの設定」はなく、設定もできない。

日本語フォントはゴシック体のみ搭載
日本語フォントは「ヒラギノ角ゴ」の「W3」および「W6」のみでCSSで明朝を指定しても反映されない。

・Android

Androidの標準ブラウザは「ブラウザ」
特に固有名称は無し。
「Chrome」に近い性能から、「Chrome Lite」などと呼ばれることもある。
レンダリングエンジンはSafariと同じく「WebKit」を採用している。

プラグインに非対応
ブラウザーの機能を拡張するプラグインが追加できない。Flash Playerは標準搭載。

文字サイズの変更やエンコードの設定
iPhoneで修正できない文字化けをAndroidでは修正可能。

派生ブラウザについて
iPhoneと同様にデザイン上の見え方は同じ。
例外は「Opera mini」

不自然な日本語フォント
「Droid Font」と呼ばれるフォントもしくは、端末メーカーが独自に用意したフォントが搭載されている。
一部の端末では「CJK統合漢字」という「日本語」「中国語」「韓国語」で同じ漢字を利用する仕様のフォントがあり、そのフォントで日本語フォントを見ると漢字の形が若干不自然に見えることがある。

3.デザインの際に使用するフォントについて

上記で説明したように「iPhone」と「Android」ではインストールされているフォントが異なっているため、適当に選んで制作してしまうと、意図しない所で改行されるなどして表示崩れを起こしてしまう恐れがあります。

制作には「ヒラギノ角ゴPro」または「メイリオ」を使う。
スマホ用サイトをデザインするのに一番いいフォントはMacに標準でインストールされている「ヒラギノ角ゴPro」ですが、Windowsユーザーは持っていないことの方が多いと思います。

そんな時は「ヒラギノ角ゴPro」とほとんど同じ文字幅の「メイリオ」フォントを使ってデザインすると、制作したデザインと実機での見た目の差を抑えることができます。

XP用のメイリオフォントはこちらからダウンロードしてください。
※メイリオフォントはvistaからWindowsに標準で搭載されています。
また、Androidに標準でインストールされている「Droid Sans」はPCにインストールして使用することはできません。

「ヒラギノ角ゴPro W6」とボールド表示を使わない。
Andoroidに搭載されている標準フォント「Droid Sans Japanese」にはボールド体がありませんので、ボールド表示や「ヒラギノ角ゴPro W6」を使わずに「W3」を使うようにします。

4.各端末に付いている物理ボタンの数

iPhoneは「ホームボタン」が1つであるが、Androidは「ホームボタン」「戻るボタン」「メニューボタン」などが付いている。

そのため同じサイト制作でも、iPhoneは画面上に「戻るボタン」等を配置(画面上部に配置)しなければならないので、Androidとは違ったレイアウトになる。

詳しくは【スマホ集中連載 第3回】 “iPhone・AndroidアプリのUI・挙動はどこが違う?” ~LDNReaderで徹底検証を参照するとよく理解できると思います。

今回はスマートフォンの基礎的な仕様について簡単にご紹介しましたが、「他にもこんなのがあるよ」という意見がありましたら、ご指摘いただけるとありがたいです。

今後はスマートフォンサイトのユーザビリティに関しても、ご紹介できればと思います。

初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。
もしブログの内容が気に入って頂けましたらRSSリーダーの登録よろしくお願いします。

Pocket

コメント

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing

トラックバックURL: http://kunkun.pya.jp/basic_design/web_design/smartphone-20110728/trackback/