【レポート】

「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サイトを制作するための、さらに詳しい解説が行われた 。レポート後編では、その模様をお届けする。

「Adobe CS5」体験版はこちらから
関連キーワード

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

柴田英嗣、元妻&ファンキー加藤娘の健診に立会い宣言 "加藤違い"で狩野焦る
[00:12 7/30] エンタメ
ウレタン製の柔らかVRゴーグル「Merge VR」、ツクモ限定で30日から販売開始!
[00:00 7/30] パソコン
[シン・ゴジラ]日本政府対ゴジラの攻防 日本映画のスケールを超えた壮大で緻密な作品
[23:59 7/29] エンタメ
「機械仕掛けの愛」4巻発売、娘の結婚式に参列するAIのエピソード公開
[23:34 7/29] ホビー
声優・久保ユリカ、2ndシングル「SUMMER CHANCE!!」発売記念特番でMVを公開
[23:30 7/29] ホビー

求人情報