「Dreamweaver CS5」でiPhoneサイトを作るテクニックを伝授(前編)

アドビの期間限定ギャラリー「station 5」にて、「Dreamweaver CS5」によるiPhoneサイト制作に関するセミナーが開催された。セミナーには、Webサイトプロデュースや執筆活動を行なっている伊藤学氏(STUDIO Freesia代表)と、Web制作プログラマーのたにぐちまこと氏(エイチツーオー・スペース代表取締役)が登場した。

「Dreamweaver CS5」ではなにが変わった?

イベントは「Dreamweaver CS5」の新機能紹介から始まった。紹介者はアドビ製品担当西村真里子氏。「WordPress」を使ってダイナミックコンテンツを制作するデモや、オンラインサービス「BrowserLab」でサイトの見え方をチェックする方法などが解説された。また、アドビのサイトからダウンロードすると使えるようになる拡張機能「HTML5 Pack for Dreamweaver」も紹介された。この拡張キットを導入すると、HTML5とCSS3のコードヒントやマルチスクリーンを使えるようになる。マルチスクリーンのデモでは、Dreamweaver CS5の作業画面が3分割され、スマートフォン、タブレット、デスクトップの3種類の見え方を同時に確認できる。これらのスクリーンサイズは任意に変更可能なので、iPhoneのサイトをデザインするときに便利だと言う。


「Dreamweaver CS5」の「CSS」パネルを使えば、リアルタイムでデザインの編集が可能	「BrowserLab」で各ブラウザでの見え方を確認。画面は「Safari 4.0」と「IE6.0」を比較しているところ	拡張機能「HTML5 Pack for Dreamweaver」の「マルチスクリーンプレビュー」は、画面を3分割表示できる

iPhone用Webサイトを作る上で知っておくべきこと

伊藤学氏は、約10年からWeb制作に携わり、以前は制作会社で設計やディレクションを行なっていた。現在はフリーランスでWebのプロデュースや執筆、講演などを行なっている。iPhone 3Gを発売直後に購入した伊藤氏は、「これは新しい。何かできるぞ」と瞬時に思い、さっそく開発者向けの書籍を執筆開始し『現場のプロから学ぶ XHTML+CSS』(弊社刊)を刊行したと語った。

それから2年経過しているが、いまでもiPhoneサイトは増え続けている。iPhoneサイトの情報について調べる場合は、情報サイト「ミートアイ」が便利だと、伊藤氏は紹介した。最近のiPhoneサイトの傾向について伊藤氏は、「少しずつHTML5で作られたサイトが増えてきている」と言う。そして、「TOKYO FM」や「ケータイ国盗り合戦」など、iPhoneに対応したサイトを紹介したあとに、iPhoneサイトの概要についての解説を行った。


代表的なiPhoneサイトの紹介。どれもインタフェースに統一感がある	専用サイトを見つけるときに便利なiPhoneポータルサイト「ミートアイ」

iPhoneに搭載されているブラウザーは「Safari for iPhone(通称 Mobile Safari)」。iPhone向けの独自拡張(CSS)が搭載されており、エンジンはアップルのWebKitが使われている。対応しているのはHTML4.01とHTML5の一部。そしてCSS2.1と、CSS3の一部。反対に利用できないサービスは、JavaアプレットとFlash、Windows Mobileだ。

会場のスクリーンには伊藤氏が作ったiPhone用のサイトが映し出されていた。制作時のポイントは、ボタンやリンクなどをタップしやすいサイズにすることと、表示サイズをiPhoneのモニタサイズに合わせるという部分。伊藤氏が作ったサイトは、iPhoneのデフォルトのインタフェースデザインに合わせたデザインや配色になっていた。伊藤氏はその理由を、「iPhoneユーザーならば誰でもすぐに理解できるし、見やすいから」と説明した。

また、伊藤氏は「iPhoneは一般的なPCではないので、制作する際に注意すべき点がいくつもある」と語った。例えば、iPhoneはタッチスクリーンなので、「マウスオーバー」は使えない。その代わりにCSSで「active」や「focus」を使い代用可能であるなど、細かいテクニックを紹介した。その他にも、フォントのインストールやFlashに対応していないことや、ファイルのアップロード・ダウンロードができないという点に触れた。

さらに伊藤氏は、「Safari for iPhone」の制限についてもいくつか挙げた。iPhoneのブラウザーは文字化けを直すことができないので、事前に「UTF-8」や「日本語シフトJIS」などの文字コードを指定しておく必要がある。Webページの容量については合計30MBという制限があるため、それ以上になると読み込みが止まってしまう。また、背景はベタ塗りや小さい画像をタイル状に並べるか、CSSで装飾するテクニックが重要であると語った。


伊藤氏が作ったiPhone用のサイト	iPhoneで文字化けを起こさないように、文字コードは正しく指定しておく必要がある

これからiPhoneサイトを作ろうと思っている人に向けて伊藤氏は、Googleが提供しているWebページ開発ツール「iui」を紹介した。伊藤氏によると、「無料なのでサイトから『iui』をダウンロードして、文字をちょこちょこっと入れたら比較的簡単にiPhoneのサイトを作れるようになります。手軽さではこれが一番」とのこと。伊藤氏のトークショウはiPhoneサイト制作における概要がメイン。セミナーの後半では、実際にWeb制作を行なっているたにぐちまこと氏によりDreamweaver CS5でiPhoneサイトを制作するための、さらに詳しい解説が行われた。レポート後編では、その模様をお届けする。