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

　アイデアを思いついた時、いつでもどこでもすぐその場で形にできたら…クライアントとの打ち合わせ時など、そんな風に思ったことはありませんか？ この記事では、アドビ社の2つのツール「Adobe Dreamweaver」と「Adobe Proto」を連携させて、頭の中のひらめきを瞬時にワイヤーフレームとして作成・表示する方法をお伝えします。

Adobe Protoとは？

　「Adobe Proto」は、iPadやAndroidタブレット対応のAdobe Touch Appsの1つです。手軽な操作で、アプリ上でのワイヤーフレーム作成を完結できます。

Adobe Protoアイコン

　iPad／Androidともに850円。iTunes storeまたはGoogle Playで購入します。

 

Adobe Protoを起動する

　起動すると、次のような画面が表示されるため、「View Samples」（サンプルを見る）または「Begin a Project」（プロジェクトを始める）のいずれかをタップします。

起動画面

　「View Samples」をクリックすると、あらかじめ用意されているサンプルのサムネイルが表示されます。

サンプルのサムネイル

　例えば「Travel」をタップすると、次のようなワイヤーフレームが表示されます。

サンプル「Travel」

　上部にある（目のアイコン）をタップすると、プレビューモードになり、リンク先が設定されている場合には、プロジェクト内のページを行き来することもできます。

　Protoには、ワイヤーフレーム制作に必要な一通りのアイテムが揃っていますが、次の制約があります。

• グレースケールのみ。カラーで着色することはできない
• 実際の画像やムービーを挿入することはできない

　ただし、これらはワイヤーフレームという性質上、妥当な制限と言えます。