スマートフォンつい先日、初めてスマートフォンアプリのデザインを手がけたこともあり、スマートフォンサイトの制作について少々調べていました。そこで今回はiPnoneとAndroidの仕様の違いについて、「最低限知っておきたい基礎的な仕様」ということで簡単にまとめてみました。基本的な表示能力はiPhone版もPC版もほぼ同じ。Safari」と呼ばれている。オープンソースのレンダリングエンジン「WebKit」を採用して、HTML5やCSS3などの最新技術を取り入れている前衛的なWebブラウザ。WebKitとはWebKitは「HTMLレンダリングエンジン」と呼ばれるプログラムの一種で、Webブラウザーの内部でHTMLやCSSを解釈して、画面に描画する役割を担っている。ウェアで利用されている。Store」で無料または数百円で購入したブラウザは、Safariのエンジンを使用しているので、デザイン上の見え方に関しては一緒。プラグインに非対応ブラウザーの機能を拡張するプラグインが追加できない。設定項目が少ないPC向けのWebブラウザーのような「文字サイズの変更」や「エンコーディングの設定」はなく、設定もできない。日本語フォントは「ヒラギノ角ゴ」の「W3」および「W6」のみでCSSで明朝を指定しても反映されない。Lite」などと呼ばれることもある。レンダリングエンジンはSafariと同じく「WebKit」を採用している。プラグインに非対応ブラウザーの機能を拡張するプラグインが追加できない。Playerは標準搭載。文字サイズの変更やエンコードの設定iPhoneで修正できない文字化けをAndroidでは修正可能。派生ブラウザについてiPhoneと同様にデザイン上の見え方は同じ。Font」と呼ばれるフォントもしくは、端末メーカーが独自に用意したフォントが搭載されている。同じ漢字を利用する仕様のフォントがあり、そのフォントで日本語フォントを見ると漢字の形が若干不自然に見えることがある。3.デザインの際に使用するフォントについて上記で説明したように「iPhone」と「Android」ではインストールされているフォントが異なっているため、適当に選んで制作してしまうと、意図しない所で改行されるなどして表示崩れを起こしてしまう恐れがあります。制作には「ヒラギノ角ゴPro」または「メイリオ」を使う。スマホ用サイトをデザインするのに一番いいフォントはMacに標準でインストールされている「ヒラギノ角ゴPro」ですが、Windowsユーザーは持っていないことの方が多いと思います。そんな時は「ヒラギノ角ゴPro」とほとんど同じ文字幅の「メイリオ」フォントを使ってデザインすると、制作したデザインと実機での見た目の差を抑えることができます。XP用のメイリオフォントはこちらからダウンロードしてください。※メイリオフォントはvistaからWindowsに標準で搭載されています。Sans」はPCにインストールして使用することはできません。W6」とボールド表示を使わない。W6」を使わずに「W3」を使うようにします。4.各端末に付いている物理ボタンの数iPhoneは「ホームボタン」が1つであるが、Androidは「ホームボタン」「戻るボタン」「メニューボタン」などが付いている。そのため同じサイト制作でも、iPhoneは画面上に「戻るボタン」等を配置(画面上部に配置)しなければならないので、Androidとは違ったレイアウトになる。~LDNReaderで徹底検証を参照するとよく理解できると思います。今回はスマートフォンの基礎的な仕様について簡単にご紹介しましたが、「他にもこんなのがあるよ」という意見がありましたら、ご指摘いただけるとありがたいです。今後はスマートフォンサイトのユーザビリティに関しても、ご紹介できればと思います。当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。ブログの内容が気に入って頂けましたらRSSリーダーの登録よろしくお願いします。人気記事ランキング以前仕事でお世話になった、ビービットさんの連載記事です。単調なWebサイトをクオリティアップさせるチュートリアル単調なWebサイトを細部に手を加えることで、クオリティアップさせるチュートリアルの記事がありました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【無料】漢字もOKの日本語フリーフォント/毛筆体・手書き風など【無料】漢字もOKの日本語フリーフォント/明朝・ゴシック・丸ゴシックWindows上でXAMPPを使用してローカルにバーチャルホストを設定する方法Mac上でMAMPを使用してローカルにバーチャルホストを設定する方法WordPressの本番環境をローカル環境で再現する方法5ステップでマスターする!初心者から始めるWordPress勉強法ローカルサーバーをXAMPPで構築してWordPressをインストールする方法Photoshopで継ぎ目のないテクスチャの作り方ファーストビューが大事なのは知っている。素材profileかれこれ十年以上デザインに関わる仕事をしています。今ではWebデザインを中心に、ディレクションやライティングなどをしています。TwitterではWebに関する情報を中心に個人的な気になる話題を気ままにつぶやいています。