SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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)コンポーネントを使う

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

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

 株式会社スイッチ Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。 2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,000名を超える方が参加している。 テクニカルライターとして20冊以上の著書を持ち、総販売数は14万部を超える。主な著書に『よくわかるDreamweaverの教科書』(共著、マイナビ)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(マイナビ)など。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6721 2013/01/15 17:33

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング