タグ: Designers

モバイル用のプロトタイプを、ネイティブアプリケーション上で動作させるProto.io

ここ数年で大きく成長しつつある、モバイルアプリケーションのプロトタイピング作成サポートツールのProto.ioが、注目すべき新たな機能をリリースした。簡単にモバイルアプリケーションを作成するだけでなく、そのプロトタイプの動作を確認するためのネイティブアプリケーションが登場したのだ。iOS版およびAndroid版があり、双方の環境で、プロトタイプを実際のアプリケーションのように動かしてみることができる。

このアプリケーションを使うことで、フルに動作するアプリケーション風のものをスマートフォン上で動作させながら、プロトタイプに変更を加えていくことができるようになるわけだ。一般的にプロトタイプツールといえば、ブラウザ上で動作を確認するようなものが多いが、そこから比べると大きく進化したものということができよう。

CEOのAlexis Piperides曰く、「フルスクリーンでの動作環境を提供したかったのです」とのこと。以前はProto.ioでもプロトタイプはモバイル版のSafariやChromeなどのブラウザ上で動作させていた。しかしブラウザにはタイトルバーやアドレスバーなど独自のUIが備わっているし、必ずしもプロトタイプ表示に最適であるというわけでもなかったのだ。

また、アプリケーションを媒介することにより、作成したプロトタイプをiPhone、iPad、そしてAndroidデバイスで動かしてみることができるようになった。作成した環境と異なる環境の人に見てもらう場合にも、簡単にアプリケーション経由で見てもらうことができるようになったのだ。

もともとはキプロス発のプロジェクトで、クライアントサイドの開発をいろいろと行っていた。プロトタイピングツールはもともと自分たちで使うためのツールとして開発したものだった。きちんとしたデザインを行って開発をすると費用もかかるので、その前にアプリケーションの「テスト版」を見せて評価を促したいと考えてのものだったわけだ。しかし作ってみると、一般の人も多いに興味を持つツールができあがっていた。そこで2年半ほど前に、このプロダクトのスピンアウトを行ったわけだ。

昨年になって、Piperidesは拠点をアメリカに移し、アメリカの企業としてProto.ioを立ち上げた。今やこのフリーミアムサービスは7万の利用者を抱え、少ないながら1500の有料会員を抱えることとなっている。有料プランは月額24ドルから用意されていて、企業向けにはより高価なプランも用意されている。

また、サービスはいくつかのビッグネームによっても利用されている。たとえばPayPal、eBay、Disney、Sportify、あるいはEvernoteなどもユーザーに含まれる。他にも大小問わずさまざまな企業に利用されているし、もちろんフリーランサーによる利用も多い。

アプリケーションプロトタイプを提供するサービスには、Invision、Flintoなど最近注目を集めているところもある。またAxureやJustinmindなどのように便利なプロトタイプオーサリングツールを提供しているところもある。Proto.ioは、これまでもプロトタイプ作成時の機能や使い勝手のよさで他サービスと競ってきていた。機能比較についてはきっとこちらのサイトも参考になるだろう。

実際に動作するプロトタイプを簡単に作成できれば、たとえばメニューの反応の様子を示すためのPhotoshop画像なども必要なくなる。実装しようとするメニューを配置して、それぞれのメニューからのリンクを設定することで、より簡単に具体的なイメージを掴んでもらうことができるようになる。またもし必要なのであれば、カスタムアニメーションなどを利用することもできるようになっている。

「私たちは非常に強力なアニメーションエンジンを持っています。さまざまなアニメーションを使ってもらえますし、またタイムライン上にて、アニメーションの継続時間などを指定することもできるようになっています」とPiperidesは言っている。

さらに、もともとはスマートフォン用のデザインツールとして開発したのではあったが、smart TVやゲーム機、冷蔵庫、目覚まし時計、車（AppleのCarplayもここに含まれる）などに向けた開発にProto.ioを利用しようとする人も増えてきた。さまざまな環境に対するニーズが高まる中、Proto.ioとしてはAndroid Wearスマートウォッチには対応できるようになっている。

シード資金こそ少額であったものの、シリーズAではサンフランシスコでチーム展開を可能とする人材を得るのに充分な金額を得ようとしている。

Proto.ioのアプリケーションはiTunesのこちらないしGoogle Playで入手できる。

訳注：上のスマートフォン画面はスクロールして見ることができます。

［原文へ］

（翻訳：Maeda, H）


Dropboxの共有フォルダがコラボレーションワークスペース（としてのWebサイト）になるSitedrop

みんなに同じプロジェクト管理ソフトを使ってもらうのは、なかなか難しいが、Dropboxのアカウントは誰もが持っているようだ。この大人気の消費者向けサービスを仕事にも利用しよう、と考えたSitedropは、Dropboxの任意のフォルダを、ビジュアルな要素の多い、コラボレーションのためのWebサイトに変えてしまう。

Sitedropのユーザは、そうやって作られたオンラインのワークスペースを、見たり、コメントや好きな画像などを送ったり、ファイルをアップロードしたりできる。ファイルは、ファイル本体やリンクをDropboxのフォルダにドラッグ＆ドロップするだけだ。

同社は今、ニューヨークでインキュベータBetaworksの傘下にあり、昨秋非公開ベータでデビューしてから今日まで、徐々にユーザベースを拡大してきた。今日現在でベータユーザはほぼ3000名おり、まだまだ増えそうだ。

 

このサービスを考えたのはBetaworksの社員ハッカーJessey White-Cinisで、デザインは彼の以前からのビジネスパートナーThomas Brodahlが担当した。二人はこれまでの10年間、デザインエイジェンシーを共同経営してきたが、その間に、このサービスの発想の元となる、さまざまなフラストレーションを経験した。

“デザイン会社ではプロジェクト管理が難しい。だから、これを考えたんだ”、とWhite-Cinisは言う。“Basecampを確実にみんなに使ってもらって、すべてのコミュニケーションがそこで行われるようにするのは、ほとんど不可能だ。でも、そんなにばらばらな彼らでも、なぜかDropboxのフォルダは共有してるんだ”。

では、その共有フォルダをもっと便利なものにしよう、というのがSitedropの発想だ。そこで、Dropboxの欠陥をそこここで補いながら、共有フォルダをコラボレーションツールに変えてしまったのだ。

Sitedropにサインアップし、認証はDropboxで行われる。共有フォルダにあるファイルは、この‘Webサイト’のサブドメインとして表現される。ファイルはそのリストを見たり、あるいは（画像などは）スライドショウで見ることもできる。ファイルのプレビュー機能は今のDropboxにはないので、Photoshopにやらせている。そのため、写真家やデザイナーなどクリエイティブ方面に人気がある。

 

Sitedropにおける管理の対象はあくまでもフォルダとその中のファイルなので、使い心地はデスクトップ上のフォルダ/ファイル操作と同じだ。ユーザ個々に対し、アップロード可、とか、見るだけ、などの権限を指定できる。パスワードで保護することもできる。コンテンツのコラボレーションは、コメント、親指アップ/ダウン、などなどの関連ツールを使って行う。Webページのリンクをドラッグ＆ドロップすると、そのコンテンツも表示される。

このサービスの今後の課題は、GitHubなみの堅牢な（混乱や破壊が起きない）コラボレーション的リビジョン管理だ。とくにコンテンツの改変履歴を、過去のどの段階でもあとから見られる/遡れるような、タイムマシン機能が重要だ。

White-Cinisによると、このサービスにはいろんな機能があるので、クリエイティブ以外の人たちも使い始めている。“スクラップブックの代わり、あるいはドキュメンテーションのためのwikiのような使われ方もある。共同作品集のようなものも、いくつか見たことがある”、と彼は言う。

Sitedropは無料で、ユーザは最大5つのオンラインワークスペースを共有できる。今後は、ビデオファイルの共有、ワークスペース数の拡大なども含めて、有料プランも導入したい。しかし今現在でも、ワークスペースのサイズに制限はないし、要件はただ一つ、ユーザにDropboxのアカウントがあることだけだ。

実際の利用例を、Xtrapop(iOSアプリ)やThe Life Aesthetic(クリエイティブ)、Ian Brewer(写真)などで見ることができる。あるいはここにサインアップして、ご自分で体験してもよい。

[原文へ]
（翻訳：iwatani(a.k.a. hiwa)）


ユーザの反応性の良いWebサイトを作る: Adobe Creative CloudにEdge Reflowが加わる

adobe-creative-cloud

Adobeの会員制サービスCreative Cloudは、有料会員が32万5000、無料会員が100万となり、大成功だ。今日（米国時間2/14）同社は、そこでデザイナーやデベロッパが使えるプロダクト集合を更新し、新たにAdobe Edge Reflowの初の公開プレビューを加えた。これは、対話的というよりもむしろ、ユーザの‘反応性の良い’(responsiveな)Webサイトを簡単に作れるためのデザインツールだ。

Edge Reflowについて同社が最初に語ったのは昨年の9月だったが、今月初めの記者発表の席でAdobeの製品開発担当VP Paul Gubbayが述べたところによればそれは、反応性の良いレイアウトやデザインについて一般的に理解しているデザイナー向けのツールだ。それは反応性の良いレイアウトを作るための、きわめてビジュアルなツールで、大画面からラップトップ、タブレット、携帯など、どんなデバイス上で見ても見栄えの良いサイトを作れる、という。

Reflowを使う場合デベロッパは、コンテンツの流れを自分の目で確かめて、特定の画面サイズにブレークポイントを設ける。そうすることによって、それをモバイル優先にするのか、デスクトップ優先にするのかを決められる。このツールでは、そういう操作をもっぱらビジュアルに行う。たとえば、右側のバーを左へドラッグすると仮想画面が小さくなり、そういう小さな画面でのコンテンツの流れを確認できる。また、マージン、フォント、シャドウといった基本的なデザイン要素のほかに、CSS成分の取り出しや操作もできる。それに、リアルタイムプレビューツールEdge Inspectを深いレベルで統合しているので、作ったものの結果をすぐにブラウザ上で確認できる。

Reflowは今すでに、無料アカウントも含めて、Creative Cloudの会員全員が利用できる。

EdgeReflowPreview_Responsive_021413

またこれと同時に、HTML5の対話的アニメコンテンツを作るAdobe Edge Animateもアップデートされ、ビジュアルなフォントセレクターやCSSの新たな機能がサポートされる。CSSのグラデーションやフィルタもサポートされるので、ぼかし効果などを簡単に作れる。またフォントとしては、同社が無料で提供しているEdge Web Fontsサービスの豊富なフォントも容易に利用できる。

Dreamweaverでもやはり、これらのフォントがサポートされ、またグリッドレイアウトがアップデートされて可変グリッドを作れるようになった。

さらに、コードエディタEdge Code Previewもアップデートされ、今度からは、どこかを書き換えるとその結果がすぐブラウザ上に反映するようになった。コードヒントが提供されるCSS成分とHTMLタグの種類も増えた。このエディタの対応言語はHTML、CSS、そしてJavaScriptだが、エディタ自身がHTML5で書かれている。そしてもっともクールな新機能はQuick Editだろう。これはユーザがファイルをいちいち切り替えなくても、一つのコンテキストの中でコードをエディットできるという、すぐれものだ。

EdgeAnimate_UI_021314

[原文へ]
（翻訳：iwatani(a.k.a. hiwa)）