Space.ツイートするスマートフォンはPCに近いとはいえ、モバイルならではの制限があります。iPhone/Android向けのサイト制作を始める前に、それぞれの仕様を確認しましょう。それぞれの仕様は以下の通りですが、ここではWeb制作に重要なWebブラウザーまわりを中心に掘り下げていきましょう。OS」)は、アップルがiPhoneなどの小型端末用に開発した専用OSです。3G以降はOSのバージョンアップができるようになり、最新版のiOS4にも対応しています。■iPhone標準ブラウザー「Safari」iPhoneには標準ブラウザーとして「Safari」が搭載されています。X向けに開発したWebブラウザーで、Windows版も無償で配布されています。Safari」などと呼んで区別することもあります。Safariはオープンソースのレンダリングエンジン「WebKit」を採用し、HTML5やCSS3などの最新技術をいち早く取り入れている前衛的なWebブラウザーです。ソフトウェアの「Opera」など、JavaScriptの実行速度の評価が高いブラウザーとも肩を並べる性能を誇っています。iPhoneに搭載されているSafariは、前の表のとおり、iOSのバージョンアップに合わせてアップデートされており、2010年8月時点の最新版は「4.0.5」です。いっても、バージョンアップにおける変更点は、ほとんどの場合、コピー&ペーストへの対応やセキュリティアップデートなどの機能面での改善、HTML5/CSS3の先行実装などが主で、Webページの基本的なレンダリング性能はほとんど変わりません。PCサイトのように「IE6とIE7で表示結果がまったく異なる」といったケースは少なく、制作者にとっては扱いやすいブラウザーと言えます。Store」には、世界中の開発者が開発したさまざまなアプリが配布・販売されています。中にはWebブラウザーも多くあり、無料かもしくは数百円で販売されていますが、ほとんどの場合、これらのブラウザーは「Webビュー」と呼ばれるSafariのエンジン部分を利用しています。このため、Webページのレンダリング結果はSafariとまったく同じです。mini」があります。miniはレンダリングエンジンを内蔵しておらず、オペラのサーバー上でレンダリングした結果を受け取って表示します。miniでも表示結果には差が出ます。mini」(右)の表示の違い。touch」と「iPad」があります。touchは、2007年に第1世代が発売されたあと、iPhoneのモデルチェンジと合わせる形で、第2世代・第3世代が発売されています(第4世代は本連載執筆時点では発売されていません)。touchは、iPhoneから携帯電話の通話機能やカメラなどの一部機能を省いた音楽プレイヤーです。WiFi(無線LAN)環境下でしか利用できないものの、iPhoneと同じWebブラウザーを搭載しており、Web閲覧端末としても利用できます。touchも含むものとします)。一方のiPadには「WiFiモデル」と「3Gモデル」があり、3Gモデルでは携帯電話の通信回線を利用できるため「スマートフォン」と呼べるかもしれません。本体サイズが240×190mm、解像度が768×1024ピクセルもあることから、Web閲覧端末としてはむしろノートパソコンに近いといえます。iPhone向けのサイトももちろん表示できますが、大画面では逆に見づらくなるため、iPhoneとiPadは切り離して考えるのが一般的です。JAPANやNAVERなどの情報サイトでも、iPadの場合はあえてPC向けのWebサイトを表示しています。4は、本体の大きさや画面サイズは従来のiPhoneシリーズとほぼ変わらないものの、画面解像度はそれまでの480×320ピクセルから960×640ピクセルへと大幅に向上しました。これによって画面がより鮮明になり、PCサイトを表示した時でも文字や細かい画像をはっきりと認識できるようになりました。4だけを意識してWebサイトを作る必要はありません。4登場以前に作られたiPhone向けサイトを表示しても、きちんと全画面で表示されます。4向けに、写真などをより美しく見せる方法もありますので、今後の連載の中で紹介しましょう。一覧へDESIGNjQueryでiPhone風スライドパネルを作ろうスマートフォン向けのWebサイトでは「動き」を演出することが多い。jQueryを使ってiPhone風のスライドパネルを作ってみよう。DESIGNCSS+jQueryでクロスデバイスサイトを作ろうPC向けのWebサイト(HTML)はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する「クロスデバイスサイト」の作り方を説明する。DESIGNJavaScriptで振り分けてスマホサイト完成!実例に学ぶスマートフォンサイトの制作方法。HTML5/CSS3で制作したページにiPhone/Androidならではのリンクを設定し、PCサイトと振り分ける処理を作成しよう。DESIGNHTML5/CSS3で作るスマートフォンサイトの基本スマートフォンサイトの制作方法を実際のプロジェクトの流れに沿って解説。Photoshopでデザインカンプを作成して基本のHTML/CSSをコーディングしよう。今回からスマートフォンサイトの制作方法を実際のプロジェクトの流れに沿って解説する実践編。実在するサイトを例にワイヤーフレームを作成しよう。DESIGNスマートフォンサイトをデザインする7つのポイントiPhone/Android向けサイトの制作方法を学ぶ連載企画。今回は、スマートフォンサイトをデザインするときに気を付けたいポイントを解説する。この記事の編集者は以下の記事をオススメしていますDESIGN実践!iPhone&Androidサイト制作ガイド「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための入門ガイド。PCサイト制作のノウハウを生かして作るスマートフォン(iPhone/Android)対応サイト制作の基礎知識から実践的なテクニックまで解説します。CS4/5」が登場した。00TRENDスマートフォン時代のモバイルサイトの条件とは?「スマートフォン時代の携帯サイト作成術」が開催され、Web制作者らがiPhone/Androidサイトの制作ノウハウを共有した。スマホお気に入り一覧マイページ。