Adobe Protoとは？
「Adobe Proto」は、iPadやAndroidタブレット対応のAdobe Touch Appsの1つです。手軽な操作で、アプリ上でのワイヤーフレーム作成を完結できます。
iPad／Androidともに850円。iTunes storeまたはGoogle Playで購入します。
Adobe Protoを起動する
起動すると、次のような画面が表示されるため、「View Samples」（サンプルを見る）または「Begin a Project」（プロジェクトを始める）のいずれかをタップします。
「View Samples」をクリックすると、あらかじめ用意されているサンプルのサムネイルが表示されます。
例えば「Travel」をタップすると、次のようなワイヤーフレームが表示されます。
上部にある
（目のアイコン）をタップすると、プレビューモードになり、リンク先が設定されている場合には、プロジェクト内のページを行き来することもできます。
Protoには、ワイヤーフレーム制作に必要な一通りのアイテムが揃っていますが、次の制約があります。
- グレースケールのみ。カラーで着色することはできない
- 実際の画像やムービーを挿入することはできない
ただし、これらはワイヤーフレームという性質上、妥当な制限と言えます。
Adobe Protoを使ったワイヤーフレームの作成（1）ストロークジェスチャーを使う
Adobe Protoでは、ドキュメントでなく「プロジェクト」単位で作業を行います。画面下の［＋］ボタンをクリックして、Adobe Protoプロジェクトを開始します。
グリッドを設定する画面が表示されます。デフォルトでは、幅960ピクセル、12カラム、カラム間隔：20ピクセルです。ちなみに、カラム間隔は「gutter」と言いますが、ボーリングのレーンの両端にある溝にボールが入ることを「ガター」（ガーター）と言いますよね。これと同じです。
［Create］ボタンをタップして進めましょう。
次のように、最低限覚えておきたい機能に関するガイドが表示されます。
タップしてガイドを消し、すぐにスタートしてもいいですが、それぞれのガイドでは次のように説明されています。
- Switch between Select & Pan/Zoom Mode：タップして選択ツール、移動ツールを切り替える
- Insert Form Elements：フォーム部品を挿入する
- Insert Widgets：ウィジェットを挿入する
- Preview：プレビューモードを表示する
- Manage Pages：ページに関する設定を行う
いよいよワイヤーフレームの作成開始です。現在、鉛筆のアイコンが選択され、画面下中央には「Gesture Guide」（ジェスチャーガイド）が表示されています。
ジェスチャーガイドのDIVにならって、指先で四角形を描いてみましょう。
指を離すと一瞬でカッチリした正方形に変わります。さらに、背面のピンクのバー（グリッド）に吸着しています。
このように、ストロークジェスチャーと呼ばれる指使いによって、画像（×）、ビデオ（▲）、見出し（波線）のようにアイテムを挿入していくことができるのです。この作業は、なかなか楽しいものです！
そのほか、次のストロークジェスチャーが用意されています。
 |
PARAGRAPH | 段落テキスト |
 |
NAV BAR | 横並びのナビゲーションバー |
 |
VERT NAV BAR | 縦並びのナビゲーションバー |
 |
TEXT FIELD | フォームのテキストフィールド |
 |
TEXT AREA | フォームのテキスト領域 |
 |
CHECK BOX | フォームのチェックボックス |
 |
HR RULE | 水平線 |
 |
VERT RULE | 垂直線 |
 |
TABLE | テーブル |
 |
DROP DOWN | フォームのドロップダウンメニュー |
 |
BREADCRUM | パンくずリスト |
Adobe Protoを使ったワイヤーフレームの作成（2）コンポーネントを使う
ストロークジェスチャーを使うだけでなく、用意されたコンポーネントを使うこともできます。コンポーネントを使う場合には、タップしてドラッグするほか、タップのみでアイテムを挿入することも可能です。
 |
Text | テキスト |
 |
Div | div要素 |
 |
Image | 画像 |
 |
Video | ビデオ |
 |
Field | フォームの部品 |
 |
Widget | ウィジェット |
Text、Field、Widgetにはサブツールが隠されています。Textには次のコンポーネントがあります。
 |
Text Heading | 見出し |
 |
Para Text | 段落テキスト |
Fieldには次のコンポーネントがあります。
 |
Text Field | フォームのテキストフィールド |
 |
Text Area | フォームのテキスト領域 |
 |
Button | フォームのボタン |
 |
Dropdown | フォームのドロップダウンメニュー |
 |
Radio Button | フォームのラジオボタン |
 |
Check Box | フォームのチェックボックス |
Widgetには次のコンポーネントがあります。
 |
Breadcrumbs | パンくずリスト |
 |
Navigation Bar | 横並びのナビゲーションバー |
 |
Verical Menu Bar | 縦並びのナビゲーションバー |
 |
Accordion Menu | アコーディオンメニュー（開閉式） |
 |
Tab Bar | タブバー |
Adobe Protoを使ったワイヤーフレームの作成（3）挿入アイテムを編集する
挿入したアイテムの編集方法を解説します。
挿入したアイテムをタップすると、その四辺に揃うように青いガイドが表示されます。このガイドを表示させながらドラッグすれば、正確に、水平・垂直方向に移動できます。
タップ後、四隅、および、四辺の中央には大きな○が表示されます。この○をドラッグすれば、アイテムを変形できます。また、画面下部には、カラー（白から黒まで20％刻みで6段階）、フォント（ゴシック体、明朝体、等幅）、フォントサイズ（6‐18ポイント）、行揃えなどを設定するパネルが表示されます。
アイテムの横にある
をタップすると、メニューが開き、次の2つのボタンが表示されます。
- Duplicate（複製）
- Delete（削除）
段落テキストは変更できませんが、見出しのテキストは変更することが可能です。
上部右上にある
をクリックすると、グループ化を行う画面に切り替わります。グループ化したいアイテムをタップして追加し、［Group］ボタンをクリックします。グループ化を行うと、一緒に移動したり、まとめて複製できるようになります。
画面の右上にある
をタップすると、ページ編集を行うペイン（領域）が開きます。［New Page］ボタンをタップすると、新しいページが開きます。
例えば、ナビゲーションバーを挿入し、それぞれのボタンに対してリンク先を設定したい場合には、ナビゲーションバーをタップし、画面下に表示されるプロパティで［LINK ITEM：Menu 2］、［LINK TO：Page 1］のように指定します。ナビゲーションバーはアイテムとして挿入されているので、ここのボタンを選択できないことに留意してください。
ProtoプロジェクトをAdobe Creative Cloudに保存する
作業が終了したら、画面左上の［←］ボタンをタップします。
プロジェクト一覧画面が表示されたら、
（雲のアイコン）をタップして、［Sync Files］を「ON」に変更します。
ログイン画面が表示されるので、Adobe Creative CloudのID／パスワードを入力してログインします。
ログインが成功すると、（雲のアイコン）は
（Adobe Creative Cloudアイコン）に変化します。
Adobe ProtoファイルをDreamweaverで開く
次の条件が揃えば、Adobe ProtoファイルをDreamweaverで開くことが可能です。
- Dreamweaver CS6／CS5.5／CS5
- Adobe Proto Extension for Dreamweaver拡張機能
- Adobe Creative Cloudのアカウント
Adobe Proto Extension for Dreamweaverをインストールする
Adobe Labsにアクセスし、Adobe Proto Extension for Dreamweaverをダウンロードします。
対応バージョンは、Dreamweaver CS6／CS5.5／CS5です。
ダウンロードした拡張機能をダブルクリックすると、Adobe Extension Managerが起動します。インストールを行い、Dreamweaverを再起動します。
Adobe ProtoプロジェクトをDreamweaverで開く
Adobe Creative Cloudのサイトにアクセスし、ログイン情報を入力します。
ログインすると作成したプロジェクトのサムネイルが表示されるので、作成したAdobe Protoプロジェクトをクリックします。
（ダウンロード）ボタンをクリックします。
さらに、［ダウンロード］ボタンをクリックします。
ダウンロードフォルダに保存された「Project 1.pro」をDreamweaver CS6のアプリケーションアイコンにドラッグ&ドロップします。
Dreamweaverでは自動的に新しいサイトが作成され、「index.html」がライブビューで開きます。
注意点
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がリリースされ、大幅に機能が強化されました。CodeZineでは、新しいバージョンではどんな機能が追加されたのか、その差分やメリットについて、後日記事として公開する予定です。お楽しみに！
