このページの本文へ

“iPhoneらしいUI”を手軽に再現

iPhoneサイトを無料作成!Dreamweaver拡張機能が登場

2010年05月27日 10時00分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 使い慣れたDreamweaverで、iPhone用のWebサイトを作りたい。そんなWeb制作者の声に応えるエクステンション(拡張機能)「iPhone site extension for Dreamweaver CS4/5」が登場した。利用は無料で、開発元のエイチツーオー・スペースのWebサイトからダウンロードできる。

エイチツーオー・スペースが配布を開始した「iPhone site extension for Dreamweaver CS4/5」のダウンロードページ

 iPhone site extensionは、アドビ システムズのHTML/CSSオーサリングツール「Dreamweaver」にiPhone用Webサイトの作成支援機能を追加するエクステンション。iPhone site extensionをDreamweaver CS4/CS5にインストールすると、新規作成メニューから「iPhone用ページ」「iPhone用Webアプリ」の2種類のHTML/CSSテンプレートが選択できるようになる。各テンプレートには、アップルのデザインガイドラインに沿って定義された見出しやリストなどのスタイルシートが含まれており、スタイルを適用するだけで“iPhoneらしいデザイン”のページを手軽に作成できる。

HTML5 Pack
拡張機能に含まれるテンプレートを使うと、iPhoneらしいデザインを手軽に再現できる

 テンプレートに含まれるグラデーションや角丸ボックスなどの装飾表現は、iPhoneのSafariが先行実装しているCSS3を使って定義されており、画像を使用していないのもうれしいポイント。見出しやリストなどの各パーツはDreamweaverの挿入パネルからも配置できるので、デザインビューを使ったページ作成にも便利だ。

HTML5 Pack
iPhone site extensionを使ったページのサンプル。CSS3を使ってiPhoneアプリのデザインを再現している

 現在のバージョンは0.2ベータで、開発はまだ始まったばかり。エイチツーオー・スペースでは今後、ユーザーからのフィードバックを得て、より使いやすいエクステンションにしたいとしている。直近では、Dreamweaverに付属するデバイスシミュレーター「Device Central」用のデバイスプロフィールを追加する予定だ。

補足:「iPhone site extension for Dreamweaver CS4/5」の利用には、アドビ システムズの「Dreamweaver CS4」または「Dreamweaver CS5」が必要です。Dreamweaver CS4/CS5をお持ちでない場合は別途購入する必要があります(2010年5月27日)。

カテゴリートップへ

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング