このページの本文へ

“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日)。

カテゴリートップへ

ソーシャルランキング
  1. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 164
  2. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  3. コンテンツマーケティングのセミナーに行く前に読んでおきたい記事8選 11
  4. 【週末まとめ読み】Google Fontsのぶっちぎりな進化に驚いた! 5
  5. 【週末まとめ読み】話題沸騰の新ブラウザー「Blisk」ってもう試した? 2
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  10. 「シングルページ」流行の7つの理由と最新事例まとめ 705
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング