Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/08/24 14:00

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

目次

Adobe Protoとは?

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

Adobe Protoアイコン
Adobe Protoアイコン

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

 

Adobe Protoを起動する

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

起動画面
起動画面

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

サンプルのサムネイル
サンプルのサムネイル

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

サンプル「Travel」
サンプル「Travel」

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

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

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 鷹野 雅弘(タカノ マサヒロ)

     株式会社スイッチ  Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。  2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,...

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5