実践！iPhone＆Androidサイト制作ガイド ― 第1回

スマートフォン対応サイトの作り方、教えます

2010年07月28日 10時00分更新

文● たにぐちまこと／H2O Space.

iPhone、Androidサイト制作に必要な知識

　実際にiPhone/Android向けのサイトを制作するとなったら、Web制作者はどんな知識を身につけたらよいのでしょうか。詳細については今後の連載の中で解説しますが、大きく分けると3つあります。

■HTML+CSS(HTML5/CSS3を含む)

　スマートフォンのWebブラウザーはフルブラウザーですから、PC向けのサイト制作とは共通点が多く、実際の作業もかなり似通っています。このため、スマートフォンサイトの制作では携帯サイトよりもPCサイト制作のノウハウが活きてきます。

　特にiPhone/Androidに搭載されているWebブラウザーは、PCに比べてHTML5やCSS3への対応が進んでいます。PCサイトのように古いWebブラウザーへの対応を考える必要がないスマートフォンの世界では、むしろ新しい技術を積極的に活用したサイト制作がポイントになります。

■JavaScript

　PCサイトとの共通点が多い半面、タッチ操作が基本となるiPhone/Androidでは、マウス操作が前提のPCとの違いもあります。2本指を使ったジェスチャーや画面の拡大/縮小など、スマートフォンならではの操作性を実現するのに活躍するのが、JavaScriptです。

　最近ではPCサイトでもJavaScriptを使う機会は増えていますが、iPhone/AndroidのブラウザーもJavaScriptをサポートしています。PCサイト以上にJavaScriptを積極的に活用することで、操作性のよいWebサイトを制作できます。

■各スマートフォンの特徴・仕様

　iPhoneには、iPhone 3G/3GS、4という世代の変化のほか、iPod touchという兄弟端末もあります。

　一方のAndroidは各ハードメーカーからさまざまな端末が発売されており、日本で販売されている機種だけでも数種類あります。端末によってハードウェアのスペックや搭載されているOS/ブラウザーの仕様に違いがあるため、端末ごとの特徴をしっかり理解したうえでの制作、表示・動作確認が必要になります。

iPhone、Android向けサイト制作のアプローチ

　実際のスマートフォンサイト制作のアプローチにもいくつかの方法があります。この連載では以下の3つの制作方法を紹介する予定です。

■専用サイトをスクラッチで構築する

　もっとも素直なのが、専用サイトをスクラッチ（1から）構築する方法です。すでにあるPCサイトのコンテンツを流用する場合と、コンテンツも1から用意する場合があります。これまでのしがらみを一切気にすることなく、スマートフォンの魅力を存分に引き出したサイトを制作できるのがメリットです。

■PCサイトをiPhone、Androidで見やすくする

　すでにPCサイトがあり、かつ専用サイトを作るほどではない場合には、PCサイトのままスマートフォンでも見やすくする方法があります。CSSやHTMLの書き方を工夫することで実現できます。

　また、Movable Typeや WordPressなどの、CMS（Content Management System）を利用しているサイトの場合は、プラグインやテーマなどを導入することで、スマートフォンに対応することもできます。このあたりも紹介していきましょう。

■携帯サイトを最適化する

　すでに携帯サイトを持っていて、スマートフォンに対応させたいというケースもあるでしょう。やや特殊ではありますが、携帯サイトを最適化する方法も紹介したいと思います。

◆

　次回以降、iPhone/Androidサイト制作の具体的な方法を解説します。次回はサイト制作に必要な環境準備について説明する予定です。

お詫びと訂正：記事掲載当初、HTML5/CSS3に関する記述に一部誤解を招く表現がありました。現在の記事は修正済みです（2010年7月30日）。

著者：たにぐちまこと

東京世田谷でWeb制作を営む、H2O Space. 代表。PHPを中心としたWebシステムの開発などを主に手がける。 Adobe Dreamweaverで、iPhoneサイトを制作しやすくする拡張機能「iPhone site extension」を配布し、スマートフォンのサイト制作にも積極的に取り組んでいる。主な著書に「Dreamweaver PHPスターティングガイド」（毎日コミュニケーションズ）、「ホームページ担当者が知らないと困るHTMLの仕組みとWeb技術の常識」（ソシム）など。

前へ 1 2 3 次へ

ツイートする

カテゴリートップへ