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

2012年01月19日 12時00分更新

air com adobe proto

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

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

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


サンプルをチェック


イメージに近いページを開いてみよう

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


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

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


すべてタッチ操作で調整

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


5px幅の場合


25px幅の場合

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


フレームの削除

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

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

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


フリーハンドでレイアウト作成

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

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


Creative Clouudにアップロード


PCソフトで製作を続けよう

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

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

『Adobe Proto』
作者：Adobe Systems
バージョン：1.0.0
対応OS：3.1 以上
※使用条件：画面解像度1280x800以上
Android Market価格：850円
（バージョンと価格、対応OSは記事作成時のものです）
※Android端末は多くの機種・バージョンがあるため、特定の機種によっては誤動作・不具合などが発生する可能性があります。必ずご使用の機種で正常に動作することをご確認ください。