2012年01月19日12時00分

タッチ操作で簡単にウェブサイトのベースデザインができるAndroidアプリがイカス!

  • この記事をはてなブックマークに追加
  • Pocket

air com adobe proto

Adobe Proto
作者:Adobe Systems
バージョン:1.0.0
対応OS:3.1 以上
※使用条件:画面解像度1280x800以上
Android Market価格:850円
(バージョンと価格、対応OSは記事作成時のものです)

air com adobe proto

 新しいウェブサイトをつくる際、最初に行なうのは、レイアウトイメージの作成だ。

 タイトルやメニューの配置など、土台となるページをつくる作業だが、タッチ操作であれこれ試しながらつくり込んでしまおうというのが『Adobe Proto』。簡単に要素を追加できるため、「この位置に動画を置いたらどうかな?」、「文字はこのへんにまとめる?」といった提案を即座に反映できる。もちろん、作業用にHTMLのややこしい構文を覚える必要もない。

サンプルをチェック
air com adobe proto
イメージに近いページを開いてみよう
air com adobe proto

 アプリを起動すると、さまざまな用途のサンプルデザインが現われる。最初はこれをベースに少しずつカスタマイズしてもいいし、ここから新規レイアウト作成も行なえる。慣れるまではサンプルから作業をスタートしよう。

画像やテキストなどフレームを配置
air com adobe proto

 作業はすべてタッチ操作だ。たとえば、画面左の“コンポーネントツールボックス”にある画像ボタンをタップし、さらに画面上の配置したい部分をタッチすると、画像配置用のフレームを挿入できる。

すべてタッチ操作で調整
air com adobe proto

 このフレームのサイズ調整や配置は、タッチ操作で行なえ、直感的なデザインが可能。そのほか、テキスト部分やメニュー、動画コンテンツといったレイアウト用のパーツも同様の操作で配置などを調整できる。

5px幅の場合
air com adobe proto
25px幅の場合
air com adobe proto

 レイアウトスペースにはグリッドが入っており、自分が使いやすいよう、グリッド幅を5、10、15、20、25ピクセルの間で変更可能だ。実際の作業も、指でフレームを選択した状態でほんの少し指を傾ければキレイに移動できる。状況に合わせて使いやすいモードに変更しよう。

フレームの削除
air com adobe proto

 フレームをタッチすると左側にボタンが表示され、このボタンからフレームの複製や削除を行なえる。また、テキストフレームの場合は、画面下にフォントサイズや文字の配置位置といった指定も可能だ。

air com adobe proto  air com adobe proto

 細かく位置合わせした複数のフレームをまとめて移動したいときは、右上のメニューボタンからグループ化して動かせばいい。

 また、このアプリのユニークな点は、フリーハンドで書き込んだ内容がそのままフレームとして変換されること。左のタブで選択してもいいが、「このへんに動画をひとつ配置したほうがいいかな?」といった思いつきを一瞬でイメージ化できる。

フリーハンドでレイアウト作成
air com adobe proto

 コンポーネントツールボックスのペン型アイコンをタップすると、“Gesture Gide”が表示されるので、これを参考にして書き込んでいこう。 “波線”を書き込めばテキストフレーム、“×”で画像配置フレーム、“三角”を書き込めばビデオ配置フレームへ変換される。紙に手書きでデザインしていく感覚でレイアウトを作成できるのがイカス!

 作成したレイアウトイメージは、2012年上半期開始予定のクラウドサービス『Creative Cloud』(月額5250円~)へアップロード可能だ。現在、AdobePhotoshop CS5/CS5.1、Photoshop Extended CS5/CS5.1、Adobe Illustrator CS5/CS5.1ユーザー向けの無料β版をコチラ(関連サイト)で提供中。

Creative Clouudにアップロード
air com adobe proto
PCソフトで製作を続けよう
air com adobe proto

 PCからアクセスしてファイルをダウンロードすれば、『Dreamweaver』などのPC用ソフトに引き継げるのが魅力だ。

 折りたたみ式のメニューなど、凝ったデザインのページもレイアウト可能。個人利用はもちろんのこと、依頼者とのイメージ共有がその後の作業に影響するウェブデザイナーにとって最適なアプリだ。

Adobe Proto
作者:Adobe Systems
バージョン:1.0.0
対応OS:3.1 以上
※使用条件:画面解像度1280x800以上
Android Market価格:850円

(バージョンと価格、対応OSは記事作成時のものです)
※Android端末は多くの機種・バージョンがあるため、特定の機種によっては誤動作・不具合などが発生する可能性があります。必ずご使用の機種で正常に動作することをご確認ください。

■ダウンロードはコチラから■
air com adobe proto

中山智さんのサイト
幽玄会社中山商店

このページの内容の一部は、Google が作成、提供しているコンテンツをベースに変更したもので、クリエイティブ・コモンズの表示 3.0 ライセンスに記載の条件に従って使用しています。

関連記事

あわせて読みたい

最新のニュース

アスキーストア人気ランキング

特集

Comic

アクセスランキング

Like Ranking