SHOEISHA iD

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

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

特集記事(AD)

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

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

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

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

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には、ワイヤーフレーム制作に必要な一通りのアイテムが揃っていますが、次の制約があります。

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

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

次のページ
Adobe Protoを使ったワイヤーフレームの作成(1)ストロークジェスチャーを使う

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング