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 | パンくずリスト |
