アイデアをどこでも形に！Dreamweaver＋Proto連携
～Adobe Creative Cloudの上手な活用法

注意点

　Adobe Protoでのワイヤーフレーム作成において、いくつかの注意点を以下に記載しておきます。

• 「.pro」ファイルを開く度に、Dreamweaverでのサイト定義が新しくできてしまいます
• 「Page 1.html」のファイルにはスペースが入っています。ファイル名中の半角スペースは好ましくありません

まとめ

　以上、Adobe Protoを使ってワイヤーフレームを作成し、Dreamweaverで開くという流れを解説してきました。私自身、タブレットでワイヤーフレーム！？と思ったのですが、ストロークジェスチャーが使って楽しいUIというだけでなく、ちょっとした修正も苦労なく行えます。逆に、カンタンすぎて、クライアントと一緒にAdobe Protoを使ってワイヤーフレーム作成を行うと、「カンタンなんでしょ！」と、好ましくない誤解が生じてしまうことが心配です。

　最後に、良いことばかりではなく、少しシビアな意見で〆ます。

• ページ遷移を確認できるプロトタイプとしては十分だが、そのままサイト制作に移行できるレベルのソースコードではない。となると「Adobe Proto → Dreamweaver」だけでなく、「Adobe Proto → Fireworks」と流れがあっていいのでは？ つまり、Adobe Protoでワイヤーフレームを作成、Fireworksでカンプを作り込む、という流れが欲しい
• 現状では、いったんローカルに「.pro」ファイルをダウンロードする必要があります。近い将来、DreamweaverからAdobe Creative Cloudのファイルスペースに直接アクセスし、「Adobe Proto → Dreamweaver」だけでなく「Dreamweaver → Adobe Proto」のように双方向のやりとりができるとよさそう
• iOSのUIではタップだけでトグル（ON／OFFなど）が切り替わるが、Adobe Protoの場合、ドラッグしなければならない

　何はともあれ、ストロークジェスチャーが楽しいので、ぜひ一度触ってみてください！

最新版「Adobe Proto 1.5」について

　先日、Adobe Proto 1.5がリリースされ、大幅に機能が強化されました。CodeZineでは、新しいバージョンではどんな機能が追加されたのか、その差分やメリットについて、後日記事として公開する予定です。お楽しみに！

アドビの最新技術情報はADCで！